미리보기

• 코드잇 백엔드 부트캠프 과정 커리큘럼 검수

• 백엔드 프로젝트 예시 코드 작성

• 영양제 추천 서비스 IAM에서 영양상담사로 근무.

• 사용자 피드백 반영하여 서비스 개선 주도

• 개발자들과 함께 영양학적 지식과 IT 기술을 접목한 프로젝트 수행

소개 : '제한된 글자수'를 특징으로 하는 독후감 작성 및 공유 서비스

팀 구성 : FE 및 BE 1인, 디자이너 1인

FE 업무

• 컴포넌트가 서버 응답 형식에 의존하고 있어, 형식이 바뀔 때마다 관련 컴포넌트 전부 수정


➠ 어댑터 패턴 도입으로 컴포넌트-엔드포인트 간 의존성 분리


➠ 서버 응답 형식 변경 시 어댑터 훅만 수정하면 됨

• 백엔드 요청 코드가 여러 어댑터 훅으로 파편화 되어 동일한 로직이 중복되고 관리 복잡성 증가


➠ 레포지토리 패턴 도입으로 백엔드 요청 로직을 한 곳에서 관리


➠ 어댑터 훅은 레포지토리를 호출하는 역할로 단순화

• 알림이 도착하더라도, 사용자가 새로고침하거나 캐시가 무효화되기 전까지는 이를 확인할 수 없음


➠ websocket을 사용하여 알림이 도착할 때마다 리액트 쿼리 캐시를 조작


➠ 실시간으로 알림을 확인할 수 있는 사용자 경험을 제공

• 버튼과 링크에서 스타일 처리 로직이 동일한데, 서로 다른 컴포넌트로 관리되어 코드 중복 발생


➠ 고차 컴포넌트를 통해 공통된 스타일 로직을 추출하여 코드 중복 제거 및 유지보수성 향상

• 댓글 구조가 계층적으로 중첩되어 있어, 댓글 랜더링 로직에 코드 중복 및 유지보수의 어려움 발생


➠ 재귀 컴포넌트 패턴을 댓글과 대댓글을 하나의 컴포넌트로 처리하여 계층 구조를 효율적으로 관리

• 배포 프로세스가 수동으로 이루어져 있어, 반복적인 작업과 실수로 인한 오류 발생


➠ CI/CD 파이프라인을 구축하여 코드 변경 시 자동으로 빌드 및 배포가 이루어지도록 설정


➠ 배포 효율성을 높이고 오류를 최소화

BE 업무

• PostgreSQL 및 Prisma를 사용하여 데이터베이스 구축

• Swagger를 사용하여 REST API 엔드포인트에 대한 문서화

• Express에서 Nest.js로 마이그레이션

• REST API에서 GraphQL로 마이그레이션 진행

• Google 및 Kakao Oatuh 2.0을 사용한 소셜 로그인 구현

• AWS-SDK를 사용하여 백엔드에서 직접 이미지 제공

• Nest.js 미들웨어를 사용하여 엑세스 토큰 및 리프레시 토큰 관리


배포 주소 : https://onef.co.kr
레포지토리 주소 : https://github.com/onef-1984

소개 : 나만의 칸반 보드를 만들어 주제 별 칼럼으로 할 일을 분류 및 정리
인원 : FE 3인 / BE 1인 / 디자이너 1인

상세 역할 : 프로젝트 리딩 및 개발

• 개발 인원 중도 이탈로 인해 프로젝트 진행에 차질이 생기고, 남은 인원에게 과중한 업무가 부여됨


➠ 업무 재분배 및 우선순위 재조정을 통해 기간 내에 프로젝트 목표를 달성

• 할 일 목록이 많아질 수록 서버에서 가져오는 데이터가 많아 페이지 로딩 시간이 길어짐


➠ 페이지네이션 및 Intersection Observer를 활용하여 무한 스크롤 기능 구현


➠ 페이지 초기 진입 속도를 개선하고, 오버페칭 문제를 해결

• 각 input마다 필요한 로직을 개별적으로 작성해야 하여 코드 중복 및 유지보수의 어려움 발생


➠ 커스텀 훅으로 필요한 로직을 제공하게 함으로써 코드 중복을 줄임


➠ 이후 해당 아이디어를 확장하여 전반적인 form 관리를 위한 Sicilian 라이브러리를 개발

배포 주소 : https://taskify-ayden.vercel.app/
레포지토리 주소 : https://github.com/ayden94/taskify


소개 : 제어 컴포넌트 방식으로 form 상태를 관리
하는 라이브러리 (ver 2.2.12)

• 번들포비아 기준 최소 번들 크기 2.1kb로 다른 form 관리 라이브러리에 비해 최대 10배 가볍습니다.

• 제어할 입력 필드, 제어 방식, 검증 방식 등을 모두 컴포넌트 외부에서 관리하도록 하여 컴포넌트 내부에서 로직을 분리할 수 있습니다.

• 라이브러리가 제공하는 기본 검증 방식 외에도 사용자가 직접 검증 방식을 커스텀 할 수 있으며, 검증에 실패할 시 즉시 form submit을 중단하여 불필요한 서버 요청 및 휴먼 에러를 방지할 수 있습니다.

• SicilianProvider를 사용하면 input value가 변경될 때에도 불필요한 컴포넌트 리랜더링을 방지할 수 있습니다.

npm 주소 : https://www.npmjs.com/package/sicilian
레포지토리 주소 : https://github.com/ayden94/sicilian

소개 : 직관적인 전역 상태 관리 라이브러리 (ver 2.2.1)

• useState와 유사한 API를 제공하여 직관적이고 간편하게 전역 상태를 관리할 수 있습니다.

• 보일러플레이트 없이 바로 사용할 수 있어 빠르게 프로젝트에 적용 가능할 수 있습니다.

• 셀렉터 함수를 활용해 필요한 상태만 구독함으로써 불필요한 컴포넌트 리랜더링을 방지할 수 있습니다.

• 로컬 스토리지 등을 이용해 상태를 지속적으로 저장하고 복원할 수 있는 persist 기능을 제공하고 있습니다.

npm 주소 : https://www.npmjs.com/package/caro-kann
레포지토리 주소 : https://github.com/ayden94/caro-kann

소개 : 조건부 렌더링을 간결하게 처리하는 유틸리티 컴포넌트 라이브러리 (ver 0.0.5)

• utilinent는 리액트에서 자주 사용되는 조건부 렌더링 로직을 간편하고 재사용 가능한 컴포넌트로 추상화한 라이브러리입니다.

• 자주 사용되는 로직을 추상화한 Show, Map, Switch, Match, Mount 등의 컴포넌트를 제공하고 있습니다. 이를 사용하여 코드 중복을 줄이고 가독성을 높이며, 조건에 따른 UI 처리를 효율적으로 관리할 수 있도록 도와줍니다.

• 개발자가 직접 구현해야 할 반복적인 작업을 간소화하여 개발자들은 빠르게 조건부 렌더링을 구현하고, 코드 유지보수성을 높일 수 있습니다.

npm 주소 : https://www.npmjs.com/package/utilinent
레포지토리 주소 : https://github.com/ayden94/utilinent