프론트엔드

function add (num1, num2) { console.log(num1 + num2);}add(); // NaNadd(1); // NaNadd(1,2); // 3add(3,4,5); // 7add('hello','world'); // 'helloworld'function showItems(arr) { arr.forEach((item) => { console.log(item); });}showItems([arr]);showItems(1,2,3); // TypeError: arr.forEach is not a function위와 같이 자바스크립트는 우리가 원하는 결과가 아님에도 어떠한 경고도 주지 않았고 실수가 분명한 코드임에도 에러를 일으키지 않는다.💡 자바스크립트는 동적언어이다.→..

값(value)💡 값은 식(표현식)이 평가되어 생성된 결과를 말한다.*평가(evaluate) : 식을 해석해서 값을 생성하거나 참조하는 것// '10 + 20;'이라는 표현식은 평가되어 30이라는 숫자 값을 생성10 + 20; // 30모든 값은 데이터 타입을 가지며, 메모리에 2진수(비트의 나열)로 저장된다.메모리에 저장된 값은 데이터 타입에 따라 다르게 해석될 수 있다.예를 들어, 0100 0001은 숫자로 해석하면 65이지만, 문자로 해석하면 'A'이다.// 변수에는 10 + 20;의 표현식이 아닌 평가된 값 30이 할당된다.var sum = 10 + 20;변수에 할당되기 이전에 표현식은 평가되어 값을 생성해야 한다. 리터럴(literal)💡 리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기..

스플리팅 등장 배경리액트 애플리케이션의 경우 빌드를 통해서 배포를 한다. 이 과정에서 파일 크기를 가능하면 최소화 하는 것이 좋다.왜냐하면 파일 크기가 성능을 결정하고 결과적으로 사용자 경험(UX)에까지 영향을 미치기 때문이다.또한, 브라우저에서 JSX나 최신 자바스크립트 문법 등이 문제없이 잘 실행될 수 있도록 트랜스파일링하는 작업도 필요하다.일반적으로 이러한 작업은 빌드 도구인 Webpack, Parcel, Vite 등이 담당한다.Webpack, Parcel과 같은 경우에는 모든 자바스크립트 파일을 하나의 파일로 합치고, CSS 역시 하나의 파일로 합친다.하나의 파일로 모든 자바스크립트의 파일로 묶어서 빌드하면 파일의 크기가 매우 크고, 일부만 수정해도 다시 모든 자바스크립트 코드들을 새로 빌드해야 ..

▶ES Module이란?ES Module은 ES6부터 도입된 모듈 시스템export 및 import문을 사용해 분리되어 있는 자바스크립트 파일 간의 접근을 가능하게 만들어줌▶ ES Module 등장배경1. 기존의 웹은 자바스크립트 비중이 크지 않았기 때문에 큰 스크립트가 필요하지 않았다.2. 웹의 발전에 따라 점점 자바스크립트의 중요도가 커지고, 여러 개의 스크립트 파일을 쓰면서 상호작용을 해야 했다.3. 이를 처리하기 위해 jQuery등으로 해결(각각의 script 파일을 전역 스코프처럼 사용)했지만 여러 문제점이 발생했다.script 파일들을 올바른 순서대로 정렬해야 하기 때문에 순서가 뒤틀리면 에러를 발생시킴하위에 있는 script가 상위 script의 상태를 쉽게 변경시키는 '전역 오염'이 발생하..

변수랑 무엇인가? 왜 필요한가?변수(Variable) : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름var result = 10 + 20;10 + 20이라는 연산을 할 때 컴퓨터는 10과 20을 각각 메모리 임의의 위치에 저장하고, 연산된 결과인 30을 임의의 위치에 저장한다.연산된 결과인 30이 저장된 메모리에 직접 접근해서 사용할 수 없기 때문에, 변수인 'result'를 통해 메모리 주소값을 참조해 값을 읽어들여 사용할 수 있다.변수명 : 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름변수값 : 변수에 저장된 값할당(대입, 저장) : 변수에 값을 저장하는것참조 : 변수에 저장된 값을 읽어 들이는 것자바스크립트 엔진은 변수 이름과 매핑된 ..

1. Vite를 사용해야 하는 이유브라우저에서 ESM(ES Modules)을 지원하기 전까지, JavaScript 모듈화를 네이티브 레벨에서 진행할 수 없었다.그래서 소스 모듈을 브라우저에서 실행할 수 있는 파일로 크롤링, 처리 및 연결하는 "번들링(Bundling)" 이라는 방법을 사용해야 했다.하지만 처리해야하는 JavaScript 모듈의 개수가 증가하면서 성능 병목 현상이나 서버를 가동하는데 오랜 시간을 기다려야 하는 등 문제가 발생했다.vite는 애플리케이션 모듈을 dependencies와 source code 두 가지 카테고리로 나누어 개선했다. Dependencies개발 시 그 내용이 바뀌지 않을 일반적인 JavaScript 소스 코드이다.보통 애플리케이션에서 사용하는 라이브러리나 패키지를 의..

프로젝트를 진행하면서 계속 변경할 예정 프로젝트 생성(Vite)npm create vite@latest를 실행(Vite 사용하기 위해서는 node.js 설치 필요)프로젝트 이름 설정프레임워크 설정(Vanilla, Vue, React 등)variant 설정(Typescript를 선택할 것인지)cd 프로젝트 이름npm installnpm run dev위와 같이 진행하면 http://localhost:5173/ 주소로 React에 Vite 빌드 도구를 활용한 페이지를 확인할 수 있다. 궁금증이전에는 CRA(create-react-app)을 통해 프로젝트를 생성했었는데, Vite를 사용하는 이유는 뭘까?CRA는 JavaScript로 구성된 Webpack(웹팩)을 사용하는데 속도가 느린 편이다. 코드의 양이 많아..