일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- sequelize
- mongo
- NPM
- 시퀄라이즈공부
- 클래스컴포넌트
- node
- npm명령어
- 제로초예제
- component
- 시퀄라이즈
- 리액트스타디
- NoSQL
- MongoDB
- React
- 리액트
- sementicversion
- nodeJS
- express-generator
- React Component
- 리액트기초
- nodejs교과서
- mongoose
- 리액트컴포넌트
- Today
- Total
목록React (40)
개발노트
즉 리덕스는 State를 분배. 리액트의 state를 하나의 store에 모아서 관리하면서, 하나의 state를 여러 컴포넌트에 전달할수 있다. 필요한 state를 골라서 해당컴포넌트에 전달할수 있음 store 리덕스만의 state (리액트state) initialState 상태값 전부 여기서 관리 action state를 바꾸는 종류를 정의 ( 로그인액션, 회원가입액션, 글쓰기액션...) dispatch 이 액션실행시켜줘 하는 (정의되있는)액션의 실행. reducer 각 액션에 (결과로)따라서 state를 이렇게 바꿔줘 정의 ( 로그인액션땐 로그인상태값 on으로, 로그아웃액션땐 로그인상태값off로 로그인때 회원정보값 넣고, 로그아웃때 null로 비우기 같은.) ex) user reducer //redu..
front server backend server 요청 응답 REST API (HTTP API) 를 사용 예정 Graph QL REST API의 다섯가지 요청방법 GET - 웹사이트 접속, 새로고침 도 get주소요청임 POST PUT (전체수정) PATCH (일부분수정) DELETE //index.js const express =require('express'); const app = express(); app.get('/', (req,res)=>{ res.send(' hi server'); }); app.get('/about', (req,res)=>{ res.send('hi about'); }) app.listen( 3003, ()=>{ console.log(`server is running :3003..
DB, backend server 를 만든다 frontend server(next, customServer) 사용할 패키지들 설치 node http모듈로 쓸수있지만, 편의를 위해 express라는 프레임워크를 얹어서 사용하도록 한다 npm i express http요청보낼때 npm i axios 비밀번호암호화 위함 npm i bcrypt (로그인) 쿠키 세션 npm i cookie-parser express-session 환경변수(비밀번호 관리) npm i dotenv 백서버랑 프론트서버랑 주소다를때, 요청보낼때 보안때문에 제약이걸리는데 (cross origin)그 제약풀어주는 cors npm i cors node, express의 보안 담당 npm i helmet hpp 서버에 로그남겨줌(누구한테요청왔..
airbnb가 문법엄격한편 npm i -D eslint-config-airbnb 웹접근성. npm i -D eslint-plugin-jsx-a11y //.eslintrc "extends":[ "airbnb" ], "rules":{ "no-underscore-dangle": "off" //끄고싶을때 } 바벨최신버전을 쓴다 npm i -D babel-eslint { "parser":"babel-eslint", // "parserOptions":{ "ecmaVersion":2019, "sourceType":"module", "ecmaFeatures":{ "jsx":true } }, "env":{ "browser":true, "node":true, "es6":true // }, "extends":[ // "es..