프론트엔드 개발자

이경택

"언제나 협업할 준비가 되어 있습니다."

여러 프로젝트로 좋은 협업을 위해선 어떤 태도를 가져야 하는지, 어떤 협업 방식과 툴을 이용해야 하는지 이해와 숙련도를 쌓았습니다. 대화하는 것을 두려워하지 않으며 언제나 긍정,적극적인 태도로 임할 준비가 되어있습니다.

"실패보단 포기가 두렵습니다."

경험이 곧 성장이라고 생각합니다. 도전에 두려움이 없고 배움에도 언제나 열린 마음으로 임합니다. 한 번 맡은 일은 끝까지 포기하지 않고 끝내 제가 얻어가는 것을 만듭니다.

성실함

책임감

협업 지향

커뮤니케이션

적응력

원티드 프리온보딩 FE 챌린지 9월 강의 중에 약 15분정도의 시간을 부여받아 약 200명 정도의 수강생 앞에서 SPA, CSR, SSR 을 주제로 발표를 진행했습니다.발표를 위해 자료를 만드는 과정에서 정확한 정보 전달을 위해 노력했습니다.공식 문서와 공식 영상을 찾아보며 신뢰성 있는 정보를 바탕으로 발표 자료를 준비했습니다.발표를 준비하며 과거의 웹 페이지는 어떤 방식으로 동작했는지, 어떤 이유로 SPA가 등장했는지, CSR과 SSR의 차이점이 무엇이고 어떤 상황에서 사용해야 하는지 구체적으로 알게 되었습니다.

원티드 프리온보딩 FE 챌린지 내 SPA, CSR, SSR 발표

JLPT 일본어 능력 시험

정보처리기사

JAPANESE

원티드 발표.pdf

이경택-포트폴리오.pdf

https://github.com/ollehkt

<h3>Description</h3>영재 교육을 위한 교육 플랫폼의 어드민과 서비스의 일부 기능을 담당해 개발했습니다.<ul><li>회원 관리 페이지 / 문의 페이지 / 결제 관리 페이지 / 교재 관리 페이지 등 서비스 관리에 필요한 어드민 페이지 제작</li><li>서비스 페이지의 1:1 문의 등록 및 공지사항 페이지 제작</li></ul><h3>Experience</h3><ul><li>페이지 별 토스트 컴포넌트 - 최상단 하나의 토스트 컴포넌트로 리팩토링 토스트 사용하는 컴포넌트마다 토스트 컴포넌트를 매번 선언하도록 구현되어 있던 코드에서 최상단에서 선언 및 호출 시 id를 전달해 각각 다른 toast ui를 처리하도록 수정</li><li>사진 업로드 및 업로드 실패한 이미지 처리 기존에는 여러 개의 이미지를 올릴 때 실패한 이미지가 있으면 이 후 모든 요청이 실패되어 모든 이미지 업로드가 실패한 것 처럼 데이터 불균형이 일어났던 코드에서 <code>Promise.allSettled</code> 함수를 이용해 여러 개의 이미지 처리 및 각 이미지의 성공 실패 여부를 통해 업로드 실패한 이미지는 재시도 가능하게 처리해 UX 개선</li></ul><h3>Tech Stack</h3><code>React</code> <code>Redux-Toolkit</code>

영점일 프로젝트

<h3>RESULT</h3><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.foodiful.shop">푸디풀 배포 사이트</a><a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/davidktlee/foodiful-front">푸디풀 깃허브</a><h3>DESCRIPTION</h3>한식 디저트 판매 및 한식 디저트 수업을 위한 예약이 가능한 쇼핑몰 사이트를 개발했습니다.프론트엔드 전체와 백엔드 전체를 단독 개발하면서 전체적인 개발 프로세스에 대해 자세히 알 수 있었습니다.<ul><li>JWT를 이용한 로그인 기능</li><li>달력을 이용한 예약 기능</li><li>Portone 결제 시스템을 이용한 결제 기능</li><li>Naver SMS Api를 이용한 문자 인증 기능</li><li>상품 및 클래스 CRUD 기능</li><li>댓글 및 대댓글 기능</li></ul><h3>EXPERIENCE</h3>JWT를 이용한 로그인 기능 개발<ul><li>쿠키, 세션, jwt 토큰에 대한 이해를 바탕으로 로그인 기능 개발</li></ul>AWS의 S3스토리지, EC2 기능 사용<ul><li>S3 스토리지를 이용해 사진 저장</li><li>EC2를 이용해 프론트엔드, 백엔드 배포</li></ul>NestJS와 PostgreSQL을 이용한 백엔드 개발<ul><li>Type ORM인 prisma 도입</li><li>전체 DB 설계 및 API 개발</li></ul>Docker와 Github Action을 이용한 CI/CDNginx를 이용한 호스팅 처리 및 SSL 인증presigned url을 이용한 서버 부하 감소<ul><li>프론트에서 상품 추가 시 백엔드에 저장하지도 않는 무거운 이미지 파일을 전달해야 하는 단점을 발견해 백엔드 서버로 요청을 보내고 백엔드 서버에서 aws와 통신을 통해 업로드가 가능한 사진이라면 presigned url을 응답, 프론트에서 사진을 S3로 직접 업로드 하는 방식으로 구현 -&gt; 무거운 파일을 전달하지 않아도 됨으로써 업로드 시간 2000/ms에서 1500/ms로 25% 감소</li></ul>DB 조회 성능 개선<ul><li>전체 상품을 조회한 후 각 상품에 대해 현재 사용자가 좋아요를 눌렀는지 확인하는 로직으로 조회했을 때 product의 개수만큼 favorite-product 테이블에 쿼리를 날리기 때문에 상품의 개수가 증가할수록 데이터베이스에 부하를 줄 수 있다는 단점을 발견해 유저가 좋아요 누른 상품을 먼저 조회 후 전체 상품과 비교하는 로직으로 수정 -&gt; 조회 시간 37ms 30ms 0.7ms 단축</li></ul>이미지 포맷 변경으로 웹 성능 향상 <ul><li>이미지 포맷 avif가 더 높은 압축률과 좋은 화질을 지원해서 avif로 포맷 설정했지만 LCP 4300ms로 매우 느림. -&gt; webp로 변경 후 LCP 3000ms 으로 웹 성능 30% 개선</li></ul><h3>Tech Stack</h3><code>React</code> <code>NextJS</code> <code>React-Query</code> <code>Jotai</code> <code>NestJS</code> <code>PostgreSQL</code> <code>Docker</code>

푸디풀

<h3>RESULT</h3><a target="_blank" rel="noopener noreferrer nofollow" href="https://yigil.co.kr">이길로그 배포 사이트</a><a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/davidktlee/f1-Yigil">이길로그 깃허브</a><h3>DESCRIPTION</h3>지도를 기반으로 장소와 코스를 기록하는 SNS 기반 서비스입니다.지도 기능 / 마이페이지 기능 / 네이버, 구글 OAuth 로그인 / 알림 기능 / 장소 상세, 수정 / 코스 수정 시 지도에 경로 표시 기능을 담당했습니다.<h3>EXPERIENCE</h3>지도 기능 개발<ul><li>Geolocation를 이용한 현재 위치 표시</li><li>네이버 지도 API를 이용한 주변 장소 표시</li><li>네이버 지도 API를 이용한 지도에 경로 표시</li></ul>Server Sent Event 알림 기능 개발<ul><li>양방향 통신에 유용하고 로직이 복잡한 단점이 있는 웹소켓 방식, 클라이언트의 주기적인 요청을 이용한 폴링 방식을 비교 후 클라이언트에서 서버와 연결하면 구독 형식으로 작동하는 Server Sent Event를 이용해 알림 기능 구현 -&gt; 단방향 통신으로 불필요한 연결을 줄여 서버 부하 감소 및 기능 개선</li></ul>MSW를 이용한 API 모킹<ul><li>SSR 요청과 CSR 요청이 모두 가능하게 MSW 환경 설정</li></ul>네이버 및 구글 OAuth 로그인<ul><li>반복되는 부분을 공통 함수로 정의해 가독성 및 코드량 개선</li></ul>Zod 라이브러리를 이용한 타입 검증Fetch 내장 함수를 이용한 캐싱 및 재검증<ul><li>기존에 캐싱 및 새로운 요청에 대한 재검증을 axios 및 tanstack-query 이용했지만 next14의 fetch의 cache 기능을 이용해 캐싱 기능 사용 및 revalidate 기능을 이용해 재검증 구현 -&gt; 외부 라이브러리 사용 감소로 의존성을 줄여 유지보수의 용이성을 높이고 배포 용량을 줄임</li></ul><h3>Tech Stack</h3><code>React</code> <code>NextJS</code> <code>React Context API</code> <code>Zod</code> <code>MSW</code> <code>Docker</code>

이길로그

<h3>RESULT</h3><a target="_blank" rel="noopener noreferrer nofollow" href="https://lenssis-fe-client.vercel.app/">렌시스 배포 사이트(현재 서버 닫힘)</a><a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/IKO-FinalProject/FE-Client">렌시스 깃허브</a><h3>DESCRIPTION</h3>기업의 요구사항을 분석해 성능 개선과 UX 개선 목적으로 참여한 팀 프로젝트로 UX/UI 디자이너, 백엔드 개발자, 프론트엔드 개발자(3명)와 함께 개발했습니다.메인 페이지 상품 조회 / 장바구니 및 즐겨찾기 추가 / 이벤트 조회 및 쿠폰 발급 / 공지사항 기능을 개발했습니다.<h3>EXPERIENCE</h3>Lazy loading으로 성능 개선<ul><li>사진이 많은 렌즈 사이트 특성을 고려해 Intersection Observer Api를 이용한 lazy loading 도입해 메인 페이지의 첫 화면 불러올 때의 속도를 높여 FCP 3s 2.5s 약 17% 성능 개선</li></ul>Prefetch를 이용한 성능 개선<ul><li>pagination을 구현하면서 React-query의 prefetch 기능을 이용해 상품 로딩 시간 단축 및 캐싱 처리</li></ul><h3>Tech Stack</h3><code>React</code> <code>React-Query</code> <code>Recoil</code>

렌시스

<h3>RESULT</h3><a target="_blank" rel="noopener noreferrer nofollow" href="https://see-all-sea.site/">안전해 배포 사이트</a><a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/davidktlee/see-all-sea-project">안전해 깃허브</a><h3>DESCRIPTION</h3>지역을 선택해 가고싶은 해수욕장을 찾고 찾은 해수욕장의 상태, 수질, 날씨를 확인할 수 있는 웹사이트입니다.지도에서 클러스터 및 마커를 이용해 궁금한 해수욕장을 선택할 수 있으며 로그인을 통해 해수욕장에 대한 후기를 남길 수 있습니다.<h3>EXPERIENCE</h3>Kakao Map Api를 이용해 지도 표시<ul><li>줌 인/아웃에 따른 클러스터 기능</li><li>마커 기능을 이용해 해수욕장 위치 표시</li></ul>공공 API와 Open Weather Map Api를 가공해 해수욕장 정보 표시Firebase를 이용한 로그인 기능과 댓글 정보 저장<ul><li>Firebase 인증 기능을 이용한 로그인 기능 구현</li><li>Firebase firestore을 이용한 유저 정보 및 댓글 db 저장</li></ul><h3>Tech Stack</h3><code>React</code> <code>Redux toolkit</code> <code>Kakao map</code> <code>Firebase</code>

안전해

<h3>Project</h3><ul><li>영재 교육 플랫폼 어드민 전체 개발 및 서비스 페이지 일부 개발<ul><li>회원 관리 페이지</li><li>결제 관리 페이지</li><li>컨텐츠(교재, 강의) 관리 페이지</li></ul></li><li>법률 신문 - 외국 변호사 대관 페이지 개발</li><li>청년이어드림 어드민 페이지 개발<ul><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://velog.io/@davidktlee/formdata-%EC%97%85%EB%A1%9C%EB%93%9C-%EC%8B%9C-%EC%97%90%EB%9F%AC">폼 데이터 관련 트러블 슈팅</a></li></ul></li><li>애니메이션 제너레이터 툴 개발<ul><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://velog.io/@davidktlee/Animation-%EC%88%9C%EC%B0%A8-%EC%B2%98%EB%A6%AC">애니메이션 관련 트러블 슈팅</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://velog.io/@davidktlee/Vue-Dom-%EC%A1%B0%EC%9E%91-%EB%A1%9C%EC%A7%81-%EC%88%98%EC%A0%95">VueJS Dom 조작 관련 트러블 슈팅</a></li></ul></li></ul><h3>Tech Stack</h3><code>React</code> <code>NextJS</code> <code>VueJS</code> <code>React-Native</code>

<h3>Project</h3><ul><li>CRM 시스템 개발<ul><li>의사 지정 기능 개발</li><li>CRM 유저 차트 기능 수정</li><li>다국어 i18n 기능 개발</li></ul></li><li>직원 관리 시스템 개발<ul><li>직원 근태 관리 및 지점 관리 시스템 프로젝트 기획 참여</li><li>토스트 메시지를 통한 예외 처리 도입</li><li>전역적 에러 처리 및 상세 에러 처리 구분</li></ul></li></ul>매일 CPO 및 개발자와 스크럼 회의 진행하며 빠른 개발 문화 속에서 의사소통과 문서화의 중요성 인식<code>React</code> <code>NextJS</code>