5주차 개발 상황 코드리뷰 #39
5주차 개발 상황 코드리뷰 #39
Conversation
* Init: 초기 파일 세팅 및 폴더구조 생성 * Docs(template): PR, Issue Template 추가
* chore(package): swiper 설치 및 host로 열기 설정 추가 * chore(main): kakao-login symbol icon 추가 * chore(main): star-icon image 추가 * Feat(main): login button ui 구현 * Feat(main): main ui 구현 및 컴포넌트 분리 * Feat(router): Mainpage router 추가
배포 자동화 및 eslint 테스트 자동화 기능 구현
마이페이지 UI 구현 (구성 컴포넌트 추가)
회원가입 페이지 UI 구현
보호자용 서비스 이용 현황 페이지 구현
안부전화 서비스 요청 리스트 구현
시니어 등록 페이지 UI 구현 및 공통 컴포넌트(버튼) 생성
안부전화 서비스 UI 구현
There was a problem hiding this comment.
일단 전체적으로 폴더구조를 많이 신경쓴게 느껴지네요 ㅎㅎ
하나 아쉬운점은, 모든 컴포넌트를 index.tsx로 표현하려고 해주셨는데
덕분에 컴포넌트를 탐색하는게 다른 사람 입장에서는 무척 어려울 수 있답니다 ㅠㅠ
왜냐면 모든 컴포넌트가 index라는 파일에 정의되었고, 파일 이름으로 탐색하는게 어색한거죠.. ㅎㅎ
그리고 불필요하게 폴더의 depth가 깊어지고 있어요.
그래서 이런 방식은 추천드리지 않아요!
FE 가 현재 3명이기 때문에 어떤 기준으로 기능 구현 분배를 하는것이 가장 효율적인지 멘토님의 생각이 궁금합니다! 지금까지는 주로 UI 구현 위주로 진행했었는데, 기존에 Figma에 디자인해놓은 것들을 바탕으로 페이지별로 구분하여 분배를 진행했었습니다. 기능구현도 이런 방식으로 하는게 좋을지, 아니면 또 다른 방법으로 분배하는 것이 좋을지 멘토님의 의견이 궁금합니다...!
컴포넌트 단위로 개발할 경우 스토리북이 필요해보여요! 지금은 ui를 어떻게 확인하는거지? 라는 생각이 들어요 ㅎㅎ
페이지 하나하나 링크를 직접 타고 들어가서 개발하는걸까요..? 꽤 불편할 것 같네요 ㅠㅠ
| callBackDetail: ':callBackId', | ||
| callBackGuidLine: ':guideLineId', | ||
| seniorRegister: `/senior-register`, | ||
| }; |
There was a problem hiding this comment.
ROOT: '/',
LOGIN: '/login',
REGISTER: '/register',
MYPAGE: `/mypage`,
SERVICE_HISTORY: `/service-history`,
HELLO_CALL_SERVICE: 'service',
HELLO_CALL_REPORT: 'report',
HELLO_CALL: `/hello-call`,
CALL_BACK_LIST: '/call-back',
CALL_BACK_DETAIL: ':callBackId',
CALL_BACK_GUID_LINE: ':guideLineId',
SENIOR_REGISTER: `/senior-register`,보통 상수로 관리할 때는 이렇게 대문자로 표현한답니다!
| import { ChakraProvider, GlobalStyle } from '@chakra-ui/react'; | ||
| import { Routes } from './app/routes'; | ||
| import { queryClient } from './shared/api/instance'; | ||
| import { globalStyle } from './shared/theme/global'; |
There was a problem hiding this comment.
어떤 곳은 alias로 가져오고 어떤 곳은 상대경로로 가져오네요 ㅎㅎ
alias는 언제 쓰는게 좋은걸까요?
| font-family: 'Pretendard-Regular'; | ||
| src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff') | ||
| format('woff'); | ||
| font-weight: 400, 700, 900; |
There was a problem hiding this comment.
여기 css 문법 오류가 발생하고 있어요~
이런식으로 수정해야 하지 않을까요?
@font-face {
font-family: 'Pretendard-Regular';
src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Pretendard-Regular';
src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff') format('woff');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Pretendard-Regular';
src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff') format('woff');
font-weight: 900;
font-style: normal;
}| font-weight: 300; | ||
|
|
||
| transition: background-color 0.3s ease; | ||
| transition: color 0.3s ease; |
There was a problem hiding this comment.
transition: 0.3s ease;
transition-property: background-color, color;이렇게 표현해야할 것 같아요..!
There was a problem hiding this comment.
혹은 이렇게 표현할 수 있답니다.
transition: background-color 0.3s ease, color 0.3s ease;| import styled from '@emotion/styled'; | ||
|
|
||
| type Props = { | ||
| handleClcik: () => void; |
#️⃣ 연관된 이슈
📝 작업 내용
스크린샷 (선택)
💬 리뷰 요구사항(선택)
⏰ 현재 버그
✏ Git Close
안녕하세요 멘토님! 8조 5주차 코드리뷰 PR을 늦었지만 토요일 저녁에 보내봅니다!
당연히 핑계라고 생각하지만 FE쪽 3명다 너무 이것저것 프로젝트도 많이 하고, 개인 일정도 많다 보니 구현하는데 많은 시간을 투자하지 못하여 다른 팀에 비해 개발속도가 많이 느린 것 같습니다. 이 부분은 다음주차부터는 꼭 개선될 수 있도록 노력해보겠습니다!
먼저, 이번주차에 멘토링을 통해 멘토님께서 말씀해주셨던 ** 관심사 별로 분리하자!"** 라는 키워드를 바탕으로 전체적인 구조를 수정하고, 코드를 작성할때도 적절하게 분리하기 위해 많은 노력을 해보았습니다! 아직 조금 서툴다 보니 코드상에서 관심사별로 분리가 되었는지 잘 모르겠습니다 ㅠㅠ
다음 주차부터는 본격적으로 기능구현에 들어갈려고 합니다. FE 가 현재 3명이기 때문에 어떤 기준으로 기능 구현 분배를 하는것이 가장 효율적인지 멘토님의 생각이 궁금합니다! 지금까지는 주로 UI 구현 위주로 진행했었는데, 기존에 Figma에 디자인해놓은 것들을 바탕으로 페이지별로 구분하여 분배를 진행했었습니다. 기능구현도 이런 방식으로 하는게 좋을지, 아니면 또 다른 방법으로 분배하는 것이 좋을지 멘토님의 의견이 궁금합니다...!
사실 저희 3명 다 멘토링이 끝난 후 '코드 분리' 라는 부분에서 많이 서툴다는 생각을 많이 했었고, 이를 개선하기 위해 계속해서 공부하고 노력해오고 있습니다. 작성한 코드상에서 조금이라도 잘못되거나, 더 좋은 방법을 리뷰를 통해 알려주신다면 최대한 반영할 수 있도록 노력해보겠습니다!
갑자기 날씨가 추워졌습니다.. 멘토님도 감기 조심하시고, 항상 멘토링과 코드리뷰를 진행해주셔서 감사하다는 말씀 3명을 대표해서 전합니다...!