웹 개발자 도전기

Auto Rename Tag  HTML 작성 시 시작 태그와 닫는 태그를 동시에 수정 가능하다.   Auto Close Tag  HTML 파일 작성 시 닫는 태그를 자동 완성한다.  Highlight Matching Tag • HTML 작성 시 일치하는 해당 태그 클릭 시 닫는 태그를 자동 하이라이트 한다.  Image preview • HTML 작성 시 이미지 경로에 마우스를 올리면 이미지를 미리 볼 수 있다.   ESLint  소스 코드 작성 시 실수를 하면 오류 메시지를 알려주기 때문에 디버깅 시간을 단축할 수 있다.    ES6 Code snippets  화살표 함수 등 자동 완성할 수 있는 코드 템플릿을 제공한다.    Live Server  웹 서버 설치 없이 현재 작성하..

1 동기 처리 방식과 비동기 처리 방식동기 처리 방식동기 처리 방식은 코드가 작성된 순서대로 실행되는 방식 입니다. 자바스크립트 엔진은 단일 콜 스택을 사용하여 순차적으로 코드를 실행합니다. 즉, 한 함수가 실행되고 있는 동안에는 다른 함수가 실행될 수 없습니다.   비동기 처리 방식비동기 처리 방식은 현재 실행 중인 작업이 완료되지 않아도 다음 작업을 즉시 실행할 수 있는 방식입니다.이는 블로킹 현상을 방지하고 애플리케이션의 반응성을 높여줍니다.  2. 자바스크립트 비동기 처리 방식자바스크립트에서는 비동기 처리를 위한 여러 가지 방식이 있습니다.콜백 함수 기반 비동기 처리Promise 기반 비동기 처리async / await 기반 비동기 처리  2-1 콜백 함수 기반 비동기 처리콜백 함수는 특정 작업이..

1. Promise 란 ?Promise 는 비동기 작업의 완료 또는 실패를 나타내는 객체 입니다. Promise 는 세 가지 상태를 가질 수 있습니다.대기(Pending) : 작업이 진행 중인 상태이행(Fulfilled) : 작업이 성공적으로 완료된 상태거부(Rejected) : 작업이 실패한 상태  2. async / await 란 ?async 와 await 는 Promise 를 보다 직관적으로 사용할 수 있게 해주는 구문입니다. asyncasync 키워드를 함수 앞에 붙이면 그 함수는 항상 Promise를 반환합니다. awaitawait 키워드는 Promise 가 해결될 때까지 기다립니다.await 는 반드시 async 함수 내에서만 사용해야 합니다.  3. async / await 와 Promise..

에러(Error)란 ?에러는 프로그램 실행 중에 발생할 수 있는 예기치 않은 문제를 의미합니다.에러는 다음과 같은 이유로 발생할 수 있습니다.개발자의 코딩 실수예상치 못한 사용자의 잘못된 입력존재하지 않는 파일 입출력 시도네트워크 통신 중 네트워크 단절자바스크립트의 기본 에러 처리자바스크립트 엔진은 프로그램 실행 중에 오류가 발생하면 에러 메시지를 콘솔에 출력하고 즉시 프로그램을 종료합니다. 이로 인해 에러 발생 시 프로그램의 흐름이 중단되며 사용자는 예상치 못한 결과를 경험할 수 있습니다. 에러 처리의 필요성에러 처리는 프로그램이 강제 종료되지 않도록 하고 사용자와의 상호작용을 통해 계속 실행할 수 있게 하는 것입니다.이를 위해 자바스크립트는 `try ~ catch ~ finally` 구문을 제공합니다..

Node.js 란?Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임 환경입니다. 이벤트 기반, 비동기 I/O 모델을 사용하여 가볍고 효율적입니다. 주로 서버 사이드 애플리케이션 개발에 사용되지만, 다양한 종류의 프로그램을 만드는 데 활용됩니다. 1. 글로벌 객체 (Global Object)Node.js의 글로벌 객체는 애플리케이션 어디서나 접근 가능한 객체입니다. 브라우저의 window 객체와 유사한 역할을 합니다. * 주요 글로벌 객체 및 함수 global : 전역 네임스페이스 객체process : 현재 Node.js 프로세스에 대한 정보와 제어를 제공console : 콘솔 출력 기능 제공Buffer : 바이너리 데이터를 다루는 클래스__dirname : ..

자바스크립트 표준 내장 객체자바스크립트 언어에는 개발 편의를 위한 수많은 객체(생성자 함수) 들이 미리 만들어져 있는데 이를 표준 내장 객체라 한다.표준 내장 객체는 대문자로 시작하는 생성자 함수를 말하며 스코프에 상관없이 모든 영역에서 사용할 수 있다. 1. String 객체문자열을 다루기 위한 다양한 메서드와 프로퍼티를 제공합니다.주요 프로퍼티length : 문자열의 길이를 반환합니다.주요 메서드charAt(index) : 지정한 인덱스의 문자를 반환합니다.charCodeAt(index) : 지정한 인덱스에 있는 문자의 유니코드 값을 반환합니다.concat(...strings) : 둘 이상의 문자열을 연결합니다.indexOf(searchString) : 문자열에서 특정 문자(열)의 인덱스를 반환합니다..

배열이란? 배열은 여러 데이터를 순차적으로 저장하는 자료구조 입니다. 자바스크립트에서 배열은 객체의 특별한 형태로 다양한 타입의 요소를 포함할 수 있고 동적으로 크기가 조절됩니다. 1. 배열 생성 배열을 생성하는 두 가지 주요 방법이 있습니다. 배열 리터럴 대괄호를 사용하면 간단하게 배열 생성 가능const number = [1 , 2 , 3];Array() 생성자new Array() 구문을 사용하여 배열을 생성할 수 있습니다. 요소들을 전달하거나 숫자를 전달하여 빈 배열을 생성할 수 있습니다.const number = new Array(1,2,3,4,5);const numberlength = new Array(5);2. 배열 요소 접근 및 수정 배열의 요소에 접근하거나 수정할 때는 인덱스를 사용합니다...

1. 호이스팅 이란? 호이스팅은 자바스크립트에서 변수와 함수 선언이 그들이 속한 스코프의 최상단으로 끌어 올려지는 것처럼 동작하는 특성을 말합니다. 실제로 코드가 물리적으로 이동하는 것은 아니고 자바스크립트 엔진이 코드를 실행하기 전에 변수와 함수 선언을 먼저 메모리에 저장 하는 방식으로 작동합니다. 2. 변수 호이스팅 2-1 var 키워드var 키워드로 선언된 변수는 호이스팅 시 undefined로 초기화됩니다. 2-2 let 과 const 키워드let 과 const 로 선언된 변수도 호이스팅되지만 초기화되기 전까지 접근할 수 없는 일시적 사각지대(Temporal Dead Zone)에 놓이게됩니다.  3. 함수 호이스팅 3-1 함수 선언문함수 선언문은 전체가 호이스팅됩니다. 따라서 함수를 선언하기 전에..

1. 실행 컨텍스트란?실행 컨텍스트는 자바스크립트 코드가 실행되는 환경을 추상화한 객체입니다. 코드가 실행될때 필요한 환경 정보들을 모아 놓은 객체라고 할 수 있습니다.  2. 실행 컨텍스트의 역할스코프 관리 : 변수 , 함수 등의 식별자를 저장하고 관리합니다.실행 순서 관리 : 실행 컨텍스트 스택(콜 스택)을 통해 코드의 실행 순서를 제어합니다.3. 실행 컨텍스트의 종류전역 실행 컨텍스트 : 코드가 처음 실행될 때 생성되는 컨텍스트함수 실행 컨텍스트 : 함수가 호출될 때 마다 생성되는 컨텍스트eval 실행 컨텍스트 : eval 함수 내에서 실행되는 코드의 컨텍스트4. 실행 컨텍스트의 구조 실행 컨텍스트는 다음 세 가지 주요 컴포넌트로 구성됩니다.Lexical Environment(렉시컬 환경)Varia..

1. 지역 변수 (Local Variable) 정의 :함수 또는 메서드 내에서 선언된 변수입니다.해당 함수가 실행될 때 생성되고 함수가 종료되면 소멸됩니다.특징 : 함수 내에서만 접근 가능하며 함수 외부에서는 접근할 수 없습니다.메모리 사용이 효율적입니다. 함수 호출 시에만 메모리를 사용하고 함수가 종료되면 메모리가 해제됩니다. 2. 전역 변수 (Global Variable) 정의 :함수 외부에서 선언된 변수입니다.프로그램이 종료될 때까지 메모리에 존재합니다.특징 : 프로그램의 모든 함수에서 접근 가능합니다.전역 변수의 사용은 메모리 사용량이 증가할 수 있고 변수명이 충돌할 위험이 있으므로 최소화 하는 것이 좋습니다.  3. 블록 변수 (Block Variable) 정의 : {} 중괄호로 묶인 블록 내에..