Nuri-KSLV-II

📌 자바스크립트 원시값과 참조값 원시값 참조값 특징 데이터 복사가 일어날 때 메모리 공간을 새로 확보하여 독립적인 값을 저장 메모리에 직접 접근이 아닌 메모리의 위치(주소)에 대한 간접적인 참조를 통해 메모리에 접근 mutability immutable mutable 예시 string number bigint boolean undefined symbol 그 외(array, object, function..) 📌 예시 - myArray의 데이처 자체는 별도의 메모리 공간(Heap)에 저장되며, 변수에 할당 시 데이터에 대한 주소(힙 메모리 주소 값)이 저장되기 때문에 자바스크립트 엔진이 변수가 가지고있는 메모리 주소를 이용해서 변수의 값에 접근 - 변수의 복사나 수정 시 참조 여부를 잘 고려해야함 📌 얕은..

📌가상돔의 개념 - 공식문서 정의 The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation. 가상으로 UI를 버츄얼돔에 저장해두었다고 Real Dom과 연동(sync) 시켜주는 프로그래밍 컨셉 일명 reconciliation(화해) 과정이라 정의 📌Diffing 알고리즘 - 리액트는 Real Dom과 Virtual Dom을 참고하면서 diffing 알고리즘을 이용해 변화가 일..

var let const 선언과 초기화 선언 + 초기화 동시 진행 선언, 초기화 분리 진행 선언, 초기화 분리 진행 스코프 함수스코프 블록스코프 블록스코프 재선언 가능 불가 불가 재할당 가능 가능 불가 호이스팅 호이스팅됨 TDZ TDZ 참고 https://www.zerocho.com/category/ECMAScript/post/5757d74345041aaae7493479 https://www.zerocho.com/category/ECMAScript/post/5757d74345041aaae7493479 www.zerocho.com

함수형 컴포넌트 클래스형 컴포넌트 선언방식 1. state, lifeCycle 관련 기능 사용 불가(v16.8부터 Hook으로 해결) 2. 클래스형보다 메모리 자원을 덜 사용 3. 컴포넌트 선언이 편함 1. class 키워드 필요 2. render() 메소드 반드시 필요 3. Component로 상속을 받야함 4. state, lifeCycle 관련 기능 사용 가능 state 1. useState 함수로 state를 사용 2. useState 함수를 호출하면 배열이 반환되는데 첫번째 원소는 현재 상태, 두번째 원소는 상태를 바꿔주는 함수 1. constructor 안에서 this.state 초기 값 설정 가능 2. this.setState()를 통해 state값을 변경 props 1. props를 불러올..

📌 상황정리 1. 역할 선택 화면에서 사용자가 역할을 선택한다 2. 선택한 역할 정보를 서버로 보내면, 서버가 랜덤 매칭 공식에 맞춰서 매칭 정보를 반환한다 3. 매칭 정보를 이용해 미팅 서비스에 입장한다 📌 해결과정 1. 매칭 대기실로 이동하는 함수를 정의 1-1. 매칭 대기실로 이동하는 함수를 소개팅 시작하기 버튼에 걸어줌 1-2. 참고로 역할 코드를 중앙관리소에 저장하는 방식은 아래와 같이 정의되어 있음 2. 매칭 대기실에 입장하면 바로 매칭 정보 받아오는 matchStart 함수 실행 2-1. class형 함수에서 중앙관리소에 있는 state를 사용하는 방법, 슬라이스의 액션함수를 사용하는 방법은 구글링을 통해 찾았음 3. matchStart함수는 아래와 같이 동작함 3-1. history를 사용..

📌 브라우저의 공통적인 구조 - User Interface : 주소 표시줄, 이전/다음/새로고침 버튼 등 웹페이지를 제외하고 사용자와 상호작용 하는 사용자 인터페이스 - Broswer Engine : 유저 인터페이스와 렌더링 엔진을 연결하는 브라우저 엔진 - Rendering Engine : HTML과 CSS를 파싱하여 요청할 웹 페이지를 표시하는 렌더링 엔진 - Networking : 네트워크 요청을 수행 - Javascript Interpreter : 자바스크립트 코드를 실행하는 인터프린터(ex. 크롬에서 V8) - UI Bacend : 체크박스나 버튼과 같은 기본적인 위젯을 그려주는 UI Backend - Data Persistance : 로컬스토리지나 쿠키와 같이 보조 기억장치에 데이터를 저장하는..

📌 프로세스와 스레드 프로세스 : 프로그램을 메모리 상에서 실행중인 작업, 각각 별도의 주소공간 할당(독립적) 스레드 : 프로세스 안에서 실행되는 여러 흐름 단위, stack만 따로 할당 받고 나머지 영역은 공유 - 하나의 프로세스가 생성될 때, 기본적으로 하나의 스레드 같이 생성됨(Main Thread) ✔ 프로세스의 구조 Code : 코드 자체를 구성하는 메모리 영역(프로그램 명령) Data : 전역변수, 정적변수, 배열 등 Stack : 지역변수, 매개변수, 복귀 주소와 로컬 변수와 같은 임시 자료, 리턴 값(임시 메모리 영역) Heap : 프로세스 실행 중에 동적으로 할당되는 메모리 ✔ 프로세스 제어 블록(Process Control Block, PCB) 개념 - 특정 프로세스에 대한 중요한 정보..

블로킹/논블로킹 - 블로킹/논블로킹은 호출된 함수가 호출한 함수에게 제어권을 건네주느냐 아니냐의 차이다 - 함수 A,B가 있고, A안에서 B를 호출했다고 가정(제어권은 B가 있음) Blocking : 제어권을 넘겨주지 않아서, 호출한 A는 B가 끝날 때까지 기다려야함 Non-blocking : 함수 B가 할 일을 마치지 않았어도 A에게 제어권을 바로 넘김, A는 B를 기다리며 다른 일 가능 동기/비동기 - 동기/비동기는 일을 수행 중인 동시성이 중요 - 위와 같이 가정 시, 함수 A와 B가 있을때, B의 수행 결과나 종료상태를 A가 신경쓰고 있느냐 아니냐의 차이 - 비동기는 callback이 오기 전까지 호출한 함수는 신경쓰지 않고 다른 일 가능 동기, Synchronous : 함수 A는 함수 B가 일을..

동기 처리와 비동기 처리 - 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 가짐 - 자바스크립트 엔진은 한번에 하나의 태스크만 실행할 수 있는 싱글 스레드 방식으로 동작함 - 한 번에 하나의 태스크만 실행할 수 있기 때문에, 처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹(Blocking, 작업중단)이 발생 예시 - 동기 처리 //sleep 함수로 setTimeout 함수를 구현해보자 //sleep 함수는 일정시간(delay)가 경과한 후 콜백 함수(func)를 호출 function sleep(func, delay) { const delayUntil = Date.now() + delay; while (Date.now() < delayUntil); func() } function foo() { c..

콜백함수 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수(다시, 전화) 예시 //외부에서 전달받은 f를 n만큼 반복 호출 function repeat(n,f) { for (var i = 0; i