회원가입 프론트엔드, 백엔드 완성하기 이제 회원가입에 대한 백엔드 서버에 구성을 해줍니다. 시퀄라이즈의 create 메소드를 통해 req.body에 들어있는 email, nickname, password 데이터를 받아옵니다. 또한, 데이터가 어떤 흐름으로 전송되는지를 먼저 알아야됩니다. 회원가입 폼에서 email, nickname, password 객체 데이터를 가지고 submit을 하게 되면, saga의 signUp의 SIGN_UP_REQUEST가 실행되고, signUp의 action데이터(email, nickname, password의 데이터들이 객체로 들어있음) signUpAPI의 data로 백엔드 서버로 데이터가 전송됩니다. 프론트서버에서 전송받은 데이터를 req.body로 백엔드서버에서 받게됩니..
MySQL을 쓰는 이유 현재 복습하고 있는 Nodebird는 사용자가 쓴 게시글은 User와 Post 간의 관계가 있고, 사용자가 쓴 댓글은 User와 Comment간의 관계가 있습니다. 각 모델간의 관계가 많이 있기 때문에 관계형 데이터베이스인 MySQL을 이용하였습니다. Sequelize 세팅하기 자바스크립트 코드를 SQL으로 바꿔주는 라이브러리인 sequelize와 노드와 MySQL을 연결해주는 드라이버인 mysql2을 설치합니다. npx sequelize init 명령어로 실행하면 seeder : 테스트에 필요한 정보를 정의함 models : DB 모델 정보를 저장 migrations : 마이그레이션에 필요한 정보를 자동으로 저장함 디렉토리와 config/config.json : DB 연결 정보등..
https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Node.js는 자바스크립트 코드를 실행하는 런타임입니다. http는 노드에서 http라는 모듈을 적용해주기 때문에 서버구동시에는 꼭 써야됩니다. createServer 함수도 지원해주기때문에 서버설정 시에 꼭 필요합니다. listen(포트번호)를 해주면 해당 포트로 서버가 구동되기 때문에 작성해주는 것이 좋습니다. 프론트서버와 백엔드서버를 나누는 이유 프론트엔드 서버와 백엔드 서버를 나누는 이유는 나중 대규모 서비스가 되는것을 대비하기 위함인데요. 만약 한개의 컴퓨터에 프론트엔드 서버에 1000이라는..
Faker(페이커) 적용하기 이제 더미데이터를 페이커를 이용해서 랜덤하게 설정해줄 수 있습니다. npm으로 페이커를 설치하고, faker가 가지고 있는 함수를 통해 닉네임, 글, 이미지등을 가상으로 만들어줄 수 있습니다. 또한, 아래 링크를 통해 페이커 설치, 사용방법을 익힐 수 있습니다. www.npmjs.com/package/faker faker Generate massive amounts of fake contextual data www.npmjs.com 이제 페이커를 이용해서 generateDummyPost라는 더미데이터를 만들어주고, 글을 initialState의 mainPosts에 concat으로 글을 추가해줍니다. 이 코드는 generateDummyPost 함수를 이용해서 서버에서 데이터를 ..
리액트의 불변성을 지키려고 하면 위 그림처럼 길게 써야되고, 초보자가 하기에는 무리가 있습니다. 코드가 오류나기도 쉽기 때문입니다. 따라서, 이런 문제를 해결하기 위해 immer라는 라이브러리를 사용합니다. return produce(state, (draft) => { });가 기본 모양이고, 이를 이용하여 코드를 작성하면 됩니다. draft.뒤에 코드를 작성해주면 되고, immer를 사용하게 되면 코드량이 감소되고, 가독성, 생산성이 높아져 보다 깔끔한 코드를 작성할 수 있습니다.
일단 데이터의 흐름이 중요합니다. PostForm에서 dispatch(addPost(text))를 하게되면 reducer의 post.js에서 addPost로 데이터를 받고, 동시에 saga의 post.js에서 ADD_POST_SUCCESS로 데이터를 처리하게됩니다. ADD_POST_SUCCESS가 되면 reducer post.js에서 ADD_POST_SUCCESS가 실행되고, mainPosts 부분이 변경되면서 글이 작성되게 됩니다. 이런 데이터 흐름을 알고 진행하면 됩니다. 화면에 그려지는 부분과 데이터가 처리되는 부분을 명시하면서 작성을 해야합니다. Encountered two children with the same key, `2`. 이런 이슈가 나오는거는 dummyPost의 id가 2로 고정되어있..
위 그림처럼 fork, all 등을 리덕스 사가 이펙트라고 부릅니다. all 이펙트는 배열을 받는데, 안에 있는 것들을 한번에 실행시킵니다. fork는 함수를 실행시키는 역할을 합니다. call도 함수를 실행시키지만 차이점이 있습니다. fork는 비동기함수호출이고, call은 동기함수호출입니다. 위 항목처럼 fork는 result 값이 한번 거쳤다가 함수를 호출하는게 아니라 return axios.post('api/login')이 바로 실행되는 것과 같고, call의 경우, axios.post('api/login').then()을 한 효과를 나타납니다. 따라서, 둘의 차이점은 결과값이 나올때까지 기다려주느냐(call) 아니냐(fork)의 차이가 있습니다. put은 리듀서의 dispatch라고 보면 됩니다..
리덕스 사가는 리액트의 사이드 이펙트만 담당하는 미들웨어 중 하나로, 우리의 앱에서 액션을 받아 처리하고, 멈추고, 취소할 수 있게 만들어주고, 리덕스 상태에 접근하여 액션을 디스패치할 수 있습니다. 또한, 비동기 흐름을 쉽게 읽고, 쓰고, 테스트할 수 있는 ES6 문법인 제너레이터를 사용할 수 있습니다. npm을 이용하여 리덕스사가와 넥스트와 리덕스사가를 연결하는 next-redux-saga도 설치해줍니다. createSagaMiddleware로 선언을 해준뒤 const middleware = [sagaMiddleware];로 연결만 해주면 됩니다. rootSaga를 이용하기 때문에 sagas/index.js 만들어줍니다. 사가는 function* () 제너레이터를 이용합니다. 제너레이터는 아래 그림처..
