기록과 공유를 좋아하는

정현수입니다.

프론트엔드 개발자를 희망하고 있습니다.배운 모든 것을 기록하고 공유하는 것을 좋아합니다.공유의 중요성을 잘 알기에 항상 새기고 실천하려고 노력합니다.

hyeonsu-background

Work.

인턴

당근마켓🥕

2022년 6월 27일 - (진행중)
사내 개발자들의 DX를 향상시켜주는 프론트엔드코어팀 소속
흩어진 팀의 중복된 노력을 줄여주기 위한 프로젝트 Codepocket 진행
인턴

하얀마인드

2021년 3월 - 2021년 6월, 2021년 9월 - 2021년 12월 (약 8개월)
영어 쉐도잉 애플리케이션 제작 스타트업의 프론트엔드 개발자로 참여
B2B 소개 페이지 제작 프로젝트 참여 (디자이너1, 개발자1)
B2B 소개 페이지 반응형 디자인 적용
react-admin 프레임워크를 활용한 B2B 사이트 유지보수(firestore를 이용한 CRUD 구현)
인턴

쎄트렉아이

2020년 7월 - 2020년 8월
약 두 달간 회사에 DevOps를 적용하기 전에 DevOps를 먼저 사용해보고 발표하는 인턴 진행
Ansible을 이용해 Kubernetes 환경 구축 및 고가용성 유지를 위한 테스트

Project.

개인 프로젝트

정현수 기술 블로그 개발

2022년 3월 - 계속 개발중
나만의 블로그를 가지기 위해서 개발
다크모드 구현
모바일 반응형 디자인 적용
rss.xml, sitemap.xml, robots.txt 생성 후 크롤러가 잘 읽어갈 수 있도록 구현
open graph(적용 코드)를 적용하여 공유 시 북마크 생성되도록 구현
SEO를 위한 시멘틱 태그 배치에 신경 씀
Table of Contents 생성하여 목차를 한 눈에 볼 수 있도록 구현
Giscus를 이용한 댓글 시스템 구현

사용기술들

UI 개발에 집중할 수 있습니다. 컴포넌트를 이용해서 재사용 가능하고, 논리적으로 파일을 나누어서 개발 진행을 할 수 있습니다. 또한 JSX 문법을 이용해서 조금 더 직관적으로 템플릿을 구성할 수 있어서 사용했습니다. 그리고 커뮤니티가 방대해서 자료 찾기도 편합니다.

SEO을 신경써서 검색엔진에 노출시키고 싶었습니다. SSR을 통해서 SEO를 향상시키고, 별도의 routing 라이브러리없이 페이지 routing을 구현할 수 있는 것도 선택의 기준이 되었습니다.

함수나 객체에 들어가는 구조에 타입을 정의함으로써 인자나 프로퍼티의 자동완성으로 개발 진행할 때 편의성을 얻을 수 있습니다. 또한 함수, 객체의 값들을 실행 전에 타입이 틀린 부분을 발견하여 실행 후에 에러를 방지할 수 있습니다.

CSS-in-JS를 사용한 이유는 블로그에는 빠른 유저 인터렉션을 요구하는 애니메이션이 많이 있지 않고, 같은 JS로 개발할 수 있다는 점 그리고 className을 신경쓰지 않아도 된다는 점과 같은 것들로 인해 사용하게 되었습니다. Next.JS에서 styled-components를 사용하면 추가적으로 SSR과 관련하여 처리를 해주어야 하는데, emotion은 추가적인 설정이 필요없어서 emotion을 선택했습니다. 그리고 styled-components와 비교해 번들 사이즈가 비슷하고, 추가적으로 사용할 수 있는 기능(emotion/css)이 있다는 것이 styled-components 대신에 emotion을 사용한 이유입니다.

emotion vs styled-components bundle size

NextJS + 다크모드를 구현할 때 편리한 기능들(system prefer color scheme, ColorModeScript등등)을 제공해줍니다. 커스터마이징이 가능한 컴포넌트를 제공해주고, 호불호가 크게 갈리지 않는 디자인이라서 적용했습니다.

프로젝트 코드의 일관성있는 코드 작성을 위해서 사용했습니다. 잘못된 코드 혹은 컨벤션에 맞지 않는 코드를 작성하게 된다면 오류를 뱉어내기 때문에 사용했습니다. 대부분의 경우 airbnb 컨벤션을 사용합니다. 가장 유명한 코딩 컨벤션중에 하나 이기도 하고, 세부적인 것 까지 섬세하게 작성되어 있습니다.

프로젝트 코드의 코드 포맷팅을 위해서 사용했습니다. 따옴표를 사용할 것인지 쌍따옴표를 사용할 것인지, 한 줄에 최대 몇 줄까지 적을 수 있는지, 세미콜론을 붙일 것인지 안 붙일 것인지와 같은 코드의 일관성을 지킬 수 있습니다.

Next.JS를 만든 곳에서 만든 배포 시스템입니다. 깃허브 주소만 입력하면 바로 배포가 됩니다. CI/CD가 자동으로 구현되어 있어서 메인 브랜치에 merge, commit 됐을 때, 혹은 메인이 아닌 브랜치에서 merge, commit 시에 preview deployment를 제공하여 오류가 나는지 확인해줍니다. 또한 내부적으로 CI 파이프라인에서 에러가 나거나, 사용하지 않는 변수와 같은 실수들에 에러를 내뱉어 배포가 된 이후에 에러가 나는 것을 방지할 수 있습니다. 그리고 무료입니다.

팀 프로젝트

react-season-component

React background component npm 라이브러리 개발
디자인 1명, 개발자 7명에서 프로젝트 리더로 시간 조율 및 회의 진행 담당
Time, Season, Weather 컴포넌트 중 Time 컴포넌트 개발 담당
tsc를 이용한 컴파일 및 NPM 배포

사용기술들

UI 개발에 집중할 수 있습니다. 컴포넌트를 이용해서 재사용 가능하고, 논리적으로 파일을 나누어서 개발 진행을 할 수 있습니다. 또한 JSX 문법을 이용해서 조금 더 직관적으로 템플릿을 구성할 수 있어서 사용했습니다. 그리고 커뮤니티가 방대해서 자료 찾기도 편합니다.

함수나 객체에 들어가는 구조에 타입을 정의함으로써 인자나 프로퍼티의 자동완성으로 개발 진행할 때 편의성을 얻을 수 있습니다. 또한 함수, 객체의 값들을 실행 전에 타입이 틀린 부분을 발견하여 실행 후에 에러를 방지할 수 있습니다.

CSS-in-JS를 사용한 이유는 프로젝트가 UI 인터렉션 위주가 아닌 컴포넌트 위주의 프로젝트가 진행될 가능성이 커서 선택했습니다. 컴포넌트 위주의 프로젝트에서 개발 효율성을 중요시 하고, 필요한 CSS 스타일 요소만 로딩하기 때문에 사용하게 되었습니다. 하지만 CSS-in-JS보다 CSS-in-CSS가 속도가 더 빠르고, UI 컴포넌트 라이브러리인 만큼 유저 경험이 중요하기 때문에 더 나은 속도를 제공하기 위해 CSS-in-CSS로 변경할 예정입니다.

빠르게 진행해야 하는 프로젝트이고, 빠르게 컴포넌트를 만들어서 사용할 수 있는 라이브러리이기 때문에 사용했습니다. 또한 기본적으로 모던한 느낌을 주고 무난하게 어디든 잘 어울리는 디자인을 가지고 있어서 사용했습니다.

프로젝트 코드의 일관성있는 코드 작성을 위해서 사용했습니다. 잘못된 코드 혹은 컨벤션에 맞지 않는 코드를 작성하게 된다면 오류를 뱉어내기 때문에 사용했습니다. 대부분의 경우 airbnb 컨벤션을 사용합니다. 가장 유명한 코딩 컨벤션중에 하나 이기도 하고, 세부적인 것 까지 섬세하게 작성되어 있습니다.

프로젝트 코드의 코드 포맷팅을 위해서 사용했습니다. 따옴표를 사용할 것인지 쌍따옴표를 사용할 것인지, 한 줄에 최대 몇 줄까지 적을 수 있는지, 세미콜론을 붙일 것인지 안 붙일 것인지와 같은 코드의 일관성을 지킬 수 있습니다.

인터렉티브한 데이터 fetching이 많은 프로젝트가 아닙니다. 단순한 페이지를 명령어 한번으로 배포할 수 있고, Github 플랫폼 하나에서 전부 해결할 수 있고, 평생 무료라는 것 그리고 마지막으로 HTTPS를 신경쓰지 않아도 된다는 점에서 선택을 하게 되었습니다.

자동적 배포를 위해서 도입했습니다. Github 플랫폼 하나에서 전부 해결할 수 있고, 평생 무료라는 것 꽤나 많은 예시가 있고 많은 자료들을 찾을 수 있어서 선택하게 되었습니다.

개인 프로젝트

다른 색깔 찾기 게임

Numble에서 진행하는 챌린지 참여
챌린지 내 상위 10% 달성 (점수 기준)
전역 상태 라이브러리를 사용하지 않고 state, props를 적절한 위치에 구현
챌린지 이후 firestore를 이용한 랭킹 시스템 구현

사용기술들

UI 개발에 집중할 수 있습니다. 컴포넌트를 이용해서 재사용 가능하고, 논리적으로 파일을 나누어서 개발 진행을 할 수 있습니다. 또한 JSX 문법을 이용해서 조금 더 직관적으로 템플릿을 구성할 수 있어서 사용했습니다. 그리고 커뮤니티가 방대해서 자료 찾기도 편합니다.

함수나 객체에 들어가는 구조에 타입을 정의함으로써 인자나 프로퍼티의 자동완성으로 개발 진행할 때 편의성을 얻을 수 있습니다. 또한 함수, 객체의 값들을 실행 전에 타입이 틀린 부분을 발견하여 실행 후에 에러를 방지할 수 있습니다.

SPA인 React에서 routing을 구현하기 위해서 사용했습니다. 라우팅을 서버에서 관리하는 것이 아닌 클라이언트가 구현함으로써 SPA가 깜빡임 없이 페이지 이동을 구현할 수 있게 합니다.

CSS-in-JS를 사용한 이유는 프로젝트가 UI 인터렉션 위주가 아닌 컴포넌트 위주의 프로젝트가 진행될 가능성이 커서 선택했습니다. 컴포넌트 위주의 프로젝트에서 개발 효율성을 중요시 하고, 필요한 CSS 스타일 요소만 로딩하기 때문에 사용하게 되었습니다.

프로젝트 코드의 일관성있는 코드 작성을 위해서 사용했습니다. 잘못된 코드 혹은 컨벤션에 맞지 않는 코드를 작성하게 된다면 오류를 뱉어내기 때문에 사용했습니다. 대부분의 경우 airbnb 컨벤션을 사용합니다. 가장 유명한 코딩 컨벤션중에 하나 이기도 하고, 세부적인 것 까지 섬세하게 작성되어 있습니다.

프로젝트 코드의 코드 포맷팅을 위해서 사용했습니다. 따옴표를 사용할 것인지 쌍따옴표를 사용할 것인지, 한 줄에 최대 몇 줄까지 적을 수 있는지, 세미콜론을 붙일 것인지 안 붙일 것인지와 같은 코드의 일관성을 지킬 수 있습니다.

Next.JS를 만든 곳에서 만든 배포 시스템입니다. 깃허브 주소만 입력하면 바로 배포가 됩니다. CI/CD가 자동으로 구현되어 있어서 메인 브랜치에 merge, commit 됐을 때, 혹은 메인이 아닌 브랜치에서 merge, commit 시에 preview deployment를 제공하여 오류가 나는지 확인해줍니다. 또한 내부적으로 CI 파이프라인에서 에러가 나거나, 사용하지 않는 변수와 같은 실수들에 에러를 내뱉어 배포가 된 이후에 에러가 나는 것을 방지할 수 있습니다. 그리고 무료입니다.

개인 프로젝트

나만의 포트폴리오 개발 (현재 페이지)

2022년 1월 - 3월 개발
나만의 포트폴리오를 가지기 위해서 개발

사용기술들

UI 개발에 집중할 수 있습니다. 컴포넌트를 이용해서 재사용 가능하고, 논리적으로 파일을 나누어서 개발 진행을 할 수 있습니다. 또한 JSX 문법을 이용해서 조금 더 직관적으로 템플릿을 구성할 수 있어서 사용했습니다. 그리고 커뮤니티가 방대해서 자료 찾기도 편합니다.

SEO을 신경써서 검색엔진에 노출시키고 싶었습니다. SSR을 통해서 SEO를 향상시키고, 별도의 routing 라이브러리없이 페이지 routing을 구현할 수 있는 것도 선택의 기준이 되었습니다.

함수나 객체에 들어가는 구조에 타입을 정의함으로써 인자나 프로퍼티의 자동완성으로 개발 진행할 때 편의성을 얻을 수 있습니다. 또한 함수, 객체의 값들을 실행 전에 타입이 틀린 부분을 발견하여 실행 후에 에러를 방지할 수 있습니다.

CSS-in-JS를 사용한 이유는 프로젝트가 UI 인터렉션 위주가 아닌 컴포넌트 위주의 프로젝트가 진행될 가능성이 커서 선택했습니다. 컴포넌트 위주의 프로젝트에서 개발 효율성을 중요시 하고, 필요한 CSS 스타일 요소만 로딩하기 때문에 사용하게 되었습니다.

빠르게 진행해야 하는 프로젝트이고, 빠르게 컴포넌트를 만들어서 사용할 수 있는 라이브러리이기 때문에 사용했습니다. 또한 기본적으로 모던한 느낌을 주고 무난하게 어디든 잘 어울리는 디자인을 가지고 있어서 사용했습니다.

프로젝트 코드의 일관성있는 코드 작성을 위해서 사용했습니다. 잘못된 코드 혹은 컨벤션에 맞지 않는 코드를 작성하게 된다면 오류를 뱉어내기 때문에 사용했습니다. 대부분의 경우 airbnb 컨벤션을 사용합니다. 가장 유명한 코딩 컨벤션중에 하나 이기도 하고, 세부적인 것 까지 섬세하게 작성되어 있습니다.

프로젝트 코드의 코드 포맷팅을 위해서 사용했습니다. 따옴표를 사용할 것인지 쌍따옴표를 사용할 것인지, 한 줄에 최대 몇 줄까지 적을 수 있는지, 세미콜론을 붙일 것인지 안 붙일 것인지와 같은 코드의 일관성을 지킬 수 있습니다.

Next.JS를 만든 곳에서 만든 배포 시스템입니다. 깃허브 주소만 입력하면 바로 배포가 됩니다. CI/CD가 자동으로 구현되어 있어서 메인 브랜치에 merge, commit 됐을 때, 혹은 메인이 아닌 브랜치에서 merge, commit 시에 preview deployment를 제공하여 오류가 나는지 확인해줍니다. 또한 내부적으로 CI 파이프라인에서 에러가 나거나, 사용하지 않는 변수와 같은 실수들에 에러를 내뱉어 배포가 된 이후에 에러가 나는 것을 방지할 수 있습니다. 그리고 무료입니다.

Share.

블로그

정현수 기술 블로그

2022/04/06일 직접 깃허브 블로그 배포 완료
많은 기능들을 적용해보고 싶은 욕심에 직접 제작
앞으로 대부분의 포스팅 해당 블로그에 올릴 예정
Next.JS + emotion + chakra UI + vercel로 제작
블로그

티스토리

알고리즘, CS지식 공부 내용, 회고록 등등 정리
2022년 3월 기준 일 평균 150명, 월 평균 4000명 방문
2022년 3월 기준 총 방문자 31,000명
유튜브

유튜브

간단히 내가 아는 내용을 전하고자 영상 제작 후 공유

Education.

대학교

충남대학교

2016년 - 2022년 컴퓨터공학과 학사 졸업
학점 3.65 / 4.5

OpenSource.

Study.

스터디

프론트엔드 취업 준비 스터디

2022년 4월 28일 - 진행중
일주일동안 프로그래머스 일정 문제 수 만큼 알고리즘 문제 풀기
일주일동안 프론트엔드 로드맵을 기준으로 정해진 주제에 대해서 조사하고 한 명씩 발표하기
정리는 모든 사람이 전부 진행, 발표는 일주일에 한 명씩 진행
참여인원 5명