코딩연습장

리덕스 툴킷은 전에 사용한 리덕스를 개량한 것이다. ducks패턴의 요소들이 코드의 양을 늘리는 불만이 생겨, 코드는 적게, 사용은 편하게 하기위한 기능들을 흡수한 것이 리덕스 툴킷이다. 리덕스와 다른 새로운 것이아닌, 코드를 줄이기위한 API가 추가된 것이다. 컴포넌트에서 useSelector을 사용하는것도 똑같다. 모듈파일과 스토어파일의 차이점만 기억하면 된다. 툴킷 설치하기 yarn add react-redux @reduxjs/toolkit 기존의 리덕스 // 일반 리덕스 예시 코드 // Action Value const ADD_NUMBER = "ADD_NUMBER"; const MINUS_NUMBER = "MINUS_NUMBER"; // Action Creator export const addNu..

오늘 리액트 심화주차가 시작됐다. 첫날은 SA를 작성하고 역할을 분담하고, API명세서를 작성하고, 기초적인 View를 만들어두었다. 강의도 별로 못들었다. 코로나검사를 받느라 몇시간을날렸고, 상태도 좋지않아서 집중도 잘 안됐다. 아마도 이번주는 힘든 한 주 가 될 것 같다. 오늘 협업을 하면서 처음으로 브랜치를 나누어봤다. 브랜치를 나눠 자신이 작업을 하고, 그걸 main에 merge하는 형식으로 진행했는데, 해본적이 없던 거라 너무 어려웠다. 그리고 github desktop을 사용했었는데, 이런 걸 어떻게 해야 할 지를 몰라서 내 브랜치에 push하는 용도로만 사용하고, 터미널에서 git remote update, git pull origin main으로 메인을 pull해오고, 깃헙 웹사이트에서 직..

오늘은 주특기 숙련주차 시험을 봤다. 문제는 개인과제에서 구현한 Todo리스트 추가, 제거, 변경, 상세보기페이지 기능구현이었다. 직접 개인과제에서 작성한 코드들이 있던 터라 문제에서 원하는 방향으로 풀지 못한 것 같다. 특히 상세보기페이지에서 useEffect를 사용해서 리듀서에서 action에대한 state를 가져오고, 그 state를 보여주는 걸 했어야 했는데 하지 못했다. useEffect를 사용하지 않다보니 생각도 안나서 그냥 과제에 했던대로 find를 사용하여 컴포넌트자체에서 useSelector을 사용해 특정 요소를 찾는 형식으로 풀었다. 끝

클래스형 컴포넌트의 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때는 this.props를 사용합니다. 데이터를 전달하고 화면 내용을 변경할 때에도 this.props를 사용합니다. 부모에서 자식의 state변경하기 자식에서 부모의 state변경하기 컴포넌트 내부 메소드는 꼭 바인드를 해주어야한다. bind로 this값을 주지 않으려면 화살표함수를 사용해도 된다. 화살표함수로 작성할 시 this값이 존재하지 않기 때문에 상위 스코프에서 this값을 찾아 바인딩 된다. 함수형 컴포넌트의 상태값은 useState훅으로 관리되기 때문에 컴포넌트의 this로부터 자유롭습니다. 또한 함수형 컴포넌트 안에서 선언한 함수들 모두 전역 객체를 this로 가지기 때문에 이벤트 핸들러에 콜백 함수를 넘기는 상황에도 ..

오늘 드디어 개인과제를 마무리했다! 제거하기와 변경하기 기능을 작성하는데 애를 먹었다. 리듀서에서 해야하는 일을 컴포넌트단에서 함수로 해결하려고하니 오류가 발생했었다. onClick속성안에 함수를 넣는 방식이 틀려서 렌더링시 Todo들이 삭제되는 일이있었다. 화살표함수로 넣도록 하자 컴포넌트에 이름을 붙일 때 좀더 생각하고 붙여야겠다. 컨벤션같은게 있는 것 같은데 아직은 잘 모르겠다. 불린값을 비교할 때, 예를들어 map 안에서 비교할때, ! 느낌표를 좀더 잘 사용해야겠다. 실무에서도 ~~ === false 보다 !~~ 로 많이 작성한다고한다. 직접 보기에도 가독성도 좋아서 좀 더 생각하고 코드를 작성해야 겠다는 생각이 들었다. 리덕스, 리액트 라우터 돔, 스타일드 컴포넌트 다 솔직히 어려웠다. css를..

오늘은 숙련주차 개인과제를 더 다듬었다... 일요일부터 해결되지 않았던 삭제와 isDone변경버튼에 대한 오류를 해결했다. 컴포넌트단에서 State값을 변경해서 리듀서에서 값을 그대로 입력하려 했지만, State의 구조가 배열속 객체여서 뭔가 중간에 자꾸 어긋나는 부분이 있어 잘 작동하지 않았다. 팀원분인 성배님께 질문했을 때 리듀서에서 분류를 하는게 어떻겠냐는 조언을 받아서, 리듀서에서 filter과 특정 메소드들을 사용해서 삭제와 변경함수를 완료했다. 그리고 onClick에 함수를 넣는 방식에도 문제가 있었다. 이런 형식이었는데, 이렇게 작성하면 자동으로 onClick을 실행하게되어 모두 삭제가 됐었다. 그래서 아래처럼 표현방법을 바꿨고, 정상적으로 작동했다. handler(todo.id)} /> h..

이번주는 주특기 입문 주차였다. 일요일에 작성해야했는데 깜빡해서 월요일아침에 작성한다... 좀 많은 분량을 배워서 어질어질했다. 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개씩 밀려서 해당번차에 추가한건 안보임) 이때는 왜인지는 몰랐고, ..