-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[NDD-136] setting 전역 hook 작성 (1h/2h) #38
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change | ||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
@@ -0,0 +1,41 @@ | ||||||||||||||||||
import { atom } from 'recoil'; | ||||||||||||||||||
|
||||||||||||||||||
type PageStatus = 'pending' | 'success' | 'error'; | ||||||||||||||||||
type RecordMethod = 'local' | 'idrive' | 'none' | undefined; | ||||||||||||||||||
|
||||||||||||||||||
type SelectedData = { | ||||||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. [p-1] type QuestionData = {
id: number;
content: string;
answer: string;
};
type SelectedData = QuestionData[]; 이런 느낌으로 바꿔보면 어떨까요? export const questionSetting = atom<{
status: PageStatus;
selectedData: SelectedData;
}>({
key: 'questionSetting',
default: {
status: 'pending',
selectedData: [], // 빈 배열로 초기화
},
}); There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 변수이름은... 알잘딱깔센으로 부탁합니다! There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 현재 이 타입에서는 아래와 같이 저장할 수 있어서 여러개의 데이터가 들어갈 수 있을 것이라고 생각합니다! const test:SelectedData = {
key1: {
id: 1,
content: "content 1",
answer: "anser 1"
},
key2: {
id: 2,
content: "content 2",
answer: "anser 2"
}
} There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 제가 recoil을 잘 몰라서 일까요 😂 잘 이해가 안되는 부분이 있어요! 예시를 한번 볼 수 있을까요? 예를들어 const selctedQuestions = [{
title : "1번 질문",
answer : "1번 질문에 대한 답변"
},{
title : "2번 질문",
answer : "2번 질문에 대한 답변"
}
]
... 이런 형태로 말이죠! There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 아하 어느정도 이해했습니다. 왜 key 값으로 관리가 되어야 할지에 대해서 동의했습니다!! 아마 getter 등을 사용해서 반환할때만 배열형태로만 반환하면 될거 같긴하군요 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 네넵! 실제 인터뷰 페이지에서 사용될 때 Object.values() 등을 사용해서 배열로 변환해서 사용하면 될 것 같네요! There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 앗 요부분은 제가 잘못 타이핑 되었네요. 수정본은 이렇습니다
Suggested change
제가 의도한 바로는 slectedData를 각 각 분야 별(FE,BE,CS 등등)로 선택된 배열을 묶어서 전역 상태로 사용하려고 합니다 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 아!! key값에 카테고리가 저장되는거였군요!! 제가 잘못 이해했네요! There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||||||||||||||||||
id: number; | ||||||||||||||||||
content: string; | ||||||||||||||||||
answer: string; | ||||||||||||||||||
}; | ||||||||||||||||||
|
||||||||||||||||||
export const questionSetting = atom<{ | ||||||||||||||||||
status: PageStatus; | ||||||||||||||||||
selectedData: SelectedData[]; | ||||||||||||||||||
}>({ | ||||||||||||||||||
key: 'questionSetting', | ||||||||||||||||||
default: { | ||||||||||||||||||
status: 'pending', | ||||||||||||||||||
selectedData: [], | ||||||||||||||||||
}, | ||||||||||||||||||
}); | ||||||||||||||||||
|
||||||||||||||||||
export const videoSetting = atom<{ | ||||||||||||||||||
status: PageStatus; | ||||||||||||||||||
}>({ | ||||||||||||||||||
key: 'videoSetting', | ||||||||||||||||||
default: { | ||||||||||||||||||
status: 'pending', | ||||||||||||||||||
}, | ||||||||||||||||||
}); | ||||||||||||||||||
|
||||||||||||||||||
export const recordSetting = atom<{ | ||||||||||||||||||
status: PageStatus; | ||||||||||||||||||
method: RecordMethod; | ||||||||||||||||||
}>({ | ||||||||||||||||||
key: 'recordSetting', | ||||||||||||||||||
default: { | ||||||||||||||||||
status: 'pending', | ||||||||||||||||||
method: undefined, | ||||||||||||||||||
}, | ||||||||||||||||||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
[p-2]atoms라는 새로운 폴더가 생성되었으니, tsconfig.ts 와 webpack.config.js의 alias도 추가해 주시길 바랍니다!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
cec1821