Ch.Covelope

호출 스택, 실행 프로세스 복습 하기 호출 스택(call stack), 콜백 큐(callback queue), 이벤트 루프(event loop) 자바스크립트 코드가 실행되고 자바스크립트 엔진은 각각의 함수 호출을 호출 스택에 추가, call stack 에 푸시(push) 되고 , 실행이 완료되면 stack 에서 팝(pop)된다. 호출스택(call stack) 함수의 호출을 기록 하는 자료 구조 만약 함수가 동기적일 경우 해당 연산이 완료될 때까지 다른 모든 작업은 대기하게 된다. JS 엔진은 단일 스레드로 동작하기 때문에 한 번에 하나의 작업만 처리한다. 만약 함수가 비동기적일 경우 예를 들어 setTimeout 또는 fetch,promise 등 해당 연산은 백그라운에서 처리되는데 해당 함수들의 결과를 ..

자바스크립트 엔진(javascript engine) JavaScript 엔진은 JavaScript 코드를 해석하고 실행하는 역할을 담당. 주요 JavaScript 엔진에는 V8(Chrome 및 Node.js에서 사용), SpiderMonkey(Firefox에서 사용), JavaScriptCore(Safari에서 사용), Chakra(이전 버전의 Microsoft Edge에서 사용)가 포함. 주요 역할 파서 (Parser): 자바스크립트 코드를 읽고 추상 구문 트리(Abstract Syntax Tree, AST)로 변환하는 역할을 한다. AST는 코드의 구조를 표현하며, 엔진은 이를 분석하여 실행에 필요한 정보를 추출한다. 인터프리터 (Interpreter): 변환된 AST를 실행 가능한 명령어로 해석하고..

state. - 현재 컴포넌트에 렌더링에 영향을 미치는 객체 형태의 데이터 props. - 상위 컴포넌트에서 하위 컴포넌트로 객체 형태의 데이터를 전달 (읽기 전용) state 또는 props 업데이트 시 리렌더링된다. 리액트(react) 데이터 흐름 리액트는 기본적으로 단방향 데이터 흐름을 지닌다. 일반적으로 상위 컴포넌트에서 가진 데이터를 하위 컴포넌트로 props 객체를 통해서 전달하는데 이를 props drilling 이라고 한다. 하지만 함수를 통해서 하위 컴포넌트의 데이터를 상위 컴포넌트로 전달받아서 사용할 수도 있는데 상태 끌어올리기 state lifting 이라고 부른다. 예제 - 어떻게 전달되고 끌어 올려지는지 만 보면 된다. //App.js import NewExpense from '...

OOP - 객체지향 개념 정리 캡슐화 데이터와 데이터를 활용하는 함수를 캡슐 혹은 컨테이너 안에 두는 것을 의미하는데 이 경우 캡슐은 class를 의미한다. (함수와 데이터가 개념적으로 연관되어 있으면 캡슐화를 사용해서 코드를 개선할 수 있다.) 장점은 코드가 구조화되고 함수나 메서드가 인수를 취할 필요도 없다. (this키워드로 데이터에 직접 액세스 할 수 있기 때문) 캡슐화를 사용하여 표시할 클래스의 속성과 숨길 속성을 선택할 수 있다. 캡슐화는 어떻게 클래스 정보에 접근 혹은 수정하는지를 결정하는 권한을 제공한다. 캡슐화는 데이터 그리고 class 안에 있는 해당 데이터를 이용하는 함수를 잘 정리하는 방법론 상속 코드를 더 작은 단위로, class로 쪼개고 재사용할 수 있다. 클래스를 extends..

You are running `create-react-app` 5.0.0, which is behind the latest release (5.0.1) 얼마 전에 리액트로 프로젝트 완성 후에 웹의 이론적인 부분하고 타입스크립트 그리고 뷰를 조금 공부하느라 리액트를 안 쓰다가 오랜만에 강의를 보면서 시작하려는데 기본 세팅에서 에러가 발생했다. npx create-react-app my-app 입력후 아래 처럼 에러 메세지가 나왔고 내용은 더 이상 글로벌(전역) 설치를 지원하지 않으니 글로벌 설치를 제거하라는 거였다. You are running `create-react-app` 5.0.0, which is behind the latest release (5.0.1). We no longer support ..

typeScript (타입스크립트) 는 자바스크립트(javaScript)의 슈퍼셋으로 오픈소스 프로그래밍 언어이다. MS - 마이크로소프트에서 개발 유지 관리하며 동적인 자바스크립트를 정적으로 사용할 수 있게 해 준다. 자바스크립트 동적 타입 언어로써 다른 정적 언어 타입보다 유연하지만 그만큼 안정성이 보장받지 못한다. 자바스크립트에서 타입을 제어함으로써 좀더 안정성 있는 개발을 할 수 있게 도와준다. 시작하기 1. node.js 설치 - https://nodejs.org/ko/ 2. 설치후 에디터 터미널에 npm install -g typescript 입력 3. tsconfig.json 만들기 (작업할 폴더에) 4. tsc -w 터미널에 입력 (ts 파일을 실시간으로 js파일로 컴파일 시켜준다.) 5...