프론트엔드 엔지니어

💡 2022년 7월, 삼성 청년 SW 아카데미에 참가하여 처음으로 개발 공부를 시작하게 되었습니다. 이후 팀 프로젝트를 여러 번 거치면서 웹 개발, 그 중에서도 프론트엔드 개발을 공부했습니다. 아이디어를 구체화하여 실제 프로덕트로 만들어내는 과정에 매력을 느껴 프론트엔드 개발을 시작하게 되었습니다. 사용자와 직접 소통하는 화면을 구현하고, 즉각적인 피드백을 통해 제품을 개선하는 과정에서 프론트엔드 개발만의 매력을 느끼고 계속해서 도전을 이어오고 있습니다. 매일 새로운 기술이 생겨나는 프론트엔드 생태계에서 살아남기 위해선 새로운 기술을 빠르게 배우고 적용하는 능력이 필수라고 생각해 꾸준히 새로운 기술에 대한 탐구와 공부를 하고 있습니다. 또한 작은 프로젝트를 만들어보면서 기술을 체화하고 끊임없이 성장하는 개발자가 되기 위해 노력하고 있습니다.

• 코드가 길어지면 반복되는 코드를 컴포넌트로 만들 수 있는지, 다른 방법은 없는지 고민합니다. 한번 만든 코드도 계 속해서 다시 들여다보며 좀 더 좋은 코드로 바꿀 방법이 없는지 고민합니다.
• 최대한 실무와 비슷한 경험을 쌓기 위해 애자일 프로세스로 협업을 진행해본 적 있습니다.
  • JIRA를 사용해 매주 스프린트를 나눠 목표치를 설정하고 개발을 진행했습니다.
  • Gitlab을 사용해 코드리뷰를 진행하고, Git branch 전략을 설정해 여러 명과 협업하는 과정에서 생기는 문제를 최소화하고자 노력했습니다.
  • 커밋 컨벤션을 정해 커밋 메시지를 작성함으로써 팀원 간 개발 내용을 알기 쉽게 공유하고, 문제가 생겼을 때 히스토리를 확인하기 쉽도록 했습니다.
• 얻게 된 개발 노하우, 기술 소식 등을 공유하고자 노력합니다. 팀으로 활동할 때는 공유 문서에, 개인적으로는 블로그에 내용을 공유하고 있습니다.

• React.js, Next.js를 사용한 웹 어플리케이션 개발
• Typescript를 통한 Javascript 정적 타입 분석
• Recoil, Zustand를 사용한 상태관리에 대한 이해
• 반응형 웹 디자인, 웹 접근성에 대한 고려

2024. 08. ~ 현재

개인 기술 블로그를 Next.js + Typescript로 구현해 Vercel을 통해 배포하여 운영중입니다. 배운 것이나 문제를 겪은 내용을 글로 포스팅하여 공유하고 있으며, 다른 웹사이트를 보면서 재밌어보이는 기능을 직접 구현해보기 위한 Playgro und로도 사용하고 있습니다.

게시글 목록 페이지

• Next.js의 App router의 동적 세그먼트로 페이지 디렉토리 구현, 라우트를 빌드 타임에 생성
• generatetaticParams()로 동적인 경로를 받아와 게시글 카테고리 분류

게시글 상세 페이지

• 게시글을 사전에 서버에서 렌더링되도록 구성
• react-mdx-remote를 활용 사전에 작성한 mdx 파일을 HTML로 파싱 후 렌더링

목차 사이드 바(ToC)

• Intersection Observer API를 사용하여 DOM 요소 관찰
• 특정 DOM 요소(포스트의 h2, h3 태그)로 이동할 수 있는 ToC 사이드바 구현
• 로딩 시 trasition 애니메이션 구현

검색엔진 최적화(SEO)

• generateMetadata()로 동적 metadata 생성
• Static Site Generation으로 정적인 페이지 구성
• Semantic tag를 사용하여 페이지 구조 표현
• Image 태그의 alt 속성 활용

그 외

• Github의 Discussion + Giscus를 통해 구현한 댓글 기능
• 다크모드 / 라이트모드
• 글 목록 리스트 그리드형 / 리스트형 분리
• 반응형 레이아웃 (sm, md) 구현

2023. 04. ~ 2023. 05.

• 방대한 양의 영양제 이미지를 불러올 때 Webp 형식을 활용한 이미지 사이즈 조절, Lazy Loading을 활용한 로딩시간 단축을 통해 이미지 최적화를 진행했습니다.
• 화면이 깜빡이는 일이 없도록 페이지 라우팅을 활용하였고, 검색창 애니메이션 및 로딩스피너를 활용하여 더 나은 사용자 경험을 제공하고자 했습니다.
• Axios의 Interceptor, Instance를 활용한 반복되는 API 요청 코드의 모듈화 과정을 거쳤고, 컴포넌트 단위로 개발을 통해 코드의 생산성을 높였습니다.
• TypeScript에서 자주 쓰는 Type의 경우 따로 Interface화 하여 코드의 가독성을 끌어올리고자 하였습니다.
• 상태관리를 활용하여 선택한 두 개의 제품을 비교할 수 있는 서랍기능을 만들었으며, 이로 인해 페이지가 바뀌어도 선택한 제품이 유지되어 비교할 수 있도록 구현하였습니다.

2023. 02. ~ 2023. 04

• 서비스 특성 상 중복되는 부분은 컴포넌트로 만들어 생산성을 끌어올리고자 하였습니다.
• AWS s3 스토리지에 저장하고 이미지 url을 받아오는 방식으로 프로필 이미지 업로드 기능을 구현하였는데, 새로 이미지를 업로드할 경우 바로 적용되지 않는 문제가 발생했습니다. 백엔드 팀원들과 토의하고 알아본 결과 s3에서 같은 url에 이미지를 저장하고 삭제하는 경우 캐싱 기능이 작동해서 이미지가 실시간으로 반영되지 않는다는 것을 알게 되었습니다. 이후 프로필 updateTime에 맞춰서 고유 url을 생성하는 것으로 문제를 해결하였습니다.

2023. 01. ~ 2023. 02.

• 로그인 시 회원정보를 전역상태로 관리하려 하였으나, 새로고침 시 상태가 초기화되어 로그인이 풀리는 문제가 발 생 하였습니다.
  • JWT Token을 사용하여 로그인을 구현하였는데, accessToken 및 유저 ID를 로컬스토리지에 저장하는 것으로 문제를 해결하였습니다. refreshToken을 나누어 이는 백엔드 세션에 저장하는 것으로 보안상 의 문제도 고려하였습니다.
• WebRTC의 오픈소스 라이브러리 중 하나인 OpenVidu를 활용하여 화상채팅 서비스를 구현하였습니다.
  • 백엔드 서버에 방 생성 요청 시 받아오는 방 ID로 WebRTC 중계서버에 세션 생성 요청을 하면 화상채팅방 세션에 접속되는 구조로 구현하였습니다. 같은 방 ID로 요청 시 같은 세션에 접속되는 것을 확인하였습니다.
• OpenVidu에서 지원하는 소켓통신 기능을 활용해 이벤트가 발생하면 다른 사용자가 그 이벤트를 수신하는 기능을 응용하여 실시간 투표기능을 구현하였습니다.

• HTML, CSS, Javascript
• React, Next.js
• Typescript
• Zustand, Recoil
• Notion, Figma, Git, Jira