milliwonkim의 블로그

참고 리액트는 프레임워크가 아닌 라이브러리이지만 쉽게 통합해 부르기 위해, 이하 프레임워크로 통합한다 생산성 저하: 프론트엔드 프레임워크는 기본적인 템플릿, 라우팅, 상태 관리 등을 제공하여 개발자들이 보다 쉽게 개발을 진행할 수 있습니다. 프레임워크를 사용하지 않을 경우 이러한 기능들을 직접 구현해야 하므로 생산성이 저하될 수 있습니다. 유지보수의 어려움: 프론트엔드 프레임워크는 일관된 코드 스타일과 구조를 제공하여 코드의 유지보수를 용이하게 합니다. 프레임워크를 사용하지 않을 경우에는 개발자마다 코드 스타일이나 구조가 다를 수 있어서 유지보수가 어려울 수 있습니다. // 리액트를 사용하지 않은 예제 function App() { const button = document.createElement('b..

전역 스코프에서 var로 선언하면 window에 자동으로 window의 프로퍼티로 등록됩니다. 왜냐하면 var로 선언된 변수가 함수스코프 뿐만 아니라, 전역 스코프에서도 유효합니다. 하지만 함수스코프안에서 var로 선언 및 할당을 하면 위와는 다르게 window 전역객체에 할당되지 않습니다. 왜냐하면 var는 함수스코프를 제공하기 때문에 여기서의 var는 해당 함수 스코프에서만 유효합니다.

create-react-app을 설치하면 React의 StrictMode가 있습니다. 이로 인해 콘솔을 보면 같은 콘솔이 2번씩 찍히게 됩니다. 그러면 컴포넌트가 2번 렌더링된다고 보일 수 있습니다. React.StrictMode를 사용하는 것 자체는 컴포넌트 재랜더링을 트리거하지 않습니다. React.StrictMode는 엄격 모드에서 컴포넌트를 실행시키기 때문에, 개발 중에 컴포넌트가 더 자주 재랜더링될 수 있습니다. 이는 엄격 모드가 추가적인 검사 및 경고를 도입하여, 더 많은 재랜더링이 트리거될 수 있기 때문입니다. 그러나 이러한 추가적인 재랜더링은 React.StrictMode 자체 때문이 아니라, 실행되는 검사 및 경고 때문입니다. React.StrictMode가 추가적인 재렌더링을 하지는 않..

const 키워드로 만든 리액트 컴포넌트는 각 컴포넌트마다 독립적인 인스턴스가 생성되므로, 해당 컴포넌트의 내부에서 window 객체를 사용하더라도 전역 스코프의 window 객체와는 별개로 새로운 window 객체가 생성됩니다. 여기서 독립적인 인스턴스라는 것을 어떻게 아냐? 로 할당하면 새로운 인스턴스를 생성합니다. Object.is()를 통해서 a와 b의 인스턴스가 서로 다른 독립적인 인스턴스라는 것을 말해줍니다. import React from "react"; const Example1 = () => { var count = 0; function handleClick() { count++; console.log(`Count is now ${count}`); } return ( Count: {cou..

let과 const 키워드로 선언된 변수는 전역 객체의 프로퍼티로 등록되지 않습니다. 따라서, 이들 변수는 window 객체에서 찾을 수 없습니다. 예를 들어, 다음과 같이 let 키워드로 선언된 변수 myVariable을 사용할 때 window.myVariable을 출력해보면 undefined이 반환됩니다. let myVariable = 42; console.log(window.myVariable); // undefined 마찬가지로, const 키워드로 선언된 변수 myConstant를 사용할 때도 window.myConstant를 출력하면 undefined이 반환됩니다. const myConstant = "Hello, world!"; console.log(window.myConstant); // u..

JavaScript에서 전역 범위에서 선언한 변수나 함수는 전역 객체의 프로퍼티로 등록됩니다. 브라우저 환경에서는 전역 객체로 window 객체를 사용하고, Node.js 환경에서는 global 객체를 사용합니다. 리액트에서 쓴다면 window 객체겠네요. 이 때, JavaScript에서는 호이스팅(hoisting)이라는 메커니즘이 있습니다. 호이스팅은 변수나 함수를 선언하기 전에 사용할 수 있다는 것을 의미합니다. 즉, 변수 선언 혹은 함수 선언은 위치에 상관없이 자동적으로 스코프의 최상위로 끌어올려지는 것입니다. 하지만 전역객체 window는 브라우저 환경에서 전역객체로 사용되고, 전역 변수와 함수를 window 객체의 프로퍼티로 사용할 수 있습니다. 즉 전역 스코프에서 선언한 변수와 함수는 자동으로..

데이터 타입 구분 데이터 타입 예시 원시 타입(Primitive Type) number - 10, 10.12, -20 - Infinity, -Infinity, NaN - 0b100001(2진수), 0o101(8진수) - 1 === 1.0 (숫자타입은 모두 실수로 처리) - 0o101 === 1 ("") string - 'String\n Number'(이스케이프 시퀀스 없이는 줄바꿈 불가) - `Template Literal Number` (이스케이프 없이 줄바꿈 등 허용) - `variable value is ${variables}` (Template Literal은 변수를 넣어서 사용 가능) boolean - true, false null - null - 변수에 값이 없음을 의도적으로 명시 - und..

문제 There is a robot on an m x n grid. The robot is initially located at the top-left corner (i.e., grid[0][0]). The robot tries to move to the bottom-right corner (i.e., grid[m - 1][n - 1]). The robot can only move either down or right at any point in time. Given the two integers m and n, return the number of possible unique paths that the robot can take to reach the bottom-right corner. The tes..

문제 You are climbing a staircase. It takes n steps to reach the top. Each time you can either climb 1 or 2 steps. In how many distinct ways can you climb to the top? Example 1: Input: n = 2 Output: 2 Explanation: There are two ways to climb to the top. 1. 1 step + 1 step 2. 2 steps Example 2: Input: n = 3 Output: 3 Explanation: There are three ways to climb to the top. 1. 1 step + 1 step + 1 step..

문제 You are given an integer array nums. You are initially positioned at the array's first index, and each element in the array represents your maximum jump length at that position. Return true if you can reach the last index, or false otherwise. Example 1: Input: nums = [2,3,1,1,4] Output: true Explanation: Jump 1 step from index 0 to 1, then 3 steps to the last index. Example 2: Input: nums = [..