lhk3337-blog

[lhk3337-blog]

React thoery

JSX

Component

props

map() - 자바스크립트 function

funtction component VS class component

state - setState

component life cycle

mounting: constructor, render, componentDidMount

updating: render, componentDidUpdate

unmountig: componentwillUnmount

[lhk3337-blog]

Read

Front end : react ,view

backend : Node.js python

유튜브 클론

에어비엔비 클론

멤버십 리액트 js

Log In / Sign Up : 회원가입 및 기본 로그인 및 소셜 로그인

express.js를 이용해서 node.js

LIst : 전체 책 리스트를 작은 썸네일 이미지와 함께 보여줌

Search : 책 이름 저자 이름 키워드등으로 검색가능

Detail Page : 책 세부 소개 페이지 책 이미지 이름 저자명 요약 및 평점

Add New : 책 이미지, 이름, 저자명, 요약 등을 유저가 새롭게 추가 가능

Rate or Revie : 유저들이 책에 대한 5점 평점 혹은 후기를 남길 수 있음

Want to Read : 유저들이 읽고 싶은 책을 따로 골라서 별도 리스트를 생성하여 보관할 수 있음

Profile Page : 개별 프로필 페이지, 업ㄹ호드한 책, 작성한 후기등을 볼 수 있음

expressJS : 26

MongDB : 13

Webpack : 4

styling : 3

User Authentication like a Boss : 13

Relationships and Route Protection : 5

Custom video Player : 7

Recording Video with Javascript : 3

API + AJAX : 6

[lhk3337-blog]

Management system

error

POST http://localhost:3000/api/customers 404 (Not Found)

Uncaught (in promise) Error: Request failed with status code 404 at createError (createError.js:16) at settle (settle.js:17) at XMLHttpRequest.handleLoad (xhr.js:61)

검사 - network → customers 404(status)

CustomerAdd.js에서 server.js로 전달하는 post route를 server.js에서 설정하지 않음.

server 충돌

잘못된 구문을 사용해서 밑의 에러 발생

잘못된 구문

app.use = bodyParser.json();

app.use = bodyParser.urlencoded({ extended: true });

올바른 구문

app.use(bodyParser.json());

app.use(bodyParser.urlencoded({ extended: true }));

/Users/user/Desktop/custom-manage-app/node_modules/body-parser/lib/types/urlencoded.js:86 [0] req.body = req.body || {} [0] ^ [0] [0] TypeError: Cannot create property 'body' on string '/image' [0] at Function.urlencodedParser [as use] (/Users/user/Desktop/custom-manage-app/node_modules/body-parser/lib/types/urlencoded.js:86:14) [0] at Object.<anonymous> (/Users/user/Desktop/custom-manage-app/server.js:31:5) [0] at Module._compile (internal/modules/cjs/loader.js:955:30) [0] at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10) [0] at Module.load (internal/modules/cjs/loader.js:811:32) [0] at Function.Module._load (internal/modules/cjs/loader.js:723:14) [0] at Function.Module.runMain (internal/modules/cjs/loader.js:1043:10) [0] at internal/main/run_main_module.js:17:11 [0] [nodemon] app crashed - waiting for file changes before starting... [1] Proxy error: Could not proxy request /api/customers from localhost:3000 to http://localhost:5000. [1] See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).

[lhk3337-blog]

express.js route information

index.js

const handleHome = (req, res) ⇒ res.send('hello world');

app.get("/",handleHome);

app.js

import  {userRouter } from './router';

app.use('/user', userRouter)

router.js

import expresss from 'express';

export const userRouter= express.Router();

userRouter.get('/', (req, res) ⇒ res.send('user index"));

userRouter.get('/edit', (req, res) ⇒ res.send('user edit'));

userRouter.get('/password', (req, res) ⇒ res.send('user password'))

app.js

import routes from './route/routes';

import globalRouter from './router/globalRouter';

app.use(routes.home, globalRouter);

routes.js 경로 정보

const HOME="/";

const routes={

home:HOME

}

export default routes;

globalRouter.js

globalRouter.get(routes.home, (req,res)⇒{

res.send('HOME')

});

https://www.notion.so/JS-100-94d97d294dd14c9b911a02c840fa9f2d