전체 글 (364) 썸네일형 리스트형 StatesAirline-Client import Head from 'next/head' import { useEffect, useState } from 'react' import { getFlight } from '../api/FlightDataApi' import FlightList from './component/FlightList' import LoadingIndicator from './component/LoadingIndicator' import Search from './component/Search' import Debug from './component/Debug' import json from '../resource/flightList' export default function Main() { const [conditio.. Effect Hook (2) - 조건부 실행(dependency array), 명언제조기 filter 1. 조건부 effect 발생(dependency array) useEffect의 두 번째 인자는 '배열'. 이 배열은 조건을 담고 있다. 이 조건은 boolean형식이 아닌, 어떤 값의 목록이 들어간다. 이 배열을 '종속성 배열'이라고 부른다. useEffect(함수, [종속성1, 종속성2, ...]) : 배열 내의 종속성1, 종속성2의 값이 변할 때 첫번째 인자인 함수가 실행된다. import { useEffect, useState } from "react"; import "./styles.css"; import { getProverbs } from "./storageUtil"; export default function App() { const [proverbs, setProverbs] = useS.. React에서의 useEffect, Life Cycle, 순수함수 함수 방식이 클래스 방식에 버금가는 가능성을 갖게된 중요한 2가지 측면 1. state를 사용할 수 있게 되었다.(useState) 2. 라이프사이클을 다룰 수 있게 되었다.(useEffect) [1. class 방식에서의 Lify Cycle구현] 클래스 방식에서 React Component를 만들 때, 컴포넌트의 메소드들이 어떤 순서로 호출이 되는가. 1. componentWillMount() - 랜더되기전에 실행. 컴포넌트가 생성되기 전에(렌더가 호출되기 전에) 처리해야 할 일이 있다면, 이 메소드를 구현하여 해야할 일을 여기에 갖다 놓는다. 2. render() - 호출되면 마운트가 된다.(화면에 그려진다) 3. componentDidMount() - 화면에 그려진 다음에 처리해야 할 일. - 컴포.. mininode-server with Express 1. 먼저 Express 모듈을 install한다. $ npm install express --save 2. cors 미들웨어 install $ npm install cors 미들웨어 : 공통적으로 사용되는 코드를 미들웨어로 처리. 미들웨어는 함수 app.use() : 첫번째 파라미터 request객체, 두번째는 response객체, 세번째는 next 변수. next라는 변수에는 그 다음에 호출되어야 할 미들웨어가 담겨있다. const express = require('express'); //설치한 express 모듈 불러오기 const app = express(); //서버를 만든다. //express는 함수. return된 값은 app이라는 변수에 담긴다. app변수에는 application이라는 객.. mini-node server const http = require('http');//'http'모듈 가져오기. //http모듈 : Node.js에서 웹 서버 만드는데 필요한 모듈 const PORT = 5000; const ip = 'localhost'; const server = http.createServer((request, response) => { //웹 서버객체를 만들어야한다 : http.createServer // const {method, url} = request; // 즉, method : HTTP method/동사 이고 // url: 전체 URI에서 프로토콜, 호스트, 포트를 제외한 것으로 'url-path부터 마지막 전부' if (request.method === 'OPTIONS') { response.writ.. HTTP Messages * HTTP : HyperText Transfer Protoco. HTML과 같이 문서를 전송하기 위한 Application Layer프로토콜. 웹브라우저 - 웹서버의 소통을 위해 디자인 됨. 클라이언트가 HTTP messages양식에 맞춰 요청을 보내면, 서버도 HTTP messages양식에 맞춰 응답한다. HTTP messages - request 1> GET - 브라우저 주소창 : 주소창에 www.naver.com - fetch API fetch(URL들어감).then((response) => console.log(response)) // response : Response 객체가 들어온다. ex: Response {} fetch함수는 디폴트로 GET방식으로 작동. 옵션인자가 필요없다. - Post.. 브라우저의 작동 원리 (보이지 않는 곳) 1. URL & URI 1> URL ( Uniform Resource Locator )네트워크 상에서 웹 페이지, 이미지, 동영상 등의 파일이 위치한 정보를 나타낸다.브라우저의 주소창에 입력한 URL : 서버가 제공하는 환경에 존재하는 파일의 위치구성 : scheme + hosts + port + url-pathex: https://codestates.com:443/ —> codestates.com 주소가 가리키는 서버의 기본 폴더.CLI환경에서 폴더와 파일의 위치를 찾아 이동하듯이, 슬래쉬(/)를 이용해 서버의 폴더에 진입하거나 파일을 요청할 수 있다.그러나, 기본적인 보안의 일환으로 외부에서 직접 접근이 가능한 경우는 거의 x.http://www.google.com:80/search?q=JavaScriptscheme : h.. API & REST API 개념 손님이 메뉴를 주문하려면 '메뉴판'을 보고 주문해야 한다. 즉, 컴퓨터에게 요청을 할 때에는 정확한 주문방법에 따라 요청해야 한다. 하지만, 우리는 서버가 어떻게 구성되어 있는지 알 방법이 없다. 우리가 서버코드를 직접 짠 사람도 아닌데 어떻게 사용 가능한 자원을 파악할 수 있을까? --> API(Application Programming Interface) 서버는 클라이언트에게 리소스를 잘 활용할 수 있도록 인터페이스(interface)를 제공해줘야한다. 이것을 API라고 한다. ex: API : 아메리카노 주문은 /americano로 요청하세요! 서버에는 마치 식당에서 메뉴판을 제공하듯이, 리소스를 활용할 수 있도록 API를 제공해야 한다. resoure: Americano 이 아메리카노를 주문할수있.. 이전 1 ··· 40 41 42 43 44 45 46 다음
