sy의 코딩 개발일지

Main.js 부모컴포넌트 Search.js 와 FlightList.js 자식 컴포넌트 검색 버튼 누를시 search함수가 실행이된다. 부모컴포넌트(Main.js)에서 있는 상태 변경하는 함수(search)를 자식 컴포넌트(Search.js)에 전달후 이 함수를 자식 컴포넌트에서 실행을 한다. onSerach는 부모컴포넌트에 정의되어 있으며 setCondition함수를 호출하여 값을 변경한다. 하위 컴포넌트에서 search대신 onSearch로 받는다고 생각하면 될것 같다. 검색 버튼 누를시 search함수가 실행이된다. Main.js import Head from 'next/head'; import { useEffect, useState } from 'react'; import { getFlight }..

PostMan으로 MessageState에 POST요청을 보내는 과정 "POST" 요청 메소드를 선택 요청 URL을 입력하여 MessageState API에 접속 요청 헤더에 필요한 값을 설정 요청 본문에 데이터를 입력 "Send" 버튼을 클릭하여 요청을 보낸다. 응답을 확인하고, 성공적으로 저장되었는지 확인 post요청은 서버에 데이터를 보내기 위해 사용되는 HTTP메소드이다. 이 데이터는 요청 본문에 포함되어 전송되고 서버에서는 이 데이터를 가지고 추가적인 처리를 수행한다. POST요청은 줄로 데이터베이스에 데이터를 저장하거나 갱신하는데 사용된다. POST요청을 보내는 과정을 설명하면서 알게된것이 있다. 요청헤더에 필요한 값을 설정하지 않으면 API 서버에서는 요청 메시지에 포함된 데이터의 형식을 알..

REST API에서 REST(Representational State Transfer) : 웹 기술의 아키텍처 스타일 REST API는 HTTP 프로토콜을 이용해 리소스와 관련된 정보와 기능을 제공 웹에서 사용되는 데이터나 자원(Resource)을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식 REST 성숙도 모델 - 0단계 HTTP 프로토콜을 사용하기만 해도 된다. 0단계는 REST API를 작성하기 위한 기본 단계 REST 성숙도 모델 - 1단계 REST 성숙도 모델에 따르면, 1단계에서는 개별 리소스(Resource)와의 통신을 준수 모든 자원은 개별 리소스에 맞는 엔드포인트(Endpoint)를 사용해야하며 요청하고 받는 자원에 대한 정보를 응답으로 전달해야 한다..

클라이언트 - 서버 아키텍처 비번한 데이터 업데이트 필요 -> 리소드 존재하는 곳 , 리소스 사용하는 앱을 분리시키는 것(2티어 아키텍처) 클라이언트 : 리소스를 사용하는 앱 서버: 리소스를 제공하는 곳 클라이언트와 서버는 요청과 응답을 주고 받는 관계아다. 기존2티어+데이터베이스 추가(3티어) 데이터베이스 : 리소스를 저장하는 공간 데이터베이스는 데이터 제공자로 일종의 서버이다. 클라이언트-서버통신과 API 웹 애플리케이션 아키텍처에서는 클라이언트와 서버가 서로 HTTP라는 프로토콜을 이용해서 서로 대화를 나눈다. 프로토콜은 통신 규약, 즉 약속 응용계층 HTTP : 웹에서 HTML,JSON등의 정보를 주고받는 프로토콜 HTTPS: HTTP에서 보안이 강화된 프로토콜 FTP: 파일 전송 프로토골 SMT..

Props 전달 ReactDOM.render( , document.getElementById('root') ); App.js // TODO : MyPage, About 컴포넌트를 import 합니다. import MyPage from './Pages/MyPage'; import About from './Pages/About' ; //props를 전달받음 const App = (props) => { return ( {/* TODO : 유어클래스를 참고해서, 테스트 케이스를 통과하세요. TODO : React Router DOM 설치 후 BrowserRouter, Routes, Route의 주석을 해제하고 Routes, Route 컴포넌트를 적절하게 작성합니다. */} {/* Route 예시: */} ); ..

State : 내부에서 변화하는 값 ,컴포넌트의 사용중 내부에서 변할수 있는 값 ex)나이,사는 곳 ,취업 여부 , 결혼/연애 여부 Props : 외부로부터 전달받은 값 ex) 이름 , 성별 특징 컴포넌트의 속성 부모 컴포넌트(상위 컴포넌트)로부터 전달 받은 값 ->React 컴포넌트는 JavaScript 함수와 클래스로, props를 함수의 전달인자(arguments)처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환 객체 형태 읽기 전용(외부로부터 전달받아 변하지 않는 값) 사용하는 방법 하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의 props를 이용하여 정의된 값과 속성을 전달 전달받은 props를 렌더링 unction Parent() { ret..

App.js import React from 'react'; import './App.css'; import './global-style.css'; // TODO - react-router-dom을 설치 후, import 구문을 이용하여 BrowserRouter, Routes, Route 컴포넌트를 불러오세요. import { BrowserRouter, Routes, Route} from "react-router-dom"; import Sidebar from './Sidebar'; import Tweets from './Pages/Tweets'; // TODO - import문을 이용하여 MyPage, About 컴포넌트를 불러오세요. import MyPage from './Pages/MyPage'; i..

업데이트에 필요한 데이터만 받아 JavaScript가 이 데이터를 조작하여 HTML요소를 생성하여 화면에 보여주는 방식이 개발 SPA(Single-Page Application) 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트 SPA 장,단점 장점 : 사용자와의 행동에 빠르게 반응 서버에서는 요청 받은 데이터만 넘겨주면 되기 때문에 서버 과부하 문제가 현저하게 줄어둠 전체 페이지를 렌더링 할 필요가 없기 때문에 나은 사용자 경험 제공 단점 : JavaScript 파일의 크기가 크기 때문에 기다리는 시간으로 인해 첫화면 로딩시간이 길어진다. 검색엔진 최적화가 좋지 않다. 검색 로봇은 자료를 수집할 때에 웹 ..