협업하기 편한 개발자

김태수의 포트폴리오입니다.

About Me

조직을 위해 일하고 끊임없이 발전하는 개발자

상반신

조직을_위해_일하는_개발자

업무 상 모두가 불편하거나 합리적이지 못한 부분이 있다면 팀원분들과 충분히 논의하며 문제점을 개선합니다.

  • 린트, 스타일, 주요 라이브러리가 같은 웹 프로젝트에 모노레포를 도입하여 프로젝트 셋팅 시간 감소
  • 엑셀 기반의 API 문서를 Postman으로 이관하여 팀 내 개발 환경 개선
  • 이미지를 DB에 base64로 저장하는 로직 수정을 건의하여 스토리지 업로드 후 URL을 저장하는 방식으로 해결

적극적으로_소통하는_개발자

동료들과 개발에 대해 토론하며 지식을 공유하는 활동을 즐깁니다. 해결이 필요한 문제나 알아낸 지식들을 동료들에게 공유해야할 필요성이 있을 때 그들을 기꺼이 화이트보드 앞으로 모셔올 수 있는 적극성도 가지고 있습니다.
커뮤니케이션을 원활하게 이끌어가기 위해 팀원들과 늘 좋은 관계를 유지합니다.

  • 동료가 개발에 관해 고민을 토로하면 분야를 가리지 않고 문제를 함께 해결함
  • 여유가 있는 상황에서는 알게된 코드를 동료들에게 공유하거나 동료가 작성한 코드에 관심을 가짐
  • 작성한 코드의 의도를 설명하면서 상대를 설득하거나 내 코드의 문제를 식별함
  • 일련의 과정을 통해 함께 일한 동료들에게 긍정적인 Peer Review를 받음

Skills

Career

Projects

진행했던 프로젝트의 이력입니다.

디플래닛 홈페이지

자사 앱 홈페이지 개발

디플래닛 홈페이지 데스크탑 화면
디플래닛 홈페이지 데스크탑 모달
디플래닛 홈페이지 모바일 화면
디플래닛 홈페이지 lighthouse

개발 기간 : 1주 (2024.02)

역할 : 프론트엔드 전담

기술 스택 : Next.js(App Router), swiper

주요 구현

  • 데스크탑, 태블릿, 스마트폰 반응형 구현
  • 성능 최적화 (Lighthouse)
    • Performance: 91점
    • Accessibility: 95점
    • SEO: 100점

회고록 : 대외 홍보를 위해 홈페이지를 빠르게 개발해야하는 상황에서 빌드했던 홈페이지입니다. 당시 기획자분께서 기획 업무가 처음이시고 개발 지식도 없으셨지만 차근차근 소통하며 주어진 업무를 잘 마쳤습니다. 또한 검색엔진 노출을 고려해 SEO 점수 100점을 달성했습니다.

AI 난임리포트

자사 앱 서비스 AI 난임리포트 웹뷰 개발

AI 난임리포트 트렌드 메인화면
AI 난임리포트 트렌드 그래프
AI 난임리포트 트렌드 모달
AI 난임리포트 예측 메인화면
AI 난임리포트 가임체력예측 메인화면
AI 난임리포트 가임체력 등급표
AI 난임리포트 가임체력 체크
AI 난임리포트 가임체력 결과페이지
AI 난임리포트 체크 메인화면
AI 난임리포트 체크 결과 메인화면

개발 기간 : 2개월 (2023.12~2024.01)

역할 : 프론트엔드 전담

기술 스택 : Next.js(App Router), React-Router, Apexchart

주요 구현

  • 플러터 개발자와 협업하여 작업 진행
  • 서버와 클라이언트 상태의 동기화를 위해 React-Query 라이브러리 채택
  • 프로젝트의 점증적 기능 구현을 고려한 프론트엔드 디렉토리 구조 설계 적용
  • 앱과 웹뷰 환경의 계정 연동을 위한 token 전달 구조 설계 주도
    • Flutter : 웹뷰 생성시 쿠키에 토큰 생성
    • Next.js : 유저 최초 진입 시 서버사이드에서 쿠키 내 토큰을 받아 클라이언트의 세션 프로바이더에 주입
    • SSR에서는 쿠키로, CSR에서는 세션프로바이더를 통해 토큰에 접근 가능

회고록 : 차트의 특정 부분 하이라이팅 및 차트 스크롤 강제 이동, 기획상 통일되지 않은 설문 관련 컴포넌트, 모든 페이지마다 있는 모달 등 세세하게 구현할 것들이 많았지만 중복되는 기능을 최대한 응집하고, 복잡해지는 구조는 개발 도중에 리팩터링하면서 복잡도 이슈를 처리했습니다.
저는 이 프로젝트를 만든 경험을 통해 개발자로써 한 걸음 더 성장했습니다. 앱과 웹의 계정 연동 로직을 고민하고 해결한 경험, 개발이 진전됨에 따라 증가하는 디렉토리의 복잡도를 해소하며 프로젝트를 진행한 경험 등을 통해 규모가 큰 어플리케이션을 작업하는 것에 자신감을 얻게 되었습니다.

디플래닛 어드민 개발

자사 앱의 어드민 페이지 개발

디에이블

개발 기간 : 3주 (2023.11~2023.12)

역할 : 프론트엔드 전담

기술 스택 : Next.js(App Router), Next-auth, Quill Editor

주요 구현

  • 어드민 로그인 로직 개발
  • 텍스트 에디터 개발
  • 기타 어드민에 필요한 요소 개발

회고록 : 로그인 정책을 어떻게 해야할지에 대해 많은 고민을 했던 프로젝트였습니다. 어드민 페이지는 보안이 중요하다는 것을 감안하여, 토큰에 자체적으로 제한 시간을 부여하여 매 요청간 토큰의 유효성 검증을 진행했습니다. 또한 어드민 페이지를 개발할때는 실 사용자와 충분한 대화를 나눠가며 구현해야 한다는 것을 몸소 깨닫게 되었습니다.

위드플래닛

난임 환자들의 건강 증진을 목표로 일일 단위 건강 미션을 클리어하고 동료에게 인증할 수 있는 단기 프로젝트 앱

위드플래닛 위드위키1
위드플래닛 위드위키2
위드플래닛 위플미션
위드플래닛 위플미션 사진 확대
위드플래닛 위드위키 블로그
위드플래닛 계정관리

개발 기간 : 2개월 (2023.09 ~ 2023.11)

역할 : 프론트엔드 (개발 중 합류)

기술 스택 : Next.js

주요 구현

  • 회원가입 로직 개발
  • 계정관리 로직 개발
  • 유지보수

회고록 : 입사 후 바로 해당 웹 프로젝트를 만드는 업무에 투입되었습니다. 주요 기여 사항으로는 회원가입과 계정관리 로직 개발이며, 해당 부분 개발 완료 후 완성도가 떨어지는 부분에 한해 자체 Q/A와 디버깅을 진행하며 웹의 전체적인 완성도 증가에 기여했습니다.

전세버스 수요조사 웹 프로젝트

전세버스 경로에 대한 의사결정을 돕는 버스 수요조사 웹 개발

위즈돔

개발 기간 : 3주 (2023.03~2023.04)

역할 : 프론트엔드 개발

기술 스택 : Vue, Naver Map API

주요 구현

  • 전세버스 수요 고객을 대상으로 설문을 받은 버스 탑승 좌표 수천개를 네이버 API 지도에 마커로 렌더링
  • 가시성 확보를 위한 마커 클러스터링 기능 추가
  • 마커 크기 및 컬러 변경 기능 추가

회고록 : 클러스터링 마커의 컬러와 사이즈를 실시간으로 변경할 수 있는 기능을 도입하는 과정에서 웹이 버벅거리는 현상이 있었습니다. 이를 개선하기 위해 네이버 클러스터링 API를 직접 뜯어보았고, 실시간 마커 스타일 변경 기능이 클러스터링 API 명세에 없는 기능이었다는 것을 알게 되었습니다.
다행히 네이버 클러스터링 API가 오픈소스로 공개된 기능이었으므로, 직접 코드를 해석하여 기존 클러스터링 코드 함수를 변경하는 과정을 통해 원하는 기능을 구현할 수 있었고, O(n^3)로 동작하던 시간 복잡도를 O(n^2)로 고칠 수 있었습니다.

Peer Review

함께 일했던 동료들이 전달해준 추천사입니다.