-
Notifications
You must be signed in to change notification settings - Fork 28
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
[Mission5/김효리] Project_Notion_VanillaJs 과제 #53
base: 4/#5_kimhyori
Are you sure you want to change the base?
Conversation
vite, eslint, prettier, jest 적용
메인 페이지가 notionPage이고, 다른 페이지가 존재하지 않으므로 App.js에 모두 구현하도록 변경
.documents .document { | ||
padding-left: 5px; | ||
} | ||
|
||
.documents .depth1 { | ||
padding-left: 15px; | ||
} | ||
|
||
.documents .depth1 p { | ||
width: 125px; | ||
} | ||
|
||
.documents .depth2 { | ||
padding-left: 25px; | ||
} | ||
|
||
.documents .depth2 p { | ||
width: 115px; | ||
} | ||
|
||
.documents .depth3 { | ||
padding-left: 35px; | ||
} | ||
|
||
.documents .depth3 p { | ||
width: 105px; | ||
} | ||
|
||
.documents .depth4 { | ||
padding-left: 45px; | ||
} |
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.
scss나 postcss를 사용했으면 좋았을 것 같아용
src/api/api.js
Outdated
const request = async (url = '', options = {}) => { | ||
const res = await fetch(`${ENV.API_END_POINT}${url}`, { |
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.
url보단 pathname과 같은 명명이 좋지 않을까 싶어요~!
src/domain/fetchData.js
Outdated
]) | ||
return { documents, content } | ||
default: | ||
return null |
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.
있을 수 없는 케이스라면 throw를 하면 어떨까 싶어요~!
src/templates/mainPageTemplates.js
Outdated
// editor | ||
export function contentTemplate({ content, documents }) { | ||
let html = `<textarea placeholder='새로 글을 작성해 보세요.'>${ | ||
content ? content : '' |
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.
content || ''
로 작성할 수 있을 것 같네요~
src/templates/mainPageTemplates.js
Outdated
|
||
function renderDocument({ id, title, documents }, depth) { | ||
const toggleState = getItem(ENV.TOGGLE_STATE_SAVE_KEY) | ||
const isToggled = toggleState?.[id] ? 'open' : '' |
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.
boolean값을 가질 것 같은 변수인데 string 값이 대응되네욤
boolean값으로 처리되고 이 변수를 사용하는 쪽에서 대응되면 좋을 것 같습니다:-)
src/utils/validation.spec.js
Outdated
|
||
expect(() => { | ||
TestComponent() | ||
}).toThrow('TestComponent 컴포넌트 생성 시 new 연산자를 붙이지 않았습니다.') |
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.
에러메시지를 상수화 해서 validation에서 같이 export 하면 좋을 것 같네요ㅎㅎ
vite.config.js
Outdated
@@ -0,0 +1,5 @@ | |||
export default { | |||
build: { | |||
target: 'es2015', |
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.
css 처리를 위해 구체적인 정의를 하면 좋을 것 같아요~
<head> | ||
<meta charset="utf-8" /> | ||
<title>효리의 노션 클로닝 사이트</title> | ||
<link rel="stylesheet" type="text/css" href="/styles/style.css" /> |
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.
스타일을 js 내에서 import 하는 방식도 고려하면 좋을 것 같습니다
- content 표현 축약 - isToggled boolean으로 변경
aae94eb
to
41b2c52
Compare
🔗 배포 링크
📌 과제 설명
기본 요구사항
보너스 요구사항
👩💻 요구 사항과 구현 내용
시간이 많이 부족해서 기본 구현만 다 했습니다. 이후에도 계속 수정해서 업데이트 하겠습니다!
구현 완료
vite
,eslint
,prettier
,jest
등 초기 세팅을 했습니다.App.js
, 페이지, 컴포넌트 파일에서 각각 상태를 전달하고 업데이트하기 위해 함수를 분리해 구현했습니다.App.js
는 상태 관리를 하고, 라우팅을 처리해줍니다.MainPage.js
에서는 이벤트와 업데이트 된 상태를 전달합니다.아직 구현 못한 기능들 + 추가로 하고싶은 기능들
체감 난이도 ⭐로 표시
✅ 피드백 반영사항
(추후 수정)
✅ PR 포인트 & 궁금한 점
➕ 404 페이지를 구현하기 위해 에러 전파를 마구마구 했는데, 코드가 엄청 지저분해졌습니다 ㅠ 이를 해결할 때 어떻게 해야할지 궁금합니다.