코딩연습장

이번주는 주특기 입문 주차였다. 일요일에 작성해야했는데 깜빡해서 월요일아침에 작성한다... 좀 많은 분량을 배워서 어질어질했다. JavaScript와 조금 다른 JSX문법을 사용해서 코드를 작성하는데도 어려웠다. 익숙하지 않은 문법이다보니 뭔가 외계어같고 어렵고 괜히 더 겁이 났던 것 같다. 이번주의 대표 키워드는 Component, State, Props, rendering이었다. 컴포넌트는 최신형인 함수형 컴포넌트를 사용해 작성했다. 컴포넌트는 화면상 출력되는 요소들을 일컫는 말이다. 공통적으로 갖는 최상위 컴포넌트에서 useState훅을 사용해 State를 만들고, 그 State를 props로 자식 컴포넌트에게 내려주어, 자식컴포넌트에서 출력하도록 하는 게 이번 주차의 핵심이었다. 또한 리액트는 단..

리액트 라이브러리를 사용하는 방법 중 한가지, 여기서는 babel을 사용하였습니다. 우리가 사용하는 CRA에도 babel이 들어있습니다. //div#root 태그 만들기 //type속성에 text/babel지정 리액트 라이브러리는 단순 JavaScript가 아닌 리액트를 위해 개발된 JavaScript 확장 문법을 사용합니다. 그러한 문법을 사용하기위해 바벨이라는 라이브러리를 사용하고, 바벨을 적용할 부분을 지정하기위해 script태그에 바벨을 적용한 모습입니다. 리액트에서 화면에 출력되는 요소를 컴포넌트라하고, 최상위 컴포넌트를 루트 컴포넌트라고 합니다. 1. h1태그를 사용한 컴포넌트 생성 2. 해당 컴포넌트를 출력할 div#root 불러오기 3. ReactDOM.render()메소드로 컴포넌트를 d..

HTTP : 텍스트 기반의 통신규약으로 인터넷에서 데이터를 주고받을 수 있는 프로토콜이다. 규약을 정해두었기 때문에 모든 프로그램이 이 규약에 맞춰 개발해서 서로 정보를 교환할 수 있게 되었다. HTTP 동작 : 클라이언트(사용자)가 브라우저를 통해서 어떤 서비스를 url을 통하거나 다른 방법으로 요청(request)하면 서버에서 해당 요청에 맞는 결과를 찾아 사용자에게 응답(response)하는 형태로 작동한다. 요청 : client >>> server 응답 : server >>> client HTML문서만이 HTTP통신을 위한 유일한 정보문서는 아니다. Plain text로부터 JSON 데이터 및 XML과 같은 형태의 정보도 주고 받을 수 있으며, 보통은 클라이언트ㅏㄱ 어떤 정보를 HTML형태로 받고..

오늘은 주특기 숙련주차가 시작되었다. 저번주에 배운 내용을 복습하고, styled component와 redux에 관해 배웠다. styled component는 어느정도 예제를 보면 CSS와 매우 흡사하기 때문에 감이 왔는데 redux는 너무 어렵다... 여기갔다 저기갔다 데이터 옮겼다가 받았다가 보냈다가 표시했다가 어지러웠다. 어렵다. 저번주가 쉬운거였따. 공부하던 중 저번주에 궁금했던 것이 풀려 남기려고한다. batching 저번 개인과제에서 추가하기 버튼에 콘솔을 찍어 works 배열이 잘 추가되는지 확인해보려고 한 적이 있었다. 근데 추가버튼을 눌렀을때 이전 works값이 나오고, 다음껄 추가하면 그때서야 콘솔로그에 보였었다. (1개씩 밀려서 해당번차에 추가한건 안보임) 이때는 왜인지는 몰랐고, ..

리덕스깔기 yarn add redux react-redux 스타일드컴포넌트깔기 yarn add styled-components 리액트라우터돔 깔기 yarn add react-router-dom 폴더설정 (https://codingpracticenote.tistory.com/89) 라우터 돔 했던 거 파일배치 configStore설정 //src/redux/config/configStore.js import { createStore } from "redux"; import { combineReducers } from "redux"; /* 1. createStore() 리덕스의 가장 핵심이 되는 스토어를 만드는 메소드(함수) 입니다. 리덕스는 단일 스토어로 모든 상태 트리를 관리한다고 설명해 드렸죠? 리덕스를..

여태까진 +1, -1을 하는 기능을 만들었습니다. 그런데 1로 숫자가 정해진 것이 아니라 원하는 숫자만큼을 더하거나 빼는 기능을 만드려면 어떻게 해야할까요? 우리가 이전까지 만든 기능은 리듀서에게 더해 라고만 말을 했을뿐입니다. 1이라는 임의적 숫자를 더해서 리듀서에게 액션객체를 보냈죠. 하지만 이제 N을 더해 라고 N을 같이 리듀서에서 보내야합니다. 지금까지는 ~을 이라는 목적어가 없었다면, 이제 그 목적어가 생긴것이고 목적어도 액션객체에 담아 같이 보내줘야 할 것입니다. 이렇게 액션객체에 담아 보내주는 그 것을 우리는 payload라고 합니다. 만약 10을 더해라는 것을 리듀서에게 보내고 싶으면 액션객체에 payload를 같이 담아주는 것입니다. payload를 이용해서 기능 구현 작업순서 사용자가 ..

만약 우리가 저번에 작성했던 action type들의 value를 변경하려면 어떡할까요? PLUS_ONE, MINUS_ONE이라는 밸류대신 이 액션객체가 counter 모듈안에있다는 것을 강조하기위해 counter/PLUS_ONE, counter/MINUS_ONE이라는 value로 각각 바꾸고 싶다면? 리듀서, App.js의 dispatch부분 총 4곳을 변경해야합니다. 그런데 4군데가 아닌 100군데를 변경해야한다면? 곤란할 겁니다. // 추가된 코드 👇 - 액션 value를 상수들로 만들어 줍니다. 보통 이렇게 한곳에 모여있습니다. const PLUS_ONE = "PLUS_ONE"; const MINUS_ONE = "MINUS_ONE"; // 추가된 코드 👇 - Action Creator를 만들어 줍..

출처 : 리덕스 흐름 이해하기 1. View에서 액션이 일어난다. 2. dispatch에서 action이 일어난다. 3. action에 의한 reducer함수가 실행되기 전에 middleware가 작동한다. 4. middleware에서 명령내린 일을 수행하고 난 뒤, reducer함수를 실행한다. (3, 4번은 아직 몰라도 됨!) 5. reducer의 실행결과 store에 새로운 값을 저장한다. 6. store의 state에 subscribe하고 있던 UI에 변경된 값을 준다. 리덕스에서 값의 수정은 리듀서에서 일어난다. 만약 counter모듈에있는 number에 +1을 하고 싶다면 어떻게 해야할까? 1. 리듀서에게 보낼 number을 +1하라는 명령을 만든다. 2. 명령을 보낸다. 3. 리듀서에서 명령..

redux : 리덕스와 관련된 코드를 모아놓을 폴더 config : 리덕스 설정과 관련된 파일들을 놓을 폴더 configStore : '중앙 State 관리소'인 Store을 만드는 설정 코드들이 있는 파일 modules : 우리가 만들 State들의 그룹이다. 예를들어 투두리스트를 만들면 투두리스트에 필요한 State들이 모두 모여있을 todos.js를 생성하는데, 이 todos.js파일이 곧 하나의 모듈이 된다. // src/modules/counter.js // 초기 상태값 const initialState = { number: 0, }; // 리듀서 const counter = (state = initialState, action) => { switch (action.type) { default:..

yarn add redux react-redux redux, react-redux 두개 깐다는 뜻 redux : redux react-redux : react와 redux를 연결시켜주는 패키지 설정코드 //src/redux/config/configStore.js import { createStore } from "redux"; import { combineReducers } from "redux"; /* 1. createStore() 리덕스의 가장 핵심이 되는 스토어를 만드는 메소드(함수) 입니다. 리덕스는 단일 스토어로 모든 상태 트리를 관리한다고 설명해 드렸죠? 리덕스를 사용할 시 creatorStore를 호출할 일은 한 번밖에 없을 거예요. */ /* 2. combineReducers() 리덕스는 ..