JavaScript & TypeScript

CRA없이 Webpack, React, TypeScript로 개발 환경 설정하기

토이 프로젝트를 만드는 과정에서 CRA에 TypeScript를 적용하는 것이 아닌, npm init을 통한 초기 설정부터 Webpack, Babel, React, TypeScript를 하나하나 적용하는 과정을 이번 글로 작성해보려 합니다. npm init 원하는 이름의 폴더를 생성한 후, npm init부터 시작해보도록 하겠습니다. mkdir ts-react-noncra cd ts-react-noncra npm init 여기서 npm init을 실행하면 package name, version, description 등 프로젝트에 대한 정보를 입력하는데, 따로 작성하고 싶은 정보가 있다면 작성해도 되지만, 작성하고 싶은 내용이 없는 경우, npm init -y로 스킵할 수 있습니다. 과정을 진행하면 pac..

[JavaScript] 변수의 유효범위와 클로저

코드 블록 코드 블록 {...} 안에서 선언한 변수는 코드 블록 안에서만 사용할 수 있다. if (true) { let message = "안녕하세요!"; alert(message); // 안녕하세요! } alert(message); // ReferenceError: message is not defined if와 같은 조건문만이 아니라 반복문에도 해당한다. for (let i = 0; i < 10; i++) { alert(i); // 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 } alert(i); // ReferenceError: i is not defined 중첩 함수 함수 내부에서 선언한 함수를 중첩 함수라고 부르며 중첩 함수는 새로운 객체의 프로퍼티 형태나 중첩 함수 그 자체로 반환될 수..

[JavaScript] 객체(2) - 메서드와 this

메서드 JavaScript에서 객체는 사용자, 주문처럼 현실에 존재하는 개체를 표현할 때 사용하며 사용자를 예시로 더 자세히 보면, 사용자의 이름, 나이를 속성으로 담을 수도 있지만 현실에서는 로그인하기, 로그아웃하기와 같은 행동들이 존재한다. 객체도 행동을 함수 프로퍼티를 할당함을 통해 구현할 수 있으며 이를 메서드라고 부른다. 다음과 같이 객체에 행동을 부여할 수 있다. let user = { name: "Jaeyoon", age: 24 }; user.sayHi = function() { alert("안녕하세요!"); } user.sayHi(); // 안녕하세요! 함수 표현식을 통해 함수를 만들어 user 객체에 sayHi라는 이름으로 함수 프로퍼티를 만들어주었다. 이런 식으로 객체에 할당된 함수를 ..

[JavaScript] 객체(1) - 기본

JavaScript에는 여덟 가지 자료형이 존재하면서 이 중 일곱 가지 자료형은 문자열, 숫자와 같이 오직 한 종류의 데이터를 저장하는 원시형과 이번 게시글에서 다룰 객체다. 한 종류의 데이터만 담을 수 있는 원시형과 달리 객체는 여러 종류의 데이터를 담을 수 있고, 이 데이터들을 키로 구분한다. 객체는 JavaScript에서 거의 모든 면에 녹아있기 때문에 JavaScript를 잘 다루려면, 객체를 잘 이해하고 있어야 한다. 객체를 만드는 방법은 객체 생성자 문법을 이용하여 만드는 방법과 객체 리터럴을 이용하여 만드는 방법이 존재한다. const obj = new Object(); // 객체 생성자 문법 const obj = {} // 객체 리터럴 문법 한 객체를 살펴보며 객체에 대해 좀 더 자세히 살..