For Programmer

1.리덕스란? 2. 리덕스 설치 (4가지 다운로드) 2-1. 다운로드해야할 모듈 *리덕스 스토어는 객체형식으로밖에 데이터를 받지 못한다. 하지만 Promise,Function 형태로 데이터를 전달할 수 도있는데 이를 위해서 redux-thunk(함수를 받는방법제공),redux-promise(promise를 받는방법제공) 을 다운받는것이다. 2-2.리덕스를 편하게 사용하기위한 데브툴 추가(크롬 확장프로그램) 2-3.데브툴을 추가하는코드 및 리덕스 세팅코드 src-index.js src-_reducers-index.js *redux에 대한 더 자세한 정보는 다음 블로그를 참고해 주시기 바랍니다. https://medium.com/@ca3rot/%EC%95%84%EB%A7%88-%EC%9D%B4%EA%B2%8..

1. antd 모듈 다운로드(https://ant.design/) 2.antd import후 사용하기 * antd 홈페이지 - Components 접속하면 다양한 css들을 제공하고 있다. *예를들어 위와 같이 primary Button버튼을 사용하기 위해서 무엇을 import해야하며 어떠한 코드를 사용해야하는지 자세하게 나와있으며 코드 위쪽 밑줄친 곳을 보면 codesandbox 등 실제로 다양한 코드를제공하는 사이트와 연결되어 바로 코드와 css 확인도 가능하다. 동영상강의

1.서버에서 concurrently 모듈 다운로드하기 2.package.json에서 스크립트 등록 * 서버에서 npm run dev로 실행 동영상강의

1. 서버와 클라이언트간의 데이터통신할때 쓰는 모듈중 하나인 Axios 모듈 다운받기 * Jquery에서는 Ajax통신을 많이 사용한다. 2. 서버와 클라이언트의 포트번호가 다를경우 Cors정책에 위배되기 때문에 Request를 보낼 수없다. 3.다음을 해결하기 위해 Proxy 사용(https://create-react-app.dev/docs/proxying-api-requests-in-development/) const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app) { app.use( '/api', createProxyMiddleware({ target: 'http://localhos..

1. 리액트 라우터 모듈 다운로드하기 2. 웹사이트에서 제공하는 코드 사용하기(https://reacttraining.com/react-router/web/example/basic) 3. 우리앱에 맞게 수정하기 동영상 강의

* 리액트앱을 설치하게 될 경우 초기 기본적인 폴더 구조 *public - index.html 파일 내부를 보면 body 태그안에 라고 되어 있다. src - index.js내부에 가보면 초기 생성시 리액트는 이 엘리먼트를 사용하고 있으며 이러한 엘리먼트를 root돔이라고 한다. * 해당 boiler-plate 에서 사용하게 될 폴더 구조 *hoc폴더에 대한 설명 * 즉, 간단히 말해서 해당 페이지가 로그인한 사람만들어갈 수있는지, 로그인안해도 들어갈 수있는지 , 로그인하게되면 못들어가는지(로그인페이지,회원가입페이지) 등등을 판별 해주는 역할이다. 백엔드에서 Auth라는 미들웨어를 만들었었는데 이를 활용하여 axios통신으로 서버와 통신하여 로그인여부를 판별 할 것이다. 동영상강의

*리액트란? * 간단히 말하면 Facebook에서 개발한 자바스크립트기반의 새로운 프론트엔드 라이브러리 이며 실제DOM과 가상DOM을 가지고 있는데 JSX문법을 이용하여 화면에 보여줄 view 부분을 코딩한다. 이러한 view 부분을 실제DOM에 담아놓는데 만약 변경사항이 있을 경우 가상DOM에 변경사항을 담아 실제DOM과 비교 후 다른부분만 실제DOM에 적용시켜주는 방식이다. 1.리액트 설치하기(npm vs npx) * npm: node package manager -> npm을 사용하게되면 locally 로 다운을 받게된다.(해당 프로젝트 폴더내 node_module에저장) 만약 npm install -g create-react-app 으로 실제 컴퓨터내부에있는 폴더 global 디렉토리에 다운을 받..

* 로그아웃 기능은간단하다. auth 미들웨어에서 로그인이 되어있으면 해당 user정보를 request정보에 담아주고 만약없다면 다음으로 넘어가지 않는다. 따라서 로그인이 되어있다면 해당 user정보가 request에 담겨있기 때문에 그 user정보를 이용하여 토큰만 지워주면 된다. (routes-user.js) app.get("/logout", auth, (req, res) => { User.findOneAndUpdate( { _id: req.user._id }, { token: "", tokenExp: "" }, (err, doc) => { //1st:찾고자하는 데이터 2nd:변경할 데이터(토큰을지워줌) , 3th:데이터반환 if (err) return res.json({ success: false,..