오늘은 컴포넌트와 모듈 시스템에 대해 학습하고, 앞으로 만들 웹 페이지를 분석했다.특히 SPA 개발을 위한 컴포넌트 기반 설계에 초점을 맞추어보았다.컴포넌트란?컴포넌트는 독립적이고 재사용 가능한 코드 조각으로, UI의 일부분을 구성한다. 컴포넌트 기반 설계의 장점:재사용성: 한 번 만든 컴포넌트를 여러 곳에서 사용할 수 있다.유지보수성: 각 컴포넌트는 독립적이므로 변경 사항이 다른 부분에 영향을 미치지 않는다.가독성: 코드가 논리적인 단위로 분리되어 가독성이 향상된다. 리액트와 같은 프레임워크는 컴포넌트 기반 개발을 핵심으로 하지만, 바닐라 자바스크립트로도 컴포넌트 패턴을 구현할 수 있다. 모듈 시스템모듈 시스템은 자바스크립트 코드를 여러 파일로 분리하고 필요에 따라 불러오는 방식이다. ES6에서 도입된..

ES6에서 도입된 화살표 함수와 함수의 스코프, 객체 지향 프로그래밍의 기본이 되는 객체와 메서드 활용에 대해 알아보자.스코프와 호이스팅스코프는 변수의 유효 범위를 결정하는 규칙이다. 자바스크립트에서는 전역 스코프, 함수 스코프, 그리고 ES6부터 추가된 블록 스코프가 있다. 호이스팅은 변수와 함수 선언이 코드 실행 전에 메모리에 먼저 올라가는 현상을 말한다. 정확히 말하면, 실제로 올라가는 것이 아니라 끌어올린 것처럼 선언부를 먼저 인식한다는 개념이다.function sumNumbers(a, b) { const modifiedB = b + 5; return a + modifiedB;}console.log(sumNumbers(3, 7)); // 15 (3 + (7 + 5))함수 내에서 선언된 변수 (..

... 문법은 사용 위치에 따라 spread 또는 rest로 동작한다. spreadspread 연산자는 배열이나 객체를 펼쳐서 개별 요소로 분리한다.사용 시점객체나 배열을 복사하거나 합칠 때함수 호출 시 배열의 요소를 개별 인수로 전달할 때 객체 복사 및 확장const toy = { type: "bear", price: 15000,};const blueToy = { ...toy, color: "blue",};const yellowToy = { ...toy, color: "yellow",};console.log(blueToy); // { type: 'bear', price: 15000, color: 'blue' }console.log(yellowToy); // { type: 'bear', pri..

구조 분해 할당은 배열이나 객체의 요소 및 프로퍼티들을 분해해 그 값들을 각각의 변수에 할당하는 자바스크립트의 표현식이다.배열배열의 구조분해는 인덱스를 이용해 인덱스의 순서대로 변수의 값을 할당한다.let colors = ["green", "blue", "purple"];let [c1, c2, c3] = colors;console.log(c1); // greenconsole.log(c2); // blueconsole.log(c3); // purple선언 분리 할당변수를 먼저 선언하고 나중에 구조 분해 할당으로 값을 할당할 수 있다.let c1, c2, c3;[c1, c2, c3] = ["green", "blue", "purple"];console.log(c1); // greenconsole.log(c2)..