skill-badge!

app/components,models,routes

각각어떤역할?

• components : react component 들
• models : 백엔드 mvc 중의 m
• routes :

remix 풀스택

• 서버사이드렌더링
• 프론트에서 로딩해서 가져올필요가거의없음

두 가지

• 풀스택
• 프론트 next and

bff 백엔드풀프론트엔드

• 클라우드플라
• 리액트는 풀스택어찌구를 만들수있는데, 리믹스가 두 개를 다하는 거임.
  그럼 리믹스 안에서 loader
  화면은 프론트
  분업을 하면 fullstack
  얘는 달리 리믹스 서번느 프론트용으로만 쓰고 로더안에서 getserversi안에서 프론트->백엔드에서 데이터를 가져오도록 하는 것
  프론트용서버
  실제apiㅅ서버는백엔드가따로
  => 백엔드 프론트 같이가 아니라, 프론트용 서버를 만들고 백엔드용 서버가 따로 있다
  우리는 BFF!
  퓰수택은 혼자서 백엔드까지 (디비를 직접 만들어야 함)
  너희가데이터보내주면받아서쓸게 DFF
  분업을 하려고. 혼자서다할수잇어서편함.

문제점

• 분업을못하는것
• 서버가 두개가아니면 프론트에서 다하면 모바일앱을 못 만듬 . 모바일도 API에서 데이터를 가져와야 하는데 안드로이드 스위프트 렌더링. (API 서버가 잇고 데이터를 프론트랑 안드로이드, 스위프트 서버가 갖다 쓰도록 돌아가야 함.)
  모바일 웹사이트 둘 다 지원해야해서 분업체계가 생김.

우리가 DB를 받아오면
모바일은 데이터를 어디서 받아옴?,,구로게

리믹스는?!
역행을하려고한다. 분리하면힘드니까

yarn을 써서 실행해라

routes는 next의 pages와 거의 똑같음
getServerSideProps = loader

리믹스 특징

크게 세 가지 개념

• loader : 말그대로 데이터를 가져올 때 (= nextjs - gssp , reactquery - usequery
• action : 데이터를 서버에다 보낼 때 (= useMutation or nextjs apiprops?)

const useTransition
폼을 제출하면 isCreating이 true로 바뀜. 폼이 날아가고 있따는 뜻. disabled에 isCreating 만들어서 disabled에 달아두면
isCreating =

브라우저 기본동작. preventDefault
리믹스는 그렇게 힘들게 살지말고 기본으로 돌아가자. 브라우저 기본동작을 해주는데 교묘하게 없애줌 페이지전환->새html받아옴. 리믹스 spa임 페이지내용만갈아끼우고 html을 새로받아오지 않아서 깜박거림이 없음. => spa 리믹스

velog
sitemap
koa 미리렌더링해서보내주는라이브러리?
serverRender ssr

invariant (typescript util) remix 아님

loader는 서버에서 돌아가고 데이터를 브라우저에게 보내주는데

처음에 페이지를 보낼 때 ssr을 하고 그 다음부터는 클라이언트에서 hydration를 시켜서 클라이언트가 와서 리액트로 돌아감. 처음 한 번만 서버가 html을 그려서 보내주는데
그다음엔 loader data

• 처음 ssr할 때 페이지한테 데이터를 공급
• export default로 빼준 데이터를 공급해줌. 브라우저가 날아간 뒤 다른 페이지로 넘어가면 루트페이지에 요청을 하는데,
  

• 페이지에 해당하는 api (useLoaderData())

skills/react?_

• 언더바 데이터면, 쿼리스트링을 붙여주면 리액트 페이지가 아닌 페이지에 해당하는 데이터를 로더로 보내주세요!
• 루트에 해당하는 로더에서 데이터를 꺼내주세요

json함수로 호출
response.json() 받은 json data를 parse 하는 것. 우리가받는것이고받는sjon꺼내기
JSON.stringify해서 보내는 용도 - 보내는 객체를 json으로 만드는 것

action

데이터를 가져와서 브라우저로 보내주는 게 loader
리믹스는 서버니까 서버가 디비나 다른 api 서버에서 데이터를 가져와 브라우저, ssr에 보내주는 것이 로더다

Form을 만들 때 쓰는 action.

formData는 폼을 날릴 때 form element로 꺼낼 수 있는. 브라우저 api.

formData는 map일아 비슷한데 get,set이잇음
차이점은 get으로 key를 가지고 데이터를 가져올 수 있음
input에 name을 가지고 해당하는 input의 데이터를 가져올 수 있음

remix request 객체에 있는 formdata method

흉내낸 것
브라우저의 formdata를 비슷하게 만든 것
axios 안 써도 알아서 요청이 잘 날라감
우리는 서버니까 request를 받음. 거기서 formData를 꺼내서 브라우저의 formData api랑 똑같이 생긴 걸 만들 수 있음

raw 날것
rawData 날것의데이터(폼검증을안한데이터)

useActionData로 에러를보냇으면 에러를받을수있음. 서버에서보낸걸받아옴

type들을 어떻게 분리하면 좋을까? d.ts

100% 취향!!!

여러개돌려쓰는거는 models
페이지안에서만쓰는것은 pages

= 취향

json 함수는 데이터를 보낼 때 쓴다
브라우저야 이런 에러가 났어!

json<ActionData>(result.error

remix, next를 쓰면서 리덕스나 리액트쿼리를 쓸일이 거의 없어짐. 이따금씩 써야할때가잇긴함

• 페이지 안에서 여러번불러오려면 react-query를 쓰는데 그럴필요가없어짐

zod

1. 스키마 파싱 라이브러리

• 데이터가 어던 모양이어야하는지 형태를 정의함. (글자가한개이상이어야함)
• 그거에따라에러던지는것도만들어준다
• react-hook-form 도 같이쓸수있음

2. 타입을 찍어줌

• 스키마를 정의해놓으면 타입을 찍어줌
• 실제로 그 타입이 맞는지 parse로 검사도해줌

폼쓰면 validation 올바른 형태인지 그거에 맞는 타입도 정햇어야 햇는데, z 'zod'를 쓰면 에러를 던져주고 멀해줌. react-hook-form 안에서만쓸수있음
조드스키마로 폼검증, 데이터검증, 에러메시지도 만들어줌

라이브러리의 내부구조를 알아야 하나?

• 조리사가 화력이약하고 안정적이지못하고좋지않네 더 좋은 게 없나 next버너가나왓대 seo 초기로디 써볼까?
• 진정의 요리사 = 칼의 차이를 알아야할필요는잇지만, 만든느법을알필욘없음
• => 내부구조x 잘쓰는방법만익혀라

1. 문제를해결하고싶다.해결하는건나름재미도잇고. 해결하는즐거움이잇으닊 ㅏ해보자
2. 강박
3. 성취나 먹고살려는데 도움이되니까 하지만 잠이힘들면 선을그으면 괜찮을것같다
   강박장애는아닌것같다

nextjs - 클라우더전문가
remixjs - react-router-dom을만든분이만드심

Headless 컴포넌트 라이브러리

css가 없고 기능만잇음!
radix, react-aria, zag 등 - Headless Component

표준 aria 접근성

• 을지키면 검색엔진에도 잘들음 검색엔진최적화랑도관련이잇고
• 사용자가 편리하게 기능을 사용할수잇고
• 키보드를 좋아하는 사람들도 편하게쓸수있고

이걸쓰면 기능을 손으로 한땀한땀 만들지않아도된다.

모든걸다차크라로써야하는데
radix나 그런건 dialog가 필요하면 dialog만 갖다쓸수있음
좋은건필요한만큼ㅁ나설치해서 필요한만큼만씀

직접만들거면직접만들고!
가져다쓰는게편하면 가져오고

큰라이브러리를 설치하는게 작은라이브러리르 여러개설치하는것보다 더 안 좋음
차크라나 그런 애들은 사용자에게 가는 번들사이즈가 커짐. 로딩사이즈가커짐
로딩이길면 나가버림

멜라토닌 : 밤에잘때
세로토닌 : 아침에일어날때 (우울증) 옥시토신
도파민 : 의욕. 중독호르몬 (게임 - adhd)
과수면장애.

react native는 모바일용
electron은 컴퓨터용

좋은걸갖다쓰면서빠르게찍어보는것도중요

역량들구경하고 이력서에 쓸 역량들 정하고 정리 - 한달
구체적 컨텐츠 넣고 공부할수잇는 챌린지 - 두세달