Javascript / Node.js / React

해당 카테고리는 단순히 글쓴이가 공부 후 정리해놓기 위한 목적으로 글쓴이가 추후 이해하기 쉽게 자기 멋대로 정리한 글입니다 :)

호옥시 잘못된 정보를 공부하고있다면 알려주세요!

 

참고1: beomy.github.io/tech/javascript/javascript-runtime/

참고2: geonlee.tistory.com/92

참고3: velog.io/@stampid/React%EB%9E%80

 

React 기초를 다시 한번 공부하려니

Node를 다시 알아야 했고 Javacript 런타임 기반이다보니

해당 부분까지 공부하게 됐다.

매번 1화만 보다가 끝나는 기분이야..😢

 

자바스크립트는 싱글쓰레드-논블로킹 언어로

쉽게 말해서 쓰레드 하나에 비동기식으로 작동한다.

하긴 단일쓰레드인데 동기식(블로킹) 형식이였으면....
하나처리하고 그다음 또 하나 하나 느려서 못 쓸 것같다.

참고1의 블로그를 보면 런타임 그림이 잘 그려져 있다.

함수 실행중 비동기함수 ( ajax, setTimeout )를 만나면 Web API가 이를 실행

그리고 콜백큐에 저장해놓는다.

그리고 콜스택에 이벤트가 비었다면 이벤트 루프가 콜백큐의 함수를 콜스택으로 옮겨준다!

 

요 친구를 기반으로한 Node.js

(두)이젠 웹브라우저 밖에서도 자바스크립트를 이용해 다양한것을 만들 수 있다..!(둥)

참고2에서 정리되어있는 Node.js의 특징을 보면

자바스크립트와 비슷하게 되어있다.

 

그리고 이 Node플랫폼을 통해 서버를 구축하고

자바스크립트로 만든 프론트엔드 프레임워크인 React를 이용해

최근 웹 환경을 구축을 많이 하는듯 하다 :)

Node와 React 사이에 Babel이라던지 Webpack이라던지 다양한 라이브러리를 이용하게 되고!

참고3에는 React에 대해 정리 되어있다.

DOM을 조작하기 위한 목적이고 컴포넌트 단위로 이루어져있다.

 

처음 React를 다룰때 ( 아직도 많이 미숙하지만 )

부모 자식간의 데이터 주고받는게 어렵게 느껴졌었는데...

특징을 보니 "One Wat Data Flow"라고 역시.. 데이터는 아래로만 흐른다!

부모 데이터를 바꾸기 위해선 state를 사용해준다고 한다.

근데 내가 할땐 state로도 왜 잘 안됐냐구...

React에서 생소했던 state와 props!

Props는 부모가 자식한테 전달해주는 데이터를 말한다. ( 읽기전용쓰 )

최상위 부모 컴포넌트만이 props를 수정해줄 수 있다.

그리고 두번째 State,

보통 다른 곳에서도 동적인 데이터를 다룰때 사용한다라고 설명되어 있다.

클래스형 컴포넌트에서만 사용가능하고, 다른 컴포넌트에서는 직접 접근 불가능하다.

단, state를 변경해주는 함수를 props로 받는다면 상위에서 변경 가능하다. 

오늘 업무일지는 요까지 끝 🤔