본문 바로가기

Frontend Dev/🐥 코드스테이츠 FE 부트캠프

(78)

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) =>..

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..

Section2 Unit8 [HTTP/네트워크] 실습 - REST API Section2 Unit8 [HTTP/네트워크] 실습 - REST API 📌 Chapter1. REST API • REST(Representational State Transfer)는 로이 필딩(Roy Fielding)의 박사학위 논문에서 처음 소개되었다. 발표 당시 웹이 HTTP의 설계상 우수성을 제대로 사용하지 못하고 있는 상황을 보고 웹의 장점을 최대한 활용할 수 있는 아키텍처로서 REST를 소개하였고 이는 HTTP 프로토콜의 의도에 맞게 디자인하도록 유도하고 있다. REST의 기본 원칙을 성실히 지킨 서비스 디자인을 RESTful이라고 한다. • 로이 필딩이 논문에서 제시한 REST 방법론을 보다 더 실용적으로 적용하기 위해 레오나르드 리처드슨(Leonard Richardson)은 REST API..

Section2 Unit7 [HTTP/네트워크] 기초 Section2 Unit7 [HTTP/네트워크] 기초 📌 Chapter1. 웹 애플리케이션 아키텍처 • 클라이언트는 인터넷에 연결된 사용자의 디바이스, 또는 웹에 접근할 수 있는 소프트웨어를 뜻한다. 대표적인 예로 브라우저가 있다. 브라우저는 HTML, CSS, JavaScript 등으로 작성된 코드를 내부 엔진으로 해독하여 사용자가 쉽게 이해할 수 있는 형태의 콘텐츠로 보여주는 역할을 한다. • 서버는 클라이언트가 어떤 자원을 요청하면 해당 요청을 적절하게 처리하는 역할을 한다. 클라이언트느 서버의 자원을 어떻게 사용할 수 있는지 명시해 둔 인터페이스 API에 따라 요청을 전송한다. • 이렇게 클라이언트와 서버가 서로 요청과 응답을 주고받을 수 있는 것은 HTTP 통신 규약 덕분이다. 📌 Chapter..

Section2 Unit6 [React] React State & Props - 과제 Twittler State & Props Section2 Unit6 [React] React State & Props - 과제 Twittler State & Props ⭐️ 과제. React Twittler State & Props → 기본 레이아웃과 css는 코드스테이츠에서 준비한 코드를 fork해서 몇가지 기능만 덧붙이며 학습하는 과제였다. → 상세 컴포넌트를 구현하고, map()을 사용해 리스트를 출력하고, React Router를 적용해 SPA를 구현했으며, state와 props를 이용해 Tweet 전송 Form을 구현했다. 📌 구현 과정 중 Memo 1. defaultValue와 value → defalutValue와 value는 함께 쓰면 둘 중에 하나만 쓰라고 경고가 남. Warning: Tweets contains an inpu..

이전 1 ··· 3 4 5 6 7 8 9 10 다음

티스토리툴바