[논의 사항]
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 토큰만 잘 처리할 것