미리보기

롤 악성 유저 신고 서비스

• 타입스크립트와 반응형을 도전과제로 구현
• axios interceptor에서 http method 호출 및 응답 try-catch 코드 추상화 진행
• 해외게임 특성 상 해외유저 고려하여 react-i18next를 사용한 한국어/영어 다국어 처리
• 정규표현식을 이용한 유효성 검사, 필수 입력값 실시간 검증에 따른 회원가입 활성화/비활성화 처리
• 로그인 성공 시 jwt 토큰 발급, 프론트에서는 react-cookie를 이용해 발급된 토큰 cookie에 저장
• 신고목록에 대한 사용자 조건에 따른 컴포넌트 공통화 작업
• 시각적인 간결성 및 사용자 경험 향상을 위해 snack bar 작업 진행
• 유저친화적인 디자인을 위해 커스텀 모달 작업 진행

서울 내 외국어 가능 약국 찾기 서비스

• 프로젝트 아이디어 제안 및 기획 구성
• kakao map api적용하여 내위치 및 약국 위치를 쉽게 확인 가능하도록 구현
• 지역구 전체 약국이 지도에 표시되어 한눈에 보기 어려운점을 개선하고자 약국 전체 리스트에서 페이지네이션 적용
  • 페이지네이션 적용 전 성능 41점에서 적용 후 88점으로 올라감.
• react-query로만 검색기능을 구현 했었는데 약국 검색 조건 값이 초기화되어 불편하다는 의견을 해결하고자 recoil 적용하여 해결
• 버튼 연속 클릭시 500에러 발생 하여 디바운싱 기능을 통해 북마크의 연속클릭을 제한함
• 회원정보 변경이 모달에 모달을 타고 들어가는 방식이었으나 사용자 관점에서 불편하다 생각이 들어 디자이너와 협의 후 페이지 이동 후 모달 페이지가 열리도록 구현
• 전체 UI/UX 전부 구현
• UT설문 응답을 종합하여 수용 가능한 요청에 대해 피드백 60% 반영
• 프로젝트 스케쥴 조율 및 팀원들간의 업무조율 , README 작성
• 최종발표회 발표 및 프로젝트 브로슈어 영상 발표(https://youtu.be/F3xb_qNUhBg)

부트캠프를 잘 완수한 나에게 쓰는 타임캡슐 서비스

• 프로젝트 전반적인 디자인 및 레이아웃을 구성
• 구현에만 급급했던 코드와 유지보수성을 고려한 코드의 차이점을 직접 비교해 보기 위해
  v2 구현
  1. 기본 CSS → styled-components
     • 버튼 컴포넌트 및 동적으로 스타일을 변경하기 위해 사용함.
  2. 로컬스토리지 → recoil-persist + 세션 스토리지
     • 새로고침 시 편지 내용이 초기화되는 걸 방지하고자 recoil을 통해 storage 연결.
     • 최초로 인증번호 발송한 이메일과 동일한 이메일로 재발송 요청인지 구분하기 위함.
  3. header를 컴포넌트마다 넣지 않고 Layout으로 관리
     • 코드의 간결성을 위함.
  4. API 요청 fetch → Axios
     • 자동으로 JSON 변환을 해주며, 더 편리하게 작업할 수 있는 API 디자인을 가짐.
  5. 서버 주소를 환경변수 처리하여 관리
     • 유지보수 및 보안 처리를 위함.

쇼핑몰 운영업무

쇼핑몰 운영업무