client 폴더 내 index.js 파일에서 하위폴더인 _reducers에서 데이터를 가져올려고 하자 Attempted import error가 발생했다.

./src/index.js
Attempted import error: 'Reducer' is not exported from './_reducers'.

프론트엔드 서버의 index.js 파일에서 ‘./_reducers’ 경로에 있는 index.js 파일을 import 하는데에 실패했다는 내용의 에러이다. 에러 발생 원인은 reducers 폴더 내 index.js 파일에서 export 시 default를 붙였기 때문이다.

• reducers 폴더 내 index.js파일 ``` import { combineReducers } from “redux”;

node.js를 활용한 서버 구축에 있어 필요한 기본 지식들을 기록해보겠습니다.

Redux를 자신이 개발할 어플리케이션에 설치하고 설정하는 방법을 기록하겠습니다. 우선 다운 받아야 할 dependency들이 redux, react-redux, redux-promise, redux-thunk까지 총 4개가 있습니다. 이 중에서 redux-promis, redux-thunk는 redux의 미들웨어입니다.

npm install redux react-redux redux-promise redux-thunk --save

redux-promise, redux-thunk가 필요한 이유

redux-promise, redux-thunk는 redux를 잘 쓸 수 있게 도와주는 역할을 하는 미들웨어입니다. redux는 redux store 안에 모든 state를 관리하고 있습니다. 이 store 안에 있는 state를 변경하기 위해서는 dispatch를 이용해서 action을 통해 변경시킬 수 있습니다. 이렇게 store가 데이터를 받을 때 항상 객체 형식으로 데이터를 받는 것이 아니라 때에 따라 promise, functions 형식으로 받기도 합니다. 그런데, redux 기초편에서 봤듯 우리는 reudx store는 객체 형식으로만 데이터를 받을 수 있다고 배웠습니다.

원래는 모든 것을 CSS를 활용해서 하나하나 만들 수 있지만, 그렇게 되면 기능을 신경 쓰는 것 이외에 너무 많은 시간을 CSS에 투자해야합니다. 그래서 기능 개발에 초점을 맞추기 위해 CSS 프레임 워크를 사용해보도록 하겠습니다. 요즘 많은 기업들이 실무에서도 CSS 프레임워크가 잘 되어 있어 많이 사용하고 있습니다.

개발하면서 매번 터미널 두개 켜서 하나는 server run 시키고, 다른 하나는 react run 시키고 두 번 해줘야 하는게 정말 불편했습니다. 그러던 와중에 알게된 것은 바로 Concurrently를 이용해서 백서버와 클라이언트서버를 동시에 실행시키는 것! 그래서 이번 글에서는 어떻게 Concurrently를 활용해서 동시에 실행시킬 수 있는지 알려드리겠습니다. 우선 사용을 위해서는 Concurrently 라이브러리를 다운받으셔야합니다.

npm install concurrently --save

설치 후 사용방법은 package.json 파일 내 “scripts” 부분에 실행할 명령어를 넣고 concurrenlty를 적은 뒤 켜고 싶은 것들을 차례대로 적어주시면 됩니다.

"dev": "concurrently   \"npm run backend\" \"npm run start --prefix client\""

Redux는 상태관리 라이브러리(predictable state container) 입니다. 그렇다면 여기서 말하는 state가 뭘까요? React에서는 Props와 State가 있습니다. 이 두가지를 비교하면서 state에 대해 알아보겠습니다.

Props VS State

Props

• Props는 Properties의 줄임말입니다.
• 부모 컴포넌트와 자식 컴포넌트가 있는 경우 데이터를 서로 주고 받아야겠죠? 두 컴포넌트간의 데이터를 주고 받을 때는 Props를 이용해야 합니다.
• 단방향 데이터 흐름: child component에 전달되는 값 또는 method. 부모 컴포넌트에서 자식 컴포넌트로 즉 위에서 아래로만 데이터 전달이 가능합니다. 반대로 child component에서 parent component로 전달은 불가능합니다.
• read donly: child component로 전달받은 props 값은 변하지 않습니다다. 만약 부모로부터 받은 값을 수정하고 싶다면 수정된 값으로 부모 컴포넌트에게서 다시 받아야 합니다.

• 소스코드 예시

  • parent component

안녕하세요. 오늘은 React Component의 두 종류인 함수형 컴포넌트와 클래스 컴포넌트에 대해서 포스팅하겠습니다.

Class Component

• state와 Lifecyle method와 같은 더 많은 기능들을 사용 할 수 있습니다. 다만 코드가 좀 더 길어지고, 복잡해지며, 성능적인 면에서 느립니다.

기존에는 리액트 앱을 처음 실행하기 위해서는 webpack이나 babel 같은 것들을 설정하기 위해서 굉장히 많은 시간이 소요되었습니다. 하지만 지금은 따로 설정하지 않아도 Create-React-App이라는 Command를 이용하여 react, webpack 등을 바로 설정할 수 있습니다.

client에서 이름, e-maile, PW 등을 입력 후 서버에 보내주면 서버에서 그 데이터를 받아야 합니다. 서버에서 클라이언트로 부터 데이터를 받을 때 bodyParser라는 dependencies가 필요합니다. 이 dependencies를 이용하여 Client에서 보내주는 자료들을 이름, e-maile, PW를 받을 수 있습니다.

오늘의 삽질 하나 추가