코드를 깔끔하게 짜는 개발자

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

About Me

안녕하세요. 개발자 김태수입니다.

저는 1년 간 현업에서 소중한 경험을 쌓았습니다. 특히 스타트업에서 홀로 프론트엔드단을 개발하며 프로젝트의 설계부터 배포까지 전 과정을 아우를 수 있는 역량을 길렀습니다. 또한 백엔드 개발자, 디자이너, 기획자 등 동료들과의 적극적인 의사소통을 통해 제가 투입된 프로젝트를 어떻게든 잘 이끌어가고자 노력했습니다. 결과적으로 짧은 기간동안 다양한 프로젝트를 성공적으로 출시할 수 있었습니다.

저는 동료가 쉽게 읽을 수 있는 코드를 작성합니다. 당장의 구현에만 몰두하면 이후의 작업 속도는 더욱 더뎌진다는 사실을 실제 개발 경험과 독서를 통해 깨닫게 되었습니다. 코드의 품질을 사수하는 것도 개발자의 덕목이라 생각하며, 개발 도중 직관적이지 않거나 기능이 지나치게 결합된 컴포넌트가 있다면 과감히 리팩터링을 진행합니다. 최근에는 리팩터링, 클린 아키텍처 등의 도서를 읽고, 동료들과 토의를 하며 제 생각을 정립해 나가고 있습니다.

저는 최고의 동료입니다. 동료의 업무 현황 및 업무 부하 상태를 사전에 캐치하려 노력하며, 이를 통해 팀을 백업할 수 있는 일을 끊임없이 찾아냅니다. 또한 개발 중 알아낸 지식에 대해 동료들과 함께 토론하며 회사의 코드를 함께 개선해 나갑니다. 이러한 노력을 바탕으로 함께 일한 동료로부터 최고의 동료 리뷰를 받았으며 이는 해당 포트폴리오 하단에 기재되어 있습니다.

저는 끊임없이 배우고 있습니다. 기초가 중요하다는 생각 아래 한국방송통신대학교 컴퓨터과학과에 진학하여 주경야독 하고 있으며, 격주로 동료 개발자들과 미팅하며 다양한 관점을 접하고자 노력합니다.

즉시 전력으로도 보탬이 되고, 높은 성장력으로 미래에도 도움이 되는 동료 개발자로써 함께 하겠습니다. 감사합니다.

상반신

Skills

자바스크립트 생태계를 두루 다룰 수 있습니다.

Career

Other Career

Projects

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

놀장 통합 어드민 페이지

전통시장 이커머스 웹 어드민 페이지

놀장 어드민 메인 화면
놀장 어드민 상품 등록
놀장 어드민 대량상품 등록
놀장 어드민 도매센터
놀장 어드민 주문관리

개발 기간 : 2개월 (2024.06 ~ 2024.08)

역할 : 프론트엔드 개발 (기여도 100%)

기술 스택 : Next.js, Tanstack Table, rechart

주요 구현

  • 접근 권한 세분화 구현
    (운영, 점포, 지자체 등 유동적인 접근 제어가 가능하도록 구조 설계)
  • 상품 등록 및 삭제, 데이터 테이블 등 기본적인 운영 기능 구현
    • 사용자 편의를 위한 기능 기획 및 구현
      • 상품 등록 시 엑셀 업로드 기능 및 공통 양식 다운로드 기능
      • 이미지 업로드 시 미리보기 기능 추가
      • 좌측 네비게이션 바 축소/확대 기능 등
    • 데이터 테이블 기능 기획 및 세분화
      • 데이터 테이블에 다양한 Sorting(최솟값, 최댓값, 검색 등) 기능 구현
      • 선택한 row를 엑셀로 추출할 수 있는 기능 구현

회고록 : 비즈니스에 두루 이용할 수 있는 어드민 웹을 만들기 위해 계정 접근 권한을 세분화하여 관리할 수 있는 구조를 만들었고, 웹 이용자(사내 구성원, 점주 등)가 웹을 보다 편리하게 사용할 수 있도록 사용자 편의성에도 초점을 맞추었습니다. 어드민 페이지가 상대적으로 프로젝트 사이즈 대비 복잡한 로직이 많이 추가되는 만큼 들인 노력이 많았지만 성장하는 느낌으로 즐겁게 작업하였습니다. 특히 입사하자마자 여러가지를 기획하며 개발할 권한을 얻었던 것은 매우 좋은 기억으로 남습니다.

놀장 웹 이커머스

전통시장 이커머스 웹 플랫폼 신규 개발

놀장 이커머스 메인 화면
놀장 이커머스 장바구니
놀장 이커머스 상품상세
놀장 이커머스 상품구매

개발 기간 : 3개월 (2024.05 ~ 2024.08)

역할 : 프론트엔드 개발 (기여도 60%)

기술 스택 : Next.js

주요 구현

  • 외주 개발이 끝난 후 소스 코드를 인계받아 작업
  • 나이스 PASS 인증 (FE, BE) 신규 구현
  • 소셜 SDK(솔라피 알림톡, 카카오톡 상담 및 공유 등) 연동
  • Q/A 리딩 및 상당수의 디버깅 및 리팩터링 진행
    • 효과적인 Q/A를 위한 시스템 구성
      • Q/A를 위한 사내 시스템(공유 스프레드시트) 개발
      • 진행사항과 개인의견 등을 문서로 공유하며 Q/A 우선 순위 평가
    • 계정 보안 취약점 발견 후 사후처리
      • 계정 생성 시 프론트엔드에서 위험한 형태로 패스워드를 암호화하여 서버에 전송하는 로직을 발견하여, 서버에서 처리할 수 있도록 협조 요청 후 수정
    • 오류가 많은 상태 관리에 한해 Context API 도입으로 관심사 분리
    • 기타 리팩터링, 디버깅 및 사용자 편의 기능 추가
      • 결제, 장바구니, 옵션선택, 상품목록, 검색, 정렬, 페이지네이션 등 모든 부분에 에러가 나는 것을 디버깅함
      • 모달 메세지를 통해 사용자와 최소한의 의사소통 구현

회고록 : 외주 용역 개발이 끝난 후 코드를 이어받아 작업을 하게 된 케이스입니다. 출시를 할 수 없을 정도로 버그가 많았으나, 당시 프론트엔드 책임자로써 모든 부분에 대해 책임을 지고 전면 디버깅 및 재개발을 통해 성공적으로 웹을 런칭했습니다.

디플래닛 홈페이지

자사 앱 홈페이지 개발

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

개발 기간 : 1주 (2024.02)

역할 : 프론트엔드 개발 (기여도 100%)

기술 스택 : Next.js

주요 구현

  • 데스크탑, 태블릿, 스마트폰 반응형 구현
  • 성능 최적화 (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)

역할 : 프론트엔드 개발 (기여도 100%)

기술 스택 : Next.js, Apexchart

주요 구현

  • 플러터 내 웹뷰 페이지 개발
  • 앱과 웹뷰의 token 전달 구조 설계
    • 플러터 : 웹뷰 초기화 시 쿠키에 token 등록
    • Next.js : 웹뷰 최초 진입시 쿠키에 등록된 token을 클라이언트 사이드의 TokenProvider에 주입
    • SSR에서는 쿠키로, CSR에서는 Provider로 token 사용

회고록 : 기획안이 제대로 나오지 않은 상황에서 개발을 시작한 프로젝트입니다. 특히 차트 라이브러리의 특정 부분 하이라이팅 및 차트 스크롤 강제 이동, 복잡한 형태의 모달 등 통일되지 않은 세세한 구현사항이 많아 코드와 디렉터리 구조가 복잡해졌었던 이슈가 있었습니다. 이를 제어하기 위해 기획안이 안정된 상황이라고 판단되었을 때, 중복 기능을 최대한 응집하고 디렉터리를 정리하는 리팩터링 과정을 함께 병행하며 개발했던 경험이 있습니다.

디플래닛 어드민 개발

자사 앱 어드민 페이지 개발

디에이블

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

역할 : 프론트엔드 개발 (기여도 100%)

기술 스택 : Next.js, Tanstack-Query, Quill Editor

주요 구현

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

회고록 : 로그인 정책 구현에 대해 많은 고민을 했던 프로젝트 였습니다. 사내 마스터, 라이터(포스팅), 인턴 등급으로 UI 접근 권한을 세분화 했습니다. 또한 실 사용자의 니즈를 파악하기 위해 사내 구성원분과 많은 대화를 했고, 특히 에디터 기능 개발에 많은 공을 들였던 기억이 있습니다.

위드플래닛

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

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

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

역할 : 프론트엔드 개발 (기여도 40%)

기술 스택 : Next.js

주요 구현

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

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

Peer Review

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