미리보기

(8인/5주, 디자이너-백엔드 협업 프로젝트)
프론트엔드 5명, 백엔드 2명, 디자이너 1명이 협업하는 프로젝트로 프론트 구성원이 많아서 기획의 일을 많이 부담하고 PM의 역할도 겸했습니다. 개발자와 기획자, 디자이너 간의 관점 차이와 조율에 대해서 배운 프로젝트입니다. 개발자에게는 좋은 기능이, 프로젝트에는 우선되지 않을 수 있다는 점이 가장 크게 와닿고 있습니다.

담당

인증과 인가

• React-Hook-Form을 이용하여 필요한 인증 정보에 대한 에러UI 로직 통일.
  -> 일관된 코딩 패턴으로 코드 가독성 및 유지보수성 향상
• 퍼널 방식을 이용한 회원가입 구현.
• NextAuth.js를 이용하여 소셜 로그인을 구현.

타입 설계

• 에러 메시지, 페이지 타이틀 등 문자열을 상수로 관리하고, 유틸리티 타입을 이용해 타입으로 변환.
• 변환된 타입과 제네릭을 이용해서 컴포넌트 사용 시 Prop 자동완성 기능 추가.
  -> 휴먼에러로 인한 의도치 않은 렌더링 방지.

서비스 기획 및 MVP, 유저 flow

• 실제 유저들이 겪고 있는 문제들을 수집하고, 기술적인 해결법 고안
• Figma를 이용하여 기획안과 디자인 시안을 제작하여 팀원들과 공유.
  -> 회의 시간 감소(약 50%)

기술스택

고화질 이미지 및 미디어로 인해서 대기 시간이 발생할 수 있는 서비스이므로, 초기 진입속도 및 이미지 최적화 그리고 대기 시간과 관련된 UX를 기준으로 스택을 결정했습니다.

Next 14

• 이미지 최적화, SSR로 초기 진입 속도 향상.

Tailwind CSS

• css 번들링 사이즈 감소로 빠른 렌더링.

React 18

• 화면이 렌더링되는 시간 동안의 Suspense 도입.

(3인/3주, 디자인과 Rest API를 지원받아 진행한 프로젝트)
개발 인원이 적어서 협업 방식에 대해서 많은 고민을 했습니다. 생산성에 팀의 목표를 두고 팀의 특수한 상황을 고려해서, Vscode의 LiveShare 기능을 이용해서 실시간 협업을 진행하였습니다.

담당

REST API 관련 타입 설계

• 유틸리티 타입, 인덱싱, 제네릭을 이용한 타입 설계.
  -> 게시물 CRUD 과정, 데이터를 사용하는 컴포넌트에서 오류에 안전함. 개발자의 사용성 향상.

Custom Fetch 함수

• 번들링 사이즈를 줄이기 위해서 Axios 없이, 커스텀 Fetch 함수로 REST API 이용.
• 클래스 문법, 싱글톤 패턴을 이용해서 인스턴스에서 HTTP 메소드와 동일한 이름을 가진 메소드를 호출하는 형식으로 작성.
• REST API 타입 설계와 제네릭을 함께 사용하여 end point, body 데이터 등 함수 인자의 자동완성 기능 구현.
  -> 휴먼 에러 감소, 개발자 사용성 향상.

기술 스택

생산성을 위해서 팀원들 모두 학습한 기술, 러닝 커브가 적은 기술을 선정했습니다.

Next.js

• 프론트 개발에 필요한 설정 작업 단순화. (내장 라우팅 기능, 캐싱, 최적화 기능)
  -> 개발에 집중할 수 있는 환경 구축.

TypeScript

• 컴포넌트의 PropType을 리터럴 타입 단위까지 범위를 좁혀 오류 가능성을 줄임.
• 자동완성 기능으로 개발자 생산성 향상.

React-Query

• SSR, 무한스크롤을 지원하여 개발 편의성 향상.
• 일관된 코딩 패턴의 사용으로 개발 생산성 향상.

(4인/2주, 디자인과 Rest API를 지원받아 진행한 프로젝트)
처음으로 진행한 프로젝트로, 컴포넌트에 대해서 많이 고민했습니다. 공통 컴포넌트, 재사용 컴포넌트, 관심사 그리고 책임 등 여러 키워드들에 대해서 팀원들과 많이 이야기했던 프로젝트입니다.

담당

웹 에디터

• WYSIWYG 에디터 라이브러리들을 비교하여 프로젝트에 적합한 React-Quill로 구현.
• innerHTML 사용으로 인한 XSS 공격을 DOMpurify 라이브러리로 방어.

이미지 등록

• 유저의 파일을 입력받거나, 이미지 URL을 받는 2가지 방식으로 구현.
• 파일을 입력할 경우 imgur API를 활용하여 이미지 파일을 호스팅하고, url을 이용.

웹 접근성

• 키보드 접근성을 위해서 tabIndex, keyDown 핸들러함수(esc키, enter키 조작)를 추가.
• 마우스 사용자와 키보드 사용자의 동일한 UI를 위해, hover와 focus 이벤트를 함께 사용.
• 시멘틱 태그를 명확하게 사용.

기술 스택

React + Vite

• 빠른 런타임 속도로 개발 생산성 향상.

Styled-Component

• 간편한 동적 스타일링, nesting으로 개발 생산성 향상.

부동산 프로젝트 기획 및 수주 검토

• 사업성 분석을 통해서 분양 부동산 개발 시나리오 기획.
• 입찰 검토에 필요한 부동산 정보를 도식화하여 지도로 표현.
• 해당 지역의 평당가 동향, 거래 건수 등을 수치화하여 예상 시나리오에 대한 근거 마련.

부동산 사업 관리

• 매입한 부동산의 개발 인허가 서류 작성.
• 프로젝트의 일정 관리, 유관 부서간의 일정 조율.