미리보기

기술

• 프론트엔드 - Javascript,Typescript, React, Axios, Styled-Component, React-Router, React-Query, Recoil, React-Slick, React-ga4, Browser-image-Compression, Vite

• 백엔드 - Typescript, Sequelize, MySQL, Nginx, GitHub Actions

팀원

• 프론트엔드 2명 / 백엔드 3명 / 디자이너 1명

• 프론트엔드 개발 담당

본인 역할

• 재사용성 향상과 구성요소를 작은 단위로 나누고 조합하는 방법으로 개발하기위한 공통 컴포넌트 개발

• React Slick 슬라이드를 활용한 오늘의 추천 식물 및 오늘의 미션 메인페이지 구현

• 성향 테스트 및 결과에 따른 추천 식물 안내페이지 구현

• 유저의 편의성을 위한 상단 바(Nav Bar) 구현

• 초기 로딩 최적화를 위한 페이지 이동 구간에 Lazy, Suspense 통해 코드 스플리팅

트러블 슈팅

• 식물 검색 기능

문제

동일한 검색을 여러 번 수행할 때마다 다시 동일한 API 요청 -명사형으로 작성

해결

useCallback 및 useMemo와 같은 메모이제이션 기법을 고려했으나, 비동기 데이터 로딩 및 관리에 대한 복잡성으로 인해 이러한 방법을 적용하기 어려웠습니다.

대신에 리액트 쿼리를 사용하여 데이터 요청, 캐싱, 재로딩 등과 같은 고급 기능을 내장하고 있는 라이브러리를 채택하여 API 요청의 중복을 방지하고 효율적으로 검색을 처리할 수 있었습니다 -내용 요약

• 서버로의 이미지 전송 비효율적인 문제

문제

이미지의 크기에 관계없이 서버로 이미지를 전송하는 데 비효율적인 문제 발생

해결

browser-image-compression 라이브러리를 사용하여 이미지를 압축하고 서버에 전송했습니다.

이 과정에서 maxSizeMB 및 maxWidthOrHeight 옵션을 사용하여 이미지를 적절하게 압축했습니다.

• 페이지 초기화 문제

문제

여러 반려 식물이 있는 경우 특정 반려 식물에 대한 내용을 보다 페이지를 이동하면 초기화되어 첫 식물로 돌아가는 문제가 발생

해결

부모-자식 관계가 아닌 경우 상태를 전달하는 것이 어려워졌습니다.

이를 해결하기 위해 recoil을 사용하여 상태를 저장하고 관리했습니다. 또 페이지 간에 상태를 유지할 수 있었습니다.

• 로그인 인가 / 인증 문제

문제

사용자가 이용도중 AccessToken이 만료되면 그대로 로그인 페이지로 이동하고 RefreshToken을 쿠키게 담아두고 활용하지 못함

해결

response 인터셉터 활용으로 AccessToken이 만료되어 api 요청으로 에러 메세지를 받으면 RefreshToken토큰을 이용해 AccessToken을 재발급 받은 후 다시 재요청 할 수 있도록 해결하였습니다.

• 보드 테스트 버그

문제

한 태그를 클릭하고 다른 태그 클릭시에 결과 확인 버튼이 비활성화 되고 요소 선택없이 결과 확인 버튼을 클릭시 결과 페이지로 넘어가는 문제

해결

태그 선택시에 상태 변화가 되는 boardId가 있는데 이 state를 통해서 로직을 구현 하였습니다.

그리고 이 boardId가 없는 경우에는 결과확인 버튼이 클릭되지 못하는 로직 또한 구현하여 해결하였습니다.

-코드 제거

유저 피드백 & 반영

• 구글 애널리틱스

  구글 애널리틱스를 이용하여 사용자가 어떤 페이지에 접속을 많이했고 어떤 이벤트를 했는지 분석 했습니다.

  그러한 분석으로 페이지의 우선 순위를 두어 QA기반 코드 리팩토링을 하였습니다.

• 소셜 로그인

  -피드백- 요즘은 대부분이 다 소셜로그인으로 돌아가는게 더 많기 때문에 남은 기간동안 소셜로그인을 넣는것을 추천드립니다.

  -> 리다이렉트 페이지를 만들어 인가코드와 페이지 네이션을 구현 하였습니다.

기술

• 프론트엔드 - Javascript, React, Axios, TailWind CSS

• 백엔드 - Java, Spring, MySQL, AWS

팀원

• 프론트엔드 2명 / 백엔드 2명

• 프론트엔드 개발 담당

본인 역할

• Axios를 사용한 비동기 통신으로 사이트 내에 강의 목록 구현

• CRUD중 CR을 활용한 강의 리스트 검색 구현

기술

• 프론트엔드 - Javascript, React, Axios, Styled-Component

• 백엔드 -Node.JS, Javascript, MySQL

팀원

• 프론트엔드 2명 / 백엔드 3명

• 프론트엔드 개발 담당

본인 역할

• Axios 비동기 통신으로 로그인, 회원가입 구현

• JWT 토큰을 활용한 보안성 향상

• 유저들의 소통을 위한 커뮤니티 게시판 게시글, 댓글 구현

트러블 슈팅

• 회원 가입을 통해 accessToken과 refreshToken을 발급하여 회원 인증(Authentication)을 하고 인증 받은 회원들에게 인가(Authorization)를 주는 과정에서 어려움이 있었습니다.

문제를 해결하고자 axios interceptor를 사용하여 request 헤더에 accessToken과 refreshToken을 발급하여 문제를 해결하였습니다.