About Me

코드로 가치를 만드는 장찬희입니다.

서비스는 단순한 코드의 조합이 아니라, 사용자에게 가치를 전달하는 수단이라고 생각합니다.
두 번의 프리랜서 프로젝트를 통해 비즈니스 요구사항을 분석하고 UI로 구현하는 과정을 익혔으며, React 기반의 웹 개발과 API 연동, 상태 관리 등의 경험을 쌓았습니다.
개발자로서 코드를 통해 실질적인 가치를 제공하는 방법을 고민하며, 협업 과정에서는 원활한 커뮤니케이션을 통해 효율적인 개발을 지향하고있습니다.

email

chanhee.frontend@gmail.com

github

바로 가기

blog

바로 가기

Skills

javascript

typescript

html

css

react

styled-components

axios

Education

2022.12

2023.06

코드스테이츠 프론트엔드 과정

Javascript 기반 프론트엔드 과정
React 위주의 학습
두 번의 팀프로젝트 진행

scraping Admin Page

팀 프로젝트

vite
react
styled-components
axios
sweetalert2
react-icons
react-cookie

Introduction

중고 자재 경매 플랫폼인 scraping의 어드민 페이지를 제작했습니다.

회원의 정보를 열람하거나 이용정리를 시킬 수 있습니다.
경매 정보를 열람하거나 삭제할 수 있습니다.
서비스의 배너를 수정할 수 있습니다.
회원들에게 푸시메시지를 전송할 수 있습니다.

담당 기능

페이지 디자인
cryptojs를 통한 비밀번호 암호화
drag & drop을 통한 복수의 이미지 전송
clipbord 복사
이미지 캐러셀 슬라이더

fitrace Admin Page

팀 프로젝트

create-react-app
react-router
styled-components
axios
date-fns
react-datepicker
react-chartjs-2
react-icons
react-cookie

Introduction

저의 첫 외주 작업 프로젝트로 운동 관리 애플리케이션의 관리자 페이지를 담당했습니다.

회원의 정보를 열람할 수 있습니다.
특정일자 혹은 기간동안의 서비스 이용량을 확인할 수 있습니다.
회원목록을 엑셀파일로 다운로드 할 수 있습니다.
회원들에게 푸시메시지를 전송할 수 있습니다.

담당 기능

페이지 디자인
cryptojs를 통한 비밀번호 암호화
react-datepicker를 통한 날짜 선택 및 표시
react-chartjs-2를 통해 통계 데이터를 차트로 표현
접속 기록을 달력 모달로 표시
서버로 부터 받은 excel 파일 다운로드 기능

Cuther: 귀여운 날씨

개인 프로젝트

react native
typescript
lottie files
react navigation
react native config
axios

Introduction

공공데이터 포털의 기상청 api를 통해 제작한 날씨앱입니다.

현재 위치의 실시간 날씨 정보를 확인할 수 있습니다.
움직이는 캐릭터를 통해 적절한 외출복을 가늠할 수 있습니다.
시간별 날씨 정보를 확인할 수 있습니다.
주간 날씨 정보를 확인할 수 있습니다.
기상 특보, 예비 특보 정보를 확인할 수 있습니다.

URL :

github

주요 기능

adobe illustrator, adobe after effects를 통한 캐릭터 및 에니메이션 제작
Figma를 통한 스크린 디자인 및 아이콘 제작
lottie files를 통한 애니메이션 적용
react native config를 통한 환경 설정
react navigation를 통한 페이지 라우팅
tanstack-query를 통한 데이터 캐싱 및 가공

주요 개발 경험

Cuther - 날씨 정보 애플리케이션

프로젝트 개요

React Native와 TypeScript를 활용하여 개발한 날씨 정보 애플리케이션입니다. 사용자의 현재 위치를 기반으로 실시간 날씨 정보, 특보 등 다양한 날씨 관련 정보와 더불어 Lottie 애니메이션을 통해 체감기온별 캐릭터를 렌더링해 권장되는 옷차림을 제공하고 있습니다.

기술 스택

React Native: 크로스 플랫폼 모바일 앱 개발
TypeScript: 타입 안정성과 개발 생산성 향상
React Navigation: 화면 전환 및 네비게이션 관리
React Native Config: 환경 변수 관리
Axios: HTTP 클라이언트
Lottie-react-native: 애니메이션 렌더링

주요 기능

1. 위치 기반 날씨 정보

React Native의 Geolocation service와 Open API를 활용한 현재 위치 기반 날씨 정보 제공
역지오코딩을 통한 위치 정보 변환
체감기온에 따른 Lottie 애니메이션 캐릭터 표시
체감기온별 권장 옷차림 정보 제공

2. 특보 정보 시스템

실시간 특보 정보 수신 및 표시
사용자 위치 기반 특보 알림

기술적 구현

1. 환경 변수 관리

react-native-config를 활용한 API 키 및 환경 변수 관리

2. API 통신

Axios를 활용한 HTTP 통신
에러 핸들링 및 타임아웃 처리
API 응답 데이터 매핑 및 가공

3. UI/UX

Lottie 애니메이션을 활용한 동적 캐릭터 표시
체감기온에 따른 실시간 캐릭터 변경
직관적인 날씨 정보 시각화

프로젝트 구조

src/
├── app/          # 기능별로 묶이지 않는 모듈
├── assets/       # 이미지 관련 파일
├── features/          # 기능별 모듈
│   ├── weather/      # 날씨 관련 기능
│   │   ├── api/      # api 호출 모음
│   │   ├── lib/      # util 함수 모음
│   │   ├── ui/       # UI 컴포넌트
│   │   └── model/    # dtoMapper 등 데이터 관리 모음
│   ├── specialReport/  # 특보 관련 기능
│   └── geoLocation/    # 위치 관련 기능
├── pages/       # 페이지 컴포넌트
├── widgets/     # section 컴포넌트
└── entities/    # 기능별 entity 선언

실행 영상

알딸딸: 나만의 칵테일 레시피

팀 프로젝트

typescript
react-query
react-router
styled-components
axios
redux-toolkit
create-react-app
react-icons

Introduction

칵테일 레시피를 공유하고 게시할 수 있는 서비스로, 일반적으로 알려진 정규 칵테일 레시피와 이용자들이 공유한 특별한 레시피를 접할 수 있는 커뮤니티 서비스입니다. 처음으로 아이디어를 모아 진행한 프로젝트로 프론트엔드 팀과 백엔드 팀으로 구성되어 있습니다.

칵테일 레시피에 대한 정보와 이미지를 게시할 수 있습니다.
회원만의 닉네임과 프로필 이미지를 수정할 수 있습니다.
마음에 드는 레시피를 즐겨찾기하여, 북마크 목록에서 조회할 수 있습니다.
검색을 통해 특정 칵테일의 레시피를 검색할 수 있습니다.

URL :

github blog

담당 기능

레시피 목록 조회, 검색, 삭제 및 찜하기 기능 구현
my page 나만의 레시피 목록 ui 구현
my page 찜 목록 ui 구현
error boundary 적용
react router를 통한 페이지 라우팅 및 Outlet을 통한 페이지 레이아웃 적용
레시피 카드 hover 애니메이션, 네비게이션 바 등장 애니메이션
s3를 통한 정적 배포
GitHub 이슈와, 프로젝트 칸반을 통한 프론트엔드의 전체적인 스케줄 관리
반응형 디자인

주요 개발 경험

레시피 추가 페이지를 구현하던 도중 생각하지 못했던 예외처리를 위해 api를 새롭게 만들지를 고민하다가 기존에 존재하면 레시피 업로드 api와 이미지 업로드 api, 레시피 삭제 api를 활용해서 구현하기로 결정하였습니다.

레시피 업로드 api 요청후 response body로 해당 레시피의 id 획득
이미지 업로드 api와 id를 통해 레시피의 이미지를 추가
이미지 업로드 실패 시 id를 통해 생성된 레시피 삭제

리소스 측면에서는 api를 수정하거나 추가하는 것이 더 효율적이나, 당시의 상황에서 구현하기에는 가장 괜찮은 방법이었다고 생각합니다. 또한 예외처리를 위한 단계적인 계획을 생각해 보는 경험이었습니다.

밀모리: 식사의 추억

팀 프로젝트

next js
tailwindcss
return-fetch
react-chartjs-2
react-icons
js-cookie
sweetalert2
zustand
uuid

Introduction

식단을 저장하고, 관리할 수 있는 서비스입니다. 섭취한 식단을 저장하고 활동 칼로리를 기반으로 적정량의 칼로리를 섭취했는지 여부와 bmi를 기준으로 비만도를 측정할 수 있습니다.

섭취한 식단을 등록, 수정, 삭제할 수 있습니다.
음식을 검색해 탄수화물, 단백질, 지방의 함유량을 확인할 수 있습니다.
직접 음식과 칼로리 정보를 입력해 식단을 저장할 수도 있습니다.
달력을 통해 통계 데이터 혹은 식단 저장 일자를 선택할 수 있습니다.
통계 데이터와 캐릭터를 통해서 적정량의 칼로리를 섭취했는지 확인할 수 있습니다.
다크모드와 라이트 모드 등 화면의 테마를 선택할 수 있습니다.
사용자의 정보(키, 몸무게 등)을 수정할 수 있습니다.

URL :

github notion

담당 기능

날짜 선택 달력 구현
jwt api httpOnly secure cookie 핸들링
유저 정보 web crypto api AES-GCM 암호화
다크모드
식단 검색
식단 추가, 수정, 삭제
통계 데이터 차트 표현
반응형 디자인

주요 개발 경험

kakao login시에 백엔드로부터 오는 response에 담긴 jwt와 유저 정보를 관리하기 위해서 next js의 api router를 활용해 httpOnly secure cookie로 변환하고 storage에 저장될 값들을 암호화 하여 관리하였습니다.

카카로 로그인으로 code를 받아 자체 api로 요청을 보낸 후 자체 api에서 백엔드로 로그인 요청후 받는 유저의 정보는 response body에 담고 토큰은 cookie로 저장해서 클라이언트에 전달하는 방식으로 구현했습니다.

이 과정에서 refeshToken은 httpOnly, secure 옵션을 적용해 클라이언트에서 javascript로 접근하지 못하도록 설정했습니다.

또한 accessToken 재발급등 인증 관련 요청을 자체 api에서 처리하도록 구현하여 클라이언트에서 refreshToken에 접근할 일이 없도록 설계했습니다.

body에 담겨오는 유저의 정보는 web crypto api를 통해서 AES-GCM 방식으로 암호화 하여 데이터 무결성을 확보하고, localStorage에 저장해 다른 페이지에서 사용할 수 있도록 구현했습니다.

장찬희 portfolio

개인 프로젝트

typescript
redux-toolkit
tailwind
next
react-icons
react-slick

Introduction

제가 만든 프로젝트들에 대한 포트폴리오입니다. 기존의 create-react-app 방식을 벗어나 이전부터 관심을 가지던 next js와 tailwind를 경험해보기 위해서 next, tailwind를 사용해 제작하였습니다.

칵테일 레시피에 대한 정보와 이미지를 게시할 수 있습니다.
회원만의 닉네임과 프로필 이미지를 수정할 수 있습니다.
마음에 드는 레시피를 즐겨찾기하여, 북마크 목록에서 조회할 수 있습니다.
검색을 통해 특정 칵테일의 레시피를 검색할 수 있습니다.

URL :

github blog

주요 기능

browser drag, resize
browser 최소화 및 최대화
browser 동작 시 z-index 업데이트
반응형 디자인