220516 프론트엔드 부트캠프 8일차 : container, presenter

부트캠프로만 따지면 6일째~

자리가 바꼈다! PF 중 왼쪽에 계시던 분은 가셨다... 🥲

오늘은 실무에서 파일을 어떻게 나누는지에 대해 배웠다.
보통 코드는 100줄 안 넘게 작성하고, 70줄 정도가 적당하다고 한다.

  2주차 커리큘럼

1. 실무적인 폴더구조 -> container, presenter
2. 컴포넌트 분리 및 데이터 전달 -> props
3. 목록 형태의 데이터 -> Map, Filter
4. 안전한 코드 -> Typescript
5. 규칙을 정하고 협업하기 -> Eslint, Prettier, Husky

Eslint가 맞는지 모르겠다...? 오타난 건지 원래 이름이 저건지?!
오타 아니군. 린트라고 부른답니다. 이름은 허스키가 마음에 든다 😙

  freeboard 리뷰 - 동적 라우팅, 라우티드 페이지 : 조건부 렌더링, 옵셔널 체이닝

우선 동적 라우팅한 페이지에서 코드는! export default function BoardDetail() 여기서부터 읽기 시작한다.
useQuery(FETCH_BOARD)에서 돌려받은 데이터를 data에 저장하는데, 이때 데이터를 갖고 올 때까지 기다리지 않는다. 그래서 처음엔 데이터가 없다(undefined). 그래서 처음부터 data.~ 을 쓰면 에러가 난다. -> data &&. data.fetchBoard ~ 이렇게 써준다.(조건부 렌더링)
이렇게 두 번씩 쓸 필요 없이 줄이면 data?.fetchBoard?.writer (옵셔널 체이닝)

optional chaining 연산자 (?.) 는 체인의 각 참조가 유효한지
명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다.

라는데 한국어인데 잘 이해가 안 된다...
위에 있는 data로 보면,

//조건부 렌더링
data && data.fetchBoard.writer
//data가 있으면 -> data.fetchBoard.writer를 보여줘라

//옵셔널 체이닝
data?.fetchBoard.writer

data가 null 또는 undefined면 undefined를 반환한다.
약간 데이터가 있으면? 띠용? 보여줘라~ 이런 느낌으로 읽혀.. ㅎ

옵셔널 체이닝은 중첩해서 사용할 수 있다.

let happy = {
	name : { one : "love", two: "smile", three: "puppy" },
    add : "cake"
}
    
console.log(happy?.name) // {one: 'love', two: 'smile', three: 'puppy'}
console.log(happy?.name?.three) // 'puppy'
console.log(happy?.add) // 'cake'

Optional-Chaining vs nullish-coalescing
data && data.fetchProfile → data?.fetchProfile
(앞이 false면 앞에가 보임, 앞이 true면 뒤가 보임)
data || data.fetchProfile
(앞이 false면 뒤에가 보임, 앞이 true면 앞이 보임)
data ?? data.fetchProfile
(거짓 중에서도 null, undefined 널리쉬한 애들에 대해서만 뒤에꺼 보여줘~)

다시 돌아가서,

boardId : router.query.boardId 는 pages-boards-[boardId]를 말하는 것이다.
사진에서는 aaa로 변경되어있음

왜 비동기 방식으로 작동하는가? 보여주는 데 있어서는 기다릴 필요가 없다. 먼저 보여줄 수 있는 화면은 먼저 보여줘야 한다. 이는 사용자의 이탈률을 낮추기 위해서! 화면 너무 느리면 사람들은 이탈하기 때문에 HTML, 이미지 등 먼저 보여주고 data는 로드되는 대로 보여준다.

console.log(router) 찍어보면 pathname: , route: , query:, asPath: 등이 나온다.
pathname과 route 예전엔 차이가 있었지만 지금은 차이 없다. query 부분 누르면 "6123122e332"이런 값이 들어가 있는데 그게 바로 router

폴더명에 대괄호[]가 있는 것과 없는 것의 차이
없는 건 뒤에 무조건 /new 가 붙어야 한다. 그 안에 있는 index.js로 들어감
new가 아니라 다른 울라울라값(/울라울라)이 들어가면 [] 안의 index.js로 들어간다.

데이터를 보낼 땐 동기로 하면 안 된다. id를 등록하고 받아서 그 주소로 가는 것이기 때문에 await를 사용해서 기다려야 한다.

 falsy, truthy

falsy, 거짓을 나타내는 것들 : false, "", 0, undefined, null, NaN(Not a Number)
truthy, 참을 나타내는 것들 : true, " ", 1, -1

  폴더구조 체계화 : Container, Presenter

CRUD 하나의 기능을 만들 땐 최소 4-5개의 API가 만들어져야 한다.
수정 페이지 - /products/edit 이 안 되는 게, 몇 번 게시글 수정해줘~라고 요청해야 하기 때문에
/products/_id/edit 형태를 띠게 된다.

(목록 밖에 있는 commons는 여러 컴포넌트에서 사용되는 함수 같은 것들을 모아놓은 곳,
components 안에 있는 애들은 모두 컴포넌트고, 그중에서 units은 한 번 쓰이는 애들, commons는 여러 번 쓰이는 애들)

제일 바깥에 있는 애 - 페이지 컴포넌트, 엄밀히 따지자면 app.js(가장 먼저 실행됨)

자바스크립트 영역과 HTML 영역을 나눠야 한다(기능과 화면).
Container, Presenter 둘 다 함수형 컴포넌트 -> 둘 다 자바스크립트 영역, HTML 영역을 갖고 있다.
실행할 때 두 개의 컴포넌트가 하나로 합쳐져서 실행된다. 정확히는 컴포넌트 간에 부모와 자식이 존재하는데, 실행될 때 자식이 부모의 위치로 들어가서 합쳐져서 실행된다!😊 즉 하나의 소스코드로 실행이 된다.
근데 왜 나눴냐고?? 한 파일에 소스코드를 짧게 쓰려고! 왜? 원하는 부분, 에러 있는 부분 잡아서 해결할 수 있도록!
이것은 유지보수하기 용이함을 의미한다~
(안 잘리려고 일부러 유지보수를 어렵게 만들기도 한다. 그런 책도 나와있다ㅎㅎ 하지만 권하지 않음)
나바아아아아아아아앙 - - — - - —— ———- - —— —— - - - - - ——

  Props 

부모 컴포넌트에서 자식 컴포넌트에게 함수, 변수 등 데이터를 넘겨줄 수 있다!

1. props = { aaa: handleChangeWriter } 객체로 변함 (aaa는 임의의 키값)
2. 자식 컴포넌트의 props로 전달
3. props.aaa (=handleChangeWriter라는 value)

실무에선 키값과 밸류값을 같게 씁니다! ( props = { handleChangeWriter : handleChangeWriter } )
다른 컴포넌트에 있으면 변수 이름이 같아도 다른 변수다.

리액트에서의 데이터의 흐름은 단방향 구조(부모->자식만 가능, 자식->부모 불가능)
앵귤러는 양방향도 가능하지만 이게 꼭 좋은 것만은 아니다.

  import & export 

export const 어쩌구{} 로 내보내면 골라서 받아야 한다! {}를 써야함
export default 어쩌구{} 로 내보내면 default로 내보낸 것이기 때문에 골라서 받는 것 없이 통째로(괄호 없이) 받고, 받는 것에서 이름을 아무거나 써도 받을 수 있다.

// 자식에서
export const curly ... 
export default nocurly ... 

//부모에서
import { curly } from ... 
import nocourly from ...

내가 봐도 설명이 구리다.

+ forEach, map 공부

새로운 분들과 밥을 먹었다😃
어디 가지 하다가 내가 지도에 저장해놨던 밥도둑..? 밥장인?을 가게 됐는데 길을 못 찾아서 헤매서...너무나 죄송했다,,,,흑흑... 그리고 불고기를 9000원이나 주고 먹어서 건대 후문 이름 기억 안 나는 식당이 잠깐 그리웠다.
오늘은 뭔가 힘들었다... 잠깐씩 쉬면서 하고 싶은데 쉬는 방법을 까먹은 기분??? 그래서 강제로 쉼방에 들어가 있어 봤는데 밖에서 공부 이야기하는 소리를 듣고 있자니 도저히 안에 앉아있을 수가 없었다. (그렇다고 엄청 열심히 하는 건 아님 그냥 가만히 있을 수가 없었다는 것뿐....) 이래서 담배를 피나?(????)
그리고 처음으로 콤부차를 담아서 계단으로 올라갔는데 문이 잠겨있고...! 출입증을 태그해도 열리지 않았다. 12층 계단도 출입증으로 태그한 후 열었던 기억이 나서 12층으로도 못 가겠구나!!! 난 갇혔어( ´•̥-•̥` ) 싶어서 PF님께 구해달라고 sos쳤는데... 알고보니 내가 14층이었다. 약간 낯선 콤부차 + 낯선 12층 + 낯선 계단 때문인지 부끄러웠다 조금 많이,,,
첫 PF가 중요할 거라고 생각하긴 했는데, 정말 다들 혼란에 빠졌을 땐 첫 PF에게 찾아가는 걸 볼 수 있었다. 혼란에 빠지지 않아도 가신다) 요팅씨를 생각하며🥲 나도 누군갈 찾아가고 싶었지만... 아 이래서 오늘 기분이 이상했나?! 아무튼 그런 느낌이었어... 약간 취해서 기분 좋은 친척 어르신들 사이에서 혼자 어색함을 느끼는 피쳐폰을 쓰는 15살 중학생같은 느낌 낯선 곳에서 친척집의 향기를 맡았다구ㅠ 그리고 사진 첨부하러 모바일로 들어오곤 하는데 일요일날 방문자수가 높아서 무섭다ㅏ 글을 올리긴 하는데 왠지 동기분들이 보면 부끄럽다,, 🥲 그리고 맥북 케이스 프로로 잘못삼.. 누군가 13인치 프로 쓰시는 분이 계시다면 당근을 흔들어주세요 그냥 드리게

아무리 생각해도 싸게 샀다

쥬신이 코옆... ~

오늘의 공부시간🌈 블로그 쓴 것도 공부라면 한 시간은 더해도 되겠다 •̀ᴗ•̀