LEO Devlog LEO Devlog

Node.js Node js란 "Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임"이다. Chrome V8? V8은 웹 브라우저를 만드는 데 기반을 제공하는 오픈 소스 자바스크립트 엔진! 구글 크롬 브라우저와 안드로이드 브라우저에 탑재되어 있다. C++로 만들어졌고 싱글 스레드를 제공! JavaScript Engine? 자바스크립트 엔진은 자바스크립트 코드를 실행하는 프로그램! 여러 목적으로 자바스크립트 엔진을 사용하지만 대체적으로 웹 브라우저에서 사용된다. ex) Google V8 엔진 JavaScript Runtime? 런타임이란 프로그래밍 언어가 구동되는 환경으로, 자바스크립트 런타임은 자바스크립트 엔진, Web API, 콜백 큐, 이벤트 루프, 렌더 큐로 구성된다. ..

callback 함수의 매개 변수인 함수 비동기 처리 시 동기처리할 때 콜백패턴을 사용한다. 자유도가 높은 장점이 있으나 콜백지옥이 우려되니 조심! promise JavaScript가 동기 처리이기 때문에 비동기 처리를 위해 promise를 사용합니다. 에러핸들링할 때는 catch 로 에러 처리가 가능하다. promise 지옥이 발생할 수 있으니 적당히 써야함 async / await promise보다 비동기적인 상황 표현이 쉽다. 에러핸들링 기능이 없어서 try catch문을 활용해야한다. 비동기코드를 동기코드처럼 읽게 해주어서 가독성이 좋다.

Ajax란? Asynchronous Javascript and XML의 약자로 간단히 정리하면 XMLHttpRequest를 이용해서 새로고침없이 페이지의 일부를 로드하는 방법이다. 자바스크립트를 사용한 비동기 통신이며, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다. 비동기 방식 웹페이지를 새로고침하지 않고 데이터를 불러옵니다. Ajax를 통해 서버에 요청을 해도, 프로그램은 멈추지 않고 계속 돌아간다. 비동기 방식을 이용하면 시간 단축의 효과와 더불어 화면을 리로드하는 경우 필요한 부분만 가져오는 장점이 있다. Ajax를 쓰는 이유 단순하게 웹에서 데이터를 조회하고 싶은 경우, 페이지 전체를 새로고침하지 않기 위해 사용한다. 일반적으로 HTTP 프로토콜은 단방향 통신이기 때문에, 클라이언트에서..

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

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

시간 관점에서는 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..