LEO Devlog LEO Devlog

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..

JSON JavaScript Object Notation 서버 통신의 시작점 Key - Value 세트로 이루어진 data object를 전달하기 위해 사람이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷 특히 인터넷에서 자료를 주고 받을 때 그 자료를 표현하는 방법 특징 간결한 데이터 교환 포맷 읽기 쉬운 심플한 텍스트 기반 구조 Key - Value 세트 네트워크끼리의 연결 간의 데이터 직렬화 및 전송에 사용 프로그래밍 언어나 플랫폼에 상관없이 JSON을 사용가능 Stringify(Obj) let json = JSON.stringify(true); console.log(json) //true; json = JSON.stringify(['lion','banana']); console.log(json..

비동기 자바스크립트는 동기적인 친구이다. 코드 작성 순서대로 작동하기 때문 / 호이스팅: var, function 선언들이 제일 위로 올라가는 것 예시: setTimeout() -> 정해진 시간 후에 콜백함수를 부름 setTimeout(function() { // 1초 후에 2를 출력해줘 console.log('2'); }, 1000) 콜백은 무조건 비동기적인 것인가 ? No! Synchronous callback(동기적 실행) function printImmediately(print) { print(); } printImmediately(() => console.log('happy')); // Asynchronous callback 함수의 선언이니 제일 위로 호이스팅 된다! Asynchronous c..

재귀함수 사례 재귀함수 문제_1 function unpackGiftbox(giftBox, wish) { for (let i = 0; i < giftBox.length; i++) { if (giftBox[i] === wish) { return true } else if (Array.isArray(giftBox[i])) { let result = unpackGiftbox(giftBox[i], wish); if (result) return true; } } return false; } 주어진 선물박스와 위시가 일치하는지 확인하는 문제이다. giftBox가 이렇게 주어지고 ['macbook', ['eyephone', [], ['postcard']], 'iphone'];​ wish로 'iphone'을 원한다면 ?..