FE

[JavaScript] 실행 컨텍스트(execution context)

들어가기 전실행 컨텍스트는 자바스크립트의 동작 원리를 담고 있는 핵심 원리이다.따라서 실행컨텍스트는 아래 개념들의 동작원리를 담고있다.- 자바스크립트가 스코프를 기반으로 식별자와 식별자에 바인딩된 값을 관리하는 방식- 호이스팅이 발생하는 이유- 클로저의 동작 방식- 태스큐 큐와 함께 동작하는 이벤트 핸들러와 비동기 처리의 동작 방식실행 컨텍스트란?실행 컨텍스트는 소스코드를 실행하는 데 필요한 환경 정보를 모아놓은 객체이다.  즉, 실행 컨텍스트는 변수, 함수, 클래스 등의 이름인 식별자를 등록하고 관리하는 스코프라는 환경 정보를 구성하고, 컨텍스트를 콜 스택에 쌓아올려 가장 위에 있는 컨텍스트를 실행하여 코드의 실행순서를 보장한다.실행 컨텍스트가 생성되는 시점자바스크립트 엔진이 스크립트를 처음 실행할 때..

[JavaScript] 변수의 재할당 과정

변수에는 메모리의 주소가 저장되어 있다. 그러니까, 특정 값이 저장되어 있는 것이 아닌, 특정값이 저장되어 있는 메모리의 주소를 가지고 있는 것이다. 변수에 값이 재할당될때 해당 값이 스택에 존재하면 그 스택 주소로 할당된다는 내용을 본 것 같은데, 값이 같더라도 다른 메모리 주소에 값이 저장되는 줄 알았는데 그게 아니어서 좀 더 정확하게 공부해서 정리해보려고 한다.변수의 종류에 따라 저장되는 위치가 다르다.메모리는 4개의 영역이 있고, 전역변수, 지역변수, 코드, 동적할 할당에 따라 저장되는 위치가 다르다.자바스크립트 엔진은 힙영역과 콜스택을 사용한다.콜스택원시 타입 데이터가 저장된다.변수에 저장되는 것 : 콜스택의 주소 메모리 힙(heap 영역)참조 타입 데이터가 저장된다. (배열, 객체, 함수 등)..

[Next.js] 프로젝트 생성

Next.js는 서버사이드렌더링을 지원해주는 프레임워크이다.서버사이드 렌더링의 장점은 아래 포스팅에 정리해놓았다. SSR의 경험을 쌓고 싶어서 Next.js를 사용해보려고 한다.2024.05.30 - [Front-end/React] - [React] 모던 리액트 딥다이브 4. 서버 사이드 렌더링 주요 정리 [React] 모던 리액트 딥다이브 4. 서버 사이드 렌더링 주요 정리1. 싱글 페이지 애플리케이션이란?싱글 페이지 애플리케이션의 약자인 SPA는 렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식을 의미한다. SPAworld-developer.tistory.com프로젝트 생성하기npx create-next-app@latest 만약 typescript를 사용하고..

[React] 모던 리액트 딥다이브 4. 서버 사이드 렌더링 주요 정리

1. 싱글 페이지 애플리케이션이란?싱글 페이지 애플리케이션의 약자인 SPA는 렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식을 의미한다. SPA는 말 그대로 하나의 페이지로 구현되며 새로운 페이지를 받아오지 않는다. 최초에 첫 페이지에서 데이터를 모두 불러온 이후에 페이지 전환 단계에서는 자바스크립트와 브러우저의 history.pushState와 history.replaceState로 이뤄지기 때문에 서버에서 HTML을 내려받지 않고 하나의 페이지에서 모든 작업을 처리한다. SPA는 최초 첫 페이지를 받을 때는 SSR을 사용할 수 있으며 이후에는 CSR을 이용하여 렌더링을 진행해야 한다. 1.1 SPA에서 페이지 전환이 일어나는 과정을 설명하시오페이지 전환 시..

[React] SPA, CSR은 같을까 다를까

답부터 이야기 하자면 SPA, CSR은 같지 않다. 애초에 비교 대상이 아니다. CSR(Client Side Rendering)사용자가 웹 브라우저에 주소를 입력하면 데이터가 없는 빈 HTML만 받아오고, 데이터는 여러 static 파일들이 로드된 이후에 요청해서 받아오는 방식으로 진행됨SSR(Server Side Rendering)CSR과 반대로 데이터까지 모두 삽입하여 완성된 HTML을 받아오는 방식으로 진행됨SPA(Single Page Application)서버로부터 첫 페이지만 받아오고 이후에는 동적으로 페이지를 구성하여 새로운 페이지를 받아오지 않는 웹 어플리케이션을 말함데이터를 수정하거나 조회할 때 페이지가 새로고침 되지 않고 다른 페이지로 넘어가지 않음MPA(Multiple Page Appl..

[JavaScript] 자바스크립트 문자열 반복 메소드 repeat()

✔️ repeat() 요약특정 문자열을 원하는만큼 반복한 문자열을 얻고싶을 때 사용.✔️ repeat() 기본형string.repeat(count);string : 문자열이 저장된 string 변수count : 반복할 횟수✔️ repeat() 사용법str = 'abc';console.log(str.repeat(3)); // abcabcabc 출력

[JavaScript] 자바스크립트 최대/최소 정수값 MAX_SAFE_INTEGER/MIN_SAFE_INTEGER

✔️ Number.MAX_SAFE_INTEGER() / Number.MIN_SAFE_INTEGER() 요약Number.MAX_SAFE_INTEGER() : 자바스크립트에서 안전한 최대 정수 값Number.MIN_SAFE_INTEGER() : 자바스크립트에서 안전한 최소 정수 값✔️ Number.MAX_SAFE_INTEGER() / Number.MIN_SAFE_INTEGER() 사용법// 최댓값 설정const max = Number.MAX_SAFE_INTEGER;// 최솟값 설정const min = Number.MIN_SAFE_INTEGER;

[JavaScript] 자바스크립트 정수인지 확인하는 Number.isInteger() 메소드

✔️ Number.isInteger() 요약인수가 정수인지 아닌지 판단하여 정수이면 true를, 정수가 아니면 false를 반환하는 메소드✔️ Number.isInteger() 기본형Number.isInteger(value);Value : 정수인지 확인하려는 값반환값 : 주어진 값의 정수 여부를 나타내는 Boolean값✔️ Number.isInteger() 사용법Number.isInteger(0); // trueNumber.isInteger(-100); // trueNumber.isInteger(0.25); // falseNumber.isInteger("문자열"); // falseNumber.isInteger(true); // falseNumber.isInteger(Infinity); // false

[JavaScript] 자바스크립트 대소문자 변경하기 toUpperCase(), toLowerCase()

✔️ toUpperCase(), toLowerCase() 요약영어로 이루어진 문자열에서 대문자를 소문자로, 소문자를 대문자로 바꾸고 싶을 때 사용함.✔️ toUpperCase(), toLowerCase() 사용법const str = "AbCdE";// 소문자를 대문자로 바꿀 때const upperStr = str.toUpperCase(); // "ABCDE"// 대문자를 소문자로 바꿀 때const lowerStr = str.toLowerCase(); // "abcde"