일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
- MPA
- CORS
- props와 state 차이점
- 클라이언트 사이드 렌더링
- 주소창에 naver 입력시 일어나는 일
- react
- 자바스크립트의 클래스
- 실행 컨텍스트
- 호이스팅
- 로컬 스토리지
- 자바스크립트 함수
- 이벤트 캡처링
- webpack
- 스코프 체인
- 이벤트 버블링
- 브라우저 렌더링원리
- 세션 스토리지
- 깊은 복사
- 얕은 복사
- 자바스크립트
- CSS
- 리액트의 생명 주기
- async/await
- polyfill
- 서버 사이드 렌더링
- 프로미스
- 변수 생성 단계
- 가상 dom
- undeclared
- 리액트
- Today
- Total
목록프론트엔드/JavaScript (23)
Gapus Dev Blog
require 설명 require는 Node.js에서 사용되는 키워드 CommonJS 방식으로 모듈을 가져올 때 사용 주로 서버 사이드 개발에서 많이 사용 동기적으로 모뉼을 가져오며, 가져온 모듈을 변수에 할당하여 사용 예시 const express = require('express'); import 설명 import는 ES6부터 도입된 JavaScript의 표준 문법 브라우저 환경이나 최신 JavaScript 환경에서 사용 비동기적으로 모듈을 가져오며, 가져온 모듈을 변수에 할당하거나 모듈의 특정 멤버를 직접 가져올 수 있다. 예시 import React from 'react'; require과 import의 차이점 require import CommonJS 방식 ES6 모듈 시스템 동기적으로 모듈을 ..
자바스크립트 함수 설명 코드를 재사용하고 모듈화하는데 사용되는 중요한 개념 함수는 특정 작업을 수행하고 값을 반환 가능 선언 방법 함수 선언식 함수 선언식은 function 키워드를 사용하여 함수를 정의하는 방법 함수의 이름과 매개변수를 지정할 후 중괄호 내부에 함수의 동작을 작성 함수 선언식은 호이스팅에 영향을 받아 함수 정의를 코드의 상단으로 끌어올리기 때문에, 함수 선언 이전에 호출해도 정상 작동 function 함수이름(매개변수1, 매개변수2, ...) { // 함수의 동작 return 결과값; } function add(a, b) { return a + b; } 함수 표현식 함수 표현식은 일급 객체로서 함수를 변수에 할당하고 다른 함수의 인수로 전달하거나 반환값으로 사용하는 장점이 있다. 함수 ..
클래스(Class) 설명 객체 지향 프로그래밍에서 사용되는 개념 객체를 생성하기 위한 템플릿 클래스를 사용하면 비슷한 속성과 메서드를 가진 객체를 쉽게 생성 가능 속성은 객체의 상태를 나타내는 변수이고, 메서드는 객체의 동작을 정의하는 함수 생성자(constructor)라는 특별한 메서드를 가지고 있으며, 객체를 생성할 때 초기화 작업 수행 클래스는 여러 개의 객체를 생성할 수 있으며, 각각의 객체는 독립적인 상태와 동작을 가질 수 있다. 기본 문법 class ClassName { constructor() { // 객체 초기화 작업 수행 } method1() { // 메서드 동작 정의 } method2() { // 메서드 동작 정의 } } let obj = new ClassName(); // 클래스의 객..
스코프 설명 스코프(Scope)는 자바스크립트에서 변수와 함수의 유효 범위를 의미 변수와 함수가 어디에서 선언 되었는지에 따라 결정되며, 코드 안에서 해당 변수나 함수에 접근할 수 있는 영역을 제한 스코프의 종류 전역 스코프(Global Scope) 코드 어디에서든 접근할 수 있는 최상위 스코프 전역 변수와 전역 함수는 전역 스코프에 선언되어 어디에서든 사용 가능 예시 var globalVariable = "전역 변수"; function globalFunction() { console.log(globalVariable); // 전역 변수에 접근 가능 } globalFunction(); // 출력: "전역 변수" 지역 스코프(Local Scope 또는 Function scope) 함수 내부에서 선언된 변수..
== 연산자 설명 동등 비교 연산자 비교하려는 두 값의 타입이 다를 경우 타입 강제 변환을 하고 비교를 진행 타입 강제 변환이 일어나기 때문에 예상치 못한 결과 가능성 있음 사용하는 이유 타입 강제 변환 비교하려는 값의 타입이 다를 경우 강제 변환을 실행 명시적인 타입 변환 없이도 값을 비교 할 수 있도록 돕는다. 유연한 비교 타입 강제 변환으로 다른 타입과 값을 비교할 수 있다. 일부 상황에서 유용 호환성 유지 오래된 자바스크립트 코드와의 호환성 유지하기 위해 존재 예시 // '==' 연산자 예시 console.log(5 == "5"); // true console.log(0 == false); // true console.log(null == undefined); // true console.log(..
Map 설명 키와 값의 쌍을 저장하는 컬렉션 객체와 유사하지만, Map은 키에 다양한 데이터 타입 사용 가능 객체와 달리, Map은 순서를 보장하고 키의 중복을 허용하지 않는다. 데이터를 쉽게 저장하고 검색 가능 다양한 메서드를 제공해 데이터를 추가, 삭제, 수정, 조회 가능 사용해야 하는 경우 키와 값 쌍으로 데이터를 저장하고자 할 때 키와 값을 쌍으로 저장하기 때문에, 데이터를 키와 값 형태로 관리 해야할 때 유용 사용자 정보를 키로 하고 해당 사용자의 데이터를 값으로 저장하는 경우 순서가 중요한 경우 데이터의 순서를 보장하기 때문에, 데이터를 추가한 순서대로 순회하거나 처리할 때 유용 작업 목록을 순서대로 처리하고자 할 때 동작 원리 Map은 내부적으로 해시 테이블(hash table)을 사용하여 ..