2주차 자바스크립트 #1 인적사항 출력 #2 게임기 숨기기 #3 핑크,퍼플,오렌지 #4 사칙연산 #5 페이지 넘기기 3주차 React #1 주문하신 메뉴 나왔습니다 #2 커피 주문 #3 State ( 객체인 경우 ) #4 Component #5 Hook 4주차 #1 카페 메뉴 등록하기 axios.get을 하고 나서 받아오는 response라는 놈은 { ... ... } 복잡하게 생긴 객체인데, { 'data': { ... ...} , __: { ... ...} , __: { ... ... } } 이렇게 생긴 애다. 따라서 setCafe(response.data) 를 해주는 것이다. 또한 여기서 불러오기를 누르면 출력되는 menuName을 통해 cafe는 배열이고, [{ 'id': 1, 'item': '아..

Styled Component의 장점: 미리 만들어둔 UI를 card.description이런 식으로 다시 조합해서 바로 쓸 수 있다. 실습 1 과목카드랑 거의 동일 실습 2 실습 3 아이콘 추가와 할부개월 실습 4 움직이는 모서리 만들기 실습 5 트랙/과목 탭 만들기 & Map함수 잠깐 잠깐 map 함수 array.map(callbackFunction(currenValue, index, array), thisArg) callbackFunction, thisArg 두개의 매개변수가 있고 callbackFunction은 currentValue, index, array 3개의 매개변수를 갖는다. currentValue : 배열 내 현재 값 index : 배열 내 현재 값의 인덱스 array : 현재 배열 t..

Ch1 Style 도구 및 Style Component 소개 적용할 스타일들 1. grid UI (2*3, 2*4) 2. 페이지에이션 # React styling 방법론 4가지 css module : class,id 등에 random string(hush)를 달아주기 때문에 선택자가 겹칠 우려가 없음. css in JS library(styled components) : 따로 CSS파일 만들 것 없이 JSX 파일 안에서 스타일링까지 해결 가능. JS 값들을 props로 넘겨줘서 해당 JS 값에 의도된 styling을 바로 적용할 수 있음. 스타일링을 직접 해야함. UI framework : 이미 다 만들어져있음. 초심자에게는 좋지X css framework : 거대한 css파일 하나를 가져옴. 이미 만들..

상태 관리 기술 : 앱 상에서 데이터를 메모리 등에 저장하고 하나 이상의 컴포넌트에서 데이터를 공유하는 것 한 컴포넌트 내, 여러 컴포넌트 간, 전체 앱 상태관리 모두 포함 새로고침이 없는 웹페이지 = SPA MPA 에서는 서버 데이터를 이용해 페이지를 랜더링, 클라이언트의 데이터와 서버의 데이터가 큰 차이 X(=서버가 데이터를 관리) SPA 에서는 자체적인 데이터를 갖고, 서버와의 동기화가 필요한 페이지가 아닌 데이터만 처리. 그 외 데이터는 클라이언트만의 데이터로 유지(=클라이언트가 주로 데이터를 관리?) 유저와의 인터렉션이 많아질 수록 앱이 사용하는 데이터가 많아지고, 데이터 통신도 충분히 고려해야 한다. SPA 에서는 페이지 로딩 시마다 모든 데이터를 로딩하기엔 오래걸리기 때문에 데이터를 캐싱하고..

1. useReducer state가 많고 state 변경하는 함수가 복잡할 때 하는 방법 const [my_state, my_dispatch] = useReducer(my_reducer(=action타입에 따라 state들을 변경하는 함수), 초기상태(=객체든 값이든)) 2. useContext props 전달하는데 계층이 너무 많을 때 참고 3. 활용 useReducer과 useContext를 같이 사용한다면? 활용 2 동일한 결과

#1 속담 맞추기 #2 카메 메뉴 불러오기 #3 게임 저장하기