codeStates front-end
-
My Agora states servercodeStates front-end/node(server) 2023. 2. 9. 16:22
📌 My Agora states server 📖 학습 목표 전의 학습한 statesAirline Server를 구현해보셨다면 어렵지 않습니다! airline 코드를 보면서 구현해 봅시당 StatesAirline Server 📌 StatesAirline Server 📖 학습 목표 이를 학습하기 전의, 아래 기본 내용을 먼저 이해하자 Express 사용 Refactor Express 📌 Refactor Express 📍Express Express 설치 npm install express Hello world! 예제 만들기 Express hwantech.tistory.com 📣 서버를 처음 실행 시키면 미들웨어 셋팅 부분이 동작 그후 '주소/'를 들어가게 되면 라우트 부분이 실행되고 다시 요청을 기다림 주소/..
-
StatesAirline ServercodeStates front-end/node(server) 2023. 2. 9. 15:54
📌 StatesAirline Server 📖 학습 목표 이를 학습하기 전의, 아래 기본 내용을 먼저 이해하자 Express 사용 Refactor Express 📌 Refactor Express 📍Express Express 설치 npm install express Hello world! 예제 만들기 Express "Hello World" 예제 Hello world 예제 기본적으로 이 앱은 여러분이 작성할 수 있는 가장 간단한 Express 앱일 것입니다. hwantech.tistory.com 📣 서버를 처음 실행 시키면 미들웨어 셋팅 부분이 동작 그후 '주소/'를 들어가게 되면 라우트 부분이 실행되고 다시 요청을 기다림 주소/가 아닌 경우 다른 주소로 들어가면 라우트 실행 x 에러처리 동작 1. 미들웨어..
-
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..