미리보기

비즈플레이

항공, 숙박, 열차 등 예약시스템 관리시스템을 유지보수하는 작업을 진행했습니다.

• 기술 스택 : Angular, TypeScript, RxJS

• 출장자 검색 API 호출 개선

  • 출장자 검색 API를 호출하면서 엔터키 입력 시 API가 한 번 더 중복으로 호출되는 문제가 있었고, RxJS의 Subject 객체를 활용하여 해결했습니다.

• 예약자 정보 유효성 검증 추가

  • 항공, 숙박, 열차 예약 페이지에서 예약자 정보 입력 시 유효성 검증이 이루어지지 않고 있었고, Angular의 FormBuilder와 정규식을 이용하여 한글, 영어 혼용 금지 / 특수문자 불가 처리를 진행했습니다.

• 숙박 캘린더 호출 개선

  • 국내 / 해외 숙박 페이지 내 캘린더 호출 시 국가 코드(KR, US)에 따라 별도로 호출하는 코드가 같은 형태로 중복으로 구현되어 있었고, 조건부 로직을 하나의 코드에 넣어서 새로운 국가 코드 추가에도 유연하게 대응할 수 있도록 개선했습니다.

로스리스컷

• 기술 스택 : React, JavaScript, styled-components

• 비디오 렌더링 감지

  • 유튜브 영상의 메타데이터를 폴더 접근을 통해 확인해야 하는 불편함을 해소하기 위해 HTMLVideoElement의 loadedmetadata를 활용했습니다.

  • 초기에 useRef와 useEffect를 사용한 구현에서 불필요한 의존성을 제거하고 이벤트 핸들러로 최적화를 하여 메타데이터를 추출하도록 로직을 개선했습니다.

• 상태 관리 라이브러리 마이그레이션

  • 상태 관리를 위해 Recoil을 사용하면서 Atom 생성 또는 삭제 시 key 충돌 에러가 발생하는 문제가 있었습니다.

  • GitHub Star 수와 업데이트 주기를 기준으로 Zustand와 Jotai를 비교 분석했으며, 최종적으로 Recoil과 유사한 API 구조를 가진 Jotai를 도입하기로 결정했습니다.

  • Provider 설정 및 key 관리를 하지 않아도 되어 초기 jotai 세팅 시간을 Recoil 대비 50% 정도 단축했습니다.

• CSS 코드 개선

  • 모든 파일에 적용되어있던 인라인 스타일을 styled-components를 적용하여 가독성을 개선했습니다.

1. 프로젝트 개요

본인이 본인을 평가할 때는 주관적 요소가 들어갈 수 있기 때문에 제대로 된 자기 성찰을 하기 어려울 것으로 생각합니다. 그러므로 타인의 시선으로 새로운 저를 발견할 수 있지 않을까? 라는 생각으로 시작했습니다.

• 기술 스택 : React, TypeScript, styled-components

2. 주요 활동

• 아이디어 토의 및 스토리보드 작성

• BDD & SDD 를 통한 설계 및 태스크 분배

• 테오의 스프린트 16기 회고

• 프로젝트 링크(서비스 중단), 깃허브, 피그잼

부모님이 특정 사이트에 회원가입을 하실 때, 비밀번호를 어떻게 만들어야 할 지 힘들어 하시는 모습을 보고 직접 만들게 되었습니다.

• 생성한 비밀번호에 대해 Have I been pwned API를 적용하여 해킹 여부를 판단하도록 했습니다.

• ARIA 속성을 추가적으로 적용하여 Lighthouse의 접근성 점수를 83점에서 95점으로 향상했습니다.

• Math.random으로 비밀번호를 생성하던 로직을 Web Crypto API를 사용하여 보안을 강화했습니다.

• 링크

1. 프로젝트 개요

팬들의 요청을 반영한 커버 아티스트 맞춤 곡 신청 및 관리 플랫폼입니다.

• 기술 스택 : React, TypeScript, TailwindCSS

2. 주요 활동

회원가입

• SNS 계정 연동 확인을 통한 중복 가입 방지

• 비밀번호 토글에 대한 반복되는 로직을 커스텀 훅을 사용하여 코드 사용량을 70% 감소시켰습니다.

비밀번호 찾기 및 재설정

• 무분별한 인증 번호 요청을 서버로 보내는 것을 막기 위해 재요청 제한 시간(30초)을 통한 서버 부하를 방지하도록 했습니다.

모달 개선 작업

• 페이지에서 사용하는 모달의 내부 콘텐츠 형태나 버튼 색상이 달랐고, Context API를 활용하여 유연하게 사용할 수 있도록 작업했습니다.

• 모달 개선 작업기

• Next.js headers 문서 번역에 참여했습니다. (PR, 블로그)

• '쏙쏙 들어오는 함수형 코딩' 책을 기반으로 각자 문제를 만들어 팀원들끼리 코드 리뷰를 진행했습니다.

• 함수형 코드 학습을 통해 선언적인 코드 작성에 대해 학습했습니다.