📖 (160) 썸네일형 리스트형 Express 요청 객체 req.body, req.params, req.query 사용 예제 req.body req.params req.query는 Express의 요청 객체의 프로퍼티로 각각 요청 본문, 경로 매개변수, 쿼리 매개변수에 접근하기 위해 사용된다. 👾 req.body POST 요청의 본문(body)에 포함된 데이터를 나타내는 객체이다. 주로 HTML form이나 AJAX 요청과 같이 POST 메서드를 통해 데이터를 전송할 때 사용된다. req.body를 사용하기 전에는 body-parser와 같은 미들웨어를 설정하여 요청 본문을 파싱(parse)할 수 있도록 해야 한다. 파싱하지 않은 요청 본문의 기본값은 undefined이다. const express = require('express') const app = express() const port = 3000 // Ex. POST.. Section2 Unit10 [Web Server] 기초 - StatesAirline Server Section2 Unit10 [Web Server] 기초 - StatesAirline Server ⭐️ 과제. StatesAirline Server ✔️ Bare Minimum Requirement ✅ statesairline/controller/flightController.js와 statesairline/controller/bookController.js 에 코드를 작성하세요. ✅ Express 공식문서에서 req.query , req.params를 사용하는 방법을 확인하세요. Query와 Params를 기준으로 데이터를 필터링하는 코드를 작성해야 합니다. ✅ 예약 데이터는 controller/bookController.js 안에 작성된 let booking = []; 배열에 저장해야 합니다. ✅ F.. Section2 Unit10 [Web Server] 기초 - Refactor Express Section2 Unit10 [Web Server] 기초 - Refactor Express 📌 Chapter2. Refactor Express ⭐️ 과제. Mini-Node Server를 Express로 리팩토링 구현과정 💡 TIP. 포스트맨을 활용해서 간편하게 요청을 보내고 응답을 확인할 수 있다. 1. express 모듈 학습 어제 node.js 맛 좀 보고, 하루만에 express로 넘어왔다… 여전히 모르는거 투성이에 감도 안잡혀서 express도 node.js 찍먹한 것처럼 간단한 구현만 먼저 해보기로 했다. express를 공부하다 보니 node.js로 코드를 작성할 때 어려웠던 부분들이 훨씬 편하게 해결되는 것들이 보였다. express가 편하다더니, 왜 그런지 알 것 같은 느낌에 기분이 약간.. Section2 Unit10 [Web Server] 기초 - CORS & Mini Node Server Section2 Unit10 [Web Server] 기초 - CORS & Http 모듈로 서버 만들기(Mini Node Server) 📌 Chapter1. CORS • 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. → 브라우저는 SOP에 의해 기본적으로 다른 출처의 리소스 공유를 막지만, CORS를 사용하면 접근 권한을 얻을 수 있게 된다. • SOP(Same-Origin Policy. 동일 출처 정책)는 같은 출처의 리소스만 공유가 가능한 정책이다. 동일 출처 정책은 잠재적으로 해로울 수 있는 문.. Section2 Unit9 [React] 클라이언트 Ajax 요청 - StateAirline Client 과제 리뷰 Section2 Unit9 [React] 클라이언트 Ajax 요청 - StateAirline Client 과제 리뷰 ⭐️ 과제. StateAirline Client ✔️ Bare Minimum Requirement ✅ Part 1 테스트 통과 ✅ Part 2 테스트 통과 ✏️ 구현 과정 노트 ✨ Search.js import { useState } from "react"; function Search({ onSearch }) { const [textDeparture, setTextDeparture] = useState("ICN"); const [textDestination, setTextDestination] = useState(""); const handleChange = (e, callback) =>.. React Hooks - useEffect useEffect는 리액트의 라이프사이클을 제어하는 메서드를 가져올 수 있는 기능을 가진 Hook으로, 어떤 상태값이 바뀌었을 때 동작하는 함수를 작성할 수 있다. // useEffect 문법 import { useEffect } from "react"; useEffect(() => { // 1. Callback 함수 }, []); // 2. Dependency Array(의존성 배열) • Callback 함수 첫번째 매개변수로 함수가 들어간다. → 함수가 호출된 타이밍은 렌더링 결과가 실제 돔에 반영된 직후이다. • useEffect 두번째 매개변수 // 1. 두번째 매개변수로 아무것도 전달하지 않으면 화면이 리렌더링 될때마다 매번 실행된다. useEffect(() => { console.log("ch.. React의 데이터 흐름 - React로 UI를 구현하기 위한 단계 👾 React로 UI를 구현하기 위한 단계 💬 이번 글은 React 공식문서의 글을 공부하며 나름대로 정리한 내용입니다. 자세한 내용은 아래 React 공식문서 참고하며 학습하면 좋을 것 같습니다. 🙂 React로 사고하기 – React The library for web and native user interfaces ko.react.dev 1. UI를 컴포넌트 계층으로 쪼개기 📌 컴포넌트로 생각하기 → 단일책임 원칙을 반영하고자 한다면 컴포넌트는 이상적으로는 한 가지 일만 해야 한다. 만약 컴포넌트가 점점 커진다면 작은 하위 컴포넌트로 쪼갠다. 2. React로 정적인 UI 구현하기 • 정적인 버전을 먼저 만들고 상호작용을 개별로 추가하는 것이 더 쉬운 방법이다. • 데이터 모델(제품의 원본 목록)을.. Section2 Unit9 [React] 클라이언트 Ajax 요청 Section2 Unit9 [React] 클라이언트 Ajax 요청 📌 Chapter1. React 데이터 흐름 • 단방향 데이터 흐름이라는 원칙에 따라 하위 컴포넌트는 상위 컴포넌트로부터 전달받은 데이터의 형태 혹은 타입이 무엇인지만 알 수 있다. 데이터가 state로부터 왔는지, 하드코딩으로 입력한 내용인지는 알지 못한다. 그래서 하위 컴포넌트에서의 어떤 이벤트로 인해 상위 컴포넌트의 상태가 바뀌는 것은 마치 “역방향 데이터 흐름”과 같이 조금 이상하게 들릴 수 있다. React가 제시하는 해결책은 다음과 같다. → 상위 컴포넌트의 “상태를 변경하는 함수” 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행한다. 이를 “상태 끌어올리기(Lifting State Up)”라고 한다. 상태.. 이전 1 ··· 8 9 10 11 12 13 14 ··· 20 다음
