프론트엔드 개발 지원자 이현기입니다.

About Me

  • 안녕하세요. 프론트엔드 개발 포지션 지원자 이현기입니다.
  • 저는 제대로 된 개발자로서 성장하기 위해 노력중입니다.
  • 학습과 기록을 게을리 하지 않습니다.
  • 개발자는 평생 공부하며 자기자신을 갈고 닦아야 되기 때문에
    매일매일 1일 1커밋과 기술 블로그를 운영하고 있습니다.
  • TDD를 통해 견고한 어플리케이션을 개발하는 개발자가 되고 싶습니다.
  • 혼자가 아닌 협업이 가능한 개발자를 지향합니다.

Skills

여지까지의 저의 경험과 자기개발을 통해 학습한 내용에 대해 간단하게 기록을 했습니다.
현재도 부족함을 느껴 꾸준히 자기개발을 통해 학습을 진행하고 있으며, 메타인지를 높이기 위한 목적에서 정리를 해보았습니다.

Network

  • 대학교에서 정보통신공학을 전공했습니다.
  • 기본적인 통신 및 네트워크에 대한 지식을 가지고 있습니다.
  • 대학교 졸업 후 약 1년 4개월간 싱가포르에서 시스템 엔지니어로서 근무한 경험이 있습니다.
  • CCNA (Cisco Certification Network Associate)를 2015/08에 취득하였습니다. (expired)

Browser

VCS

  • Git과 TortoiseSVN를 사용하여 실무에서 협업한 경험이 있습니다.
  • 협업을 위한 Git의 기본적인 사용을 할 수 있습니다.

HTML5

  • 웹 표준과 접근성에 대해 이해를 하고 있습니다.
  • 의미있는 HTML 마크업을 할 수 있도록 노력하고 있습니다.

CSS3

  • CSS를 활용하여 기본적인 스타일링을 할 수 있습니다.
  • Mobile-first 방식의 이점을 이해하고 있습니다.

JavaScript

React.js

  • React.js를 활용하여 SPA(Single Page Application)을 개발해본 경험이 있습니다.
  • Redux 상태관리 라이브러리를 사용해서 개발한 경험이 있습니다.
  • Jest와 RTL(React Testing Library)를 사용하여 단위 테스트 및 UI 테스트 코드를 작성한 경험이 있습니다.
  • SSR과 CSR의 특징에 대해 이해하고 있습니다.
  • [참고] https://leehyungi0622.github.io/2021/04/26/202104/210426-SSR_and_CSR/
  • CRA를 사용하지 않고 Webpack을 사용하여 프로젝트를 구성할 수 있습니다.

Node.js

Projects

모든 프로젝트의 README는 꼼꼼하게 작성을 하였습니다.
프로젝트 진행에 있어 모든 작업은 Issue 우선 끊은 후 작업을 하였으며, Tracking 가능하도록 README 파일의 Project Status 항목에 업데이트 하였습니다.
개인 프로젝트를 진행함에 있어, 훗날 다른 사람들과의 협업을 할 것을 고려하여 Issue, Pull Request, Convention을 지킨 Commit 작성 등을 지켜서 프로젝트를 진행하였습니다.

① Commit message convention 관련 블로그 포스팅 : https://leehyungi0622.github.io/2021/01/30/202101/210130-Git_commit_message_rule/
② Git flow model branch 관리 관련 블로그 포스팅 : https://leehyungi0622.github.io/2021/01/31/202101/210131-Git-practice/
③ Commit message convention 관련 블로그 포스팅 : https://leehyungi0622.github.io/2021/02/03/202102/210203-Git-pull-request-template/

개인 포트폴리오 웹 어플리케이션 프로젝트

프론트엔드 개인 포트폴리오 웹 페이지

프론트/백엔드 관련 기술들을 학습하면서 스스로 직접 만들어 본 작업물들을 정리하기 위한 목적에서 프레임워크를 사용하지 않고 기본적인 HTML, CSS, JavaScript를 사용해서 개발을 하였습니다.


  • ① Front-End : HTML, CSS, JavaScript
  • ② Branch관리 : GitHub model로 branch 관리

README & 소스코드 구체적인 프로젝트의 작업내용에 대해서는 GitHub의 README 파일에 작성을 하였습니다. 아래 링크를 통해 확인 부탁드립니다.
README & 소스코드
네이버 로그인 페이지 분석 및 개선 프론트엔드 프로젝트

반응형 네이버 로그인 페이지 구현 및 웹 표준 & 접근성에 기반한 취약점 분석 및 개선안 적용

기존에 서비스하고 있는 네이버의 로그인 페이지를 웹 표준 및 접근성의 측면에서의 취약점을 분석하여 직접 생각한 개선안을 적용하여 새롭게 네이버 로그인 페이지를 재구성해보았습니다.
  • ① Front-End : HTML, CSS, JavaScript
  • ② Branch관리 : GitHub model로 branch 관리

README & 소스코드 분석한 내용과 프로젝트의 작업내용에 대해서는 GitHub의 README 파일에 작성을 하였습니다. 아래 링크를 통해 확인 부탁드립니다.
README & 소스코드
중고거래 웹 어플리케이션

중고거래 어플리케이션 (개발 진행중)

이 프로젝트는 NextJS, ExpressJS, MySQL의 구성으로 만들었으며, 상태관리 라이브러리로 Redux를 사용하였습니다. 비동기 처리는 redux saga를 사용하였습니다.
  • ① Front-End : React.js
  • ② Back-End : Node.js, Express.js
  • ③ Database : MySQL
  • ⑤ Branch관리 : Git flow model로 branch 관리

README & 소스코드 분석한 내용과 프로젝트의 작업내용에 대해서는 GitHub의 README 파일에 작성을 하였습니다. 아래 링크를 통해 확인 부탁드립니다.
README & 소스코드
React 영화 어플리케이션 프론트엔드

TDD 방식을 적용한 영화 및 TV 컨텐츠 웹 어플리케이션

이 프로젝트는 CRA(create-react-app)을 사용하지 않고 webpack을 사용하여 프로젝트를 구성하였으며, 테스트 주도 개발(TDD)방식을 적용하여,테스트 코드 작성 → 테스트 코드를 통과하기 위한 코드 작성 → 코드 리팩토링 사이클을 지켜서 적용해보았습니다.
  • ① Front-End : HTML, CSS, JavaScript, React.js
  • ② Test : Jest, RTL(React Testing Library)
  • ③ Branch관리 : GitHub model로 branch 관리

README & 소스코드 분석한 내용과 프로젝트의 작업내용에 대해서는 GitHub의 README 파일에 작성을 하였습니다. 아래 링크를 통해 확인 부탁드립니다.
README & 소스코드
Good memories 프로젝트

MERN(MongoDB, ExpressJS, ReactJS, NodeJS) 구성으로 만든 간단한 사진관리 어플리케이션

이 프로젝트는 MERN(MongoDB, ExpressJS, ReactJS, NodeJS)의 구성으로 프로젝트를 만들었습니다. 상태관리 라이브러리로 Redux를 사용하였으며, 비동기 처리는 redux thunk를 사용하였습니다.
  • ① Front-End : React.js
  • ② Back-End : Node.js, Express.js
  • ③ Database : MongoDB
  • ④ Test : Jest
  • ⑤ Branch관리 : Git flow model로 branch 관리

README & 소스코드 분석한 내용과 프로젝트의 작업내용에 대해서는 GitHub의 README 파일에 작성을 하였습니다. 아래 링크를 통해 확인 부탁드립니다.
README & 소스코드
NodeJS TDD방식 서버구축

TDD 방식으로 간단한 NodeJS 서버를 만들기

이 프로젝트는 TDD 방식으로 간단한 NodeJS 서버를 만들어보는 실습을 해보았습니다. 즉흥적으로 코드를 작성하지 않고, 우선 생각을하고 테스트 코드를 작성한 다음에 본 코드를 작성해보도록 노력해보았습니다.
  • ① Back-End : Node.js, Express.js
  • ② Test : Jest
  • ③ Branch관리 : GitHub model로 branch 관리

README & 소스코드 분석한 내용과 프로젝트의 작업내용에 대해서는 GitHub의 README 파일에 작성을 하였습니다. 아래 링크를 통해 확인 부탁드립니다.
README & 소스코드
ReactJS 테스트 관련 연습

TDD 방식으로 ReactJS 코드 작성을 위한 연습 프로젝트

이 프로젝트에서는 TDD 방식으로 ReactJS 프로젝트를 만들어보는 실습을 해보았습니다.
[참고] Axios Mockup 테스트
  • ① Front-End : React.js
  • ② Test : Jest, RTL(React Testing Library)
  • ③ Branch관리 : GitHub model로 branch 관리

README & 소스코드 분석한 내용과 프로젝트의 작업내용에 대해서는 GitHub의 README 파일에 작성을 하였습니다. 아래 링크를 통해 확인 부탁드립니다.
README & 소스코드

Work experience

Clinks 로고
  • 회사명株式会社クリンクス(CLINKS CO.,Ltd)
  • 국가Japan
  • 사용언어일본어(Japanese)
  • 부서システム開発(시스템 개발 사업부)
  • 근무기간2018/10 ~ 2020/04
  • 포지션프로그래머 / 정규직
  • 담당업무
    • - 안드로이드 및 웹 어플리케이션 신규 개발 및 유지보수 담당
프로젝트 이미지
  • 회사명SATO ASIA PACIFIC PTE.LTD.
  • 국가Singapore
  • 사용언어영어(English)
  • 부서SSD(Software Solution Department)
  • 근무기간2016/04 ~ 2017/07
  • 포지션시스템 엔지니어 / 정규직
  • 담당업무
    • - 자사의 솔루션(소프트웨어, 솔루션)을 고객사에 도입할때 발생하는 통신상의 문제를 해결 (Troubleshooting)
    • - 고객사에 자사의 솔루션에 대한 트레이닝
    • - 파트너사의 RPA 소프트웨어를 사용해서 고객사를 위한 맞춤형 소프트웨어 개발 서포트(VBA, Python)