전체 글
-
Refactor ExpresscodeStates front-end/node(server) 2023. 2. 8. 20:13
📌 Refactor Express 📍Express Express 설치 npm install express Hello world! 예제 만들기 Express "Hello World" 예제 Hello world 예제 기본적으로 이 앱은 여러분이 작성할 수 있는 가장 간단한 Express 앱일 것입니다. 이 앱은 하나의 파일로 된 앱이며 Express 생성기를 통해 얻게 되는 앱과는 같지 않습니다. (이 예제 expressjs.com 공식문서를 통해 실행 myapp 디렉토리 생성 npm init 실행 app.js 라는 이름의 파일을 작성 후 다음 코드 작성 const express = require('express') const app = express() const port = 3000 app.get('/'..
-
Mini-Node ServercodeStates front-end/node(server) 2023. 2. 8. 16:20
📌 Mini-Node Server 📍서버실행 node server/basic-server.js 📖 학습 목표 POST에 문자열을 담아 요청을 보낼 때는 HTTP 메시지의 body(payload)를 이용합니다. 서버는 요청에 따른 적절한 응답을 클라이언트로 보내야 합니다. CORS 관련 헤더를 OPTIONS 응답에 적용해야 합니다. 클라이언트의 preflight request에 대한 응답을 돌려줘야 합니다. preflight request에 대한 응답 헤더는 이미 작성되어 있습니다. basic.server.js const http = require('http'); const PORT = 4999; const ip = 'localhost'; const server = http.createServer((req..
-
CORS 개요codeStates front-end/node(server) 2023. 2. 6. 17:29
📌 CORS 개요 📍SOP(Same-Origin Policy) '같은 출처의 리소스만 공유가 가능하다' 라는 정책 💡 출처가 뭔가요? 📖 출처는 프로토콜, 호스트, 포트의 조합, 이 중 하나라도 다르면 동일 출처 x 출처가 다른 예시 http / https -> 두 url은 프로토콜이 다르기 때문에 동일 출처 X tistory.hwantech.com / velog.hwantech.com -> 두 url은 호스트가 다르기 때문에 동일 출처 O http://hwantech.tistory.com/81 / http://hwantech.tistory.com -> http 기본 포트는 80 이다 그러므로 뒤에 url은 포트가 적혀 있지 않으면 기본포트 80이기 때문에 동일 출처 X https://hwantech.t..
-
[React] 실습 - StatesAirline ClientcodeStates front-end/React 2023. 2. 4. 16:52
📌 StatesAirline Client 📖 학습 목표 Part - 1 [React] 데이터 흐름 📌리액트 데이터 흐름 📍단방향 데이터 흐름( one-way data flow ) React는 페이지 단위가 x -> 컴포넌트 단위 컴포넌트를 만들고 -> 페이지를 조립 (상향식(bottom-up)으로 컴포넌트 구조를 짠다) 컴포넌 hwantech.tistory.com Part - 2 [React] Effect Hook 📌Effect Hook React 컴포넌트 외부에서 데이터를 처리하고 받아오는 과정 🔗Side Effect (부수 효과) React에서 컴포넌틑 내에서 fetch를 사용해 API 정보를 가져오거나 이벤트를 활용해 DOM 직접 조작할 hwantech.tistory.com Part 1 - Test..
-
Daily Coding 10codeStates front-end/Algorithm 2023. 2. 2. 18:11
📍문제 10( insertDash ) 문자열을 입력받아 연속된 한자리 홀수 숫자 사이에 '-'를 추가한 문자열을 리턴해야 합니다. 📥입력 인자1 : str string 타입의 문자열 📤 출력 String 타입의 문자열 ❗️주의사항 0은 짝수로 간주합니다. 나의 생각 문자열을 입력받아 -> str 연속된 한자리 홀수 숫자 사이에 -> 문자열을 알려면 문자열 한바퀴 돌아야 겠군 for문돌려 너 홀수야? -를 추가한 문자열을 리턴 -> -를 추가한 문자열이니 값을 새로 만들어서 -추가해서 리턴해줘야겠군 대충 폼 let result = str[0]; for(문자열을 다 돌렸을 때){ if(문자열 한자리 전이 짝수고 다음 껏도 짝수면) { 결과는 결과 + "-" } 새로운 문자열은 문자열 더하면서 계속 돌려 } ..
-
[React] Effect HookcodeStates front-end/React 2023. 2. 2. 17:46
📌Effect Hook React 컴포넌트 외부에서 데이터를 처리하고 받아오는 과정 🔗Side Effect (부수 효과) React에서 컴포넌틑 내에서 fetch를 사용해 API 정보를 가져오거나 이벤트를 활용해 DOM 직접 조작할 때 Side Effect가 발생했다고 한다. ------------------------------- 💡 fetch가 뭐에요? 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 일 // fetch() 기본 문법 let promise = fetch(url, [options]) //fetch 함수는 API를 사용하여 백엔드 서버와 비동기 요청을 하는 방식 중 하나 //fetch API는 3개의 interfeace를 도입하고 있는데 Headers, Request, Respons..
-
[React] 데이터 흐름codeStates front-end/React 2023. 2. 2. 16:23
📌리액트 데이터 흐름 📍단방향 데이터 흐름( one-way data flow ) React는 페이지 단위가 x -> 컴포넌트 단위 컴포넌트를 만들고 -> 페이지를 조립 (상향식(bottom-up)으로 컴포넌트 구조를 짠다) 컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 마치 전달인자 혹은 속성처럼 전달 받음 데이터를 전달하는 주체 : 부모 컴포넌트 -? 데이터 흐름이 하향식(top-down) 이를 단방향 데이터 흐름이라고 한다 💡 props와 state의 설명 이해하기 [React] State & Props & 렌더링 정의 📌리액트 개념 📍State & Props State : 살면서 변할 수 있는 값(상태) 컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값 Props : 성별이나 이름처..
-
REST API - 나만의 언어로 블로깅 해보기codeStates front-end/node(server) 2023. 1. 31. 20:01
📌 REST API 📍REST( Representational State Transfer ) API 작동 방식에 대한 조건을 부과하는 소프트웨어 아키텍쳐 대규모의 고성능 통신을 안정적으로 지원 📍API 애플리케이션 프로그래밍 인터페이스 다른 소프트웨어 시스템과 통신하기 위해 따라야 하는 규칙을 정의 📍 REST API 웹에서 사용되는 데이터나 자원을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식 REST 구성 자원(RESOURCE) - URI 행위(Verb) - HTTP METHOD 표현(Representations) REST 특징 1) 균일한 인터페이스 : 서버가 표준 형식으로 정보를 전송 2) 무상태 : 서버가 이전의 모든 요청과 독립적으로 모든 클라이언트 요청을 ..