Land of Joe

1. 비동기 1-1. 비동기 함수 기본적으로 자바스크립트는 동기적이다. = 호이스팅(변수 및 함수 선언)이 된 후부터 코드가 작성된 순서에 따라 작동한다. ※ 비동기 함수는 본인이 끝나는 것을 기다리지 않고 다음 줄을 바로 실행하도록 한다. ※ 오래 걸리는 작업을 기다리지 않고 다음 작업을 먼저 하게 하기 위함. 1-2. 비동기 함수의 종류 [ js 내에 이미 있는 비동기 함수 ] 시간을 이용하는 함수 (setTimeout, setInterval) 이벤트 등록 함수 (addEventListener) 백엔드 통신 함수 (fetch) 리액트 내에서의 비동기 함수 (useEffect) 데이터베이스 연결 함수 ⇒ 위 함수들의 공통점: 시간이 오래 걸리는 함수임. 함수의 매개변수로 함수를 받음. [ 개발자가 직접..

지난 주엔 전역 상태 관리 Global State Package의 대표 주자, Redux에 대해 배우고 나의 CRA 리액트 프로젝트에 적용해보았다. React-Redux를 사용할 때엔 action, reducer 개념부터 시작해서 useDispatch, useSelector까지 전체 흐름을 이해하는 데 꽤 애를 썼었다. 그러나 오늘 배운 Recoil 리코일! 정말 얼마나 단순하던지..! 그리고 useState와 사용 방식이 비슷해 반갑기도 했다. 각설하고 배운 내용 정리 시작~! Recoil 전역 상태 관리 패키지 20년도 Meta에서 리액트 전용으로 쓰라고 만들어준 패키지 [ Recoil의 특징 ] 리액트 전용이라서, 리액트 문법에 매우 어울린다. 불필요한 설정이나 연결 코드 등이 필요 없다. Hook..

전역 상태 관리 Global State Package에 대해 배웠다. 전역 상태 관리의 종류에는 Redux, Recoil, Justand, jotai 등 여러가지가 있다. 하나하나에 대해 알기 이전에 전역 상태 관리가 무엇인지, 그 필요성이 대두된 배경이 무엇인지 알아보자. 전역 상태 관리 Global State Package는 State를 전역변수로 관리하는 패키지 그렇다면 기존 useState의 특징에 대해 알아보자. [ useState의 특징 ] 1. 해당 State를 필요로 하는 부모 컴포넌트에 State를 선언해줘야 한다 - 이벤트의 시작지점과 도착지점이 되는 컴포넌트 두 개를 하나의 부모 컴포넌트로 묶어서 그 부모 컴포넌트에 state를 선언해준다 - 그렇게 부모 컴포넌트에 선언한 state를..

1. Node.js 1-0. 할 것 Node.js를 통해 리액트 프로젝트 만들기 구체적으로, node.js 기반 프로젝트를 만들어서 거기에 리액트를 설치하는 것이다. (지난주까지 내가 한 것: 단순 바닐라 웹에 리액트를 올려서 사용하였음) 1-1. Node.js의 의의 - 자바스크립트 런타임 기술 (런타임이란 '언어가 구동되는 환경'. js의 경우 브라우저 혹은 node.js가 있겠고, 그것들이 js의 해석기 역할을 하고 있다고 보면 된다.) - 개발의 중심이 브라우저가 아닌, Node.js가 될 것 (지금까지 브라우저한테 js의 해석을 맡겼던 것을, node.js가 해석하는 것으로 변경할 것) - Node.js의 여러 기능을 이용할 수 있게 되었다. >> sudo apt install nodejs (설..

드디어 마르고 닳도록 들어본 (듣기만 한) 개념들에 대해 배웠다. 아직 리액트 어플(CRA..뭔지 잘 모름)에 한 건 아니고, 그냥 html에 바벨 라이브러리 설치해서 script 안에 개발하고 있다. CRA를 사용하지 않은 바벨의 특성 상(?) html 파일 하나에 전부 때려박아야 해서 파일을 컴포넌트 단위로 나누어보지도 않아 아직 내가 리액트를 하고 있다는 게 별로 실감이 나지 않았는데 그동안 유튜브 등에서 귀동냥으로 들어왔던 리액트 대표 개념들을 배우니 뭔가 설레었따. 히히 여튼 시좍좍 1. Virtual DOM 버츄얼 돔 1-1. Virtual DOM의 존재 이유 요즘같이 한 페이지에 많은 데이터를 출력하는 웹에 있어 브라우저의 동작 구조는 매우 비효율적이다. [ 브라우저 동작 구조 ] (1) D..

지난 주엔 바닐라 자바스크립트를 가지고 리액트의 구조를 따라해보는 시간을 가졌다면, 이번 주엔 드디어 리액트 문법을 배우는 시간을 가졌다. 리액트 앱(CRA) 내부에서 그 문법을 사용한 것은 아니고, 그냥 JS에서 리액트 문법을 배워보았다. CRA에서 배우지 않고 바닐라 JS에서 진행한 이유는 - CRA를 동작시키는 것들이 문법 외에도 너무 많다 (ex. Node.js 등) - 그러한 것들을 모르는 채로 CRA를 바로 시작해버리면 문법에 대한 이해도가 떨어지게 된다. 여튼 저번주부터 심화수업이 시작되고 나서는 리액트를 제대로 배워나가기 위해 계속 약한 불로 슬슬 가열하는 느낌, 자동차를 운전하기 전에 시동을 부릉부릉 걸어놓는 느낌이 든다. 가보좌 1. 리액트는 왜 배워야하는가? (부제: 기존 바닐라 웹 ..

그동안은 변수를 만들 때 var만 사용해왔다. 그러나 var의 문제점은 "중복선언이 가능"하고 "호이스팅이 된다"는 점이다. 먼저 중복 선언의 예시 var를 통해 만든 num1은 위에서부터 아래로 읽는 js의 성격에 따라 서로 다른 값을 넣어준 것의 결과가 그대로 출력된다. 그러나 함수의 경우는 또 그렇지 않다는 게 이상한 점. 호이스팅(Hoisting)이란: 변수와 함수의 선언부분을 파일의 상단으로 끌고 올라오는 JS만의 편의기능이다. 위 중복 선언의 예시가 작동하는 순서대로 쓴 것이 아래의 이미지이다. var num1 =10;에서 선언부는 var num1에 해당하고, function printMessage() {console.log("hello")}는 전체가 선언부에 해당한다. JS가 작동하는 순서에..