복습 차 다시 한 번 하는 것
옵셔널 체이닝
{data.fetchboard.writer} // 처음에 그려질 당시 데이터가 비어있고, //데이터가 없는데 어케 데이터를 꺼내냐고 에러뜸 {data && data.fetchboard.writer} // 조건에 따른 렌더링 {data?.fetchboard.writer} // 위에 것도 귀찮을 때 (데이터 2번 써야하니까)
shorthand property
- key:value 가 같을 시 value를 생략하는 것
실무적인 폴더 구조 Container / Presenter
🌸 restful하다..! 폴더 정리 하는 방법 📖
/boards 안에 index.js 파일을 넣으면 게시글 목록 (목록을 기준으로 폴더를 만드니까 board 뒤에 s를 붙인 것) /boards/new : 게시글 등록 (없는걸 만드는 것) /boards/[boardId] : 게시글 상세 /boards/[boardId]/edit : 게시글 수정 ( 뭘 고칠지 정보가 있어야함 → boardId같은 것이 존재해야 함)
-
Container Component ( 부모 컴포넌트 )
-
Presentational Component ( 자식 컴포넌트 )
⭐️ 파일은 나뉘어져 있지만 실행할 때는 하나가 실행 됨 -
파일을 나누니 바인딩이 안되고 있다. (컨테이너 함수 색깔 흐릿흐릿)
→ handleChangeWriter는 컨테이너 것을 가지고 온 것이므로 가지고 와야함
부모가 자식에게 변수나 함수를 물려줄 수 있다 ( 자식 → 부모❌) → props
Props
- 부모가 가지고 있는 함수, 변수를 자식에게 물려주는 것
- import / export 서로 해주기 (container& presenter /quries& styles)
|| 연산자
- 있으면 앞에 것을 보여주고, 없으면 뒤에 것을 보여줌 (&&랑 반대)
- 거짓 : 0,'',false,null,undefined,NaN
- ex) 데이터 없으면 default 값(뒤에값)이라도 보여줄 때 사용
Nullish coalescing
- null과 Undefined가 왔을 때만 뒤에 것을 보여줘라
// data가 null 또는 undefined 일 때 data.fetchProfile 렌더
data ?? data.fetchProfile
null ?? "잰" // 잰 출력
undefined ?? "잰" // 잰 출력
0 ?? "잰" // 0 출력
NaN ?? "잰" // NaN 출력정리
data && data.fetchProfile // 참일 때 뒤에꺼 보여주기 data || data.fetchProfile // 거짓일 때 뒤에꺼 보여주기 (있으면 앞에꺼) data ?? data.fetchProfile // 거짓 중에서도 nullish하면 뒤에꺼 보여주기Q: 숫자 0 과 null은 다른 의미이기 때문에 널리시를 쓰는 건가여?
→ 맞아여 숫자 0은 의미있는 숫자일 수 있기 때문에 구분되어 쓸 수 있습니다 (0원, 0%)
자바 스크립트 데일리 스크럼
- 실무에선 for문을 잘 사용하지 않음 → 가독성 측면에서 떨어짐 → map 사용
- arr.map((item)⇒ (
${item} 먹고싶다.))
() => {return} // 리턴해주지 않으면 리턴이 일어나지 않음
() => () // 리턴을 포함 안해도 리턴이 일어남
() => // 리턴을 포함 안해도 리턴이 일어남
8일차 회고
- 오늘은 자명종 시계를 새로 산 덕분인지 지각은 면할 수 있었다.. 아침에 일어나기 너무 힘들다 😞
- 처음으로 프로그래머스에서 알고리즘 같은 알고리즘 문제를 풀어보았다! 시간안에 1문제 밖에 못풀었지만,,, 점점 발전하자
- 수요일에 알고리즘 시험을 보는데 한개도 못맞출 것 같아.. 하하
- 오늘은 자리가 바뀐 날이다. 너무 구석지다. 혼자 박혀있는 기뷴.. 낮이면 블라인드를 쳐도 틈새 사이로 밖에 햇빛이 들어온다...☀️
- 오늘은 퀴즈를 완벽하게 끝내지 못하고 야매로 끝낸 기분이 든다..! 처음으로 클래스룸에 궁금한 코드에 대한 질문을 남겨보았다 두근두군❣️
