Redux Redux는 글로벌 하게 state를 관리하기 위해 만들어진 라이브러리 입니다. 간단한 리액트 프로젝트에서 사용하기에는 불필요할 수 있지만 규모가 커진 프로젝트에는 그만큼 리액트를 효율적이게 사용할 수 있게 도와줍니다. 리덕스 없이 평소에는 스테이트의 값을 전달해주기 위해 props로 계속해서 전달해주고 전달해주는 부모 컴포넌트에서 부터 자식 컴포넌트로 계속해서 전달해주는 방법을 써야합니다. 아래 gif를 보면 이해가 갈것입니다. WithOutRedux 리덕스가 없을 때는 다른 컴포넌트의 스테이트의 변화를 거쳐서 거쳐서 전달을 해주고 있습니다. 하지만 리덕스와 함께라면 WithRedux 하나의 스테이트의 변화에 하나하나 거치지 않고 다른 컴포넌트에게 변화 된값을 전달해줄 수 있습니다. 출처) ..

mongoose 스키마와 모델 만들어보기 이전에 몽고디비를 설치해봤습니다. 그럼 당연히 사용을 해봐야겠죠?? 자바스크립트 안에서 원래 mongodb라는 모듈이 있지만 더 간단하고 편하게 사용할 수 있는 mongoose모듈을 사용해보겠습니다. 설치 방법 npm install mongoose 사용하기전에 db서버가 실행되어 있어야합니다. 1. node 서버와 연결하기 mongoose 서버 주소를 적어서 mongoose.connect해주면 지금 사용하고 있는 서버와 연결이됩니다. database.on을 사용해서 이벤트에 맞게 실행됩니다. 그리고 저는 연결해주는 함수를 createServer 해주는 부분에서 호출 해주고 있습니다. node Express Server node graphql Server 2. Sc..

MongoDB 설치하기 사용 os: macOs Mojave 10.14.1 1. brew install mongodb 터미널이나 iterm에 쳐줍니다. 설치 후 마지막 모습 2. 데이터 베이스 저장할 장소만들기 sudo mkdir -p /data/db -p는 중간에 폴더가 없어도 만들어 줍니다. 3. 권한 주기 sudo Chown $USER /data/db 4. mongod 활성화 하기 mongod라고 iterm이나 터미널에 쳐준다. (자신이 사용하는거에 쳐준다.) 마지막 모습 5. mongoShell 접속하기 새로운 터미널을 열어서 mongo라고 쳐준다. 그럼 아래와 같이 접속한 것을 볼 수 있다.

React+Apollo+GraphQL 쿼리문으로 요청 주고 받기 다연히 Apollo와 React는 클라이언트이기 때문에 서버에 요청을 해서 필요한 작업을 할 수 있어야한다. 서버는 당연히 graphql이므로 쿼리문으로 요청을 해야한다. 이전에 만들어 놓은 Graphql서버를 통해 요청을 주고 받고 해보겠습니다. 우선 queries라는 쿼리를 따로 정의 해놓는 자바스크립트 파일을 따로 만듭니다. 그러기 전에 서버에 어떤 요청을 주고 받을 수 있는지 확인 합시다. 3가지의 요청이 가능한데 저는 getMovies를 받아 오겠습니다. 반환값은 movie이고 필요한 파라미터는 최소 rating 이상만 볼 수 있게 정할 수 있는 rating, limit입니다. 그럼 우선 queries.js에 쿼리를 만들어 보겠습니..

React+Apollo+GraphQL 시작하기 이번에는 프론트 단을 만들어 보겠습니다. 이전에 공부했던 GraphQL가 연동하기 위해선 Apollo라는 것을 사용해야하는데 이를 React와 함께 사용해보겠습니다. https://github.com/apollographql/react-apollo 이주소로 들어가보면 React와 Apollo를 함께 사용할 수 있게 필요한 것 들이 정리되어 있습니다. 이와 같은 명령어를 통해서 설치해줍니다. npm install apollo-boost react-apollo graphql-tag graphql --save 그리고 평소와 같이 create react-app을 만들어줍니다. 1. 우선 클라이언트를 만들어줍니다. 여기에 uri는 Graphql의 서버의 주소를 사용합..

Mutation 사용해보기 이전에는 스키마와 Resolver를 등록하여 단순하게 요청하고 받는 것을 해보았습니다. 이번에는 데이터의 변형(update, remove, add)이 있을 때 사용하는 Mutation을 사용해보겠습니다. 우선 graphql 파일에 정의 해야합니다. 정의 방법은 Query와 비슷합니다. type뒤에 Query대신 mutation을 사용해주면 됩니다. 그리고 쿼리과 같이 graphql에 명세했으면 Resolver에도 명세가 되어있어야합니다. 명세 방법도 별반 다르지 않습니다. 단순히 Resolver에 Query밑에 Mutation이라고 적은 뒤 graphql에 명세 해놓은 이름과 같은 이름을 키값으로 등록 하면 됩니다. 그럼 playground에서 실행시켜 보겠습니다. 변경 전 -..