이력서

HTML/CSS

• 시맨틱 태그와 웹 표준을 준수하며 마크업 합니다.

Javascript

• pure javascript에 익숙하고 es5부터의 문법을 사용할 수 있습니다.
• 다양한 인터랙션을 구현하고 시도할 수 있습니다.
• Canvas API의 2D를 사용하여 그래픽적인 기능을 만들 수 있습니다.
• Promise, async, await를 사용한 비동기 작업을 할 수 있습니다.

Typescript

• 타입스크립트로 React/Next js 프로젝트를 진행할 수 있습니다.
• 제네릭과 유니언 타입을 활용할 수 있습니다.
• Record, Partial 등 과 같은 유틸리티 타입을 사용할 수 있으며, 더 좋은 타입스크립트 사용법을 공부하고 있습니다.

React

• 초기 구축 단계부터 앱을 개발할 수 있습니다.
• 커스텀 hook을 적극 활용하여 상태와 기능을 직관성 있게 관리 및 구현할 수 있습니다.
• Redux 나 Recoil로 전역 상태 관리를 할 수 있습니다.
• styled component/emotion 라이브러리로 공통 테마 및 스타일을 작성할 수 있습니다.
• useMemo, memo, useCallback을 사용해서 컴포넌트 렌더링 성능 최적화를 할 수 있습니다.

Next js

• CSR/SSR/ISR 차이점을 이해하고 있습니다.
• getServerSideProps와 getStaticProps, getStaticPaths를 이해하고 사용할 수 있습니다.

로지핏

2021.10 - 2021.12

간편하게 배차 가능한 기업 맞춤 화물 운송 서비스를 백엔드 개발자 분과 협업하여 구축부터 배포까지 프론트엔드 개발을 진행하였습니다. 사용자 경험을 개선하기 위해서 외부 기획자와 소통을 하고 개선할 수 있는 부분을 제시하며 프로젝트를 능동적이게 이끌어 갔던 경험이 있습니다.

• 자동 로그인 기능, OAuth ( 카카오, 네이버, 애플 ) 회원가입 및 로그인
• 카카오 지도 API를 통해 장소 선택 및 커스텀 마크 생성
• T Map와 카카오 지도 API를 통해 지도 상에 예상 시간/거리 및 경로 표시
• 사용자 경험을 개선하기 위해 현재 날짜 기준으로 13일까지 선택 및 표시되는 달력 개발
• 화물과 무게 데이터를 통한 사용자 맞춤 차량 추천 기능 개발
• 가로 슬라이드, 앱 슬라이드 기능 개발
• React Native 웹뷰로 빌드 된 앱 구글 플레이 콘솔을 통해 배포
• Payple 결제 연동으로 카드 간편 결제 기능 개발
• 날짜에 따른 거래명세서 데이터 엑셀 다운로드
• 반응형 웹

React

React Router Dom V5

Styled Components

Redux

Redux Actions

React html parser

Kakao Map API

Payple API

병원 모니터링 서비스 (비공개)

병원 내에서 간호사와 의사가 실시간으로 환자를 확인할 수 있는 모니터링 서비스 제작에 참여하였습니다. 외부 백엔드 개발자와 소통하며 구축 단계부터 개발하였습니다. 주로 공통으로 사용되는 모듈과 환자의 상태를 확인하는 화면의 기능을 개발하였습니다.

• 다른 분이 작업한 웹 소켓 모듈을 활용해서 등록된 환자들의 바이탈을 실시간 체크할 수 있는 기능 개발
• 자바스크립트 캐싱 및 버전을 관리할 수 있도록 버전 컨트롤 기능 구현 및 동적 스크립트 생성
• 페이지네이션, 모달, 바이탈 그래프, 사진 위에 그림을 그리고 지울 수 있는 화이트보드 캔버스 등과 같은 공통적으로 사용될 기능 모듈로 개발
• 모듈에 각각의 인스턴스를 생성하여 관리할 수 있는 class 적극 활용

JQuery

D3

Fullcalendar

Moment

Sock

Stomp

Swiper

Prettier

기술 지원

동료 개발자분들의 프로젝트를 도와주며 기능을 개발하였습니다.

• Warp mastering

  • AI 오디오 마스터링 서비스에서 다국어 지원 기능을 geolocation-db api와 json 데이터를 통해서 개발하였습니다.

• 모종 관리 및 연구 프로그램

  • 모종의 종류별 위치와 방향을 마우스로 드래그하여 표시하고 저장하여 관리할 수 있는 기능을 개발하였습니다.

• 채용 서비스

  • 채용 아이템을 카드로 좌/우 슬라이드를 하여 저장하고 삭제할 수 있는 인터랙션 기능을 구현하였습니다.

• 건축자재 경매 서비스

  • 원형으로 돌아가는 네이버 그린닷과 유사한 네비게이션 인터랙션 기능을 구현하였습니다. 구현에 관련한 내용을 개인 블로그에 작성하였습니다. https://jikor1st.tistory.com/5

KIC

형사정책 연구원 외국어 사이트 유지 보수를 맡고 웹 접근성 인증을 평가받고 통과하였습니다.

• 웹 접근성 인증 및 마크 적용
• 영문 및 중국어 다국어 지원
• 반응형 웹
• 주기적인 뉴스레터 제작 및 발행

JQuery

Slick

현대바이오랜드

현대 바이오랜드의 비전, 비즈니스, 경쟁력 그리고 기업의 가치를 보여주는 웹사이트 페이지 제작 및 유지 보수를 진행하였습니다.

• 웹 표준 준수
• 영문 및 중국어 다국어 지원
• 반응형 웹

JQuery

Slick

금호건설 웹진 리뉴얼

금호 어울림 웹진 사이트 리뉴얼 페이지 제작을 맡아 진행하였습니다. 메인 페이지와 여러 콘텐츠, 이벤트 페이지를 작업하였습니다.

• 웹 표준
• 반응형 웹

JQuery

Swiper

Bootstrap

LG 트윈스 웹/앱

LG 트윈스 웹과 리뉴얼 된 앱 유지 보수 및 신규 페이지를 제작하였습니다.

• 적응형 웹
• 이벤트 기간에 맞춘 페이지 유지 보수 및 신규 페이지 제작

JQuery

Swiper

Feel the rhythm of Korea 2 캠페인 랜딩

2021년 9월 한국 관광공사 홍보영상 Feel the rhythm of Korea 시즌 2 광고 캠페인 랜딩 마이크로 사이트를 제작하였습니다.

• 사용성 개선을 위해 스크롤 위치 캐싱 및 유지
• 반응형 웹

JQuery

Youtube API

배틀그라운드 Esports

배틀그라운드의 PGI.S 경기 일정을 확인할 수 있는 페이지 개발

• 사용성 개선을 위해 리스트 및 스크롤 위치 캐싱
• UTC 시간 계산을 통해 항상 한국 시간을 기준으로 시차에 상관없이 경기 라이브 시간 맞춰 경기 표시
• 다국어 지원

JQuery

JQuery AJAX

기역

학생 때 나의 특이한 이름 기역의 아이덴티티가 부각될 수 있도록 화려한 인터랙션을 적용시켜 웹 포트폴리오 사이트를 제작하였습니다.

• 세부적인 인터랙션 및 글자가 그려지는 인터랙션
• 풀 페이지

Vanila Js

MomenTrip

졸업 작품 팀의 팀장 직을 맡으며 스크롤을 통해 직접 여행하는듯하게 서비스를 체험해 볼 수 있는 프로모션 사이트를 제작하였습니다. 이목을 끌 수 있는 페이지의 구성과 인터랙션으로 좋은 성적을 내어 졸업 작품 최우수 작품으로 선정된 값진 경험도 하였습니다.

• 가로 스크롤 인터랙션
• left, top, right, bottom 속성을 통한 DOM 위치 변경에서 transform으로 바꿔 성능 개선
• 기획 및 웹 디자인

Vanila Js

OME

감정을 기록할 수 있는 웹 사이트를 로컬 스토리지를 사용해서 저장하여 사용할 수 있도록 만들었습니다.

• 로컬 스토리지를 통한 저장 및 불러오기
• 저장된 감정의 그래프와 순위를 산정
• 감정의 색을 커스텀 할 수 있는 UI 제공
• 반응형 웹

Vanila Js

LocalStorage

펫 분양 서비스

풀스택/프론트엔드/백엔드 개발자, 기획자, 디자이너로 구성되어 펫 분양에 관련된 서비스를 개발하는 사이드 프로젝트를 진행하고 있습니다. 기획, UI/UX를 개선해야 할 부분을 토론하며 개발에 참여하고 있습니다. 처음 접해보는 기술들 공부하며 프로젝트를 진행하고 MVP로 아이디어의 최소 핵심 기능을 우선순위로 두어 서비스의 단계별 성장을 목표로 개발하고 있습니다.

• 디자이너와 함께 Material Design을 참고하여 디자인 시스템을 고민하고 개발에 적용
• Next js 프레임워크를 사용하여 구축
• React Query로 서버 데이터 캐싱 및 불필요한 API 호출 개선 경험
• 코드 리뷰 및 리팩토링을 통해 지속적인 코드 개선

Next Js

MUI

React Query

Recoil

Axios

Typescript

Prettier

Swiper

개인 블로그 썸네일 생성기

개인 블로그 게시글의 썸네일 이미지를 제작할 수 있는 프로젝트를 진행하였습니다. 블로그의 글을 쓰다 썸네일 이미지를 제작하는 것이 번거로워서 간편하게 만들 수 있는 툴이 있으면 좋겠다는 생각에서부터 시작하여 캔버스를 사용하여 간단한 웹을 만들었습니다. 기획부터 디자인까지 진행하며 간단한 기능을 구현하였고, 추가적인 기능들을 점차 붙여나갈 계획으로 제작하였습니다.

• 디자인 시스템 구성 및 UI 제작 및 개발
• HTML5 캔버스를 활용한 텍스트 제어
• 캔버스 이미지 저장
• React Lazy를 통한 코드 스플리팅 및 lazy loading 적용으로 초기 렌더링 속도 개선
• utterances로 피드백을 위한 댓글 기능 추가
• 반응형 웹
• Firebase Hosting 배포

React

Typescript

Emotion

React Router Dom V6

Vanila Canvas

Prettier

React Lazy

Firebase

블로그

꾸준하게 공부하고 탐구하는 것을 좋아합니다. 그 과정에서 저에 대해서 깨달았던 점은 시간이 조금 지나게 되면 공부한 내용도 알게 모르게 점차 잊게 된다는 것이었습니다. 시간이 지나서 잊어버리는 기술들을 다시 봐도 바로 이해할 수 있도록 공부를 한 내용들을 블로그에 정리하고 있습니다.