Frontend Dev (147) 썸네일형 리스트형 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)”라고 한다. 상태.. Section2 Unit8 [HTTP/네트워크] 실습 - Postman Section2 Unit8 [HTTP/네트워크] 실습 - Postman 📌 Chapter2. Postman • 웹 개발에서 사용하는 대표적인 클라이언트는 브라우저이며, 브라우저는 서버에 HTTP 요청을 보낼 수 있지만 주로 웹 페이지를 받아오는 GET 요청에 사용한다. 브라우저의 주소창에 URL을 입력하면, 해당 URL의 root-endpoint로 GET 요청을 보내며, 테스트를 위해 GET요청이 아닌 다른 요청을 보내려면 개발자 도구의 콘솔 창에서 Web API fetch를 사용해야 한다. Postman은 테스트를 위해 매번 코드를 작성하는 번거로운 작업을 대신해 HTTP 요청을 테스트할 수 있는 API 테스트 도구이다. ⭐️ 과제. Message States 요청 📌 Postman으로 GET, POS.. REST 성숙도 모델 레오나르드 리처드슨(Leonard Richardson)은 REST API를 잘 적용하기 위한 4단계 모델을 만들었다. ↓ REST API에 관한 글은 아래 포스팅 참고 🐱 REST API란 무엇일까? REST(Representational State Transfer)는 로이 필딩(Roy Fielding)의 박사학위 논문에서 처음 소개되었다. 발표 당시 웹이 HTTP의 설계상 우수성을 제대로 사용하지 못하고 있는 상황을 보고 웹의 장점을 최대 fay-story.com 리처드슨의 REST 성숙도 모델은 총 4단계(0 ~ 3단계)로 나누어져 있으며, 각 단계에 따라 충족해야 할 조건이 있다. 실제로 엄밀하게 3단계까지 지키기 어렵기 때문에 2단계 까지만 적용해도 좋은 API 디자인알고 볼 수 있다. 👾 Lev.. REST API란 무엇일까? REST(Representational State Transfer)는 로이 필딩(Roy Fielding)의 박사학위 논문에서 처음 소개되었다. 발표 당시 웹이 HTTP의 설계상 우수성을 제대로 사용하지 못하고 있는 상황을 보고 웹의 장점을 최대한 활용할 수 있는 아키텍처로서 REST를 소개하였고 이는 HTTP 프로토콜의 의도에 맞게 디자인하도록 유도하고 있다. REST의 기본 원칙을 성실히 지킨 서비스 디자인을 RESTful이라고 한다. 👾 REST API 구성 REST API는 자원(Resource), 행위(Verb), 표현(Representations)의 3가지 요소로 구성된다. REST는 자체 표현 구조(Self-descriptiveness)로 구성되어 REST API만으로 요청을 이해할 수 있다... 이전 1 ··· 8 9 10 11 12 13 14 ··· 19 다음
