💙모던자바스크립트란?
- ECMAScript6(2015) 이후의 방법론을 구현한 자바스크립트다.
즉, 현재의 개발 표준과 관행을 따르며, 최신 브라우저와 웹 개발 도구에서 지원되는 자바스크립트 버전 및 기술을 말한다.
최신 브라우저 : 크롬, 파이어폭스, 사파리, 엣지 - 리엑트, 뷰, 앵귤러 등 가상 DOM을 이용하는 라이브러리 혹은 프레임워크를 사용한다.
- nap, yarn 등의 패키지 관리자를 사용한다.
💙패키지 관리자
패키지 설치 시 개발자가 각각의 PC에 자유롭게 설치해서 사용하면 버전이 각각 다 달라 동일한 환경 구현이 어려워지는 문제가 발생한다. 그래서 패키지 관리, 설치, 업그레이드 등을 전담하는 패키지 관리자를 사용하게 된다.
자바스크립트의 npm, 루비의 gem, php의 composer 등
💙모듈 핸들러(module handler)
개발할 때 파일을 나누고 프로덕션용으로 빌드할 때에 파일 하나에 모으기 위해 js 파일이나 css 파일 등을 한데 합치는 것으로 만들어진다.
미리 설정 파일을 기술해두고, 빌드를 실행하면 모듈 핸들러가 파일들을 모은 것이 생성되며 해당 파일을 프로덕션 환경에 반영함으로써 프로그램을 실행한다.
💙SPA(Single Page Application)
HTML 파일은 하나만 사용하고 자바스크립트를 이용해 DOM을 바꿔써서 화면 이동을 구현하는 것이다.
서버 측에 요청을 보내지 않고 페이지 이동을 완료할 수 있어 화면 표시 속도가 향상 된다.
컴포넌트 분리가 쉬워 개발 효율이 향상된다. 각 페이지 마다 HTML 파일을 준비해야하는 기존 웹 시스템과 달리 리액트 등 모던 자바 스크립트로 개발할 때는 화면의 각 요소를 컴포넌트로 정의해서 재사용 한다.
모던 자바스크립트 개발에서는 SPA를 표준으로 한다.
트위터, 페이스북, GMAIL, NETFLIX 등이 현재 사용중이다.
💙변수
타입 확인
typeof 연산자를 사용한다.
typeof "hello"; // "string"
typeof true; // "boolean"
typeof undefined; // "undefined
typeof null; // "object" ← JS 설계상의 오래된 버그
typeof {x: 1}; // "object"
typeof function(){}; // "function"
var의 문제
var 은 변수를 덮어쓸 수 있고 재선언이 가능해 이용하지 않는다.
var str1 = "변수";
var str1 = "재정의";
// 오류가 나는것이 아닌 재선언한다.여러 사람과 프로젝트를 만들때 변수 명이 겹치는 문제가 발생한다.
let, const
재선언(재할당)과 중복 선언이 되지 않는다.
const : 상수
const 는 기본 타입(primitive type)은 재선언 할 수 없지만 객체나 배열 등(object type)이라 불리는 종류의 데이터는 const로 정의해도 도중에 값 변경이 가능하다.
-> 객체의 속성 변경이나, 추가 가능
필수로 초기화해야한다.
💙템플릿 리터럴
표현식의 값을 문자열에 추가하거나 여러 줄의 문자열을 표현할 수 있다.
사용법
역따옴표(백틱, ` ) 로 묶은 문자열
var txt =
Hello My name is javascript;
엔터까지 입력값으로 포함한다.
보간 표현식
템플릿 리터럴 안에 플레이스 홀더를 넣을 수 있다. ${ } 로 표기한다.
문자열 안에 변수나 표현식의 결괏값을 삽입한다.
함수나 연산도 가능하다.
var num1 = 5, num2 = 10;
console.log(`${num1} + ${num2} = ${num1 + num2}`);
// 5 + 10 = 15
const day = "10일";
const week = "화요일";
const msg = `오늘은 ${day + 5}일이고, 요일은 ${week} 입니다.`;
console.log(msg);
// 오늘은 15일이고, 요일은 화요일 입니다.💙화살표 함수
function 선이 없이 () 안에 인수를 입력하고 => 기호로 함수를 작성한다.
const sayHello = () => {
console.log("Hello!");
};
sayHello(); // 출력: Hello!
// 인수가 한 개인 경우 소괄호 생략이 가능하다.
const greet = name => {
console.log(`Hi, ${name}!`);
};
greet("Alice"); // 출력: Hi, Alice!
// 2개는 생략 불가능
const add = (a, b) => {
return a + b;
};
console.log(add(3, 4)); // 출력: 7
// 한 행으로 리턴하는 경우 중괄호와 return 생략 가능
const func4 = (num1, num2) => num1 + num2;
const func4 = (num1, num2) => {
num1 + num2;
}
// 반환값이 여러 행일 경우 ()로 감싼 뒤 단일 행과 같이 모아서 반환할 수 있다.
const func4 = (num1, num2) => (
{
fisrt : num1,
second : num2,
})🤍회고
내가 평소에 사용하던 프로그램들이 모던 자바스크립트로 만들어졌다는 사실이 신기하게 느껴졌다. 특히 화살표 함수는 문법이 많이 생략되어 있어서 아직은 쓰기 불편하고, 코드를 읽는 것도 어렵게 느껴진다. 기존의 function 선언 방식과 화살표 함수 문법을 비교하며 직접 여러 형태로 작성해보았다. 특히 매개변수가 하나일 때 괄호를 생략하거나, return문 없이 표현식만 사용하는 간단한 예제를 반복하면서 익숙해질 수 있었다.
이 과정을 통해 문법을 단순히 외우기보다는 실제 코드를 많이 작성해보는 것이 이해에 훨씬 효과적이라는 것을 느꼈다.
