Web

JS는 어떻게 배열의 사이즈를 지정하지 않고 사용할 수 있을까?

JavaScript의 Array ObjectsECMAScript 2025 문서엔 다음과 같이 나와있습니다. ECMAScript® 2025 Language SpecificationThe first and subsequent editions of ECMAScript have provided, for certain operators, implicit numeric conversions that could lose precision or truncate. These legacy implicit conversions are maintained for backward compatibility, but not provided for BigItc39.es"Arrays are exotic objects that give..

build시 react-router Outlet이 동작하지 않고 흰화면만 뜨는 버그

(클릭해서 해결방법부터 보기)1. 개요React + Vite + TS 로 구성된 프로젝트를 진행하면서, 여느때와 같이 router를 설정하였다.browserRouter를 사용하였는데, 그 당시 설정한 router 파일은 다음과 같다.import ChildPage from '@pages/ChildPage'import DispatchPage from '@pages/DispatchPage'import DriveHistoryPage from '@pages/DriveHistoryPage'import Error404Page from '@pages/ErrorPage'import MainPage from '@pages/MainPage'import OperatePage from '@pages/OperatePage'imp..

CRA(Create React App) vs. Vite + React

CRA(Create React App) Getting Started | Create React App Create React App is an officially supported way to create single-page React create-react-app.dev Create React App은 단일 페이지 React 애플리케이션을 생성하기 위해 공식적으로 지원되는 방법이다. Webpack이나 Babel 같은 도구들을 설정하거나 설치할 필요가 없다. 코드에 집중할 수 있도록 이미 설정되어있고 숨겨져 있다. App 만들기 노드 14 이상의 버전이 필요하다. 새로운 app을 만들기 위해서는, 다음 방법중 하나를 골라서 하면 된다. npx npx create-react-app..

일급객체, 일급함수

1. 일급 객체란? 일급 객체란, 다음과 같은 조건을 만족하는 개체를 말한다. 변수나 데이터 구조 안에 담을 수 있다. 파라미터로 전달될 수 있다. 반환값으로 사용할 수 있다. 동적으로 프로퍼티 할당이 가능하다. 2. 일급 함수란? 일급 함수란, 일급 객체의 조건을 만족하는 함수를 의미한다. JS 에서는 함수가 일급 객체이다. 그 말은, JS에서는 다음과 같은 작업들이 가능하는 의미이다. 함수를 변수나 데이터 구조 안에 담을 수 있다. 함수는 파라미터로 전달될 수 있다. 함수는 반환값으로 사용할 수 있다. 사실 이렇게 글로 보면 이해가 잘 가지 않을 수도 있다. 하지만 JS를 사용해 코드를 짜본 사람이라면 어쩌면 이미 위의 개념들을 사용하고 있을 수도 있다. 각각의 예시를 보자. 1) 함수를 변수나 데이..

호이스팅(Hoisting)

1. 호이스팅이란? [ MDN - Hoisting ] 호이스팅 - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN 자바스크립트 호이스팅은 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(import)의 선언문을 해당 범위의 맨 위로 이동시키는 과정을 말합니다. developer.mozilla.org 위 MDN 사이트에 따르면 호이스팅은 "인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(import)의 선언문을 해당 범위의 맨 위로 이동시키는 과정" 이라고 한다. 위 정의를 읽고 "아 그냥 변수나 함수들을 맨 위에 갖다놓고 사용하는거구나~" 라고 생각하고 넘어갈 수도 있다. (나도 그랬다...) 하지만 '선언문' 이라는 키워드를 굳이 넣어야 했을까? 라는..

Bundler

번들러란? 한마디로 정리하자면, "의존성이 있는 모듈들을 하나로 합쳐주는 툴" 이라고 생각하면 될 것 같다. 우리는 JS 모듈을 사용하려면, HTML에서 태그로 우리가 작성한 JS 파일을 불러와야 했다. 한 JS 파일만 불러올 경우엔 상관없지만, 여러 JS 파일을 불러올경우엔 난감한 경우가 생길 수도 있다. 예를들어 A.js에서 작성한 A라는 모듈이 B.js에서 작성한 B라는 모듈과 관계가 있다고 해보자. (예를 들면 A에서 B를 참조한다던가 하는 상황) HTML 에선 이런 경우에 어떤 스크립트를 먼저 부르냐, 즉 어떤 스크립트를 부르는 태그를 먼저쓰냐에 따라 문제가 될 수도 있다. 서로 모듈들이 엮어있는 경우에 아직 선언이 되지않은 것을 참조한다거나 하면 예상치 못한 결과를 초래할 수 있기 때문이다. ..