이시안 개발 블로그

오늘은 DOM에 대해 공부했습니다. DOM의 생성 Document Object Model의 약자로HTML 문서를 파싱한 결과를 말합니다. 브라우저의 요청에 의해 응답된 HTML 문서는 파싱되어 브라우저가 해석할 수 있게 됩니다. 위와 같이 HTML 문서가 파싱되면 각각의 노드들을 트리 자료구조로 구성하게 됩니다. 이 트리 구조를 DOM이라고 합니다. DOM을 생성하는 과정에서 CSS를 로드하는 태그를 만나게 되면 CSSOM을 생성하게 되고 script 태그를 만나면 자바스크립트 코드를 파싱하기 위해 자바스크립트 엔진에 제어권을 넘기게 됩니다. 이때 자바스크립트 엔진이 코드를 해석하고 실행하게 되며 DOM API를 조작하는 코드가 있다면 DOM, CSSOM이 변경되고 다시 렌더링하는 과정을 거치게 됩니다..

오늘은 IIFE와 모듈에 대해 정리해보겠습니다. IIFE (즉시 실행 함수) (function () { // 코드 } )() 위와 같은 형태를 취하는 것이 IIFE인데요. 저는 봤을 때 자바의 익명 객체와 비슷한 건가라고 생각했습니다. 자바의 익명 객체는 재사용성이 없는 객체를 1회용으로 쓰기 위해 사용되는 데, 자바스크립트의 IIFE도 그런 면으로 보면 비슷한 것 같습니다. // 기명 즉시 실행 함수 (function foo() { // code ... }()); // 익명 즉시 실행 함수 (function () { // code ... }()); 자바스크립트의 IIFE는 이름을 가질 수도 있고, 이름 없는 함수로도 정의해서 사용할 수 있습니다. 소괄호 내부에 함수를 작성해야 하며 함수 블록을 닫는 중..

자바스크립트는 var, let, const로 변수를 선언할 수 있습니다. var와 let, const는 스코프가 다르게 동작하며 변수와 함수 모두 관련이 있는 매우 중요한 요소입니다. 오늘은 스코프에 대해 정리해보겠습니다. 스코프 var a = 'global'; function foo(){ var a = 'inner'; console.log(a); // 'inner' } console.log(a); // 'global' 스코프는 유효 범위로 모든 식별자(변수, 함수, 클래스 등)가 선언된 위치에 따라 다른 코드가 참조할 수 있는 지 결정됩니다. 외부에서 선언한 변수 a와 함수 내부에서 선언한 변수 a는 식별자 이름은 같지만 엄연히 다른 스코프를 가지고 있습니다. 이 경우 자바스크립트 엔진이 코드를 실행할..

자바스크립트의 모든 값은 타입이 있고 타입은 변환될 수 있습니다. 이것을 타입 변환또는 형변환(Type Conversion)이라고 하며 형변환에 대해서 알아보겠습니다. 타입 변환 타입 변환은 명시적 타입 변환, 암묵적 타입 변환으로 나눌 수 있습니다. 이때 타입 변환이 일어나도 기존 원시 값이 직접 변경되는 것은 아닙니다. 이전에도 알아봤듯이 자바스크립트의 기본 데이터 타입은 변경 불가능한 값이므로 타입 변환은 기존 원시 값으로 다른 타입의 새로운 원시 값을 생성한다고 이해하면 되겠습니다. 명시적 타입 변환 명시적 타입 변환은 개발자의 의도에 의한 타입 변환을 말합니다. let x = 10; let str = String(x); console.log(str); // 문자열 10 console.log(x)..

오늘은 자바스크립트 호출 스택(Call Stack)과 이벤트 루프(Event Loop)에 공부해보겠습니다. Call Stack 자바스크립트는 단일 스레드 기반의 언어입니다. 단일 스레드이므로 호출 스택(Call Stack)이 하나만 존재하고 이것은 한 번에 하나의 작업만 처리할 수 있다는 것을 뜻합니다. 스택은 LIFO(후입선출) 구조이며 위에서부터 차곡차곡 쌓이는 형태의 자료구조입니다. 자바스크립트는 현재 어떤 함수가 동작하고 또 다음 호출될 함수는 무엇인지 호출 스택을 통해 제어합니다. 스크립트가 함수를 호출하면 인터프리터가 호출 스택에 추가한 다음 함수를 수행 해당 함수에 의해 호출된 함수는 호출 스택에 추가되고 호출이 도달하는 위치에서 실행 함수가 끝나면 인터프리터는 스택을 제거하고 메인 코드 목..

자바스크립트는 두 가지의 데이터 타입이 있으며 원시 타입은 값으로 전달되며, 그 외의 객체는 참조로 전달되는 형태입니다. 오늘은 두 타입의 차이를 공부해보겠습니다. Value let a = 10; let b = a; // b = 10 a = 20; console.log(b); // 10 자바스크립트의 원시 타입은 불변성을 가지고 있으며 교체할 수는 있지만 변경할 수 없습니다. 위 예제를 보면 a는 10이라는 값을 초기화했고 b는 a로 초기화를 했습니다. a는 10이기 때문에 b 또한 10을 가지게 됩니다. 그리고 a를 20으로 재할당해도 b의 값은 바뀌지 않습니다. b는 a의 값을 복사했기 때문입니다. 이것을 값에 의한 전달이라고 합니다. 값에 의한 전달은 원시 타입에서 일어나게 되며 값을 그대로 복사하..

자바스크립트는 동적 타입으로 느슨한 언어 타입 체크 언어로써 값이 할당되는 과정에 타입 추론이 되는 특징이 있습니다. 자바스크립트는 원시 자료형과 참조 자료형(객체)로 구분할 수 있는 데이터 타입을 갖습니다. 데이터 타입은 프로그래밍 언어에서 사용할 수 있는 데이터의 종류를 말하며 메모리에 데이터를 저장하고 변수로 해당 데이터를 이용할 수 있습니다. 자바스크립트의 모든 값은 데이터 타입을 가지며 7개의 데이터 타입을 제공합니다. 1. 원시 타입(Primitive Types) Boolean Number String Null Undefined Symbol 2. 참조 타입(Reference Types / Object) Object 원시 타입 1. Boolean const bar = true; const foo..

✨ 왜? 현재 하고있는 프로젝트에서 구현하고 싶었던 기능 중 하나인 auto complete Spring에서 비동기로 데이터를 받아서 보여주는 것을 해보고 싶었습니다. 사용자 입장에서 현재 검색어가 유효한 것인지 아닌지 정보를 전달하는 것이 필요하지 않을까라는 생각이었습니다. Controller @RequestMapping("/search") @RestController public class SearchRestController { @Setter(onMethod_ = @Autowired) private SearchService service; // 검색어 자동완성 @PostMapping( value = "/{word}", produces = "application/text; charset=utf8" /..