미리보기

비즈플레이

항공, 숙박, 열차 등 예약시스템을 관리하는 출장 플랫폼

• 기술 스택 : Angular, TypeScript, RxJS

• 출장자 검색 API 호출 개선

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

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

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

• 숙박 캘린더 호출 개선

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

로스리스컷

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

• 비디오 렌더링 감지

  • 유튜브 링크를 통해 렌더링한 영상의 width, height를 볼 수 있으면 좋겠다는 요구사항을 수용하고자 HTML5 VideoElement API를 활용하여 사용자가 폴더에 직접 접근하지 않고도 비디오 렌더링을 확인할 수 있는 기능을 개발했습니다.

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

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

  • GitHub Star 수와 업데이트 주기를 기준으로 Zustand와 Jotai를 비교 분석했으며, 최종적으로 Recoil과 유사한 API 구조를 가진 Jotai를 도입하여 문제를 해결하고 개발 효율성을 높였습니다.

• CSS 코드 개선

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

1. 프로젝트 개요

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

• 기술 스택 : React, TypeScript, TailwindCSS

2. 주요 활동

회원가입

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

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

비밀번호 찾기 및 재설정

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

모달 개선 작업

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

• 모달 개선 작업기

1. 프로젝트 개요

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

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

2. 주요 활동

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

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

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

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

• '쏙쏙 들어오는 함수형 코딩' 책을 읽고 각자 문제를 만들어 팀원들이 모두 풀 수 있도록 공유했습니다.

• 코드 리뷰를 통해 함수형 선언 방식의 코드 작성 방법을 학습했습니다.

• 스터디 링크

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

• 글 쓰는 개발자들의 커뮤니티 글또에 참여하여 2주 1회 글을 작성했습니다.