개발하는 녹차

최근 프로젝트를 진행하면서, '번들러'라는 개념이 나와 이 김에 관련된 Module에 대해 공부하려고 해당 블로그 글을 작성하였다. 기존에 이런 모듈에 대한 개념을 제대로 모르고 프론트엔드 개발을 진행한 내 자신이 조금은 부끄럽지만, 지금이라도 완벽하게 이해하고 넘어가보려 한다.자바스크립트의 모듈 시스템초기의 자바스크립트 프로그램은 규모 자체가 크지 않아, 대부분의 스크립트들이 독립적으로 수행되었다. 하지만, 현재 사용되는 것들을 보면 규모가 말도 안 되게 커졌다. 시간이 지남에 따라 어플리케이션 규모가 커지고 스크립트 파일이 나눠지면서 원하는 것만 갖고 올 수 있는 모듈 분할이 필요하게 되었다. 이렇게 모듈 시스템이 나타나게 되었다.모듈 시스템이란 플러그인 파일이나 잘게 쪼개져있는 JS 코드 조각들을 ..

1. 자바스크립트 함수 정의 방식함수 선언식함수 표현식Function 생성자 함수화살표 함수(ES6)// 함수 선언식function func(x,y){ return x+y;}// 함수 표현식const func = function(x,y){ return x + y;}// Function 생성자 함수const func = new Function('x','y', 'return x+y');// 화살표 함수(ES6)const func = (x,y) => x+y;2. 함수 선언식과 표현식의 차이Hoisting(호이스팅)호이스팅은 유효범위 (전역 변수라면 최상단, 지역 변수라면 변수가 선언된 영역의 최상단) 안에서 최상단으로 끌어올려진다. 하지만, 실제로 코드의 선두로 끌어올려진 것은 아니고 코드의 선두로 끌어올..

지난 번에 이어서 NPM에 내가 만든 라이브러리를 배포하는 방법에 대해 알아보는 시간을 갖겠습니다. 이번에는 Storybook을 이용해서 자신이 만들 컴포넌트를 미리 확인할 수 있도록 해보겠습니다. 스토리북 설치npx storybook@latest init위의 명령어를 입력하고 설치가 완료되면 .storybook 폴더가 생기고 하위에 main.ts와 preview.ts 파일이 생성된다..storybook/main.ts를 보면, stories 필드가 있는데, story 파일을 읽을 수 있는 경로를 명시하고 있다. Button 스토리 작성예시로, src/stories/button.stories.ts를 아래와 같이 작성하고 npm run storybook을 실행하면 구현한 컴포넌트를 미리 확인할 수 있다.im..

보일러플레이트란?코딩을 할 때 불필요한 작업 때문에 생산성이 떨어지는 경우가 종종 있다. 이런 경우들을 대비하여 보일러 플레이트로 기본적인 프로젝트 골격을 미리 만들어서 업그레이드 하는 방식이다. 불필요한 코드를 제거하고, 업무 효율성 및 생산성을 높일 수 있는 방법이다. 개발자에게 보일러 플레이트란?코딩에서 보일러 플레이트는 개발자에게 꼭 필요한 요소 중 하나이다. 직접 타이핑하거나 반복되는 작업들은 자동화시켜 효율적으로 처리하고 필요한 작업만을 할 수 있도록 도와주는 것이 보일러 플레이트이다. 가장 대표적인 예로는 create-react-app(CRA)을 활용하면 미리 갖춰진 골격을 주고 개발자는 거기서 원하는 서비스에 맞춰서 개발을 진행할 수 있다. 보일러 플레이트 정리- 반복적으로 사용되는 부분을..

산술 연산자타입스크립트는 자바스크립트와 동일한 산술 연산자를 지원한다. 산술 연산자의 종류로는 사칙연산과 나머지를 구하는 %, 그리고 지수 연산자 **가 있다. 단, 지수 연산은 ES7의 문법이기에 이전 버전으로 컴파일 하게 되면 MATH.pow() 메소드로 변환된다. 자바스크립트의 산술 연산의 특징으로는 암묵적 타입 변환을 통한 산술 연산이 있다.1 + "people";true + 2;"2" + ture;10 / "5"; 위와 같은 서로 다른 타입 간의 산술 연산을 실행하게 되면, 자바스크립트는 암묵적으로 피연산자의 타입을 바꿔서 계산을 진행한다. 하지만, 타입스크립트에서는 허용되지 않는다. 서로 다른 피연산자들 간의 산술 연산 시에 타입스크립트가 오류를 던져 암묵적인 타입 변환을 막고 연산의 안전성을..

보통 React 프로젝트를 생성할 때 CRA(Create-React-App) 방식을 주로 사용하여 작업했지만, 이를 사용하면 번들러로 Webpack을 사용하게 되는데 프로젝트의 크기가 커질 수록 속도가 상당히 느려지는 것을 알 수 있다. 이를 해결하기 위해 Vite를 사용하여 React 프로젝트를 생성하는 것을 선택했다. esbuild를 번들러로 사용하기 때문에 보다 빠르고 간결하게 이용이 가능하다. 💻 프로젝트 생성하기npm create vite@latest [프로젝트 명] --template react-tscd [프로젝트 명] && npm install❌ 불필요한 파일 삭제하기아래의 불필요한 파일들을 모두 삭제한다.publicassetsApp.cssApp.tsxmain.tsxindex.html💨 ..

1. 객체(Object) 자바스크립트는 객체 기반의 스크립트 언어이며 자바스크립트는 거의 모든 것이 객체로 이루어져있다. 원시 타입을 제외한 나머지 값들(함수, 배열, 정규 표현식 등)은 모두 객체이다. 자바스크립트의 객체는 키(key)와 값(value)으로 구성된 프로퍼티(Property)들의 집합이다. 프로퍼티의 값으로 자바스크립트에서 사용할 수 있는 모든 값을 사용할 수 있다. 자바스크립트의 함수는 일급 객체이므로 값으로 취급할 수 있다. 일급 객체란? 1. 모든 일급 객체는 변수에 담을 수 있다. 2. 모든 일급 객체는 인자(parameter)로 전달할 수 있다. 3. 모든 일급 객체는 다른 함수의 반환 값으로 반환될 수 있다. 1.1 프로퍼티 프로퍼티는 프로퍼티 키와 프로퍼티의 값으로 구성된다...