자바스크립트는 싱글 스레드 기반 언어이다. Non-blocking 방식의 비동기적인 동시성 언어이며 콜 스택, 이벤트 루프와 콜백 큐, 그리고 여러가지 다른 API들을 가지고 있다. 자바스크립트 엔진인 V8은 콜 스택과 힙을 가지고 있다. 힙은 메모리가 할당되는 부분 콜 스택은 함수가 호출될 때, execution context가 쌓이는 영역 콜 스택(Call Stack) 그림을 보면, 자바스크립트 엔진인 V8이 가지고 있는 힙과 콜 스택이 있고, 웹 브라우저에서 제공하는 Web API가 DOM, Ajax, setTimeout 등을 제공하는 것을 알 수 있다. 하단에는 event loop와 콜백 큐가 있는 것을 확인할 수 있다. 하나의 스레드 = 하나의 콜 스택 = 한 번의 한 작업 자바스크립트는 Sin..

Prototype은 뭘까? 오늘은 prototype에 대해서 공부해봅시다! Prototype에 대해서 공부하기 전에 JavaScript에서 class에 대한 내용을 잠시 설명하고 가겠습니다. 아래의 코드를 보시면 기계라는 것을 통해서 object를 마음껏 찍어낼 수 있습니다. 비슷한 object를 쉽게 만들고 싶을 때, 아래와 같은 문법을 사용할 수 있습니다. // object 복사 기계(부모) function 기계() { // 복사된 object가 기본으로 가질 속성 this.q = 'strike'; this.w = 'snowball'; } // object 생성(자식) var nunu = new 기계(); console.log(nunu); // { q: "strike", w: "snowball" } ..

var 키워드로 선언한 변수의 문제점 변수 중복 선언 허용 var 키워드로 선언한 변수는 중복 선언이 가능하다. var x = 1; var y = 1; // var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용한다. // 초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작한다. var x = 100; // 초기화문이 없는 변수 선언문은 무시된다. var y; console.log(x) // 100 console.log(y) // 1 의도치 않게 먼저 선언된 변수 값이 변경되는 부작용이 발생할 수 있다. 함수 레벨 스코프 var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정한다. 따라서, 함수 외부에서 var 키워드로 선언한 변수..

전역 변수의 무분별한 사용은 위험하다. 전역 변수를 반드시 사용해야 할 이유를 찾지 못한다면 지역 변수를 사용해야 한다. 목표: 전역 변수의 문제점, 전역 변수 사용 억제 방법 변수의 생명 주기 지역 변수의 생명 주기 변수: 선언(생성) -> 초기화 -> 소멸 = 생명 주기(Life Cycle) 이처럼 변수도 생명 주기가 존재한다. 변수에 생명 주기가 없다면 한번 선언된 변수는 프로그램을 종료하지 않는 한 영원히 메모리 공간을 점유하게 된다. // 변수 x의 생명 주기 시작 function foo() { var x = 'local'; // 변수 x 생성 및 값 할당 console.log(x); // local return x; // 변수 x 소멸 } // 변수 x의 생명 주기 끝 foo(); consol..

오늘은 블로킹과 논블로킹 그리고 동기와 비동기에 대해서 배워봅시다! 그리고 이들이 서로 어떻게 연관되어 있는지 알아봅시다! 블로킹과 논블로킹, 동기와 비동기에 대해서 공부하기 전에 먼저 알아야 하는 개념이 있습니다. 제어권 함수의 코드를 실행할 권리. 제어권을 가진 함수는 자신의 코드를 끝까지 실행한 후, 자신을 호출한 함수에게 돌려줍니다. 리턴값을 기다리는 것 A 함수에서 B 함수를 호출했을 때, A 함수가 B 함수의 리턴값을 기다리느냐의 여부를 의미합니다. 콜백 함수 비동기 작업이 끝난 후에 실행되며, 해당 작업의 결과를 전달받아 필요한 처리를 수행하는 함수입니다. 블로킹(Blocking) 블로킹은 특정 작업이 완료될 때까지 다른 작업들이 기다려야 하는 상태를 의미합니다. 블로킹 작업은 해당 작업이 ..

https://stackoverflow.com/questions/36182635/making-a-flex-item-float-right" target="_blank" rel="noopener" data-mce-href="http:// https://stackoverflow.com/questions/36182635/making-a-flex-item-float-right">http:// https://stackoverflow.com/questions/36182635/making-a-flex-item-float-right  Ignore parent? another child The parent has .parent {..." data-og-host="stackoverflow.com" data-og-s..

오늘은 trello-clone을 하던 중 발생한 에러에 대해서 알아보려고 합니다! 제가 예전에 작업한 프로젝트인 trello-clone입니다. To do list에서 수정 버튼을 추가해줬고, 문자열이 특정 길이가 되면 수정버튼이 아래로 이탈하는 경우가 있었습니다. 위와 같이 이탈하는 경우였습니다. 해결 방법은 간단했습니다. html을 작성할 때, 오른쪽 영역의 코드와 가운데 영역의 코드의 순서를 바꿔주면 해결이 되었습니다. 참고 https://windcjg.blogspot.com/2022/09/align-center.html

오늘은 웹어셈블리에 대한 내용을 다뤄보려고 합니다. 아마 처음 들으시는 분들도 있을 거라고 생각합니다. 저도 얼마전에 지인을 통해서 알게된 개념이고 정리하고 싶어서 글을 작성하게 되었습니다. 웹어셈블리란? WebAssembly는 최신 웹 브라우저에서 실행할 수 있는 새로운 유형의 코드이며 새로운 기능과 성능에서 큰 이점을 제공합니다. 직접 코드를 작성하는 것이 아니라 C, C++, RUST 등의 저급 소스 언어를 효과적으로 컴파일 하도록 고안되었습니다. 이는 웹 플랫폼에 큰 영향을 미칩니다. 이전에 불가능했던 웹에서 실행되는 클라이언트 응용 프로그램을 사용하여 웹에서 여러 언어로 작성된 코드를 네이티브에 가까운 속도로 실행하는 길을 제공합니다. 게다가 웹어셈블리 코드를 사용하여 이를 활용하는 방법을 알 ..

Client Component파일 최상단(중간x)에 **‘use client’**라 적으면 그 아래 생성한 컴포넌트는 모두 client 컴포넌트이다.HTML에 Javascript 기능넣기가 가능하다.useState, useEffect 등 사용 가능Server Component아무 곳에서 만든 component는 모두 server 컴포넌트가 될 수 있다.HTML에 Javascript 기능넣기가 불가능하다.ex) onClick={}useState, useEffect 등 사용할 수 없음.그럼 그냥 Client Component가 좋은거 아닌가?기능적 제한이 server component에 비해 없어서 개발하기는 편하다.Page 로딩 속도 느리다.Javascript가 많이 필요하기 때문이다.Hydration이 ..