React-nodebird

제로초님의 React-nodebird 강의를 들으며 정리차 쓰는 글이다.우선 강의는 React의 프레임 워크인 next.js로 진행이 되고 백엔드단에선 Node.js를 사용한다. 간단하게 설명하자면 트위터라는 SNS를 비슷하게 만드느 프로젝트로서 로그인, 로그아웃, 검

기본 npm init 부터 기본설정을 해보려 한다. 나는 리액트 공부를 할때 주로 CRA를 썼었는데 필요없는 것들이 많이 들어있어 무겁기도 하고 처음부터 제대로 설정하는 법을 인지하는 것과 못한 것의 차이는 크다고 생각이 든다.front와 back 폴더를 구분하여 만들

ant design 을 이용한 기본적인 틀을 구성한다.공식문서를 보고 형식변환만 해서 사용하면 되기 때문에 크게 어려움은 없었던 것 같다.우선 antd와 styled-components를 사용하기 위해서 npm을 이용한다.정말 편리하고 유용하다고 생각했던건 app.j

리덕스를 프로젝트와 연동할때 굉장히 많은 코드량으로 생산성이 떨어지는 경우가 많다.next에서는 리덕스를 간편하게 연동시키는 라이브러리가 있다. next-redux-wrapper 라는 라이브러리다.(참고로, 일반 리덕스와 좀 다르다)최상단 컴포넌트에 provider를

프론트엔드 개발자는 백엔드 쪽과 연동하여 데이터를 주고 받기 전에는 데이터를 완전히 저장하는 것에는 한계가 있다.하지만 브라우저가 종료되기 전에는 localStorage, store 등을 이용해 데이터를 저장할 수 있는데,결국에는 후에 백엔드에 데이터를 보내고 받아오는

Redux-middleware 리덕에 없던

가장먼저 Node를 서버라고 알고있는 사람이 많은데 Node는 서버가 아니고 자바스크립트 런타임이다. node에서 제공하는 http 모듈이 서버다 ! 프론트엔드 서버와 백엔드 서버를 나누는 이유는 나중에 대규모 서비스가 되는 것을 대비하기 위함입니다. 만약 한개의 컴

우리가 만드는 프로젝트는 SNS이기 때문에 User와 Post간의 관계가 있고, 사용자가 쓴 댓글은 User와 Comment간의 관계가 있다. 각 모델간의 관계가 많기 때문에 관계형 데이터베이스인 MySQL을 사용한다.사실 거의 모든 데이터는 관계형 데이터베이스를 쓰는

우선 데이터의 흐름을 보면 포트번호가 같으면 같은 프로그램으로 본다.서버와 연동을 해봤다면 한번쯤 보게되는 에러이다.해석해보면 'Access-Control-Allow-Origin'가 요청헤더에 없다고 한다.개발자 도구의 네트워크탭에서 확인해보자.진짜 Request He

이전 user saga의 코드들을 보면 'http://localhost:3065'가 중복되는것을 볼 수 있는데, 이것을 axios를 이용하여 sagas/index.js에 한꺼번에 묶어서 중복된 코드들을 줄일 수 있습니다. passport라는 라이브러리를 통

데이터가 어떻게 이동하는지 잘봐야 됩니다. 그래야 코드를 짤 때 수월하게 할 수 있습니다. PostForm에서 Submit → dispatch({ addPost(text) })reducers/addPost의 data로 text 데이터를 받음sagas/addPost로

게시글을 불러오기 위해 posts.js를 만들어 줍니다. findAll로 여러개의 항목을 DB에서 찾아올 수 있습니다. 시퀄라이즈의 find 메소드는 SELECT 쿼리문으로 이해하면 됩니다.findOne : 특정된 하나의 레코드만 찾는다findAll: 모든 레코드를

데이터의 흐름을 기억하면서 코드를 작성하는 것이 좋습니다.dispatch한 postCard.js → 리듀서 → 사가 →백엔드 라우터순으로 작성하면 됩니다. axios.patch(/post/${data}/like, data) 로 data를 2번쓰게 되면 불필요한 용량

encType="multipart/form-data" 이미지를 올리게되면 multipart 라는 form-data로 데이터가 전송이 되게 됩니다. 하지만, 지금의 백엔드에서는 json 형식과 이미지나 비디오 같은 데이터를 받을 수 없는 일반적인 Form 데이터만 받을

쿼리스트링을 통해 데이터를 보낸다.현재 스크롤을 내리면 같은 게시글을 계속 불러오는 버그가 있습니다. 여러 방법 중 lastId 방식으로 이 문제를 해결하는데, 먼저 mainPosts의 마지막(첫번째) 게시글의 id를 찾아서 이걸 lastId로 데이터를 전달해줍니다.