[7장] 코어 자바스크립트 클래스
·
Javascript/코어 자바스크립트
7장 클래스7-1. 클래스와 인스턴스의 개념 이해음식은 과일의 상위 클래스, 과일은 음식의 하위클래스하위 개념은 상위 개념을 포함하면서 더 구체적인 개념을 가짐클래스는 하위로 갈수록 상위 클래스의 속성을 상속하면서 더 구체적인 요건이 추가/변경됨인스턴스(instance) : 어떤 클래스의 속성을 지니는 실존하는 개체사례 : 어떤 조건에 부합하는 구체적인 예시한 인스턴스는 하나의 클래스만을 바탕으로 만들어짐위 사진에서 감귤, 오렌지, 레몬 등이 해당프로그래밍에서는 클래스가 먼저 정의돼야만 그로부터 공통적인 요소를 지니는 개체들을 생성할 수 있음7-2. 자바스크립트의 클래스자바스크립트는 프로토타입 기반의 언어이므로 클래스의 개념 존재 X프로토타입 체이닝에 의한 참조로 클래스와 유사한 기능을 구현한 것인스턴스..
[6장] 코어 자바스크립트 프로토타입
·
Javascript/코어 자바스크립트
6장 프로토타입클래스 기반 언어 : 상속을 사용자바스크립트프로토타입(prototype) 기반 언어어떤 객체를 원형(prototype)으로 삼고 이를 참조함으로써 상속과 비슷한 효과6-1. 프로토타입의 개념 이해6-1-1. constructor, prototype, instancevar instance = new Constructor();어떤 생성자 함수를 new 연산자와 함께 호출하면Constructor에서 정의된 내용을 바탕으로 새로운 인스턴스 생성새롭게 생성된 인스턴스에는 __proto__ 라는 프로퍼티가 자동으로 부여이 프로퍼티는 Constructor의 prototype 이라는 프로퍼티를 참초🔍 prototype 과 __proto__prototype객체인스턴스가 사용할 메서드 저장생성자 함수로부터..
[5장] 코어 자바스크립트 클로저
·
Javascript/코어 자바스크립트
05장 클로저5-1. 클로저의 의미 및 원리 이해💡 클로저(Closure)Closure : 닫혀있음, 폐쇄성, 완결성자바스크립트 고유 개념 X, 함수형 프로그래밍 언어의 보편적인 특성A closure is the combination of a function and the lexical environment within which that function was declared.클로저는 함수와 그 함수가 선언될 당시의 lexical environment의 상호관계에 따른 현상 (MDN)lexicalEnvironment 중에서도 outerEnvironmentReference에 해당lexicalEnvironment의 environmentRecord와 outerEnvironmentReference에 의해 변..
[4장] 코어 자바스크립트 콜백 함수
·
Javascript/코어 자바스크립트
4장 콜백 함수4-1. 콜백 함수란?콜백 함수 (callback function)다른 코드의 인자로 넘겨주는 함수(with 제어권)함수의 제어권이 위임받은 코드에게 있음제어권 - 호출 시점, 인자callback : 부르다, 실행하다 call + 뒤돌아오다, 되돌다 back → 되돌아 호출해달라.콜백 함수를 위임받은 코드가 자체적인 내부 로직에 의해 콜백 함수를 적절한 시점에 실행4-2. 제어권4-2-1. 호출 시점콜백 함수 예제 - setInterval()var intervalID = scope.setInterval(func, delay[, param1, param2, ...]);scope : window 객체 (생략하고 함수처럼 사용)delay(밀리초)마다 func 실행하며 리턴값 없음반복적으로 실행되..
[3장] 코어 자바스크립트 this
·
Javascript/코어 자바스크립트
3장 this3-1. 상황에 따라 달라지는 thisjs에서 this는 실행 컨텍스트가 생성될 때 함께 결정됨함수를 호출할 때 결정3-1-1. 전역 공간에서의 this전역 공간에서의 this : 전역 객체전역 컨텍스트를 생성하는 주체가 전역 객체브라우저 환경 this: windowNode.js: globalvar a = 1;console.log(a); // 1console.log(window.a); // 1console.log(this.a); // 1전역변수 선언 시 js 엔진은 전역객체의 프로퍼티로 할당js의 모든 변수는 특정 객체의 프로퍼티로서 동작하기 때문특정 객체란 실행 컨텍스트의 LE실행 컨텍스트는 변수를 수집해서 LE의 프로퍼티로 저장전역 컨텍스트 LE는 전역 객체를 그대로 참조console에 ..
[2장] 코어 자바스크립트 실행 컨텍스트
·
Javascript/코어 자바스크립트
2장 실행 컨텍스트실행할 코드에 제공할 환경 정보들을 모아놓은 객체2-1. 실행 컨텍스트란?🔍 스택후입선출stack overflow : Stack 영역의 메모리가 지정된 범위를 넘어갈 때 발생🔍 큐선입선출실행 컨텍스트동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트 구성동일한 환경전역공간, 함수 등이를 콜 스택(call stack)에 쌓아 올리고가장 위에 쌓여있는 컨텍스트와 관련 있는 코드들을 실행하여 전체 코드의 환경과 순서를 보장실행 컨텍스트와 콜 스택// ---------------------------- (1) var a = 1; function outer() { function inner() { console.log(a); // undefined var a = ..
[1장] 코어 자바스크립트 데이터 타입
·
Javascript/코어 자바스크립트
01장 데이터 타입1-1. 데이터 타입의 종류기본형Number, String, booleannull, undefinedSymbol(ES6)값이 담긴 주솟값을 바로 복제불변성참조형ObjectArrayFunction, Date, RegExpMap, WeakMap, Set, WeakSet(ES6)모두 객체의 하위 분류에 속함값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제1-2. 데이터 타입에 관한 배경지식1-2-1. 메모리와 데이터비트는 고유한 식별자를 통해 위치를 확인비트 → 바이트(8비트)자바, C언어 등 정적 타입 언어는 메모리의 낭비를 최소화하기 위해 데이터 타입별로 할당할 메모리 영역이 다름js는 메모리 용량이 월등히 커진 상황에서 등장메모리 공간에 엄격하지 않아 형변환에 대한 복잡도가 ..
[스프린트] 코드잇 스프린트 회고
·
ETC
스프린트 합격 후기글을 올린지 엊그제 같은데, 벌써 6개월이라는 시간이 흘러 회고록을 작성하고 있다. 😵‍💫  🤔 코드잇 스프린트 지원 계기  구체적인 계기는 이 포스팅을 참고해 주세요 ! https://ssseeo0.tistory.com/120 [스프린트] 코드잇 스프린트 6기 합격 후기 (프론트엔드 부트캠프)코드잇 스프린트 ? 그게 뭔데 ? 프론트엔드 부트캠프로 내일배움카드로 수강비를 무료로 수강할 수 있고, 약 30만원의 훈련장려급도 지급 받을 수 있다 !약 6개월 간의 과정으로 월~목은 9시부터ssseeo0.tistory.com 회고하는 시점에 저 글을 읽으니 잊고 있던 그때의 감정이 새록새록 떠오른다✨ 새로운 시작에 대한 설렘과 열정으로 가득했던 과거의 나로부터 다시 영감을 얻는다. 이 소..
[14, 15장] 모던 리액트 Deep Dive 스터디 17회차
·
React/모던 리액트 Deep Dive
14장 웹사이트 보안을 위한 리액트와 웹페이지 보안 이슈14.1 리액트에서 발생하는 크로스 사이트 스크립팅 (XSS)XSS : Cross-Site Scripting웹사이트 개발자가 아닌 웹사이트에 악성 스크립트를 삽입해 실행할 수 있는 취약점사용자가 입력할 수 있고 이 입력을 다른 사용자에게 보여줄 수 있는 경우 발생사용자가 프론트엔드 개발자처럼 script도 실행될 수 있으면 쿠키를 획득해 사용자 정보(토큰)를 탈취할 수 있음❓리액트에서의 XSS 이슈는 어떻게 발생하나?14.1.1 dangerouslySetInnerHTML propdangerouslySetInnerHTML브라우저 DOM에서 innerHTML을 사용하기 위한 React의 대체 방법사용자가 입력한 내용을 브라우저에 표시하는 용도로 사용_ ..
[12, 13장] 모던 리액트 Deep Dive 스터디 16회차
·
React/모던 리액트 Deep Dive
12장 모든 웹 개발자가 관심을 가져야 할 핵심 웹 지표12.1 웹사이트와 성능사용자가 웹사이트 방문 시 기대하는 사항웹사이트를 방문한 목적을 쉽게 달성해야 함위 목적을 달성하는 시간이 짧아야 함개인정보 누출 등의 사고 X ,보안 철저이러한 목적만 잘 달성된다면 웹사이트의 기술은 사용자에게 중요하지 않음.최신 기술을 활용하더라도 결국엔 사용자가 느끼는 성능이 가장 중요한 것웹사이트의 성능과 사용자 경험 사이의 상관관계로딩 속도가 빠를수록 구매율 증가로딩이 늦어질수록 전환률 감소페이지 로드 시간 0 ~ 2초 사이가 가장 높은 전환율 달성사용자가 민감한 성능소비자 70%가 커머스 사이트 방문에 영향빠르게 로딩할 수 있으면 애니메이션, 동영상 X구글 웹 사이트 성능에 관한 통계전체 웹페이지를 표시하는데 필요한..
[10,11장] 모던 리액트 Deep Dive 스터디 15회차
·
React/모던 리액트 Deep Dive
10장 리액트 17과 18의 변경 사항 살펴보기10.1 리액트 17 버전 살펴보기호환성이 깨지는 변경 사항을 최소화한 것이 가장 큰 특징리액트 16 버전에서 17버전으로 업그레이드할 수 있도록 함10.1.1 리액트의 점진적인 업그레이드주 버전 업데이트 : 더 이상 호환되지 않는 API나 이전 버전과 작동 방식이 다른 경우버전이 바뀌는 경우 전체 웹 서비스가 새로운 버전으로 완전히 업그레이드 되거나 현재 버전에 머물러 있어야 함리액트 17버전부터는 기존 버전과 새로운 버전을 혼용해서 사용할 수 있도록. 즉 점진적으로 적용할 수 있도록 함 (한 번에 버전 업그레이드하기에 부담스러운 경우)10.1.2 이벤트 위임 방식의 변경onClicknoop 이라는 핸들러 추가noop (no operation) : 아무 일..
[9장] 모던 리액트 Deep Dive 스터디 14회차
·
React/모던 리액트 Deep Dive
9장 리액트 개발 도구로 개발 및 배포 환경 구축하기9.1 Next.js로 리액트 개발 환경 구축하기create-react-app과 create-next-app은 각각 리액트, 넥스트 애플리케이션을 손쉽게 만들기 위한 CLI(Command Line Interface) 도구애플리케이션 구축에 필요한 대부분의 작업을 대신해 주기 때문에 프로젝트 구조를 공부하기는 어려움9.1.1 create-next-app 없이 하나씩 구축하기1️⃣ package.json 생성2️⃣ Next.js 실행에 필요한 라이브러리 설치3️⃣ devDependencies에 필요한 패키지 설치npm init npm i react react-dom nextnpm i @types/node @types/react @types/react-dom..
ssseeo0
서영이의 개발 블로그