Conversation
CardList Component
.eslintrc.json
Outdated
There was a problem hiding this comment.
이걸로 설정해보는건 어떤가요? 공식문서에서도 recommend 하고있는 strict 형태여서 제안드립니다
https://nextjs.org/docs/app/building-your-application/configuring/eslint
There was a problem hiding this comment.
역시 말씀드리지만, javascript project convention에 따라 파일명을 제작하는게 좋겠어요
https://google.github.io/styleguide/jsguide.html#file-name
파일 이름의 경우, lowercase와 underscore의 조합으로만 작성을 하고, 리액트 프로젝트 컨벤션에 따라 콤포넌트만 PascalCase 또는 snake-case로 작성을 하는건 어떨까요?
| userEmail: string; | ||
| } | ||
|
|
||
| const Account = ({ profileImgSource, userEmail }: AccountProps) => { |
There was a problem hiding this comment.
account라기 보단 user-profile이라는 콤포넌트가 더 적합한 이름으로 보이는데 어떻게 생각하시나요?
| profileImgSource?: string; | ||
| userEmail: string; |
There was a problem hiding this comment.
prop으로 전달받는 요소의 경우, 우리 프로젝트에서 전반적으로 사용되는 유저 데이터가 존재하나요?
그렇다면 유저 데이터에 대한 타입을 선언해서 그냥 유저 정보를 다 받아오도록 하는게 더 좋지 않을까 생각이 되어요.
type User = {
profileImgSrc?: string
email: string
name: string
...
}
interface AccountProps {
user: User
}
components/Button/Button.tsx
Outdated
| @@ -0,0 +1,30 @@ | |||
| import styles from './Button.module.css'; | |||
|
|
|||
| interface ButtonProps { | |||
There was a problem hiding this comment.
button element가 기본적으로 받아올 수 있는 요소들이 존재할텐데요
그걸 받아올 수 있도록 react진영에서 button element에 대한 타입을 사전에 정의해놓았습니다.
Button Props에 위에 설명한 버튼 타입을 상속받아 확장하도록 하는게 좋겠어요
components/Modal/Modal.tsx
Outdated
There was a problem hiding this comment.
모달의 관리 주체와 제어권의 역전을 활용해볼 수 있는 방향을 고민해보면 좋겠어요
https://kentcdodds.com/blog/inversion-of-control
| export const SEARCH_INPUT_ID = 'search-link'; | ||
| const SEARCH_INPUT_PLACEHOLDER = '링크를 검색하세요'; | ||
| const SEARCH_INPUT_ICON_ALT = 'Search Icon'; |
There was a problem hiding this comment.
이 콤포넌트 내부에서만 활용될 요소들을 상수화 한 이유가 있나요?
| const router = useRouter(); | ||
|
|
||
| const handleToggleClick = () => { | ||
| setShowPassword(!showPassword); |
There was a problem hiding this comment.
이렇게 활용하면 리액트 상태의 비동기성으로 인해 데이터 업데이트 값을 보장하지 못해요
이전 상태값을 수정해야한다면 다음과 같이 활용해주세요
setShowPassword(prev => !prev)
| try { | ||
| const response = await axiosInstance.post('/sign-in', data); | ||
| if (response.status >= 200 && response.status < 300) { | ||
| const accessToken = response.data.data.accessToken; | ||
| localStorage.setItem('accessToken', accessToken); | ||
| router.push('/folder'); | ||
| } else { | ||
| } | ||
| } catch (error) { | ||
| setError('email', { message: '이메일을 확인해주세요' }); | ||
| setError('password', { message: '비밀번호를 확인해주세요' }); | ||
| } |
There was a problem hiding this comment.
서비스 로직과 ui로직 분리하기!
|
|
||
| const UserInfoContext = createContext<any>(undefined); | ||
|
|
||
| export const UserInfoProvider = ({ children }: Props) => { |
There was a problem hiding this comment.
유저 정보만 관리하기보다, auth 관련한 기능을 여기서 관리하도록 해보죠!
요구사항
기본
심화
주요 변경사항
멘토에게