FE
[논의 사항]
1.
컬러 팔레트
•
전통주와 관련된 색상을 고려한 결과, 브라운, 황금색, 붉은색과 같은 쨍한 색상이 적합하다고 판단
•
따라서, 컬러 팔레트를 쨍한 브라운 계열로 설정하고 포인트 컬러로 골드색을 추가할 예정
2.
목데이터 불러올 때 window.onload 사용 문제
•
window.onload는 비권장사항이므로 사용 X
•
처음에는 worker.start() 후에 API를 불러오는 방식으로 처리했지만, main.tsx에서 한 번만 worker.start()를 호출하면 문제 없이 작동함
3.
Admin 계정 생성 여부
•
초기에는 관리자 계정을 한 명만 생성할 예정. 추후 관리 영역이 확장되면 관리자 계정을 추가할 수 있음
•
JWT에서 받아온 role 값에 따라 접근 권한을 부여할 수 있으므로, 별도로 admin 컬럼을 추가할 필요 X
4.
회원가입 애니메이션 Post 애니메이션과 통일
•
회원가입에도 ChangePage 같은 공통 컴포넌트를 만들어 재사용할 계획
•
UI의 일관성을 위해 같은 애니메이션 라이브러리를 사용하고, shadcn UI로 변경하여 통일할 예정
[프로젝트 및 UI 관련 피드백]
1.
위치 정보 제공에 동의하지 않는 경우 모달이 계속 노출되면 사용자에게 피로감을 줄 수 있음
•
모달이 아닌 오늘의 데일리 추천 영역에서만 위치 정보 제공 알림이 뜨도록 수정 권장
2.
PC를 고려한 UI인지?
•
최초 계획은 모바일로 진행하였으며 모바일인 경우 이상적인 UI
•
차후 PC 서비스를 제공하는 경우 [썸네일|내용] 식으로 제공한다던가, 리스트를 2개가 아닌 더 쪼개서 제공하는 식으로 레이아웃 변경이 필요해 보임
3.
폰트
•
IOS는 16px이하인 경우 input창이 확대되는 경우가 있음
•
기술적으로 작은 폰트는 UX에 좋지 않기에 가독성 좋은 폰트나 큰 폰트를 사용
4.
배포가 되지 않은 경우에 대비 사항
•
MSW를 활용
•
Firebase도 활용 가능
•
BE 개발 서버가 유지되지 않는다면 일부라도 보여줄 수 있는 기회가 필요하기 때문에 고려해봐야 함
5.
주석과 콘솔로그
•
TSDoc의 경우 오히려 필요
•
주석 자체는 안지워도 상관 없음
•
콘솔은 개발중 필요하다면 남기거나 vite에서 콘솔 삭제로 일괄 처리
•
TODO tree 확장자 통해 삭제할 주석 처리 가능
[Q&A]
1.
msw와 zustand를 최대한 활용하는게 좋음
•
여유가 된다면 예외처리도 진행 권장
•
delay 메서드를 통해 네트워크 딜레이가 있는것처럼 구현
•
가상의 에러를 만들어 서버 에러 테스트 가능
•
컴포넌트 렌더링도 에러에 따라서 처리 가능
•
댓글 제출 상황인 경우 다른 댓글이 등록되지 않도록 예외처리 가능
•
최근 FE 흐름은 퍼블리싱도 같이 진행하고 chatGPT를 활용해 업무를 진행하고 있음
•
통신(MSW) 관련해서 어느정도 지식이 있어 어필 포인트가 되지 않음
•
UI나 UX관점에서 좀 더 돋보이거나 Three.js와 같은 3D 모델링 활용을 강조하는 방향
2.
선택과 집중이 필요 → BE검색엔진에 따라 선택 필요해보임
[태그만 검색]
•
빠르지만 구현이 상대적으로 간단함
[태그 + 게시글(권장)]
•
좀 더 세부적인 검색이 가능
•
BE에서 ELK를 사용한다는 전제하에
•
자동완성의 경우 FE에서 debounce 처리 필요
•
일정 길이 이상일 때 API를 호출하도록 처리 가능
•
검색 결과를 캐싱하는 것도 고려 가능(tanstack query)
•
FE에서만 구현한다면 Hangle.js + Fuse.js 조합으로 구현 가능
•
MSW에서 적은 양에 대한 검색 테스트 진행 시 사용
3.
포트폴리오
•
github 제출 방식은 거의 없으며 무작정 readMe에 작성하는 방식은 좋지 않음
•
1depth: 포트폴리오 or 자소서
•
2depth: readMe2depth로 연결되는 순간 잘 안보이는 부분으로 판단해버림
•
강조하고 싶은 부분은 포트폴리오에 바로 노출될 수 있도록작성했던 내용이 전체가 아니거나 볼륨이 큰 프로젝트에 대한 안내가 필요한 경우 2depth로 연결
•
1depth에는 내가 작성한 코드, 나의 개발 이력을 강조
•
2depth에는 팀이랑 같이 진행한 내용 안내 → 해당 경우 git을 링크로 연결하여 readMe를 통해 작성 가능코드를 첨부하는 경우 설명이 길어질 수는 있으나, 길어지는 내용에 대해 잘 감싸서 보여줘야 함
•
ex. 테이블 형태로 분할, 코드를 2depth로 삽입, 리스트 형식으로 안내 etc설명 양에 대한 걱정보다는 강조를 잘하는게 중요
•
강조가 되어있지 않다면 가독성이 떨어짐
•
ex. 굵게 표시, 중요한 부분 컬러로 강조, 기술적으로 내세우고 싶은 키워드 강조, 다이어그램과 같은 도형 사용, 파일로 연결 etc
[멘토링 추가 내용]
1.
extension(확장프로그램)은 협의하에 넣어서 통일 권장
•
고유명사 관련 확장 프로그램 사용 권장
2.
반응형 UI/UX 부분에서 많이 챙기는 사항으로 잘 챙기면 지원시 도움이 됨
3.
BE, 기획자, 마케터와 커뮤니케이션 소통을 많이 하는 것도 중요함
4.
소셜로그인은 BE에서 처리하고 라우팅 주소로 전달하는게 좋음
5.
시멘틱 태그, SEO 중요
6.
Protected Route 구성 중요
•
로그인/비로그인 시 노출되는 페이지 구성 시 필요
7.
카카오 로그인
•
FE에서 진행할 과정은 크지 않고 oauth 토큰만 잘 처리할 것
BE
알림 기능에서 PR 피드백을 수용하여 수정 작업
1.
List 2번 중복 호출 코드 refactor하여 1번으로 수정
2.
특산주 알림을 RegistrationService에서 Manager Service로 옮김
3.
ManagerService의 링크에서 게시글 ID를 확인하여 게시글를 조회하는 메서드에서 uri 가 변경되면 링크로부터 post id 를 받아오는 메서드를 매번 수정해야하는 문제를 해결하기 위해
•
URL 템플릿을 application.yml에서 관리하면 URL 구조 변경 시 코드 수정을 피할 수 있도록 구현
•
UriTemplate을 사용하여 설정 파일에서 URL 템플릿과 변수명을 가져와 동적으로 postId를 추출할 수 있도록 구현
•
URL 변경 시 설정 파일만 수정하면 되어 메서드를 수정하지 않아도 됨