채용공고 올리기

이경택님을 응원해보세요!

지금 만족하고 있어요
성실함
책임감
협업 지향
커뮤니케이션
적응력

미리보기

기본 정보

이름
이경택
직업
프론트엔드 개발자
이메일
rudxor567@naver.com
간단 소개

"언제나 협업할 준비가 되어 있습니다." 여러 프로젝트로 좋은 협업을 위해선 어떤 태도를 가져야 하는지, 어떤 협업 방식과 툴을 이용해야 하는지 이해와 숙련도를 쌓았습니다. 대화하는 것을 두려워하지 않으며 언제나 긍정,적극적인 태도로 임할 준비가 되어있습니다. "실패보단 포기가 두렵습니다." 경험이 곧 성장이라고 생각합니다. 도전에 두려움이 없고 배움에도 언제나 열린 마음으로 임합니다. 한 번 맡은 일은 끝까지 포기하지 않고 끝내 제가 얻어가는 것을 만듭니다.

기술 스택

기술 스택

JavaScript, TypeScript, React, Next.js, Node.js, NestJS, Docker

경력

회사명

주식회사 인젠스로타 (벽촌)

직급 | 부서 | 근무 유형

팀원 | 프론트엔드개발 | 재직 중

근무 기간

2024.11. ~ 재직 중 (6개월)

담당 업무

Project

Tech Stack

React NextJS VueJS React-Native

회사명

주식회사메멘토에이아이

직급 | 부서 | 근무 유형

팀원 | 프론트엔드개발

근무 기간

2024.10. ~ 2024.11. (2개월)

담당 업무

Project

  • CRM 시스템 개발

    • 의사 지정 기능 개발

    • CRM 유저 차트 기능 수정

    • 다국어 i18n 기능 개발

  • 직원 관리 시스템 개발

    • 직원 근태 관리 및 지점 관리 시스템 프로젝트 기획 참여

    • 토스트 메시지를 통한 예외 처리 도입

    • 전역적 에러 처리 및 상세 에러 처리 구분

매일 CPO 및 개발자와 스크럼 회의 진행하며 빠른 개발 문화 속에서 의사소통과 문서화의 중요성 인식

React NextJS

프로젝트

프로젝트명

영점일 프로젝트

소속/기관명

인젠스로타 (벽촌)

프로젝트 기간

2024.11. ~ 2024.12.

프로젝트 내용

Description

영재 교육을 위한 교육 플랫폼의 어드민과 서비스의 일부 기능을 담당해 개발했습니다.

  • 회원 관리 페이지 / 문의 페이지 / 결제 관리 페이지 / 교재 관리 페이지 등 서비스 관리에 필요한 어드민 페이지 제작

  • 서비스 페이지의 1:1 문의 등록 및 공지사항 페이지 제작

Experience

  • 페이지 별 토스트 컴포넌트 - 최상단 하나의 토스트 컴포넌트로 리팩토링
    토스트 사용하는 컴포넌트마다 토스트 컴포넌트를 매번 선언하도록 구현되어 있던 코드에서 최상단에서 선언 및 호출 시 id를 전달해 각각 다른 toast ui를 처리하도록 수정

  • 사진 업로드 및 업로드 실패한 이미지 처리


    기존에는 여러 개의 이미지를 올릴 때 실패한 이미지가 있으면 이 후 모든 요청이 실패되어 모든 이미지 업로드가 실패한 것 처럼 데이터 불균형이 일어났던 코드에서 Promise.allSettled 함수를 이용해 여러 개의 이미지 처리 및 각 이미지의 성공 실패 여부를 통해 업로드 실패한 이미지는 재시도 가능하게 처리해 UX 개선

Tech Stack

React Redux-Toolkit

프로젝트명

푸디풀

소속/기관명

개인

프로젝트 기간

2023.05. ~ 2024.05.

프로젝트 내용

RESULT

푸디풀 배포 사이트

푸디풀 깃허브

DESCRIPTION

한식 디저트 판매 한식 디저트 수업을 위한 예약이 가능한 쇼핑몰 사이트를 개발했습니다.

프론트엔드 전체와 백엔드 전체를 단독 개발하면서 전체적인 개발 프로세스에 대해 자세히 알 수 있었습니다.

  • JWT를 이용한 로그인 기능

  • 달력을 이용한 예약 기능

  • Portone 결제 시스템을 이용한 결제 기능

  • Naver SMS Api를 이용한 문자 인증 기능

  • 상품 및 클래스 CRUD 기능

  • 댓글 및 대댓글 기능

EXPERIENCE

JWT를 이용한 로그인 기능 개발

  • 쿠키, 세션, jwt 토큰에 대한 이해를 바탕으로 로그인 기능 개발

AWS의 S3스토리지, EC2 기능 사용

  • S3 스토리지를 이용해 사진 저장

  • EC2를 이용해 프론트엔드, 백엔드 배포

NestJSPostgreSQL을 이용한 백엔드 개발

  • Type ORM인 prisma 도입

  • 전체 DB 설계 및 API 개발

DockerGithub Action을 이용한 CI/CD

Nginx를 이용한 호스팅 처리 SSL 인증

presigned url을 이용한 서버 부하 감소

  • 프론트에서 상품 추가 시 백엔드에 저장하지도 않는 무거운 이미지 파일을 전달해야 하는 단점을 발견해 백엔드 서버로 요청을 보내고 백엔드 서버에서 aws와 통신을 통해 업로드가 가능한 사진이라면 presigned url을 응답, 프론트에서 사진을 S3로 직접 업로드 하는 방식으로 구현
    -> 무거운 파일을 전달하지 않아도 됨으로써 업로드 시간 2000/ms에서 1500/ms25% 감소

DB 조회 성능 개선

  • 전체 상품을 조회한 후 각 상품에 대해 현재 사용자가 좋아요를 눌렀는지 확인하는 로직으로 조회했을 때 product의 개수만큼 favorite-product 테이블에 쿼리를 날리기 때문에 상품의 개수가 증가할수록 데이터베이스에 부하를 줄 수 있다는 단점을 발견해 유저가 좋아요 누른 상품을 먼저 조회 후 전체 상품과 비교하는 로직으로 수정
    -> 조회 시간 37ms 30ms 0.7ms 단축

이미지 포맷 변경으로 웹 성능 향상

  • 이미지 포맷 avif가 더 높은 압축률과 좋은 화질을 지원해서 avif로 포맷 설정했지만 LCP 4300ms로 매우 느림.
    -> webp로 변경 후 LCP 3000ms 으로 웹 성능 30% 개선

Tech Stack

React NextJS React-Query Jotai NestJS PostgreSQL Docker

프로젝트명

이길로그

소속/기관명

패스트캠퍼스 프로젝트

프로젝트 기간

2023.12. ~ 2024.04.

프로젝트 내용

RESULT

이길로그 배포 사이트

이길로그 깃허브

DESCRIPTION

지도를 기반으로 장소와 코스를 기록하는 SNS 기반 서비스입니다.

지도 기능 / 마이페이지 기능 / 네이버, 구글 OAuth 로그인 / 알림 기능 / 장소 상세, 수정 / 코스 수정 시 지도에 경로 표시 기능을 담당했습니다.

EXPERIENCE

지도 기능 개발

  • Geolocation를 이용한 현재 위치 표시

  • 네이버 지도 API를 이용한 주변 장소 표시

  • 네이버 지도 API를 이용한 지도에 경로 표시

Server Sent Event 알림 기능 개발

  • 양방향 통신에 유용하고 로직이 복잡한 단점이 있는 웹소켓 방식, 클라이언트의 주기적인 요청을 이용한 폴링 방식을 비교 후 클라이언트에서 서버와 연결하면 구독 형식으로 작동하는 Server Sent Event를 이용해 알림 기능 구현
    -> 단방향 통신으로 불필요한 연결을 줄여 서버 부하 감소 및 기능 개선

MSW를 이용한 API 모킹

  • SSR 요청과 CSR 요청이 모두 가능하게 MSW 환경 설정

네이버 및 구글 OAuth 로그인

  • 반복되는 부분을 공통 함수로 정의해 가독성 및 코드량 개선

Zod 라이브러리를 이용한 타입 검증

Fetch 내장 함수를 이용한 캐싱 및 재검증

  • 기존에 캐싱 및 새로운 요청에 대한 재검증을 axios 및 tanstack-query 이용했지만 next14의 fetch의 cache 기능을 이용해 캐싱 기능 사용 및 revalidate 기능을 이용해 재검증 구현
    -> 외부 라이브러리 사용 감소로 의존성을 줄여 유지보수의 용이성을 높이고 배포 용량을 줄임

Tech Stack

React NextJS React Context API Zod MSW Docker

프로젝트명

렌시스

소속/기관명

패스트캠퍼스 프로젝트

프로젝트 기간

2022.09. ~ 2022.10.

프로젝트 내용

RESULT

렌시스 배포 사이트(현재 서버 닫힘)

렌시스 깃허브

DESCRIPTION

기업의 요구사항을 분석성능 개선UX 개선 목적으로 참여한 팀 프로젝트로
UX/UI 디자이너, 백엔드 개발자, 프론트엔드 개발자(3명)와 함께 개발했습니다.

메인 페이지 상품 조회 / 장바구니 및 즐겨찾기 추가 / 이벤트 조회 및 쿠폰 발급 / 공지사항 기능을 개발했습니다.

EXPERIENCE

Lazy loading으로 성능 개선

  • 사진이 많은 렌즈 사이트 특성을 고려해 Intersection Observer Api를 이용한
    lazy loading 도입해 메인 페이지의 첫 화면 불러올 때의 속도를 높여 FCP 3s 2.5s 약 17% 성능 개선

Prefetch를 이용한 성능 개선

  • pagination을 구현하면서 React-query의 prefetch 기능을 이용해

    상품 로딩 시간 단축 및 캐싱 처리

Tech Stack

React React-Query Recoil

프로젝트명

안전해

소속/기관명

개인

프로젝트 기간

2022.08. ~ 2022.08.

프로젝트 내용

RESULT

안전해 배포 사이트

안전해 깃허브

DESCRIPTION

지역을 선택해 가고싶은 해수욕장을 찾고 찾은 해수욕장의 상태, 수질, 날씨를 확인할 수 있는 웹사이트입니다.

지도에서 클러스터 및 마커를 이용해 궁금한 해수욕장을 선택할 수 있으며 로그인을 통해
해수욕장에 대한 후기를 남길 수 있습니다.

EXPERIENCE

Kakao Map Api를 이용해 지도 표시

  • 줌 인/아웃에 따른 클러스터 기능

  • 마커 기능을 이용해 해수욕장 위치 표시

공공 APIOpen Weather Map Api를 가공해 해수욕장 정보 표시

Firebase를 이용한 로그인 기능댓글 정보 저장

  • Firebase 인증 기능을 이용한 로그인 기능 구현

  • Firebase firestore을 이용한 유저 정보 및 댓글 db 저장

Tech Stack

React Redux toolkit Kakao map Firebase

교육

소속/기관명

패스트 캠퍼스

종류 | 전공

사설 교육 | 프론트엔드 개발

재학 기간 | 재학 상태

2022.03. ~ 2022.10. | 졸업

소속/기관명

전주대학교

종류 | 전공

대학교(학사) | 경기지도학과 (4.28/4.5)

재학 기간 | 재학 상태

2018.03. ~ 2022.02. | 졸업

소속/기관명

유통경제대학

종류 | 전공

대학교(학사) | 스포츠과학

재학 기간 | 재학 상태

2015.04. ~ 2017.03. | 중퇴

대외활동

활동명

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

소속/기관명

원티드

연도

2024

내용

원티드 프리온보딩 FE 챌린지 9월 강의 중에 약 15분정도의 시간을 부여받아 약 200명 정도의 수강생 앞에서 SPA, CSR, SSR 을 주제로 발표를 진행했습니다.

발표를 위해 자료를 만드는 과정에서 정확한 정보 전달을 위해 노력했습니다.

공식 문서와 공식 영상을 찾아보며 신뢰성 있는 정보를 바탕으로 발표 자료를 준비했습니다.

발표를 준비하며 과거의 웹 페이지는 어떤 방식으로 동작했는지, 어떤 이유로 SPA가 등장했는지, CSR과 SSR의 차이점이 무엇이고 어떤 상황에서 사용해야 하는지 구체적으로 알게 되었습니다.

포트폴리오

URL

link

https://github.com/ollehkt

깃허브

자격증

자격증명

JLPT 일본어 능력 시험

점수 | 발급기관

N2 | 재단법인 일본국제교육지원협회

취득연월

2017.12.

자격증명

정보처리기사

점수 | 발급기관

한국산업인력공단

취득연월

2024.12.

자기소개

자기소개

[보맵에 지원한 이유]

사용자 경험을 최우선의 가치로 생각하는 보맵의 가치와 제가 개발자로서 생각하는 가치와 같습니다.
항상 사용자의 경험을 더 좋게 만들기 웹 접근성이나 렌더링 시간 최적화 등을 고민하고 코드에 적용합니다.
보맵은 팀원 간의 협력을 중시하며 서로에게 귀감이 되는 보맵퍼가 되려고 노력하는데
저도 팀워크를 중요시 생각하며 서로에게 긍정적인 영향을 미치면서 더 나은 개발자가 되기 위해 여러 스터디를 진행, 동기부여를 얻습니다.

[개발을 시작한 계기]

축구선수를 은퇴하고 아이들을 가르치던 당시, 제가 가지고 있는 기술이나 노하우를 선수들에게 전달해 주면서 더 많은 선수들에게 좋은 영향을 끼치고 싶지만 단순히 혼자만의 교육으로는 힘들다는 생각이 들었습니다.
개발자로서 더 많은 선수들이 사용하는 가치있는 서비스를 만들고 싶어 개발을 시작했습니다.
선수만이 아닌 다양한 사람들에게 제가 만든 서비스를 제공하고 싶고, 서비스를 통해 사람들에게 긍정적인 영향을 끼치는 삶을 꿈꾸고 있습니다.

[스스로 학습합니다]

약 7개월간의 부트캠프 수료 후 2년 간의 군 대체 복무를 하면서 스스로 학습하고 문제를 해결하는 방법을 배웠습니다.
회사에 근무하며 발전하는 방식과는 다르지만 스스로 학습하면서 웹의 프론트엔드, 백엔드, db까지 구축하여 웹 서비스를 만들었습니다.
다양한 기능을 개발하고 문제를 해결하며 웹 개발 프로세스를 알게 되었으며, 회사에서도 프로젝트에 적응하는 데 있어 긍정적인 영향을 미쳤습니다.
부족한 부분과 궁금했던 부분들을 찾아보고 해결하며 T자형 개발자가 되기 위해 노력하고 있습니다.

[개발은 서비스 중 하나]

단순히 기능을 구현하는 개발자가 아니라, 서비스 전체에 대한 깊은 이해를 바탕으로 요구사항을 분석하고 의견을 제시하는 개발자를 지양합니다.
고객의 니즈를 파악하고, 문제를 해결하기 위해 적극적으로 소통하며, 팀과 협력하여 더 좋은 방향으로 프로젝트를 가져가는 것에 중점을 두고 있습니다.
기술적 역량뿐만 아니라 서비스의 가치를 극대화하는 데 기여하고자 노력합니다.

외국어

외국어명

일본어

점수

일상 회화 가능

댓글