본문 바로가기
반응형

프론트엔드/Javascript11

자바스크립트 JavaScript | JavaScript 변수 선언: var, let, const의 차이점 및 호이스팅 ⭕ 자바스크립트 JavaScript | JavaScript 변수 선언: var, let, const의 차이점 및 호이스팅➡️ var재선언 가능코드의 가독성과 유지보수에 부정적인 영향을 미칠 수 있습니다.var name = "Alice";var name = "Bob"; // 재선언 가능console.log(name); // "Bob" 재할당 가능var number = 1;number = 2; // 재할당 가능console.log(number); // 2 전역 스코프함수 스코프(function-scoped)변수가 선언된 함수 내부에서만 접근 가능하게 하는 스코핑 규칙function testScope() { var insideFunction = "visible";}console.log(insideFunc.. 2024. 5. 14.
자바스크립트 JavaScript | 스크립트 로딩 최적화: defer와 async 속성 ⭕ 자바스크립트 JavaScript | 스크립트 로딩 최적화: defer와 async 속성[프론트엔드/[이론] 웹 기술] - 웹 구조 Web | 브라우저 렌더링 : CRP 프로세스 웹 구조 Web | 브라우저 렌더링 : CRP 프로세스⭕ 웹 구조 Web | 브라우저 렌더링 : CRP 프로세스브라우저는 웹 페이지를 화면에 표시할 때, 렌더링 엔진들은 HTML, CSS, JavaScript 파일을 처리하며 CRP 프로세스를 따릅니다.렌더링 엔진크롬(Chrome): Blisugoring-it.tistory.com[프론트엔드/Javascript] - 자바스크립트 JavaScript | 렌더링 중단 : 스크립트 실행이 렌더링에 미치는 영향 자바스크립트 JavaScript | 렌더링 중단 : 스크립트 실행이 렌더링.. 2024. 5. 14.
자바스크립트 JavaScript | 렌더링 중단 : 스크립트 실행이 렌더링에 미치는 영향 ⭕ 자바스크립트 JavaScript | 렌더링 중단 : 스크립트 실행이 렌더링에 미치는 영향[프론트엔드/[이론] 웹 기술] - 웹 구조 Web | 브라우저 렌더링 : CRP 프로세스 웹 구조 Web | 브라우저 렌더링 : CRP 프로세스⭕ 웹 구조 Web | 브라우저 렌더링 : CRP 프로세스브라우저는 웹 페이지를 화면에 표시할 때, 렌더링 엔진들은 HTML, CSS, JavaScript 파일을 처리하며 CRP 프로세스를 따릅니다.렌더링 엔진크롬(Chrome): Blisugoring-it.tistory.com ➡️ 태그를 만나면, 스크립트의 다운로드(Fetching) 및 실행(Executing)을 위해 문서 파싱을 일시적으로 중단합니다.스크립트 앞의 콘텐츠스크립트 뒤의 콘텐츠CSSOM의 구축은 DOM .. 2024. 5. 14.
자바스크립트 JavaScript | JavaScript 패키지 매니저(package manager) ⭕ 자바스크립트 JavaScript | JavaScript 패키지 매니저(package manager)패키지 매니저(package manager)는 프로젝트가 의존하고 있는 패키지를 효과적으로 설치, 갱신, 삭제할 수 있도록 도와주는 관리 도구입니다.특히 자바스크립트는 풍부한 오픈 소스 생태계를 자랑하기 때문에, 패키지 매니저는 필수적인 역할을 합니다.자바스크립트 프로젝트는 적게는 수십 개, 많게는 수백 개의 다른 패키지에 의존할 수 있습니다. ➡️ NPM (Node Package Manager)Node.js 환경에서 JavaScript 패키지를 관리하기 위한 패키지 관리자입니다.Node.js 프로젝트에서는 추가적인 설치 없이 기본적으로 npm을 사용할 수 있습니다.파일 구성: package.json, .. 2024. 5. 14.
자바스크립트 JavaScript | 비동기 처리 ⭕ 자바스크립트 JavaScript | 비동기 처리 비동기 처리는 코드가 순차적으로 실행되는 대신, 특정 작업이 백그라운드에서 실행되도록 하고, 그 작업의 완료 여부와 상관없이 다음 코드로 진행할 수 있게 해주는 프로그래밍 방식입니다. JavaScript에서는 이러한 비동기 처리가 매우 중요한데, 예를 들어 웹 애플리케이션에서 서버로부터 데이터를 요청하고 그 데이터가 도착할 때까지 기다리는 경우, 사용자 인터페이스(UI)가 멈추지 않고 다른 작업을 계속할 수 있게 해 줍니다. ➡️ Promise Promise는 비동기 작업의 최종 성공 또는 실패를 나타내는 객체입니다. 이 객체는 세 가지 상태를 가지게 됩니다. pending: 아직 결과가 정해지지 않은 초기 상태입니다. fulfilled: 비동기 작업이.. 2024. 3. 9.
자바스크립트 JavaScript | 구문과 표기법: 전개 구문 (Spread Syntax), 객체 리터럴 표기법, 구조 분해 할당 (Destructuring Assignment) ⭕ 자바스크립트 JavaScript | 구문과 표기법: 전개 구문 (Spread Syntax), 객체 리터럴 표기법, 구조 분해 할당 (Destructuring Assignment) ➡️ 전개 구문 (Spread Syntax) 전개 구문은 배열이나 객체의 요소를 여러 개의 개별 요소로 "전개"하는 데 사용됩니다. 이 구문은 함수 호출에 인수를 전달하거나, 배열을 다른 배열에 병합하거나, 객체를 다른 객체와 병합할 때 유용하게 사용할 수 있습니다. // 배열 전개 let numbers = [1, 2, 3]; let moreNumbers = [...numbers, 4, 5]; console.log(moreNumbers); // [1, 2, 3, 4, 5] // 객체 전개 let person = { name:.. 2024. 3. 9.
자바스크립트 JavaScript | 함수 및 반환 방법 ⭕ 자바스크립트 JavaScript | 함수 및 반환 방법 ➡️ 묵시적 반환 묵시적 반환은 화살표 함수(=>)를 사용할 때, 함수 본문을 중괄호({})로 감싸지 않고 직접 결과 값을 반환할 수 있는 간결한 문법을 의미합니다. 이 방법을 사용하면 return 키워드 없이도 함수에서 값을 반환할 수 있습니다. 묵시적 반환은 함수의 본문이 단일 표현식으로 구성되어 있을 때 유용하게 사용할 수 있으며, 코드를 더 간결하고 읽기 쉽게 만들어 줍니다. 특히 배열 메서드의 콜백 함수나 간단한 연산을 수행하는 함수를 작성할 때 유용합니다. 첫 번째 함수 square는 묵시적 반환을 사용하여 x * x의 결과를 바로 반환합니다. 두 번째 함수 squareWithReturn는 동일한 계산을 수행하지만, 중괄호({})와 r.. 2024. 3. 9.
자바스크립트 JavaScript | 예외 처리: try-catch-finally 구문 ⭕ 자바스크립트 JavaScript | 예외 처리: try-catch-finally 구문 예외 처리는 프로그램 실행 중 발생할 수 있는 예외 또는 오류를 처리하기 위한 메커니즘입니다. 자바스크립트에서는 try-catch-finally 구문을 사용하여 예외 처리를 할 수 있습니다. 이 구조를 사용하면 오류가 발생했을 때 프로그램이 갑자기 중단되지 않고, 개발자가 제공한 방식으로 예외를 처리할 수 있습니다. ➡️ try-catch-finally 구문 try 블록: 실행할 코드를 포함하며, 여기서 발생하는 모든 예외는 catch 블록으로 전달됩니다. catch 블록: try 블록 내에서 예외가 발생했을 때 실행됩니다. 예외 객체를 받아 처리할 수 있습니다. finally 블록: 예외 발생 여부와 상관없이 실행.. 2024. 3. 9.
자바스크립트 JavaScript | 객체(Object) 및 접근 방법 ⭕ 자바스크립트 JavaScript | 객체(Object) 및 접근 방법 ➡️ 객체(Object) 객체(Object)는 키와 값을 한 쌍으로 갖는 컬렉션입니다. 자바스크립트에서 객체는 매우 중요한 데이터 타입 중 하나로, 다양한 방법으로 속성에 접근할 수 있습니다. let person = { name: "Alice", age: 30 }; ➡️ Dot Notation (점 표기법): object.key 가장 일반적인 방법으로, 점(.)을 사용하여 객체의 속성에 접근합니다. 키가 유효한 식별자일 경우(공백이나 특수 문자가 없는 경우) 사용할 수 있습니다. 직관적이고 간결하여 가독성이 좋습니다. console.log(person.name); // Alice ➡️ Bracket Notation (대괄호 표기법).. 2024. 3. 9.
자바스크자바스크립트 JavaScript | 문자열 처리: 템플릿 리터럴(Template Literal) ⭕ 자바스크립트 JavaScript | 문자열 처리: 템플릿 리터럴(Template Literal) ➡️ 템플릿 리터럴(Template Literal) ES6에서 등장한 내장된 문자열 표현식입니다. 템플릿 리터럴은 큰따옴표나 작은따옴표 대신 백틱(`)을 사용하여 문자열을 정의합니다. 이 방법을 통해 문자열 내에서 변수나 표현식을 ${}로 감싸 직접 삽입할 수 있습니다. 이는 코드의 가독성을 높이고, 문자열을 더욱 쉽게 조작할 수 있게 해 줍니다. 템플릿 리터럴을 사용하면 변수나 심지어는 함수의 결괏값을 문자열 안에 직접 삽입할 수 있어, 동적인 문자열 생성이 매우 간편해집니다. 이러한 특성은 HTML 요소를 동적으로 생성하는 등 웹 개발에서 자주 활용됩니다. let name = "Jane"; let ag.. 2024. 3. 9.
자바스크립트 JavaScript | 기본 구성 요소: 변수, 함수, 조건문, 삼항연산자, 반복문, 배열 ⭕ 자바스크립트 JavaScript | 기본 구성 요소: 변수, 함수, 조건문, 삼항연산자, 반복문, 배열 React 프로젝트 진행을 위한 자바스크립트 기본 구성 요소를 정리합니다. ➡️ 변수 데이터를 저장하는 데 사용되는 이름이 붙은 저장소 let, const, var 키워드를 사용하여 변수를 선언함 let name = "John"; const age = 30; ➡️ 함수 즉시실행함수 정의되자마자 즉시 실행되는 함수 주로 초기화 코드에 사용함 (function() { console.log("즉시 실행!"); })(); 파라미터 기본값 설정 함수에 파라미터를 전달하지 않았을 경우 기본값을 설정할 수 있음 function greet(name = "Guest") { console.log(`Hello, ${n.. 2024. 3. 9.
반응형