JavaScript를 설치하고, 코드를 실행하며 기본 문법을 이해해보자.
🏹 JavaScript와 Node.js
Node.js란?
Node.js는 JavaScript를 서버 측에서 실행하기 위한 런타임 환경이다.
기본적으로 JavaScript는 웹 브라우저에서 실행되는 프로그래밍 언어이며, 웹 페이지의 동적인 기능을 담당한다. Node.js는 웹 브라우저 외부에서 JavaScript를 실행할 수 있는 환경을 제공한다. Node.js를 사용하면 웹 서버를 구축하고 웹 애플리케이션을 개발할 수도 있다.
🏹 Node.js 설치
Mac Node.js 설치 여부 확인
node -v
Mac Node.js 설치
아래의 링크에서 installer를 다운받아 실행한다.
https://nodejs.org/ko/download
Mac Node.js 버전 업데이트
sudo npm install -g n
sudo n lts아래의 화면처럼 버전을 확인했을 때 성공적으로 업데이트 되었음을 확인할 수 있다!
🏹 VS Code 설치
Mac VS Code 설치
아래의 링크에 들어가서 다운받고 설치한다.
https://code.visualstudio.com/
VS Code Extention 추천
마켓 플레이스에서 Extention을 검색하면 설치가 가능하다. 다음은 JS 코드를 작성하는데 도움이 되는 Extention들이다.
ESLint
JavaScript의 문법 오류를 수정하는데 도움을 준다.
Relative Path
경로를 설정하는데 도움이 된다.
Guides
코드의 줄 맞춤을 돕는다.
Korean Language Pack for Visual Studio Code
설정을 한국어로 바꾼다.
Reactjs code snippets
React를 사용할 때 자동완성을 돕는다.
🏹 JavaScript 기본 문법
변수의 type
var
var는 ES5 이전의 JavaScript에서 주로 사용되던 변수 선언 키워드이다. 함수 스코프를 가지며, 호이스팅이 발생하며 중복 선언이 가능하다.그러나 블록 스코프가 아닌 함수나 전역 스코프에서만 유효하므로 변수의 범위를 제어하기 어렵고 예기치 않은 결과를 초래할 수 있으므로, ES6 이후에서는 let과 const를 사용하는 것이 권장된다.
let
let은 블록 스코프를 가지는 변수 선언 키워드이다. 블록 내에서 변수를 선언하면 해당 변수는 블록 내에서만 유효하다. 중복 선언이 불가능하며, 호이스팅이 발생하지 않는다. 보통 변수의 값이 변경될 수 있는 경우에 사용된다.
const
const는 블록 스코프를 가지는 상수 선언 키워드이다. 변수를 선언할 때 반드시 초기화해야 하며, 한 번 할당된 값은 변경할 수 없다. const로 선언된 객체나 배열은 내부의 속성이나 요소는 변경할 수 있다. const를 사용하여 값이 변경되지 않는 변수를 선언할 때 사용된다.
변수의 Data type
let을 사용하여 선언한 변수에는 JavaScript에서 지원하는 모든 데이터 타입을 할당할 수 있다.
숫자(Number): 정수나 부동소수점 숫자
let numberVar = 10;
let floatVar = 3.14;문자열(String): 텍스트 데이터, 따옴표('' 또는 "")로 감싸서 사용
let stringVar = "Hello, world!";불리언(Boolean): true 또는 false 값을 가지며, 조건식에서 주로 사용
let boolVar = true;객체(Object): 여러 속성과 메소드를 포함하는 복합 데이터 타입
let objVar = { name: "John", age: 25 };배열(Array): 여러 값을 순차적으로 저장하는 데이터 구조
let arrVar = [1, 2, 3, 4, 5];함수(Function): 동작 블록을 가지고 있는 재사용 가능한 코드 조각
let funcVar = function() {
console.log("Hello, world!");
};기타 타입: null, undefined, 각각 값이 없음을 나타내는 특별한 타입
let nullVar = null;
let undefinedVar = undefined;let을 사용하여 선언한 변수에는 위와 같은 다양한 데이터 타입을 할당할 수 있으며, 필요에 따라 변수의 값과 타입을 동적으로 변경할 수도 있다.
Undifined vs Null
JavaScript에서 undefined와 null은 비슷한 개념이지만 약간의 차이가 있다.
undefined는 변수가 선언되었지만 값이 할당되지 않은 상태로, 다른 말로는 "정의되지 않음"이라고도 한다. 변수가 초기화되지 않았거나, 함수에서 반환값이 명시적으로 지정되지 않았을 때 undefined가 할당된다.
let x; // 변수 x가 선언되었지만 값이 할당되지 않음
console.log(x); // 출력: undefined
function foo() {
// 아무런 반환값이 없음
}
console.log(foo()); // 출력: undefined반면에 null은 변수에 값이 할당되었으며, 그 값이 "비어있음"을 나타낸다. null은 개발자가 의도적으로 변수에 "아무것도 없음"을 할당할 때 사용된다.
let y = null; // y 변수에 null 할당
console.log(y); // 출력: null즉, undefined는 값이 할당되지 않은 상태를 나타내고, null은 값이 비어있음을 나타낸다. undefined는 변수의 기본 상태이며, null은 변수에 명시적으로 비어있는 값을 할당할 때 사용된다.
