최성익 Sungik Choi

디자인을 전공했지만, 웹 프로덕트를 만드는 일에 재미를 느껴 프론트엔드 개발자의 길을 걷는 중입니다. 좋은 교육기관에서 웹 프론트엔드 개발, 함께 일하는 방식을 배웠습니다.

아름다운 UI, 인터랙션 디자인을 좋아합니다. 기술과 예술은 하나라고 생각합니다.

Career

2021.01 ~ 현재 | 프론트엔드 엔지니어

제목	내용
Github	gatsby-starter-apple
Period	2020.08 ~ Current
Skill	React.js, Gatsby.js, GraphQL, styled-components, canvas, Netlify

React기반의 정적 사이트 생성기인 Gatsby로 제작한 블로그 스타터 템플릿
현재 블로그에 사용 중. 다른 사람도 사용하기 쉽게 템플릿으로 만들어 오픈소스로 배포
별도의 UI Framework를 사용하지 않고 직접 UI 디자인 / CSS 스타일링
Lighthouse 100점 (Desktop 기준)
웹 접근성
- HTML5 시맨틱 마크업
- 필요한 부분에 aria- 속성 사용
- 키보드로 모든 기능을 사용할 수 있도록 구현
모바일 버거 메뉴 구현
- 토글 상태에 따른 애니메이션 구현
- 메뉴가 오픈된 상태일 때 Focus Trapping 및 스크롤 제한 기능 구현
- 메뉴가 오픈된 상태일 때만 키보드로 접근 가능: MediaQueryList 객체의 change 이벤트와 tabindex 를 통해 구현
- 메뉴를 Esc키로 닫을 수 있도록 구현
다이내믹 테마 구현 (관련 블로그 포스트)
- prefers-color-scheme 미디어 속성을 사용해 사용자 선호 테마 적용
- localStorage 를 사용해 테마 설정 저장
- CSS var() 를 사용해 테마별 스타일 변수 분리
- iframe 내부의 댓글 플러그인, 코드 하이라이트 플러그인까지 함께 테마 적용
Intersection Observer 를 사용한 인피니티 스크롤 기능 구현
- 좋지 못한 UX라고 생각하기에, 추후 일반적인 페이지네이션으로 변경 예정
HTML canvas를 사용한 404 페이지 제작

제목	내용
Github	issue-tracker-project
Period	3 WEEK (2020.06.08 ~ 2020.06.26)
Skill	React.js, Material UI, Webpack, React Router

Github Issue를 바탕으로 제작한 이슈 트래커 서비스
이슈 목록 화면, 레이블 목록 화면을 맡아 구현
페어 프로그래밍과 상호 코드 리뷰
PropTypes를 새로 배워 사용하며 페어와 기술 공유
CRA를 사용하지 않고 직접 웹팩 빌드 환경 설정
- babel, eslint, prettier, dev-server, dotenv 등
- webpack-merge로 dev, prod 설정 분리
- alias 절대 경로 설정
짧은 기간 동안 Material UI를 학습해서 사용
- 추가적인 스타일링에 프레임워크에서 제공하는 useStyle, makeStyles 사용
React Context API + useReducer를 통한 상태관리
재사용 가능한 컴포넌트를 별도 디렉토리에 분리해서 관리
Cookie와 JWT Token을 사용해 OAuth 인증 구현

제목	내용
Github	baseball-project
Period	2 WEEK (2020.05.04 ~ 2020.05.15)
Skill	React.js, styled-components, Webpack, React Router, canvas

제목	내용
Github	todo-project
Period	2 WEEK (2020.04.06 ~ 2020.04.17)
Skill	JavaScript, TypeScript, Webpack, Tailwind CSS

Github Project Page의 칸반 보드를 바탕으로 제작한 할 일 관리 프로젝트
별도의 프레임워크 없이 Vanilla JavaScript(TypeScript)로 구현
Tailwind CSS를 새로 학습해서 짧은 기간 안에 적용, 스타일 모듈화
드래그 앤드 드롭 기능 API 없이 직접 구현
- mousedown, mousemove, mouseup, mouseover 이벤트 사용
- cloneNode(), insertBefore() 메서드를 사용해서 할 일 카드를 복제, 다른 컬럼으로 옮길 수 있도록 구현
- 마우스 포지션을 계산해, 카드 리스트의 맨 끝으로 카드를 옮기는 경우도 자연스럽게 보이도록 구현
사이드 메뉴 구현
- 사용자 로그 리스트가 저장되는 사이드 메뉴
- 직전의 로그 배열과 새로운 로그 배열을 비교, 새로 생긴 로그들을 애니메이션과 함께 업데이트되도록 구현
- insertAdjacentHTML() 메서드를 사용해 새로운 로그 엘리먼트를 생성
사용자의 관점에서 UX 디테일을 신경 쓰려고 노력
- textarea가 나타날 때 focus가 해당 엘리먼트로 향하도록 구현
- 카드 hover 시 마우스 포인터가 move 포인터로 바뀌기 등