Contact
📞 010-5604-0978
📨 [email protected]
Channel
🖥️ Github : https://github.com/sangminlee98
📕 Blog : https://velog.io/@tkdals0978
Summary
React.js와 Next.js를 사용해 반응형 웹 클라이언트를 개발할 수 있으며, Docker를 이용하여 컨테이너 빌드와 클라우드에 서비스를 배포할 수 있습니다.
TypeScript의 강력한 타입시스템을 활용하여 개발하는 것을 좋아하고 프로젝트 리더와 부트캠프 멘토를 진행한 경험이 있어 결단력과 리더쉽이 있습니다.
End-to-End 프로젝트를 여러 번 경험하여 개발의 전 과정을 이해했으며 백엔드, 디자이너, 데브옵스와의 커뮤니케이션에 능숙한 프론트엔드 개발자입니다.
Skills
-
Language
TypeScript JavaScript Java HTML CSS
-
DevOps
Docker AWS EC2 AWS S3 Vercel GithubActions NGinX
-
Framework/Library
ReactJS NextJS
Redux Recoil Zustand ReactQuery
Sass Styled Components
Vite Webpack Babel
Jest React Testing Library Storybook Sentry ESLint Prettier
Experience
▪️ 듀얼라이프 커뮤니티 플랫폼 주말내집
Position: Frontend, DevOps
Github
**https://github.com/ODOICHON/frontend**
사이트
https://duaily.net
<aside>
🛠 [담당한 기술스택]
| Frontend |
React TypeScript Vite React Query Zustand Sass React Quill MSW React Hook Form |
| DevOps |
NGinX AWS EC2 GithubActions AWS Code-Deploy |
| </aside> |
|
Contribution
- 클라우드 서비스 배포 및 CD 적용
- GithubActions를 사용하여 프론트엔드 CD 파이프라인을 구축했습니다.
- AWS Code-Deploy를 통해 프론트엔드 프로젝트를 AWS EC2 인스턴스 서버에 배포하는 workflows 코드를 작성했습니다.
- 백오피스 페이지인 Vue.js 프로젝트를 메인 프로덕트와 동일한 도메인에 배포하기 위해 NGinX에 sub_filter를 적용했습니다.
- 자유, 소개, 홍보 등 카테고리별 게시판 서비스 개발
- 텍스트 에디터를 사용하기 위해 사진이나 폰트 설정을 자유롭게 할 수 있는 React-Quill을 이용해 개발했습니다.
- base64 이미지를 URL로 변환하기 위해 S3 업로드 후 src속성값을 URL로 대체하는 로직을 개발했습니다.
- Lambda Edge를 사용한 On The Fly 방식의 이미지 리사이징 및 캐싱을 적용했습니다.
- 게시글에 페이지네이션을 적용하고 다음 페이지를 로딩없이 보여줄 수 있도록 페이지 prefetching을 구현했습니다.
- 게시글 좋아요 버튼은 사용자가 즉각적으로 응답이 오는 것처럼 적용하기 위해 Optimistic UI를 적용했습니다.
- 로그인, 회원가입 및 서비스 인증 개발
- React-Hook-Form 라이브러리를 사용하여 중복 검사, 전화번호 인증 등 다양한 validation을 관리했습니다.
- Access Token은 유효기간을 짧게두어 zustand-persist를 통해 로컬스토리지로, Refresh Token은 XSS 공격으로 부터 안전하게 관리하기 위해 HttpOnly 쿠키로 관리했습니다.
- 성능 개선 및 UX 향상
- Code Spliting을 사용해 라우트별로 파일을 나누어 트래픽과 로딩 속도 개선하였습니다.
- 모바일, 태블릿, 데스크탑 등 화면 사이즈에 맞는 반응형 UI를 개발했습니다.
- Throttle를 사용하여 뷰포트 너비 변화에 따른 무분별한 useEffect 사용을 방지했습니다.