req.params 라우터의 매개변수 /:id/:name 경로가 있으면 ":id", ":name"속성을 req.params.id, req.params.name으로 사용할 수 있다. http://params/user/45 일경우 45를 받는다. req.query 경로의 각 쿼리 문자열 매개 변수에 대한 속성이 포함된 개체다. (주로 GET 요청에 대한 처리) https://query/search? searchWord=google 일경우 searchWord 매개변수(parameter)의 google이라는 값(argument)을 가져온다. req.body JSON 등의 바디 데이터를 담을 때 사용한다. 주로 POST로 유저의 정보 또는 파일 업로드(formdata)를 보냈을 때 사용. 요청 본문에 제출된 키-..

미들웨어(Middleware) 미들웨어(Middleware)는 자동차 공장의 공정과 비슷하다. 컨베이어 벨트 위에 올라가 있는 요청(Request)에 필요한 기능을 더하거나, 문제가 발견된 불량품을 걷어내는 역할을 한다. 미들웨어는 express의 가장 큰 장점이라고 할 수 있다. 미들웨어를 사용하는 상황 POST 요청 등에 포함된 body(payload)를 구조화 할 때(쉽게 얻어내고자 할 때) 모든 요청/응답에 CORS 헤더를 붙여야 할 때 모든 요청에 대해 url이나 메서드를 확인할 때 요청 헤더에 사용자 인증 정보가 담겨있는지 확인할 때 미들웨어를 이용하면 Node.js 만으로 구현한 서버에서는 번거로울 수 있는 작업을 보다 쉽게 적용할 수 있다. Express 설치 npm install expr..

MVC 패턴이란? MVC 패턴은 소프트웨어 디자인 패턴 중 하나로, Model-View-Controller의 약어입니다. 이 패턴은 소프트웨어의 구성 요소들을 세 가지 역할로 분리하여 각각의 역할에 따라 코드를 작성하고 유지보수할 수 있게끔 합니다. Model: 데이터와 데이터를 처리하는 로직을 담당합니다. View: 사용자 인터페이스(UI)를 담당합니다. Controller: Model과 View를 연결하여 사용자의 입력에 따라 데이터를 업데이트하고 UI를 갱신합니다. 사용자가 Controller를 조작하면 Controller는 Model을 통해 데이터를 가져오고 그 데이터를 바탕으로 View를 통해 시각적 표현을 제어하여 사용자에게 전달하게 됩니다. 이러한 패턴을 성공적으로 사용하면, 사용자 인터페이..

Http.createServer() const http = require("http"); //create a server object: const server = http.createServer((request, response) => {}); 인수: 요청에 대한 콜백 함수(요청이 들어올 때마다 실행됨) === 콜백함수에는 응답을 적으면 됨 콜백의 매개변수: 요청, 응답에 대한 객체 Http.createServer() 메서드는 HTTP 서버를 만들기 위한 Node.js 내장 모듈의 메서드이다. 이 메서드는 requestListener 함수를 매개 변수로 받고 클라이언트가 요청 (request)을 보낼 때 마다 호출된다. requestListener 함수는 두개의 매개 변수 (req, res)를 받는다. ..

Part 2: AJAX 요청 🧩 Side Effect는 useEffect에서 다뤄야 합니다 √ 검색 조건이 바뀔 때마다, FlightDataApi의 getFlight를 검색 조건과 함께 요청해야 합니다 √ getFlight의 결과를 받아, flightList 상태를 업데이트해야 합니다 √ 더 이상, 컴포넌트 내 필터 함수 `filterByCondition`를 사용하지 않습니다 √ 더이상, 하드코딩된 flightList JSON을 사용하지 않습니다 (초기값은 빈 배열로 둡니다) √ getFlight 요청이 다소 느리므로, 로딩 상태에 따라 LoadingIndicator 컴포넌트를 표시해야 합니다 🧩 FlightDataApi에서 기존 구현 대신, REST API를 호출하도록 바꿉니다 √ 검색 조건과 함께 S..

많은 개발자들이 React를 사용하고 있는데, 그 이유에 대해서 설명해주세요. 더보기 React는 Facebook에서 만든 오픈소스 라이브러리로, 웹 애플리케이션을 빠르고 쉽게 개발하도록 도와줍니다. Virtual DOM React는 Virtual DOM을 사용하여 페이지 갱신 속도를 높입니다. Virtual DOM은 React에서 UI를 업데이트할 때 사용되는 메모리상의 가상 DOM입니다. 실제로는 DOM을 업데이트하지 않고, 이를 효율적으로 처리하여 성능을 개선합니다. Component-Based Architecture React는 컴포넌트 기반 아키텍처를 사용하여 애플리케이션의 복잡성을 낮춥니다. 컴포넌트는 재사용 가능한 UI 조각으로 분리됩니다. 이러한 컴포넌트 기반 아키텍처는 코드 재사용성과 유..

const Section = () => { const [modalOpen, setModalOpen] = useState(false); const imagesArr = [ "/img/1.png", "/img/2.png", "/img/3.png", "/img/4.png", "/img/5.png", "/img/6.png", "/img/7.png", "/img/8.png", ]; const showModal = () => { setModalOpen(true); }; return ( {imagesArr.map((image, index) => ( {modalOpen && } ))} ); }; function Modal({ setModalOpen, id, title, content, writer }) { const ..

State 끌어올리기란? 상위 컴포넌트의 상태 변경 함수를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행하는 것이다. export default function ParentComponent() { const [value, setValue] = useState("날 바꿔줘!"); const handleChangeValue = () => { setValue("달라진 값"); }; return ( 값은 {value} 입니다 ); } function ChildComponent() { const handleClick = () => { // 이 버튼을 눌러서 부모의 상태를 바꿀 순 없을까? }; return 값 변경; } 상태를 변경하는 함수는 handleChangeValue 전달은 props. Chi..