해당 글에서는 Redux를 통해 기본적인 CRUD를 구현해본다. redux와 react-redux 설치 reducer 디렉토리 생성 후, board.js와 rootReducer.js 생성 기능별로 모듈을 만들기 위해 Ducks Pattern을 이용한다(action과 reducer를 한 세트로 작업) index.js에서 store 생성하고 provider로 컴포넌트에서 state 사용 Store 구독하고, action 실행하기 react-redux에서 제공하는 useSelector와 useDispatch로 store를 구독하고, action을 실행시킬 수 있다. Chrome Redux 개발도구에서 확인하기
React-router를 사용해서 routing할 때, props를 전달하는 방법 (나는 데이터 목록에서 상세보기 페이지로 넘어갈 때 사용하였다) routing할 때 path 설정하기 ( /: 뒤가 parameter로 전해질 props 이름이다, 여기서는 postId ) 2. props 전달하기 3. props 전달받기 이렇게 하면 라우팅 할 때 다른 컴포넌트에서 props로 값을 전달받을 수 있다! TIP) 크롬에서 react extension을 이용하면 직접 확인할 수 […]
프로젝트 진행 중에 상세보기 페이지를 만드는데, 이미지 컴포넌트에 주소를 넘겨주면서 TypeError가 발생했다. TypeError: Cannot read property ‘0’ of undefined 해당 오류는 array가 아닌 변수에 인덱스로 접근할 때 자주 봤는데, 이번에는 props가 확실히 array였기 때문에 골치가 아팠다. 그런데 console.log를 찍어보니 useEffect에 props가 변화할 때마다 작동을 하는데, 왠지 undefined에서 [0]으로 접근해서 오류가 나는 느낌이었다. 그래서 이번엔 바로 […]
나홀로 프로젝트 진행 중, 정리하지 않으면 도저히 안될것 같아서 회원가입부터 정리를 시작 스택 Frontend: React (redux, axios) Backend: NodeJs, express DB: MongoDB 구현 순서 모델 설계 백엔드 로직 구현 프론트 컴포넌트 구현 Redux action, reducer와 axios로 데이터 통신 모델 설계 원래 모델에 다른 속성도 많은데 회원가입 기능에 관한 것만 정리하기 위해서 간단하게 정리했다. 먼저 회원스케마를 […]
HOC란? A higher-order component (HOC) is an advanced technique in React for reusing component logic. – React 홈페이지(https://ko.reactjs.org/docs/higher-order-components.html) React홈페이지에도 있는 것처럼 HOC는 컴포넌트 로직의 재사용을 위해 사용하는 기술로, argument로 받은 컴포넌트를 특정 기능을 실행한 후 결과에 따라 리턴하는 함수이다. 사실 이름만 들었을 때는 고차원 컴포넌트가 이해가 안갔는데 예시 하나를 따라하고 나니 이해가 갔다. HOC 이해하기 […]
개발을 하면서 가장 어이가 없을 때는 공식문서를 보고 그대로 했는데도 에러가 뜨는 경우이다. 프록시가 버전업이 되면서 기존의 proxy 객체를 createProxyMiddleware로 바뀌었다. 그래서 그 코드를 그대로 복사해 썼는데, yarn start를 하면 서버는 잘 켜지는데 프론트가 proxy is not a function이 뜨는 것이었다. 그래서 계속 구글링을 하던 도중, 오히려 이전버전의 코드를 쓰면 해결된다는 글을 봤다. 따라서 이전버전 […]
Error: ENOSPC: System limit for number of file watchers reached, watch React로 개발을 하던 도중, 개똥같은 오류를 만났다. 아직 개발 초기인데도 벌써 파일감시수가 제한치에 도달했다니.. 해결법 터미널에 해당 코드를 입력해서 file watchers의 제한을 늘려주는 것이다. 설정이 잘 되었는지 확인한후에 다시 시작하면 오류없이 시작할 수 있다!
Container에 이어서 mobx로 to do app 구현하기를 해봤다. 여러개의 컴포넌트에서 store를 import해서 쓰니까 확실히 사용법을 익히게 되었다. 디렉토리 구조 src > pages > Todo.jsx / Input.jsx / List.jsx : Components 역할 src > stores > todo.js : input과 todoList state 관리하는 store 역할 src > useStore.js : store를 모아서 api처럼 사용하는 역할 todo.js : Store […]
React components 구조에 익숙해지고 나니 MobX에 대한 필요성을 느꼈다. 전에는 MobX를 다른사람 코드만 보고 따라해봤는데 이젠 목표를 정해서 익숙해지려고 한다. 처음 구현해볼 것은 아주 간단한 Counter이다. Counter 구조 src > pages > Counter.jsx : component역할 src > stores > counter.js : store 역할 useStore.js : stores를 하나에 모아 useStore()로 제공 counter.js : count하는 변수와 메소드를 […]
오늘은 어제 하던 data insert에 이어서 select, update, delete를 테스트했다. routing과 sequelize를 이용한 data 조작은 의외로 재밌었다. 단, 항상 주의할 점은 데이터를 통신할 때 key는 양측에서 동일해야 한다. ex) data: {‘key’:value}, data insert client에서는 async, await, axios(POST)를 이용해 업데이트할 데이터 전송 성공했다는 response를 받으면 알람을 띄우고, window reload server에서는 create메소드를 이용해 데이터를 삽입, 성공할 경우 […]