일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 이벤트 버블링
- 자바스크립트 함수
- props와 state 차이점
- undeclared
- 깊은 복사
- 얕은 복사
- 이벤트 캡처링
- MPA
- 주소창에 naver 입력시 일어나는 일
- 서버 사이드 렌더링
- webpack
- CORS
- 스코프 체인
- 자바스크립트의 클래스
- 프로미스
- 브라우저 렌더링원리
- 호이스팅
- 실행 컨텍스트
- 자바스크립트
- 세션 스토리지
- polyfill
- react
- 클라이언트 사이드 렌더링
- 리액트의 생명 주기
- 로컬 스토리지
- 가상 dom
- 변수 생성 단계
- async/await
- CSS
- 리액트
- Today
- Total
목록프론트엔드 (32)
Gapus Dev Blog
리액트(React) 설명 리액트는 페이스북(현재 메타)에서 개발된 사용자 인터페이스(UI)를 구축하기 위한 JavaScript 라이브러리 리액트를 사용하면 동적이고 반응형인 웹 애플리케이션 개발 가능 컴포넌트 기반 아키텍처를 사용하여 UI를 작은 조각으로 분할하고, 이를 조합하여 복잡한 UI 구성 가능 배우기 위해 필요한 것 JavaScript 기초 React는 JavaScript 라이브러리로 JavaScript 기본 개념과 문법을 이해하는 것이 중요 변수, 함수, 조건문, 반복문 등의 기본 개념 숙지 HTML 및 CSS 기초 React에서 UI를 개발하기 위해 HTML과 CSS의 기본적인 지식 필요 HTML을 사용하여 컴포넌트 구조를 작성, CSS를 사용하여 스타일링을 할 수 있어야 한다. JSX 문법..
자바스크립트 함수 설명 코드를 재사용하고 모듈화하는데 사용되는 중요한 개념 함수는 특정 작업을 수행하고 값을 반환 가능 선언 방법 함수 선언식 함수 선언식은 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)을 사용하여 ..