미리보기
- 직업
- 프론트엔드 개발자
- 이름
- 장경찬
- 간단소개
- 생년월일: 1998. 05. 16. 가치 있는 프로덕트를 만드는 데 진심입니다. 서비스를 어떻게 차별화할지 끊임없이 고민합니다.
기술 스택
- 기술 스택
- React
- React Native
- TypeScript
- GraphQL
- Next.js
- Node.js
- JIRA
경력
- 회사명
- 푸드노트서비스
- 직책 • 부서
- 사원 • 개발팀
- 근무 기간 (근무 형태)
- 2022.11. - 재직 중
- (2년 | 정규직)
- 담당 업무
F&B 외식업계의 디지털화를 선도하는 푸드노트서비스에서 프론트엔드 개발 및 일부 백엔드 개발을 담당하고 있습니다.
프론트: React.js, React-Native, Next.js, Typescript를 사용했습니다.
백엔드: Node.js, GraphQL, Prisma, MySQL을 사용했습니다.
프로젝트
- 프로젝트명
- 프차 앱 대시보드 GraphQL 서버 개발*
- 소속/기관명
- 푸드노트서비스
- 프로젝트 기간
- 2024.05. - 2024.07.
- (3개월)
- 프로젝트 설명
GraphQL의 장점과 단점에 대한 이해를 바탕으로 상황에 맞는 적절한 Schema를 설계
Schema에 따라 Prisma ORM 또는 Raw SQL을 통해 resolver 구현
Apollo Sandbox와 Type Generation을 통해 효율적으로 프론트엔드와 백엔드간 커뮤니케이션 개선
GraphQL을 활용하여 프론트엔드와의 효율적으로 커뮤니케이션 비용을 감소, 개발기간 단축
Node.js 환경에서 Prisma ORM 활용
Description
장부대장 프차 서비스의 여러가지 기능을 모바일 버전에서 한 눈에 확인할 수 있는 대시보드 기능입니다.
백엔드 리소스 부족으로 GrapQL을 적극적으로 제안했고 직접 서버개발을 하여 도입했습니다.
Experience
Tech Stack
GrqphQL
Apollo Server
Node.js
Prisma
- 프로젝트명
- 프차 상권분석*
- 소속/기관명
- 푸드노트서비스
- 프로젝트 기간
- 2023.12. - 2024.05.
- (6개월)
- 프로젝트 설명
Naver Map 라이브러리의 거의 모든 기능 활용
Marker, InfoWindow, Polygon, StreetView, Polyline, Clustering, Geolocation
지도 서비스가 메인 기능이므로 렌더링 최적화 고도화
지도에 표시되는 수많은 DOM 요소 처리
거리측정 및 선택한 반경내의 요소 표시, 다각형 면적 측정 등의 기능 개발
Description
장부대장 프차의 유료서비스인 상권 분석 서비스입니다. 모든 프론트엔드 기능을 단독 개발하였습니다.
프로젝트의 이해도는 개발자가 제일 잘 안다고 생각하여 직접 사용자를 위한 가이드문서를 GitBook으로 제작했습니다.
행정구역별 지역의 매출 및 세대수, 요일/업종별 매출, 생활인구, 학생 수, 학원 수 등의 상권데이터를 보여줍니다.
Experience
Tech Stack
React
Typescript
Next.js
- 프로젝트명
- 장부대장 앱
- 소속/기관명
- 푸드노트서비스
- 프로젝트 기간
- 2023.10. - 2023.12.
- (3개월)
- 프로젝트 설명
React Native환경에서 Naver map 라이브러리 커스텀 모듈화
React Query를 활용하여 서버 상태 관리 효율화
배달의민족의 깃발광고, 맛집랭킹, 매출분포 지도 화면 개발
Javascript에서 Typescript로 마이그레이션
지도 화면에서 blur 애니메이션 추가하여 로딩처리 개선
더 나은 UX 제안하여 BottomSheet 화면에 따라 지도 사이즈 조절 적용
Description
소상공인 사장님들의 배달 매출관리 앱인 장부대장의 리뉴얼 프로젝트에 참여했습니다.
지도 화면인 매장의 깃발광고, 맞집랭킹 순위, 매출분포 화면을 담당 했습니다.
Experience
Tech Stack
React native
Typescript
React Query
- 프로젝트명
- 장부대장 프차 SNS 트렌드분석
- 소속/기관명
- 푸드노트서비스
- 프로젝트 기간
- 2023.04. - 2023.07.
- (4개월)
- 프로젝트 설명
대용량 데이터 시각화
다양한 차트 활용(Pie, Line, Doughnut, Bar etc)
데이터 표 형식의 공통 컴포넌트 개발
여러개의 팝업 렌더링 처리
검색 필터링(단어 포함, 제외, 일치, 시작) 프론트에서 처리
SWR을 활용한 서버 상태 관리
Description
장부대장 프차의 유료서비스인 SNS 트렌드분석 서비스입니다.
모든 프론트엔드 기능을 단독 개발하였습니다.
브랜드 검색량 및 선택 키워드 검색량 통계를 제공합니다.
Experience
Tech Stack
Web: React
Typescript
Next.js
D3
Chart.js
- 프로젝트명
- 장부대장 프차
- 소속/기관명
- 푸드노트서비스
- 프로젝트 기간
- 2022.11. - 2023.03.
- (5개월)
- 프로젝트 설명
Naver map을 사용하여 지도 화면 개발
지도기반 사용자 interaction 개발
맵 렌더링 최적화 - 마커 개수에 따른 렌더링 효율화
가맹점 위치 및 정보 표시 (Marker, InfoWindow 활용)
지도 밖에 있는 마커는 보이지 않도록 최적화 하여 맵 렌더링 개선
마커 클러스터링 처리
리뷰 확인 및 답글달기 화면, 리뷰 대시보드 화면 개발
차트를 활용한 데이터 시각화
여러개의 form 입력 처리 및 필터링 기능
Sentry 에러 로깅
지도에서 발생할 수 있는 다양한 사용자 interaction 에러를 추적 및 관리했습니다.
Description
F&B 외식 프랜차이즈 관리 소프트웨어 장부대장 프차
지도 화면과 리뷰 관리 및 답글 달기 기능을 담당했습니다.
Experience
Tech Stack
Web: React
Typescript
Next.js
Naver Map
자기소개
- 자기소개
주어진 태스크 뿐만 아니라 스스로 생각한 문제를 정의하고 해결하는 것을 잘 합니다.
도전적이며 탐구적입니다. 새로운 기술에 흐름을 항상 추적합니다.
사용자 입장에서 생각합니다. 개발에 여러움 보다는 UX 개선에 더 관심이 많습니다.
끈질기게 문제 해결에 매달립니다. 못푸는 문제는 없다고 생각합니다. 어떻게 풀 수 있을지가 관건입니다.
Figma, Zeplin와 같은 UI 툴에 익숙합니다.
Jira, Cofluence, Notion 등의 커뮤니케이션 도구를 잘 활용할 수 있습니다.
GitBook과 같은 문서화 도구를 사용하여 기록하는 것을 좋아합니다.
어려운 것을 단순화하여 표현하는 것을 중요하게 생각합니다.
React 사용에 어려움이 없고 상황에 따른 적절한 상태관리 및 최적화를 할 수 있습니다.
타입 안정성을 위해 정적 언어인 Typescript를 즐겨 사용합니다.
CSR, SSR의 차이를 이해하고 환경에 맞게 사용합니다. Next.js의 업데이트를 지속해서 체크합니다.
DB 테이블 및 ERD를 보고 데이터의 관계를 이해할 수 있습니다.
쿼리를 통해 원하는 데이터를 찾아낼 수 있습니다.
GraphQL 백엔드 서버 구축 경험이 있으며 GraphQL에 진심입니다.
Mindset
Communication
Frontend
Backend
포트폴리오
자격증
- 자격증명
- 정보처리기사
- 점수/급 | 발급 기관
- 한국산업인력공단
- 취득월
- 2024.06
- 자격증명
- SQL Developer(SQLD)
- 점수/급 | 발급 기관
- 한국데이터산업진흥원
- 취득월
- 2021.10
- 자격증명
- ADsP(데이터분석 준전문가)
- 점수/급 | 발급 기관
- 한국데이터산업진흥원
- 취득월
- 2021.06
교육
- 소속/기관
- 인하대학교
- 종류 | 전공명/전공계열
- 대학교(학사) | 체육교육과
- 재학 기간 (재학 상태)
- 2018.03. - 2022.03. (졸업)
- 소속/기관
- 패스트캠퍼스 프론트엔드 부트캠프
- 종류 | 전공명/전공계열
- 사설 교육 | 프론트엔드
- 재학 기간 (재학 상태)
- 2022.04. - 2022.10.
대외활동
- 활동명
- 2023 JTBC 풀 마라톤(42.195km)
- 소속/기관
- 활동 연도
- 2023
- 활동 상세 설명
🏅완주 기록: 3시간 48분 54초