2024.07.11(목)
postham 같은 클라이언트 사이트도 있음: 따로 프론트앱을 만들지 않고도 테스트 해볼수있는 브라우저
vscode중 REST client extension 추천해주심
(###을 붙이고 확장자가 api.http인 파일을 만들면)
감싸줘야 개발할때 디버깅 용도의 컴포넌트다
라우터로 하위 요소들을 감싸주고 복수의 경로를 만들기 위해 라우터/ 라우츠 컴포넌트로 감싸준다.
스타일은 html 문법과 똑같다.
같은 클래스 이름을 넣어도 중복에 대한 걱정이 없는게 장점이다.
api호출은 비동기작업
컴포넌트 안에서 비동기 호출이 있으면 비동기호출을 한다 (async)
async에서 서버로 호출하고 서버 데이터가 응답을 준다 (data)
컴포넌트는 함수이기때문에 바로 리턴해야한다. 기다릴수 없음.
비동기작업은 성공/실패 할수있는 작업
순수함수(Pure Function)= 실패가 없는 함수 (10*5 같은 항상 성공하는 코드)
부수효과(side effect)=실패가 있는 함수
비동기작업은 Promise로 적어야하는데 복잡하니까 await 쓸거임
const getBookmarks = async () ⇒ {
const response = await fetch(’/api/bookmarks’)
const data = await response.json()
console.log(data)
}
비동기함수 하나 만들기
map 에러를 처리하는 코드를 많이 사용한다.
어떻게 에러를 처리할것인가? 서버가 400번을 줄때도 있지만 안줄때도 있음
어떨땐 정상동작이 되고, 어떨땐 안될때는 예외(side effect)라고 한다.
예외를 처리할때 가장 많이 쓰는 코드는 try catch 문
시도할때 try를 넣어보고 실패할땐 catch로 넘어오도록
캐치는 이미 에러가 났다고 생각을 하고 작성하는 것
보통 이런식으로 작성함
태그컴포넌트를 먼저 만든다
