미리보기

• 개발자 유형 찾기 웹 개발 (2020.09 ~ 2020.11)

  • 담당 업무 : FE/BE 개발

  • 사용 기술 : React, Koa, GraphQL, mongoose ,MongoDB

    • 리뉴얼 제안 및 개발 참여 이후 사용자 20배 증가

    • 2024.08 기준 약 20만명 참여

• 모각코 (2020.11 ~ 2021.03)

  • 코딩 교육에 필요한 자료 및 매니저 활동

  • 지속적인 요청으로 시즌제 운영

• 사내 라이브러리 및 사내 프로젝트 개발

  • swagger-ui-express의 불편한 사용방법을 개선한 InitApp Class 구현하여 간편하고 유연한 Swagger Document 라이브러리 개발

  • AWS의 EC2, VPC, CodePipeline 또는 Github Action을 통한 배포 자동화

  • Express, Typescript, Mysql, Prisma를 사용한 사내 프로젝트 개발

• (주) 만도 H2Care (2022.03 ~ 2022.09) [외주]

  • 담당 업무 : PM, BE 개발

  • 사용 기술 : Express, Typescript, Sequelize, MySQL

    • Database 설계 및 서버 전체 API 개발

    • 계약 완수 이후 완성도 있는 결과물로 추가 계약 요청

    • OOP 기반 서버 설계

• (주) 컬러버스 퍼피레드 (2022.03 - 2022.06) [외주]

  • 담당 업무 : FE 개발

  • 사용 기술 : React, Typescript, React Query, Recoil

    • Webview로 사용된 React 화면 개발

    • 출시 후 앱스토어 1위 달성

    • 사용자 이벤트로 인한 지연 개선 후 응답 시간 최적화

• 메디스 (2022.03 ~ 2022.08) [외주]

  • 담당 업무 : BE 개발

  • 사용 기술 : Express, Typescript, Prisma, Socket.io

    • Database 설계 및 서버의 전체 API 개발

    • 주문 접수 확인 기능을 위한 Socket.io 도입

    • FP 기반 서버 설계

• (주) 배리 - 텍스트 에디터 개발 (2022.02) [외주]

  • 담당 업무 : FE 개발

  • 사용 기술 : Vanilla Javascript, Sun Editor

    • 기존 라이브러리에서 지원하지 않는 커스텀 기능 (드래그 앤 드롭) 개발

• (주) 오키도키 컴퍼니 (2022.01 - 2022.06) [외주]

  • 담당 업무 : BE 개발

    • 사용 기술 : Express, Typescript, Prisma, Socket.io, AWS EC2, AWS VPC, AWS CodePipeline

      • Database 설계 및 서버의 전체 API 개발

      • 사진 조회 시 FE 개발 편의성을 고려, HATEOS 형식으로 개발

      • Socket.io를 활용한 채팅 구현

• Javascript의 기초, React.js 기반 프로젝트 및 기초 BE개념 강의 진행

• 만족도 조사 결과 “강사의 소통 능력” 및 “강의 내용 구성 및 능력” 에 대한 높은 평가

• 100% 수료 및 추가 강의 제안

• 정부 지원 사업

• 옥상 공간 특화 대여 서비스로 호스트가 직접 옥상 공간을 등록하면 일반 사용자가 예약 후 사용하며, 자체적으로 큐레이션 등의 서비스 제공

• Database 설계 및 서버 전체 API 개발

• 비즈니스 로직과 무관한 알람 기능은 Event Emitter를 사용해 비즈니스 로직과 분리

• FE측에서 결제 파라미터 생성 시 여러번의 서버 요청이 발생하여 파라미터를 생성하는 API를 추가하여 서버 요청을 1회로 최소화

• 정부 지원 사업

• 아티스트가 작곡, 믹스마스터링 등의 상품 혹은 인력에 대한 서비스를 등록하고 구매할 수 있는 오픈 마켓 서비스

• Database 설계 및 서버 전체 API 개발

• Prisma에서 제공하지 않는 Transactional 데코레이터를 직접 구현하여 인터페이스 및 코드 가독성 개선

• RouterModule과 직접 제작한 RoleGuard를 통해 모듈 별 접근 권한 체크 및 API EndPoint 분리

• 출시 후 MAU 1.1천 이상, 신규 유저 120명, 게시물 100건 이상 등록

사용자 유치를 위한 이벤트성 MBTI 페이지 개발

담당 업무 : FE / BE 개발

사용 기술 : Koa, GraphQL, React, Typescript

• 각 문제의 정답을 계산하는 간단한 API 개발

• 기존 개발자 유형 찾기의 재기획에 참여하고 리뉴얼하여 사용자 약 20만명 달성

사진첩을 정리하고 QRCode를 통해 공유하는 서비스

담당 업무 : BE 개발

사용 기술 : Express, Typescript, Prisma, Socket.io, AWS EC2, AWS VPC, AWS CodePipeline

• 소셜 로그인, 사용자 초대, QrCode 제작, 사진 저장 및 폴더 생성 기능 등 서버의 A-Z 담당

• 사진 조회 시 FE 개발 편의성을 위한 Response를 HATEOS 형식으로 변환할 수 있는 함수 개발

• 사내 라이브러리를 사용한 Swagger Document 생성 자동화

• Socket.io를 활용한 채팅 기능 구현

• 채팅 기능 사용 시 PM2를 사용해 클러스터로 여러 인스턴스 실행 시 클라이언트 세션 공유가 불가능하여 세션을 동기화 하고 Event Broadcast가 가능하도록 In-memory Adapter에서 Redis를 Adapter로 등록

서비스 내 텍스트 에디터 개발

담당 업무 : FE 개발

사용 기술 : Vanilla Javascript, Sun Editor

• 에디터 개발인 만큼 기능의 자율성을 구현하기 위해 Vanilla Javascript를 통해 개발

• Sun Editor에서 지원하지 않는 커스텀 기능 (드래그 앤 드롭) 개발

• DOM API를 사용한 텍스트 편집 기능 구현

• canvas를 통해 클릭한 좌표에 위치한 이미지의 RGB를 HEX Code로 변환하는 함수 제작

의사, 약사와 사용자를 매칭하는 서비스

담당 업무 : PM, BE 개발

사용 기술 : Express, Typescript, Prisma, Socket.io

• 실시간 통신, 주문 접수 및 진료 기능 등 서버의 A-Z 담당

• 유저 권한을 체크할 수 있는 순수 함수로 개발된 Middleware 개발

• 각 API 를 함수 단위로 개발하고 이를 Swagger에 반영하기 위해 사내 라이브러리 사용

• Socket에 접속한 유저를 파악하기 위해 clientId와 roomId를 저장하고 있는 Class 제작, createRoom joinRoom 등의 메소드 구현

• 대부분의 Database Table이 Soft Delete로 구현되어야 하는 기획을 반영하기 위해 Prisma Middleware를 통해 delete문을 update문으로 변경

0카오 계열사 게임 웹앱 개발

담당 업무 : FE 개발

사용 기술 : React, Typescript, React Query, Recoil

• 캐릭터 설정과 관련된 페이지 개발

• Webview로 사용된 React 화면 개발을 위해 useWebView라는 Custom Hook을 제작하여 앱과 통신할 수 있는 기능 제작

• Unity와 공존하는 화면에서 드래그 등의 이벤트로 지연이 발생하여 debounce 및 throttle을 활용하여 응답 시간 최적화

• Pagination과 Infinite Scroll을 사용하는 React Query의 useInfiniteQuery의 select 및 getNextPageParam 파라미터를 통일화할 수 있는 함수를 개발

• 로그인 되어있지 않은 Authorization이 필요한 API를 여러번 사용할 경우 401 에러가 여러 API에서 동시 다발적으로 발생하는 API 요청 낭비가 발생하여 PromiseHolder Class를 제작, 현재 요청 중인 API 존재 여부를 파악하여 401 에러 혹은 로그인으로 인한 에러 반환 시 진행 중인 API가 있다면 다른 API는 요청하지 않도록 구현

• 출시 후 앱스토어 1위 달성

수소차 충전소 앱 서비스 전반 리뉴얼

담당 업무 : PM, BE 개발

사용 기술 : Express, Typescript, Sequelize, MySQL

• Database 설계, API 개발, 결제 연동 등 서버 개발의 A-Z 담당

• 레거시 ERD에서 정규화를 진행한 ERD 제작 및 통계 데이터 조회 최적화를 위한 테이블 생성으로 API 응답시간 절반 이하 단축

• 알람 생성 기능 사용 중 node-schedule은 콜백 함수로 동작하기 때문에 이를 Promise 단위로 사용하기 위한 순수 함수 제작

• OOP 기반 서버 설계 : ExtendableDto, RouterController 등의 상위 Class를 제작하여 이를 상속받는 Class를 대상으로 Swagger 문서 및 Router 등록 자동화

• 완성도 있는 프로젝트 진행 결과 추가 계약 요청을 받음

• 베트남, 필리핀 개발자들과 소통하기 위해 시차에 맞게 프로젝트 진행

옥상 공간 특화 대여 서비스

담당 업무 : BE 개발

구성 인원 : 기획 2명, FE 1명, BE 1명, 디자인 1명

사용 기술 : Nest.js, Typescript, Prisma, AWS EC2, VPC, CodePipeline

• 회원가입, 호스트 등록, 공간 등록, 결제 모듈 등 서버의 A-Z 개발

• 결제 파라미터 생성 시 FE 측에서 여러번의 API를 호출해야 하는 문제가 발생하여 파라미터를 생성할 수 있는 API 개발로 통신 비용 및 시간 최소화

• 특정 API 실행 이후 Next.js의 Revalidate API를 사용할 수 있는 AOP Decorator 제작

• 비즈니스 로직과 관련이 없는 FCM 알람, 예약 알람과 같은 알람 기능은 EventEmitter를 사용해 Event Name으로 구분지어 비즈니스 로직과 분리

• AWS EC2, VPC, CodePipeline, Auto Scaling을 통한 Blue-Green 무중단 배포 구축

• 홈 화면에서 보여줘야하는 컴포넌트의 순서를 관리자가 변경할 수 있는 유연성을 부여하기 위해 ERD 수정

• 단순 데이터 형식 변환 혹은 if문을 통한 데이터 타입 분류와 같은 기능은 순수 함수로 구현하여 반복되는 코드 제거

• 데이터를 엑셀로 다운받는 기능의 경우 매번 Header와 Column을 형식에 맞게 변환해야하는 불편함이 존재하여 Excel Provider를 구현하여 type에 맞는 파라미터 입력 시 자동으로 데이터를 파싱할 수 있는 기능 구현

• Jwt를 체크하는 Guard를 제작하는 과정에서 요청의 Jwt를 분리하는 메소드를 통일하기 위해 BaseJwtGuard를 제작하고 protected 메소드를 통해 하위 Class가 이를 상속받아 사용할 수 있도록 제작

• Jwt를 decode 후 유저를 조회하는 횟수가 기존에는 2회 이상 발생하였으나, API 요청 시 조회된 유저 정보를 Request 객체에 삽입 후 ReqUser 데코레이터를 제작하여 필요 시 사용해 불필요한 조회 최소화

아티스트의 오픈 마켓 서비스

기간 : 2024.01 ~

담당 업무 : BE 개발

구성 인원 : FE 및 디자인 1명, BE 1명, 기획 1명

링크 : https://pa1ette.com/

사용 기술 : Nest.js, Typescript, Socket.io, Prisma, AWS EC2, VPC, CodePipeline

• 회원가입, 아티스트 등록, 서비스 등록, 결제 등 서버의 A-Z 개발

• AWS EC2, VPC, CodePipeline, Auto Scaling을 통한 Blue-Green 무중단 배포 구축

• 대용량 파일 업로드의 경우 S3의 Multipart Upload 기능 사용

• 특정 API 실행 이후 Next.js의 Revalidate API를 사용할 수 있는 AOP Decorator 제작

• nestjs/swagger로 명세가 불편한 Socket 용 개발 명세서를 위해 DTO 및 요청과 응답을 정형화 할 수 있는 Compodoc 용 Decorator와 OnModuleInit을 interface를 구현한 등록된 Decorator의 데이터를 마크다운으로 파싱하는 Provider 개발

• Primsa에는 Transactional 데코레이터가 존재하지 않아 코드 가독성을 해치는 불편함이 발생. 따라서 AOP Decorator와 nestjs-cls를 통해 요청 세션 마다 Transaction 사용 여부를 확인하고 적용할 수 있는 Transactional 데코레이터를 생성하여 개발 생산성을 높이고 비즈니스 로직에만 집중할 수 있도록 구현

• Module을 도메인 별로 Controller, Service, Repository 구조로 설계하여 순환 참조 오류 예방

• Request Query 및 Body에 대응하는 DTO에 Prisma에 맞는 형식으로 변환하는 메소드를 만들어 Service 단에서 요청을 Prisma Query로 파싱하는 코드 분리

• 외부 서비스의 경우 Module로 분리하여 메소드의 단일 책임 원칙 준수

• 정형화된 Error Response를 위해 ErrorCode<T>의 타입을 정의하여 도메인 단위로 사용, CustomException Class를 구현하여 통일성 있는 에러 형식 제공

• 서비스에서 관리가 필요한 로그의 경우 S3에 업로드할 수 있도록 Nest Application에 적용

• RouterModule과 직접 제작한 RoleGuard 데코레이터를 통해 권한 별 API EndPoint 분리 및 접근 권한 체크

• @WebSocketGateway를 통해 Socket용 Gateway를 제작하였으며, WebSocket의 경우 기존의 Filter와 일부 적용방법이 달라 WebSocket용 Guard와 Filter를 제작, 특히 Filter의 경우 FrontEnd에서 한 곳에서 에러 메세지를 확인할 수 있도록 emit Event Name을 통일

• 채팅 메세지의 경우 템플릿에 따라 메세지를 제작해야하는 번거러움이 있어 ChatMessageConverter를 제작해 Interface 통일

• 다른 Provider에서 Socket 과 Redis 객체를 사용하기 위해 SocketProvider 제작

nestjs 에서 필요한 Swagger, Social 로그인 등의 기능이 있는 라이브러리

링크 : https://www.npmjs.com/package/kyoongdev-nestjs

• @nestjs/swagger로 DTO를 명시할 때 Validation을 하기 위해서는 각각 데코레이터를 추가로 사용해야 하는 불편함이 있어 class-validator와 class-transformer를 결합한 형태의 데코레이터를 제작해 자동으로 Validation이 가능하도록 제작

• Prisma로 페이지네이션을 구현할 때 Request에서 Paging 정보를 뽑을 수 있는 @Paging parameter decorator 및 FE 측에서 보내는 Paging 정보를 ORM에 맞게 사용하기 위한 PagingDTO class와 조회 결과를 정형화 하기 위한 PaginationDTO class 구현

• 소셜 로그인의 경우 각 서비스 마다 사용 방식이 조금씩 달라 적용 시마다 오랜 시간이 걸리는 문제가 있어 Dynamic Module인 SocialModule을 제작하여 각 서비스에 필요한 key 값만 전달하면 공통된 Interface를 통해 바로 로그인 로직에 적용할 수 있도록 제작

• 서버 개발에 필요한 기타 기능들 (jwt, error 등) 추가

• 물건을 픽업하는 과정에서 발생하는 불필요한 동선을 최소화 하기 위해 엑셀을 동기화하여 PWA로 직원이 확인 가능한 웹 제작

• Google Sheet를 연동할 수 있는 함수와 웹에서 사용 가능하도록 불러온 데이터를 파싱할 수 있는 함수 제작

• React Query의 stale time을 통해 refresh 되는 시간을 조정하여 무료 요금제 사용 시 분당 최대 60번까지 사용 가능한 불편함 개선