error 내용
Router.use() requires a middleware function but got a Object ....
동영상 강의 그대로 쓰다보니 화면에 나오지 않은 코드를 안적어서 생겼던 문제,
이 부분은 server(node) 쪽 router에다 video upload 를 저장하는 내용을 적었던 부분인데
module.exports = router;
동영상 강의 그대로 쓰다보니 화면에 나오지 않은 코드를 안적어서 생겼던 문제,
(강사님이 미리 작성했던 모듈에서 복붙해오셨던거라 router를 export 해주는 부분이 안보였었다... )
Express.js
server단의 controller 역할(url에 따른 모듈 매칭(route 이용))을 한다
app.use 또는 app.method (get, post, delete 등과 같은 HTTP 메소드)로 사용할수 있으며
사용의 폭은 .use가 더 다양하다.
const express = require("express");
const app = express();
const cookieParser = require("cookie-parser");
// 마운트 경로(url)이 없는 경우 request가 발생시마다 실행된다.
app.use(cookieParser());
// /api/video 경로에 대한 모든 유형의 HTTP 요청에 대해 실행된다.
// 특정 HTTP 요청에 대한 수행을 원할 경우 app.get 등과 같이 HTTP메소드를 사용하면된다.
app.use('/api/video', require('./routes/video'));
aap.post('/data',function(req,res,next){
console.log('POST 메서드 / data 주소의 요청일 때만 실행된다.');
next();
});
//router 하나에 미들웨어를 여러 개 장착할 수도 있다.
router.get('/', middleware1, middleware2, middleware3);
강의에서 우리가 만들었던 server/routes/video.js 등과 같은 모듈은 모두 express.js 의 라우터 레벨 미들웨어이다.
const express = require('express');
const router = express.Router();
...
module.exports = router;
이렇게 세트를 이루어 사용해야만 오류나지않고 작동한다.
리액트는 민감해서 빌드시 어떠한 모듈에 오류가 발생하면 디비커넥션도 일어나지 않는것 같다.
(아예 컴파일시 에러를 발견하면 마운팅하지 않는것 같다. 추후 리액트 컴포넌트 주기에 대해 공부해보면 알수 있을듯)
router.get('/', function(req,res,next){
next('route');
},function(req,res,next){
console.log('설치 되지 않았습니다.');
},function(req,res,next){
next();
});
router.get('/',function(req,res){
console.log('실행됩니다');
res.render('index',{title:'Express'});
})
next() 그리고 next('router')
next() 는 스택내 다음의 미들웨어 함수는 일반적으로 next라는 이름의 변수로 표시한다.
next('router') 는 라우터에 연결된 나머지 미들웨어들을 건너뛰고 싶을 때 사용한다.
같은 주소의 라우터를 두 개 만들었다.
첫 번째 라우터의 첫 번째 미들웨어에서 next('router')를 호출하자
두 번째, 세 번째 미들웨어는 실행되지 않는다.
대신 주소와 일치하는 다음 라우터로 넘어간다.
만약 next('router')가 없었다면, 첫번째 라우터의 미들웨어가 모두 실행되고,
두번째 라우터도 실행된다.
만약 첫번째 라우터에서 res.send 또는 json 등등의 response methods를 이용하여 요청-응답 주기를 종료했다면
두번째 라우터는 실행되지 않는다.
React에서 arr.prototype.map 활용법
- 배열의 요소를 돌면서 인자로 전달된 함수를 사용하여 처리 된 새로운 결과를 새로운 배열에 담아 반환하는 함수
- 데이터처럼 동일한 요소를 가진 객체를 배열 형태로 반환되었을 때 while, for, forEach 보다 간편하게 반복 처리할수 있다.
** 리액트(React)에서는 컴포넌트를 렌더링 할때 어떤 원소가 변경되었는지 빠르게 감지하기 위해 key를 사용한다.
만약 key가 설정되지 않았다면 가상 DOM을 순차적으로 비교하면서 감지하기 때문에 key가 없을때보다 속도가 느리다.
이러한 key 값은 map() 함수를 호출할 때 인자로 넘기는 Callback 함수의 인자로 넘어오는 index 값을 사용하면 된다.
*** 따라서 key값을 명시해주지 않으면 (ex <div key={index}>) 에러를 만날수 있다.
**** Map Object도 있는데 arr.map을 사용하는 것에 대한 부분도 index 때문인것 같다고 생각했는데,
key로 index를 사용한다면 배열의 처음이나 중간에 새로 데이터가 삽입(삭제) 시 그 부분을 캐치하지 못하기 때문에
DB와 연계된 State(변할수 있는 값)은 pk값을 key로 설정하는 것이 좋겠다.
(index를 key값으로 사용하는 것을 지양한다)
React.Fragment
React에서 컴포넌트가 여러 엘리먼트를 반환하는 것은 흔한 패턴이고,
Fragments는 DOM에 별도의 노드를 추가하지 않고 여러 자식을 그룹화할 수 있다.
React.Fragment 는 jsx를 사용할때 한 컴포넌트에서 여러 요소들을 반환할때 div로 감싸지 않고 그대로 반환하기 때문에
Fragment를 사용하면 불필요한 div를 줄일수 있다.
Fragment는 대신 <>로 줄여서 사용할 수 있으나,
Fragments에 key가 있다면 <React.Fragment> 문법으로 명시적으로 선언해야한다.
(key는 Fragment가 유일하게 가질수 있는 속성이다.)
출처 👇👇👇
강의정보 👇👇👇
플랫폼 : 인프런
강의 : 따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
강사 : John Ahn
개발환경 : vscode, 서버 node.js, 클라이언트 react.js, 데이터베이스 mongoDB
boiler-plate git add : https://github.com/jaewonhimnae/boilerplate-mern-stack.git
'Programming > JavaScript' 카테고리의 다른 글
| [React] 리액트 라이프사이클, Hooks 알아보기 (0) | 2021.07.25 |
|---|---|
| [React ] Webpack으로 React.js 빌드하기 (0) | 2021.07.25 |
| [React / Node.js] react-router 리액트 라우터 알아보기 (0) | 2021.07.04 |
| [인프런] 레츠기릿 자바스크립트 / 끝말잇기, 셀프체크 쿵쿵따 만들기 (0) | 2021.06.30 |
| [React / Node.js] 영화사이트 클론코딩 - 에러 해결, React, ES6 문법 알아보기 (0) | 2021.06.23 |