브라우저 랜더링 브라우저 랜더링 과정은 웹 페이지를 표시하기 위해 브라우저가 수행하는 단계와 프로세스를 의미한다. HTML 파싱: 브라우저는 웹 페이지의 HTML 문서를 가져와서 파싱한다. 이 과정에서 HTML 문서의 구조를 이해하고 DOM(Document Object Model) 트리를 생성한다. DOM 트리는 웹 페이지의 요소(태그, 속성 등)와 그들의 관계를 표현한다. CSS 파싱 및 스타일 계산: 브라우저는 HTML 파싱 후에 CSS 스타일 시트를 가져와서 파싱한다. 각 요소에 대한 스타일 정보를 추출하고, 스타일 계산을 통해 각 요소의 최종 스타일을 결정한다. 이렇게 계산된 스타일은 렌더 트리(Render Tree)라는 새로운 트리 구조에 저장된다. 레이아웃(Layout): 브라우저는 렌더 트리..

프리티어 (Prettier) 프리티어는 코드 포맷팅 도구로, 코드 스타일, 들여쓰기, 줄바꿈 및 기타 서식을 자동으로 표준화해주는 역할을 한다 코드 포맷팅의 주요 목적은 코드의 일관성을 유지하고, 가독성을 향상시키며, 협업을 더 효율적으로 만들어준다. 프리티어는 주로 코드베이스에 적용되며, 코드를 저장하거나 커밋할 때 자동으로 코드를 정리한다. 프리티어 설정 예시 // .prettierrc 파일 { "singleQuote": true, // 작은따옴표(') 사용 "semi": true, // 세미콜론(;) 사용 "trailingComma": "all", // 후행 콤마 사용 (예: { a: 1, b: 2, }) "tabWidth": 2, // 탭 너비 "printWidth": 80 // 줄 바꿈 문자 수..

position position 속성은 요소의 위치를 조정하는데 사용되는 속성이다. 다음과 같은 속성들을 조합하고, 다른 속성들과 함께 사용하여 원하는 레이아웃과 위치를 구현할 수 있다. static 기본값으로, 요소를 문서의 일반적인 흐름에 따라 배치한다. top , right, bottom, left 등의 속성은 적용되지 않는다. relative 요소를 자기 자신을 기준으로 상대적으로 이동시킬 수 있다. 이동시키려는 경우 top , right, bottom, left 속성을 사용할 수 있다. 또 다른 요소들과 겹칠 수도 있다. absolute 가장 가까운 조상 요소 중 position 속성이 static이 아닌 경우를 기준으로 위치한다. 다른 요소들의 영향을 받지 않고 원하는 위치로 이동할 수 있다...

메모이제이션 (Memoization) 메모이제이션은 컴퓨터 프로그래밍에서 사용되는 기법 중 하나로, 이전에 계산한 결과를 저장하여 동일한 입력에 대한 함수 호출시 다시 계산하지 않고 저장된 결과를 반환하는 것이다. 주로 계산비용이 큰 함수의 성능을 개선하기 위해 사용되며, 해시테이블 또는 캐시라는 데이터 구조를 사용하여 구현한다. 함수의 입력값을 해시화하여 해당 값과 연결된 값을 저장하고, 다음에 동일한 입력 값으로 함수가 호출되면 캐시에서 결과 값을 찾아 반환한다. 재귀함수 예시코드 function factorial(n) { if (n === 0 || n === 1) { return 1; } else { return n * factorial(n - 1); } } // 메모화된 팩토리얼 함수 const ..

토큰 (Token) 이란? 토큰은 정보를 나타내는 작은 조각으로, 보통 문자열 형태로 표현된다. 컴퓨터 시스템에서 토큰은 인증, 권한부여, 데이터 교환등 다양한 컨텍스트에서 활용된다. 토큰기반 인증방식 (Token-Based Authentication) 사용자 인증을 위해 사용되는 방식중 하나로, 인증상태를 서버에서 관리하는 대신, 토큰이라는 정보조각을 사용하여 인증을 처리한다. 토큰은 일반적으로 JSON Web Token (JWT)포맷을 따르며, 클라이언트와 서버간 통신에서 사용된다. 토큰기반 인증방식 작동방식 로그인 (Login): 사용자가 애플리케이션에 로그인을 시도한다. 이때 사용자가 제공한 신원 정보(일반적으로는 아이디와 비밀번호)를 서버에 제출한다. 인증 (Authentication): 서버는..

React 라이프 사이클 리액트는 컴포넌트단위로 생성되는데, 이 컴포넌트들은 생명주기를 갖고있다. 생성부터 시작하여 업데이트, 소멸 되는 과정을 라이프사이클 이라고 한다. 리액트 v16.3 이전에는 클래스 컴포넌트의 라이프사이클이 메서드로 주로 다뤄졌지만, v16.3 이후부터는 함수 컴포넌트에서도 라이프사이클에 대한 기능이 Hooks를 통해 도입되었다. 함수 컴포넌트 함수형 컴포넌트는 리액트의 함수 컴포넌트 기능과 Hooks를 활용하여 UI를 구성하는 방식이다. 함수컴포넌트 예시코드 import React, { useState } from 'react'; function FunctionalComponent() { const [count, setCount] = useState(0); return ( Cou..

클로저 함수와 그 외부를 둘러싸고 있는 렉시컬환경의 조합으로, 클로저가 자신의 렉시컬환경 외부에서 선언된 변수에, 접근할 수 있는 메커니즘을 제공한다. 클로저 사용하는 이유 클로저는 내부 정보를 은닉하고, 공개 함수(public, 외부)를 통한 데이터 조작을 위해 쓰인다. 캡슐화와 정보은닉을 위해 쓰인다. 클래스 private 필드 또는 메소드를 사용하는 효과와 동일하다. 클로저 예제 function outer() { const outerVar = "I'm from outer"; function inner() { console.log(outerVar); // 내부 함수에서 외부 함수의 변수에 접근 } return inner; } const closureFunc = outer(); // outer 함수 실..

엄격모드 StrictMode ECMAScript5 (ES5)에서 도입된 "StrictMode" 또는 "엄격모드"는 자바스크립트의 실행 컨텍스트 내에서 코드를 더 엄격하게 처리하는 방식을 의미한다. 엄격모드를 사용하면 더 많은 에러를 발견하고 예방하며, 작은 동작 차이를 제어할 수 있다. 엄격모드를 활성화 하려면 엄격모드를 활성화하려면 스크립트의 최상단이나 함수 내의 첫 줄에 "use stricet"; 문을 추가하면 된다. 반드시. 최상단에 있어야 엄격모드가 활성화 된다. React에서 사용한 나는 이런식으로 작성하였다. import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; // 엄격 모드 활성화 React..

자료형 (Data Types) https://ko.javascript.info/types 자료형 ko.javascript.info 숫자형 BigInt 문자형 불린형 null undefined → 값이 할당되지 않은 상 객체와 심볼 typeof 연산자 문자형 큰 따옴표나 작은따옴표는 차이가 없지만 백틱 ` 에는 다른의미가 있다. 백틱 사이에 ${ } 를 이용해 변수나 표현식을 넣어주면 문자열 중간에 표현이 가능하다는 점이다. alert( "the result is ${1 + 2}" ); alert( `Hello, ${name}!` ); 등과 같이 사용할 수 있지만 첫째 줄 처럼 큰따옴표는 인식되지 않는다. 무조건 ${} 식의 형태를 사용하기 위해선 백틱을 사용해야 한다. Typeof 연산자 첨부한 사이트의..

var와 let,const 환경차이 var - object 환경 let & const - declarative 선언환경을 가지기때문에 결과값이 달라진다. Object 환경 특징 - 함수 스코프 : 'var'로 선언된 변수는 해당 함수의 스코프 내에서만 유효하다. 함수 외부에서 접근할 수없다. - 호이스팅 : 'var'로 선언된 변수는 해당 스코프 내에서 최상위로 끌어올려지는 현상(호이스팅)을 가진다. 즉 변수 선언이 해당 스코프의 최상단으로 옮겨지기 때문에 변수 선언 이전에도 변수를 참조할 수 있다. 렉시컬환경 내 메모리환경에 호이스팅으로 끌어올려지면 var는 undefined로 할당된다. var가 할당 되기전이기때문에 undefined 출력된다. 반면에 let 과 const도 똑같이 호이스팅되지만 동작..