12.2 함수를 사용하는 이유동일한 작업을 반복적으로 수행할 때 미리 정의된 함수를 재사용하는 것이 효율적 유지보수 편의성코드의 신뢰성(실수 ↓)코드의 가독성(적절한 이름을 가졌다면 함수의 역할을 파악하는데 도움됨) 코드는 개발자를 위한 문서 -> 가독성 좋은 코드 = 좋은 코드 12.3 함수 리터럴자바스크립트의 함수는 객체(다른 언어와 차이. > 18. 함수와 일급 객체에서 계속)일반 객체와 달리 호출 가능하고 고유한 프로퍼티를 가짐함수 이름은 함수 몸체 내에서만 참조할 수 있는 식별자 12.4 함수 정의변수는 선언 함수는 정의라고 표현함수 선언문이 평가되면 식별자가 암묵적으로 생성되고 함수 객체가 할당됨 1 함수 선언문function add(x, y) { retu..
[딥다이브] 11. 원시 값과 객체의 비교
상수는 재할당이 금지된 변수 상수와 변경 불가능한 값을 동일시하면 안 됨 원시 값: 변경 불가능한 읽기 전용 값. 불변성을 가짐 변수에 값을 재할당하는 과정 : 새로운 메모리 공간을 확보하여 재할당할 값을 저장한 후 변수가 참조하던 메모리 공간의 주소를 변경 11.1.2 문자열 : 원시 타입, 유사 배열 객체(iterable) 원시 값을 객체처럼 사용하면 원시 값을 감싸는 래퍼 객체로 자동 변환(21.3절 원시 값과 래퍼 객체에서 계속) 원시 타입이기 때문에 인덱스로 접근하여 값을 변경해도 바뀌지 않음 숫자는 크기에 상관없이 8바이트 필요 문자열은 1개의 문자당 2바이트 필요 11.2 객체 프로퍼티의 개수가 정해져 있지 않아 동적으로 추가되고 삭제할 수 있음 -> 메모리 공간의 크기를 사전에 정해둘 수 ..
자바스크립트는 객체 기반의 프로그래밍 언어 원시 값(원시 타입의 값) : 변경 불가능 10.1 객체(객체 타입의 값) - 변경 가능 - 0개 이상의 프로퍼티/메서드로 구성된 집합 - 프로퍼티는 키와 값으로 구성 - 함수도 값으로 취급 가능(일반 함수와 구별하기 위해 함수가 값인 경우 메서드라 부름) - 상태(프로퍼티)와 동작(메서드)을 하나의 단위로 구조화할 수 있어 유용함 프로퍼티: 객체의 상태를 나타내는 값(data) 메서드: 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작(behavior) 10.2 객체 리터럴에 의한 객체 생성 C++이나 자바 같은 클래스 기반 객체지향 언어는 클래스를 사전에 정의하고 필요한 시점에 new 연산자와 함께 생성자를 호출하여 인스턴스를 생성하는 방식으로 객체를 ..
명시적 타입 변환, 타입 캐스팅 : 개발자가 의도적으로 값의 타입을 변환하는 것 암묵적 타입 변환, 타입 강제 변환 : 개발자의 의도와 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환된 것 원시 값은 변경 불가능한 값 타입 변환 : 기존 원시 값을 이용해 새로운 원시 값을 생성하는 것 암묵적 타입 변환이 발생하지 않는 코드를 작성하는 것이 항상 좋은 것은 아님 - 암묵적 타입 변환으로 인해 가독성이 좋아질 수도 있음 - 예측 가능한 코드 - 동료가 쉽게 이해할 수 있어야 함 9.2 암묵적 타입 변환 9.2.1 문자열 타입으로 변환 + : 피연산자 중 하나 이상이 문자열이면 문자열 연결 연산자로 동작(문자열로 만든다) 9.2.2 숫자 타입으로 변환 1 - '1' //..
제어문 위에서 아래 방향으로 순차적으로 실행되는 코드의 흐름을 인위적으로 제어 → 코드의 흐름을 이해하기 어렵게 만들어 가독성을 해치기도 함 고차 함수를 사용한 함수형 프로그래밍 기법에서는 제어문 사용을 억제하여 복잡성을 해결하려 함 8.1 블록문 문의 종료를 의미하는 자체 종결성을 갖기 때문에 블록문의 끝에는 세미콜론을 붙이지 않는다. 8.2 조건문 if else 문 if문의 조건식은 불리언 값으로 강제 변환됨(9.2 암묵적 타입 변환에서 계속) 코드 블록 내의 문이 하나뿐이라면 중괄호를 생략할 수 있음 삼항 연산자는 값으로 평가되는 표현식을 만들기 때문에 변수에 할당할 수 있고 if else 문은 표현식이 아닌 문이기 때문에 변수에 할당할 수 없다. switch 문 switch 문은 주어진 표현식을 ..
6장 데이터 타입 ES6 기준 7개 데이터 타입 원시 타입 - 숫자, 문자열, 불리언, undefined, null, 심벌 객체 타입 - 객체, 함수, 배열 등 ECMAScript2020(ES11)에서 새로운 원시값 BigInt가 추가됨 숫자 1과 문자열 '1'은 필요한 메모리 공간의 크기, 저장되는 2진수, 해석하는 방식이 다르다. 6.1 숫자 타입 자바스크립트는 모든 수를 실수로 처리(정수 X) console.log(1 === 1.0); // true 2진수, 8진수, 16진수를 표현하기 위한 데이터 타입을 제공하지 않기 때문에 이들 값을 참조하면 모두 10진수로 해석됨 아래 세 값도 숫자로 판단됨 Infinity 양의 무한대 -Infinity 음의 무한대 NaN 산술 연산 불가(not a numb..
4.2 식별자 식별자 result는 값 30이 저장되어 있는 메모리 주소 0x0669F913을 기억해야 한다 식별자는 값이 저장되어 있는 메모리 주소와 매핑 관계를 맺으며, 이 매핑 정보도 메모리에 저장되어야 한다. 변수 이름은 실행컨텍스트에 저장..(23장 실행 컨텍스트에서 계속) 메모리 두 공간 차지 변수 값, 변수- 변수에는 변수 이름 주소 - 변수 값 주소 - 변수 값 자바스크립트에서 함수는 값이다 4.4 변수 선언의 실행 시점과 변수 호이스팅 자바스크립트 엔진은 소스코드를 한 줄씩 순차적으로 실행(런타임)하기에 앞서 소스코드의 평가 과정을 거치는데 이 때 모든 선언문을 찾아 먼저 실행(선언)한다. = 호이스팅 평가 과정이 끝나면 선언문을 제외한 소스코드를 한 줄씩 순차적으로 실행한다. 4.6 값..
이전 프로젝트 리팩터링 중 프로젝트 실행, 리로딩, 빌드가 느려 vite로 변경했는데 그 과정 기록입니다. 실수 시 롤백을 위해 새 브랜치에서 작업합니다. git switch -c vite 작업 순서 vite, @vitejs/plugin-react 플러그인 설치 vite.config.js 파일 생성 js 파일을 jsx 파일로 변경 index.html 위치 루트 폴더로 옮기고 script 태그 추가하기 %PUBLC_URL%로 참조하는 파일들을 /로 바꿔주기 환경 변수 변경 package.json scripts 추가 (선택) react-scripts 삭제 1. vite, @vitejs/plugin-react 플러그인 설치 npm install -D vite @vitejs/plugin-react 2. vite..
프론트엔드 공통 1. 리플로우와 리페인트에 대해 설명해주세요. 리플로우와 리페인트는 웹페이지가 변경될 때, 브라우저가 레이아웃을 조정하거나 스타일 변경을 수행하는 과정입니다. 리플로우는 웹페이지의 레이아웃이 변경될 때 수행되며, 요소의 위치, 크기, 주변 요소와의 상대적 관계 등이 다시 계산됩니다. 리페인트는 웹페이지 요소의 스타일이 변경되어 화면에 다시 그려질 필요가 있는 경우 발생합니다. 리플로우의 재계산 과정은 한 요소의 변경이 다른 요소에 영향을 미칠 수 있기 때문에 성능상 부하를 초래할 수 있습니다. 때문에 다양한 라이브러리, 프레임워크들은 리페인트와 리플로우를 최소화하기 위해 노력합니다. 예를 들어 React의 경우 가상 DOM을 활용해(diff 알고리즘) 변경 사항을 일괄 처리한 후, 실제 ..