(중요) 21.10.23 2,3,4주차 복습테스트 & 5주차 모의테스트

2주차 자바스크립트

#1 인적사항 출력

#2 게임기 숨기기

#3 핑크,퍼플,오렌지

#4 사칙연산

 

#5 페이지 넘기기

 

3주차 React

#1 주문하신 메뉴 나왔습니다

 

#2 커피 주문

#3 State ( 객체인 경우 )

#4 Component

 

#5 Hook

 

4주차

#1 카페 메뉴 등록하기

사용할 state들, cafe는 배열이다.

Cafes()의 최종리턴

input의 onChange

불러오기를 누르면 돌아가는 함수 fetchCafe()와 불러오기를 누르면 출력될 {menuName}

axios.get을 하고 나서 받아오는 response라는 놈은 { ... ... } 복잡하게 생긴 객체인데, { 'data': { ... ...} , __: { ... ...} , __: { ... ... } } 이렇게 생긴 애다. 따라서 setCafe(response.data) 를 해주는 것이다.

 

또한 여기서 불러오기를 누르면 출력되는 menuName을 통해 cafe는 배열이고, [{ 'id': 1, 'item': '아메리카노'}, { 'id': 2, 'item': '카라멜마키아토' }] 와 같은 메뉴들이 모인 모양임을 알 수 있다. 

 

그러므로, 

등록하기 를 누르면 돌아가는 함수 updateMenu()

updateMenu 시 post해줄 애로 바로 id와 item을 집어넣으면 안되고, response.data의 모양에 맞게 { 'id': __ , 'item': __ }형식으로 넣어줘야 한다. 그래서 newMenu를 선언했다. 거기에 여태까지 input으로 setValue해준 id와 item을 넣어준다. 

 

또한 async function 내에 await axios.post / get / delete 등을 할 때 try { await axios.어쩌구 } catch { setFail('에러메세지') } 를 해서 try에는 하고자하는 비동기작업, catch 에는 실패했을 경우 를 적어주면 좋다.

 

 

#2 속담 채점하기

GradingForm의 최종 리턴

사용한 state들

채점 버튼을 누르면 작동하는 handleSubmit함수 ( form태그 하에 type='submit'인 태그를 클릭하면 작동한다. )

 

#3 교통비 계산하기

Ledger의 최종 리턴

교통비 계산하기 버튼을 누르면 작동할 getTransport()함수(비동기작업)와 거기서 받아온 교통비데이터들을 넣은 transportPay(배열)와 그것들을 화면에 출력할 li들을 담은 transportList(배열)

pay.filter()를 해도 pay가 배열이었으므로 transportPay도 배열, 

transportPay.map()을 해도 transportPay가 배열이었으므로 transportList도 배열이다.

이건 걍 주어진 함수 => 얘로 totalPrice나옴

 

5주차 모의테스트

#1 주문 및 메시지 reducer

request후 error

success

Reducer와 initialState는 최상위 component에 정의, action.payload.원하는key를 해두면 나중에 dispatch할 때 값 지정할 수 있다.

state를 쓰긴썻다. email,address받을 때, 그렇지만 메세지 띄우는 건 죄다 dispatch(action)

resolve -> then / reject -> catch

최종 리턴 

스타일

https://medium.com/@ca3rot/%EC%95%84%EB%A7%88-%EC%9D%B4%EA%B2%8C-%EC%A0%9C%EC%9D%BC-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-%EC%89%AC%EC%9A%B8%EA%B1%B8%EC%9A%94-react-redux-%ED%94%8C%EB%A1%9C%EC%9A%B0%EC%9D%98-%EC%9D%B4%ED%95%B4-1585e911a0a6

아마 이게 제일 이해하기 쉬울걸요? React + Redux 플로우의 이해

#2