일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- async/await
- 클라이언트 사이드 렌더링
- 변수 생성 단계
- 이벤트 캡처링
- 자바스크립트
- 리액트
- 세션 스토리지
- 얕은 복사
- react
- 가상 dom
- props와 state 차이점
- 프로미스
- 자바스크립트의 클래스
- 실행 컨텍스트
- 서버 사이드 렌더링
- 로컬 스토리지
- 리액트의 생명 주기
- 깊은 복사
- CSS
- undeclared
- polyfill
- 호이스팅
- 브라우저 렌더링원리
- 스코프 체인
- MPA
- 자바스크립트 함수
- CORS
- 이벤트 버블링
- webpack
- 주소창에 naver 입력시 일어나는 일
- Today
- Total
목록프론트엔드/JavaScript (23)
Gapus Dev Blog
얕은 복사 설명 원본 객체의 참조를 복사하는 것 복사된 객체와 원본 객체가 같은 메모리를 공유 한 객체를 수정하면 다른 객체도 영향 받는다. Object.assign(), 전개 구문( ... )을 사용하여 구현 가능 사용하는 경우 객체의 크기가 복사할 필요가 없는 속성이 많을 때 메모리를 절약하고자 할 때 객체의 구조가 단순하고 얕은 레벨의 중첩 구조를 가지고 있을 때 예시 let original = { name: 'John', age: 25 }; let copy = Object.assign({}, original); console.log(copy); // { name: 'John', age: 25 } copy.name = 'Jane'; console.log(original); // { name: 'Jo..
ECMAScript( ES ) Ecma 인터내셔널에 의해 제정된 ECMA-262 기술 규격에 의해 정의된 범용 스크립트 언어 현재 ECMAScript 2023(ES14) 버전까지 있다. ECMAScript 2015( ES6 ) let, const Arrow 함수 spread Operator for... of 반복문 Map Set Class Promise 심볼(Symbol) 모듈 기본 파라미터 값 Rest 파라미터 ECMAScript 2016( ES7 ) 제곱 연산자( ** ) Array.prototype.includes() 지수 연산자 ECMAScript 2017( ES8 ) async/await Object.entries() Object.values() String padding Object.getOw..
리터럴 자바스크립트에서 리터럴은 값을 직접 표현하는 방식을 칭함 변수에 할당되는 값 자체를 리터럴이라고 할 수 있다. 숫자 리터럴 숫자를 직접 표현하는 방식 표현 let num1 = 10; // 정수 리터럴 let num2 = 3.14; // 실수 리터럴 let num3 = 0b1010; // 이진수 리터럴 (10진수로 10을 표현) 문자열 리터럴 문자열을 표현하는 방식 큰따옴표( " ) 혹은 작은따옴표( ' )로 감싸서 사용 Javascript에 대해 - 배열, 문자열 표현 let str1 = "Hello, World!"; // 큰따옴표로 감싼 문자열 리터럴 let str2 = 'JavaScript'; // 작은따옴표로 감싼 문자열 리터럴 불리언(Boolean) 리터럴 참(True)과 거짓(False)..
AJAX(Asynchronous JavaScript and XML) 설명 웹 애플리케이션에서 비동기적으로 서버와 데이터를 주고받는 기술 페이지 전체를 새로고침하지 않고도 동적으로 데이터를 업데이트 가능 주로 JS와 함께 사용되며, XMLHttpRequest 객체를 이용하여 서버와 통신 동작 과정 var xhr = new XMLHttpRequest(); // XMLHttpRequest 객체 생성 xhr.open('GET', '데이터를_불러올_URL', true); // 요청 설정 (GET 방식, 데이터를 불러올 URL, 비동기적 요청) xhr.setRequestHeader('Content-Type', 'application/json'); // 요청 헤더 설정 xhr.onreadystatechange = f..
SSR(Server-Side Rendering) SSR는 웹 애플리케이션의 초기 로딩 시 서버에서 필요한 HTML, CSS, JS 파일을 생성하여 클라이언트로 전달하고, 이를 받아와 화면을 구성하는 방식 동작 방식 초기 요청 사용자가 웹 페이지에 접속하면, 클라이언트는 서버에 초기 페이지 로딩을 요청 서버에서 렌더링 서버는 클라이언트에게 필요한 HTML, CSS, JS 파일 등을 생성하여 응답 서버는 필요한 데이터를 가져와 페이지를 완전히 구성 후, HTML 형태로 클라이언트에 전달 클라이언트 렌더링 클라이언트는 서버로부터 받은 HTML 파일을 받아와 화면을 구성 JS파일은 주로 상화작용적인 요소나 동적인 데이터 처리를 담당 장점 초기 로딩 속도 서버에서 필요한 콘텐츠를 렌더링하여 클라이언트에게 전달하기..
CSR(Client-Side Rendering) CSR는 웹 애플리케이션의 초기 로딩 시 클라이언트로 모든 필요한 파일(HTML, CSS, JavaScript 등)을 전달하여 클라이언트에서 렌더링을 처리하는 방식 동작 방식 초기 요청 사용자가 웹 페이지에 접속하면, 서버는 클라이언트에게 필요한 파일을 제공 HTML파일에는 렌더링에 필요한 기본적인 구조와 비어있는 콘텐츠가 포함 파일 다운로드 클라이언트는 서버로부터 HTML, CSS, JS 파일 등을 다운로드 JS 파일은 주로 애플리케이션의 로직과 동적인 데이터 처리를 담당 렌더링 클라이언트는 JS를 사용하여 다운로드한 파일을 해석 DOM(Document Object Model)을 구성하여 화면을 렌더링 데이터 요청이 필요한 경우, AJAX나 API를 통해..