IT 공부를 위한 블로그

자바스크립트는 다양한 데이터 타입을 제공하여, 개발자가 효율적으로 프로그래밍할 수 있는 환경을 만들어 줍니다. 이 포스트에서는 자바스크립트의 두 주요 데이터 타입인 원시값과 복합객체에 대해 깊이 있게 탐구해보겠습니다. 이해의 편의를 위해 정의에서 시작하여, 저장 및 복사 방법, 그리고 이들의 비교 방식에 대해 자세히 설명하겠습니다. 원시값(Primitive Values) 원시값은 변경 불가능한 가장 기본적인 데이터 타입을 말합니다. 자바스크립트에서는 null, undefined, 문자열(string), 숫자(number), 불리언(boolean), Symbol, BigInt를 원시값으로 분류합니다. 이들의 특징은 다음과 같습니다: 저장 및 복사: 원시값은 변수에 할당될 때 메모리에 그 값 자체가 저장됩니..

1. Iterator pattern(이터레이터 패턴) ES6에서 도입된 이터레이션 프로토콜(iteration protocol)은 데이터 컬렉션을 순회하기 위한 프로토콜(미리 약속된 규칙)이다. 이터레이션 프로토콜을 준수한 객체는 for…of 문으로 순회할 수 있고 Spread 문법의 피연산자가 될 수 있다. 이터레이션 프로토콜에는 이터러블 프로토콜(iterable protocol)과 이터레이터 프로토콜(iterator protocol)이 있다. 이터레이터 패턴은 이터레이터를 사용하여 컬렉션의 요소들에 접근하는 디자인 패턴이다. 여러 가지 자료형의 구조와는 상관없이 이터레이터라는 하나의 인터페이스로 순회가 가능하다는 장점이 있다. const mp = new Map(); mp.set('b', 2) mp.se..

1. eval()? eval()는 문자열 수식 또는 문자열로 된 코드를 Javascript로 실행하는 메서드이다. 따라서 매개변수를 string 형식으로 받는다. 자바스크립트 표현식, 명령문, 또는 연속되는 다수의 명령문을 나타내는 문자열. 표현식은 이미 존재하는 객체의 변수나 속성을 포함할 수 있다. 매개변수로 받은 코드를 평가하여 얻은 값을 반환하고, 값이 없다면 undefined를 반환한다. 예시) var x = 10; var y = 20; var result = eval("x * y"); // 결과: 200 console.log(result); var jsonStr = '{"name": "John", "age": 30}'; var obj = eval("(" + jsonStr + ")"); cons..

스코프는 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)가 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위이다. 1. 스코프(Scope) - 스코프는 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)가 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위이다. - 모든 스코프는 하나의 계층적 구조로 연결되며, 모든 지역 스코프의 최상위 스코프는 전역 스코프다. 계층적으로 연결된 것을 스코프체인(Scope Chain)이라고 한다. - 변수를 참조할 때 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하며 선언된 변수를 검색한다. - 따라서 상위 스코프에서 선언한 변수를 하위 스..

import와 export는 JavaScript에서 사용하는 모듈들을 사용하면서 각 모듈을 가져오고 내보내는 역할을 하는 ES 모듈 명령어이다. 1. Named Module 1) export // 경로: user.js function name(user) { console.log(`${user} name : 루피`); } function age(user) { console.log(`${user} age : 15`); } export {name, age}; // as 사용하여 이름바꿔서 내보내기 export {name as username, age as userage}; - export로 name과 age함수를 내보낼 수 있다. - 여러 개를 export 할 때에는 중괄호를 사용한다. - export 할 때..

Three.js 강의를 듣던 도중 THREE.Math 오류가 생겼다. 문제를 확인해보니 다행히 댓글에 이유가 나와있었는데 THREE.js 라이브러리가 업데이트되면서 THREE.Math가 사라지고 THREE.MathUtils로 해당 함수를 사용하는 것으로 바뀌었다. Three.js MathUtils 공식문서 https://threejs.org/docs/index.html?q=Math#api/en/math/MathUtils.randFloatSpread three.js docs threejs.org 배운점 프레임워크와 라이브러리에서 업데이트로 인해 사용 방법이 바뀌는 상황이 생길 수 있다. 그때는 공식문서를 확인해 볼 것

지난 포스팅 때 Webpack의 개념과 Loader를 사용하는 방법을 알아보았다. https://for-it-study.tistory.com/93 Webpack 개념정리 및 CSS, 이미지 모듈화 1. Webpack - Weppack은 모던 JavaScript 애플리케이션을 위한 모듈 번들러이다. * 모듈 번들러란 웹 애플리케이션을 구성하는 자원을 모두 각각의 모듈로 보고 이들을 조합해서 하나의 결과물로 만드는 for-it-study.tistory.com 위 포스팅에서는 Webpack 개발환경을 설정할 때 webpack.config.js에 있는 mode 프로퍼티를 통해 제어하는 방식으로 사용하고, 새롭게 빌드하려고 할 때마다 npm run build를 입력해 주어야 해서 불편했다. 하지만cross-env..

1. Webpack - Weppack은 모던 JavaScript 애플리케이션을 위한 모듈 번들러이다. * 모듈 번들러란 웹 애플리케이션을 구성하는 자원을 모두 각각의 모듈로 보고 이들을 조합해서 하나의 결과물로 만드는 툴이다. - 브라우저의 성능이 높아지고 자바스크립트 애플리케이션이 점점 고도화되면서 유지보수의 난이도가 높아졌다. - 이를 해결하기 위해 자바스크립트를 기능 단위로 분리하여 사용하는 모듈화가 필요해졌다. - 자바스크립트 모듈시스템이 등장하기 전에 모듈 패턴으로 사용했고, 정식 지원하는 모듈 시스템이 생겨났지만, IE 브라우저에서는 지원하지 않았기 때문에 모든 브라우저 환경에서 모듈 시스템을 사용할 수 있도록 만들어진 게 webpack이다. Webpack 공식홈페이지: https://webp..

1. null - JavaScript에서 null은 메모리에 값이 비어있음을 명시적으로 표현하기 위하여 빈 값에 null을 할당되어있는 상태이다. - 또한 typeof로 null의 타입을 알아보면 object를 출력한다. - 이는 자바스크립트 개발자들이 null의 예외처리를 고려하지 못하여 object로 출력되는 버그이다. (아래 페이지 참조) 초기 구현의 결함을 수정하지 않도록 권장하기 때문에 수정하지 않고 있다. https://stackoverflow.com/questions/18808226/why-is-typeof-null-object Why is typeof null "object"? I'm reading 'Professional Javascript for Web Developers' Chapte..

promise와 비동기 처리방식 설명 글: https://for-it-study.tistory.com/88 [JavaScript] 비동기 처리 방식 (callback, setTimeout, promise) 1. 비동기 처리 방식이란? 비동기 처리 방식은 병렬적으로 테스트를 수행하는 것을 뜻한다. 즉, 순차적으로 특정 코드의 연 사이 끝날 때까지 기다리는 동기 처리 방식과는 달리 코드의 실행을 for-it-study.tistory.com - promise 방식은 작업이 많아지면 callback 함수처럼 코드의 깊이가 길어진 않지만 특정 조건에 따라 분기를 나누기가 어렵다는 단점과 어떠 부분에서 에러가 발생했는지 파악하기가 어렵다는 단점을 가졌다. - callback 함수보다는 상대적으로 괜찮지만 프로미스 ..