미리보기

SEO 최적화를 전문으로 하고 있는 부분과, 후임들을 교육하는 시니어로서의 성장 발판을 기회로 입사 결정

• 업무 정책 수립

  • 새로운 코드 컨벤션 정책 및 업무 문서 정책 수립.
    각 팀원의 업무 파악 및 고객사 업무 요청 파악에 불편함을 느껴, github의 issue 템플릿을 참고하여 노션에서 업무 우선순위(P0 ~ P5) 및 현황 리스트를 정의하는 템플릿을 제작하여 효율적으로 업무를 관리할 수 있도록 개선 했다. 현재 개발팀 전체가 사용하고 있다.

• 성능 최적화

  • next/bundle-analyzer를 활용해서 최적화 진행 (2.17MB=> 1.95MB ). 번들 크기 분석 결과, quill.js(react-quill 라이브러리)의 번들이 크게 나타났다. react-quill은 번들 크기가 405kB이었는데 웹에서는 한 곳에서만 사용되어 있어서 용량 대비 사용도가 적어 개선할 필요가 있었다. 대안으로 비슷한 에디터 패키지로 더 가벼운 react-simple-wysiwyg 패키지(138kB)를 발견했고 팀원이랑 같이 상의해서 react-quill에서 react-simple-wysiwyg로 패키지 변경을 결정하여 전체 번들 크기 2.17MB에서 1.95MB로 0.22MB를 줄일 수 있었다.
  • SWC를 사용하여 빌드 속도 개선 ( babel : 27.597s =>SWC : 9.922s ). 회사 프로젝트에서 자바스크립트 컴파일러를 babel로 사용하고 있었는데, 속도 개선을 위해 SWC로 변경하였다. SWC는 직렬처리를 하는 babel와 다르게 병렬처리가 가능해서 컴파일이 매우 빠랐고 Next.js에는 SWC가 내장 되있으므로 그 기능을 활용해서 17.675s 줄일 수 있었다.

• 스터디 교육

  • 6개월 이상 주체적으로 커리큘럼을 준비하고 진행한 Next.js 스터디와 독서모임을 통해 팀원들의 실력 향상에 직접적인 도움을 주고 있다.

• 문제 해결

  • 개인적으로 서버와 DB에 흥미가 생겨 공부를 하고 있다. 그러던 중 회사 프로젝트(여러 언어권이 있는 사이트)에서 다른 언어권에서는 저장이 잘 되는데 특정 언어권에서만 저장이 안 되는 이슈가 생겼고, 궁금해서 찾아본 결과 코드 문제보다는 DB에 문제가 있는 걸 발견하여 문제가 생긴 DB 컬럼에 레코드를 추가하니 이슈를 해결할 수 있었다.

• AR/XR 기술을 기반으로 새로운 가상 경험을 만드는 스타트업에 관심이 생겨 입사 결정.
• 기획 단계부터 참여한 프로젝트 경험 및 웹 서비스의 프론트엔드 설계, 개발, 운영 경험으로 인해 프로젝트 리딩 및 다양한 팀과의 협업 능력 향상에 도움이 됐다.
• 회사 사정으로 중간에 방향성이 바뀌었는데 이 부분으로 회사와 여러차례 의견을 나누었지만 한계를 느껴 이직 결정을 내리게 되었다.

• 글로벌 VUIZ 서비스 신규 개발
  프론트엔드 개발자로 프로젝트 구조 설계 및 재사용 가능한 각종 공통 컴포넌트 개발과 UI 개발 및 기능 개발

• 최적화

  • Nextjs 플로그인을 통해서 번들 크기를 확인하여 최적화를 진행했다. moment를 dayjs로 변경하여 1.38MB 감소했다.
  • 프로젝트 구조 설계 및 재사용 가능하고 유지 보수성과 가독성이 좋은 컴포넌트 개발을 제안 후 적용했다.
  • 불필요한 API 호출을 줄이고, 데이터를 효율적으로 처리하는 방법으로 개선했다.
  • Nextjs 12버전에서 13.4버전으로 마이그레이션을 진행하여 더욱 최적화된 환경에서 개발 진행했다.

지속적인 커밋이 어려운 개발자를 위한 습관 형성 도우미 서비스

작년에는 개인 프로젝트를 많이 해서 올해는 누군가와 함께 만드는 프로젝트를 하고 싶어
개발자 2명[앱, 웹] 디자이너 1명 구성으로 프로젝트를 같이 만들고 있다.

본인은 웹 개발과 함께 BE 개발도 같이 하기로 했다.
Next.js를 활용한 API 구축과, AWS RDS(MySQL)를 활용해서 DB 구축을 하고 있다.
BE 개발을 제대로 진행하는 게 새로운 도전이지만, 그만큼 더 흥미롭고 개발자로서 한 단계 더 성장하고 있다.

연말을 맞이해서 누군가에게 도움이 되는 사이트를 만들고 싶어 시작했고, 배포한지 4일 만에 243명이 방문한 사용량을 기록하며, 많은 이들에게 호응을 얻고 있는 프로젝트이다.

사이트: https://new-year-card-silk.vercel.app
GitHub: https://github.com/uuuuooii/new-year-card

• 사용자가 자신만의 신년카드를 손쉽게 만들 수 있는 기능을 제공하고 있다. OpenAI의 이미지 생성 능력을 활용하여 사용자가 선택한 그림체와 메인 컬러, 키워드에 맞게 이미지를 생성할 수 있다.
• Next.js를 사용해서 Open AI와 통신하였고 2023년 11월에 출시된 최신 dall-e-3 모델를 사용하여 무료로 사용자에게 최신 기술을 경험할 수 있게 했다.

책을 좋아해서 1년에 30권 넘게 읽고 공책에 정리하다가 나만의 독서 경험을 효율적으로 기록하고 보관할 수 있는 공간이 있으면 좋을 거 같다 웹사이트를 제작하게 되었다.

사이트: https://book-history.vercel.app
GitHub: https://github.com/uuuuooii/BookHistory

• 성능 98점, 접근성, 권장사항, 검색엔진 최적화 모두 100점
  • 첫 로딩 시 화면에 보여주는 데이터가 너무 많아 성능 점수가 64점이었지만 무한 스크롤 도임 후 98점으로 향상시킬 수 있었다.
• Next.js를 사용해 서버 API 제작 및 MongoDB를 사용해서 풀스택으로 진행. 서버 구축 기간과 비용, 관리 및 유지 보수의 비용을 줄일 수 있었다.
• MVP를 정의해서 버전관리를 도입하여 개발을 효율적, 효과적으로 진행하였다.

AI멘토로 참여하여 기업 우수상 수상
처음으로 혼자 해커톤에 참여하여 우수상을 수상한 프로젝트

Github: https://github.com/uuuuooii/AI-Mentor

• AI 멘토가 면접 질문을 먼저 제시하고, 참가자는 이에 대한 대답을 할 수 있고 대답에 따라 AI 멘토는 꼬리 질문을 생성하여 더 심층적인 토론이 가능하도록 했다.
• Open AI를 사용해서 개발하였고, 프롬프트를 커스텀 하여 AI 멘토의 역할, 사용법 설명, 그리고 질문 난이도를 설정할 수 있어 참가자가 자신의 상황에 맞게 면접을 체계적으로 진행할 수 있다.
• 처음으로 해커톤에서 우수상을 수상해서 기술적 업적을 인정받은 프로젝트이다.

개발자 커뮤니티 협업에 참여하여 커뮤니티 오픈 전 원고 작성

신입 개발자의 생전의 기술이라는 주제로 원고 작성