지금까지 배웠던 내용들 중에서 가장 흥미롭게 공부했던 부분이었다. 서버에서 데이터를 받아오고 보내고, 응답받은거를 직접 확인해볼 수 있도록 코드를 작성해보는 실습들 위주여서 재밌게 공부했던 한 주 였다. 처음으로 더 깊게 공부해보고 싶다는 생각을 했던 내용이였다. 그래도 어려운건 어려웠지만, 이해하고 보니 처음 접했을 때 보다 한결 쉬웠다. 백앤드에서 무엇을 배울지 기대되고 데이터베이스에서는 어떤 작업을 통해 이뤄지는지 궁금했다🙄
2주 만에 처음으로 페어 분과 공부를 했는데, 내가 이해하고 있는 내용을 설명해드리는 것도 많은 에너지를 쏟게 된다는 걸 몸소 느껴본 한 주였다. 힘들긴 했지만 페어 분에게 차근차근 하나 씩 알려드리면서 복습도 되고 내가 어느 부분이 부족하고, 개념이 탄탄하게 잡혀있지 않은지 확인할 수 있어서 좋았다. 다음 주부터는 Redux를 배우는데 많이 어렵지 않기를 바란다😀
8주차 배운 내용 중 정리하고 싶은 내용
[React] 데이터 흐름의 이해와 비동기 요청 처리
-
데이터는 위에서 아래로 흐름
- 컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 인자 or 속성처럼 전달 받을 수 있음
- 데이터를 전달하는 주체는 부모컴포넌트로 하향식 데이터 흐름
-
어떤 데이터를 state로 둬야 할까?- 부모로부터 props를 통해 전달하는가?
- 시간이 지나도 변하지 않는가?
- 컴포넌트안에 다른 state나 props를 가지고 계산이 가능한가?
=> 각각 해당 된다면 state가 절대 될 수 없음
=> 만약 하나의 state를 기반으로 두 컴포넌트가 영향을 받는다면?
두 자식의 공통부모 컴포넌트에 상태를 위치
-
side Effect
*함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우*
ex) setTimeout, fetch API, localStorage
*컴포넌트 내에서 side Effect를 실행할 수 있게 하는 Hook => useEffect(첫번째 인자는 함수)*
useEffect(() => {
}) -> 컴포넌트가 렌더링 될 때 매번 실행
useEffect(() => {
},[]) -> 컴포넌트가 처음 생성될 때만 실행
useEffect(() => {
},[condition]) -> 종속성 값이 변할 때 실행(여러개 가능)
<유의사항>
* 최상위에서만 Hook 호출
- 반복문, 조건문 혹은 중첩된 함수 내에서 호출하지 않음
- 규칙을 지킬 시, 컴포넌트가 렌더링 될 때 마다 항상 동일한 순서로 Hook 호출
* React 함수 내에서 Hook 호출[Web Server] 기초
-
라우팅
- URI (또는 경로) 및 특정한 HTTP 요청 메소드(GET, POST 등)인 특정 엔드포인트에 대한 클라이언트 요청에 애플리케이션이 응답하는 방법 결정 =>app.METHOD(PATH, HANDLER)
-
Routing
const express = require('express')
const cors = require('cors') -> 모든 요청에 대해 CORS허용 / 따로 지정 가능
const app = express()
app.use(cors())
app.use(express.json({ strict:false }) -> 배열, 객체 제외하고 다른 타입이 들어오는 것이 가능
const port = 5000
app.use(express.static('../client')
app.get('/', (req, res) => {
res.sendFile(__dirname + '../client/index.html/') -> 파일 열기
})
app.post('/upper', (req, res) => {
let result = req.body.toUpperCase()
res.json(result)
})
* req.params : api/posts/:id -> req.params.id
* req.query : search?q=tobi -> req.query.q //tobi
shoes?order=blue -> req.query.order //blue
* req.body : key-value의 데이터가 담긴 객체프로퍼티
JSON 객체에 접근 가능
POST https://swamp.com/login
{
"email": "hjin9902@naver.com"
"text": "Hello!"
}
-> req.body.email //hjin9902@naver.com
-> req.body.text //Hello!express.Router
const express = require('express')
const router = express.Router()
router.use(function timeLog(req, res, next) {
console.log('Time: ', Date.now())
next()
})
module.exports = router
mains.js(실행하는 페이지)에
const new = require('/new') -> Router 파일위치
app.use('/new', new) -> 라우트경로Middleware
<기본> *2개 인수 필요*
app.get('/', (req, res) => {
res.send('Hello world!')
})
<미들웨어> *3개 인수 필요*
router.get('/user/:id', (req, res, next) =>{
console.log(req.params.id)
res.render('special')
})
<오류처리 미들웨어> *4개 인수 필요*
app.use((err, req, res, next) => {
console.log(err.stack)
res.status(500).send('Something Broke!)
})
<node.js 디버깅하는 방법 : node --inspect index.js / nodemon --inspect>
<만약 서버포트 중복오류 떴다면?> : lsof -i tcp:5000(포트번호) ---> kill 9 PIDNumber
