LEO Devlog LEO Devlog

Lifting State Up ✔️ props로는 상위에서 하위 컴포넌트로밖에 전달되지 못하기 때문에 하위 컴포넌트에서 state를 통해 상위 컴포넌트의 내용을 변경할 수 있다. props는 상위 -> 하위 컴포넌트로 전달하는 값이고, 하위에서는 객체로 받는다. Effect Hook ✔️ 리액트에서 순수 함수(only 함수의 입력만이 함수의 결과에 영향을 주는 함수)만 있는 것이 아니기 때문에 side effect가 발생한다. 발생되는 경우는 fetch를 이용해 외부 데이터를 이용하거나, localStorage에서 데이터를 받거나 setTimeOut과 같은 타이머를 사용할 때 등 발생된다. useEffect를 사용하여 side effect를 처리할 수 있는데, 최상위에서만 Hook을 호출하고, React..

Node.js Express ✔️ MERN Stack: MongoDB, Express, React, Node 프레임워크 Express 장점: 미들웨어 추가가 편리하다. 자체 라우터를 제공한다. 기본 라우팅 ☑️ 라우팅은 URI 및 특정한 HTTP 요청 메소드(GET, POST 등)인 특정 엔드포인트에 대한 클라이언트 요청에 애플리케이션이 응답하는 방법을 결정하는 것을 말한다. 각 라우트는 하나 이상의 핸들러 함수를 가질 수 있으며, 이러한 함수는 라우트가 일치할 때 실행된다. app.METHOD(PATH, HANDLER) app은 express의 인스턴스 METHOD는 HTTP 요청 메소드 PATH는 서버에서의 경로 HANDLER는 라우트가 일치할 때 실행되는 함수 간단한 라우트의 정의 // 홈페이지에..

CORS ✔️ 고도화된 최근의 웹으로 인해 여러 곳의 리소스를 활용할 필요성이 대두되었고, 선배 개발자분들의 노력으로 CORS가 생겨나게 되었다. 예전과 다르게 same origin이 아니라 cross origin 요청을 해야 한다. Cross Origin Resource Sharing: cross origin에서 리소스(서버자원)을 요청하여 사용한다. const defaultCorsHeaders = { 'access-control-allow-origin': '*', 'access-control-allow-methods': 'GET, POST, PUT, DELETE, OPTIONS', 'access-control-allow-headers': 'content-type, accept', 'access-con..

Effect Hook Side Effect ✔️ Side Effect(부수 효과)는 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우의 해당 함수를 말한다. 순수 함수(Pure Function)는 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 말한다. 이 경우는 Side Effect가 발생되지 않는다. 그렇다면, Side Effect가 발생되는 경우는 언제일까? fetch를 이용해 외부 데이터를 받아오는 경우 LocalStorage에서 데이터를 받아오는 경우 setInterval, setTimeOut을 사용하는 경우 // 타이머 사용 useEffect는 컴포넌트 내에서 Side Effect를 실행할 수 있게 하는 Hook이다. 최상위에서만 Hook을 호출한다. React 함수 내에서 Ho..

State 끌어올리기 (Lifting State Up) 단방향 데이터 흐름에 따라, 하위 컴포넌트는 상위 컴포넌트로부터 전달받은 데이터의 형태 혹은 타입이 무엇인지만 알 수 있다. 데이터가 state로부터 왔는지, 하드코딩으로 입력한 내용인지는 모른다. 상위 컴포넌트의 "상태를 변경하는 함수" 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행한다. 단방향 데이터 흐름에 대해서 알아보자 -> 단방향 데이터 흐름을 사용하지 않으면 매번 기능 변경 사항에 대해서 코드를 계속 작성해야 된다. -> 코드의 흐름을 알기 쉽다. 복잡하지 않게 된다. -> 컴포넌트의 중요한 상태만 잘 관리하면 아래에서 UI가 자동으로 변경된다. props는 상위에서 하위 컴포넌트로 전달하는 값이고, 하위에서는 객체..

HTTP HTTP: HyperText Transfer Protocol HTML과 같은 문서를 전송하기 위한 프로토콜 // 웹 브라우저와 웹 서버의 소통을 위해 디자인되었다. 특징: Stateless(무상태성) HTTP messages 요청(Requests) / 응답(Responses) 요청과 응답의 유사한 구조 start line: start line에는 요청이나 응답의 상태를 나타낸다 // 첫번째 줄 HTTP headers: 요청을 지정하거나, 메시지에 포함된 본문을 설명하는 헤더의 집합이다. empty line: 헤더와 본문은 구분하는 빈 줄 body: 요청과 관련된 데이터나 응답과 관련된 데이터 또는 문서를 포함한다. // 선택적으로 사용한다. 이 중 start line과 HTTP headers를 ..

클라이언트-서버 아키텍쳐 리소스가 존재하는 곳과 리소스를 사용하는 앱을 분리시킨 것을 2-Tier 아키텍쳐, 혹은 클라이언트-서버 아키텍쳐라고 부른다. 리소스를 사용하는 앱

시간 관점에서는 Async와 Sync로 나눌 수 있고, 제어권 관점에서는 blocking과 non-blocking으로 나눌 수 있다. Promise 비동기적인 것을 수행할 때 콜백함수 대신 유용하게 쓸 수 있는 object 정해진 기능을 수행하고 나서 정상적으로 마무리되었다면 결과값을 전달해준다 문제가 생겼다면 error를 전달해준다. state: pending -> fulfilled or rejected Producer vs Consumer reject(): 주로 error object를 통해서 값을 전달한다. promise // .then(value =>{ console.log(value); }) .catch(error =>{ console.log(error); }) .finally(()=>{cons..