JS10 [모던 리액트 Deep Dive] 12장. 모든 웹 개발자가 관심을 가져야 할 핵심 지표 https://github.com/Study-FE-Techbook/Modern-React-Deep-Dive GitHub - Study-FE-Techbook/Modern-React-Deep-Dive: 모던 리액트 딥다이브 스터디모던 리액트 딥다이브 스터디. Contribute to Study-FE-Techbook/Modern-React-Deep-Dive development by creating an account on GitHub.github.com[12장] 모든 웹 개발자가 관심을 가져야 할 핵심 지표12.1 웹사이트와 성능웹사이트를 방문한 목적을 손쉽게 달성할 수 있어야 함목적을 달성하는 데 걸리는 시간이 짧아야 함웹사이트에서 개인정보가 누출되는 등의 사고 없이 보안이 철저해야 함12.2 핵심 웹 지.. 2024. 7. 28. 스크롤시 투명한 배경에서 배경색 넣기(feat. 화살표 클릭 시 맨 위로 이동하기) 스크롤시 투명한 배경에서 배경색 넣기bg에 이미지를 넣어놔서 처음 헤더를 transparent로 설정해줬다.메인 화면의 내용이 많아질수록 스크롤이 생길텐데 스크롤 하면 헤더에 배경색을 설정해줘서 내용이 겹쳐지는 현상을 방지해야 했다.✨ 스크롤시 투명한 배경 → 색 넣기const scrollStyle = { base: 'bg-transparent text-black', scroll: 'bg-black text-white',}export default function Header() { const [scrollPosition, setScrollPosition] = useState(0) useEffect(() => { const handleScroll = () => { setScrollP.. 2024. 7. 27. [코어자바스크립트] 7장. 클래스 [7장] 클래스1. 클래스와 인스턴스의 개념 이해상위클래스 - superclass하위클래스 - subclass2. 자바스크립트의 클래스생성자 함수 Array를 new 연산자와 호출하면 인스턴스가 생된다.이때 Array를 일종의 클래스라고 하면, Array의 prototype 객체 내부 요소들이 인스턴스에 상속된다고 볼 수 있다.인스턴스에 상속되는지(인스턴스가 참조하는지) 여부에 따라 스태틱 멤버와 인스턴스 멤버로 나뉜다.// 생성자 함수var Rectangle = function (width, height) { this.width = width this.height = height}// 프로토타입 메서드 정의Rectangle.prototype.getArea = function () { return .. 2024. 6. 18. [코어자바스크립트] 6장. 프로토타입 [6장] 프로토타입자바스크립트는 프로토타입 기반 언어클래스 기반 언어에서는 상속을 사용하지만 프로토타입 기반 언어에서는 어떤 객체를 원형으로 삼고 이를 복제함으로써 상속과 비슷한 효과를 얻는다.❓원형(prototype) 모든 객체는 다른 객체로부터 직접적으로 생성된다. 이 때 생성된 객체는 원본이 되는 객체를 원형이라고 부른다.1. 프로토타입의 개념 이해어떤 생성자 함수를 new 연산자와 함께 호출하면constructor에서 정의된 내용을 바탕으로 새로운 인스턴스가 생성된다.이때 instance에는 __proto__ 라는 프로퍼티가 자동으로 부여되는데이 프로퍼티는 constructor의 prototype이라는 프로퍼티를 참조한다.var suzi = new Person('Suzi')suzi.__proto_.. 2024. 6. 18. [코어자바스크립트] 5장. 클로저 [5장] 클로저1. 클로저의 의미 및 원리 이해클로저함수와 그 함수가 선언될 당시의 lexical envrionment의 상호관계에 따른 현상어떤 함수에서 선언한 변수를 참조하는 내부함수에서만 발생하는 현상→ 어떤 함수 A에서 선언한 변수 a를 참조하는 내부함수 B를 외부로 전달할 경우 A의 실행 컨텍스트가 종료된 이후에도 변수 a가 사라지지 않는 현상var outer = function () { var a = 1 var inner = function () { console.log(++a) } return inner}var outer2 = outer()console.log(outer2()) // 2console.log(outer2()) // 3inner 함수의 실행 결과가 아닌 inner함수.. 2024. 6. 17. 변수 선언 삼형제 var, let, const (feat. TDZ(Temporal Dead Zone)) 자바스크립트의 변수 선언할 때 제일 처음 배우는 var, let, const.... 이 셋을 집중비교해보면 TDZ라는 용어가 나온다..! TDZ에 대해 알아보자. 🤔👊🏻 ✨var vs. let vs. const특성varletconst범위(Scope)함수 범위 또는 전역 범위블록 범위블록 범위재선언(Redeclaration)가능불가능불가능재할당(Reassignment)가능가능불가능호이스팅(Hoisting)선언과 초기화가 함께 이루어짐선언만 호이스팅, 초기화는 이루어지지 않음선언만 호이스팅, 초기화는 이루어지지 않음일시적 사각지대(TDZ)해당 없음해당됨해당됨 ❓TDZ(Temporal Dead Zone)란let과 const로 선언된 변수가 호이스팅되는 과정에서 발생하는 일시적인 사각지대를 의미한다.변수는.. 2024. 6. 14. [코어자바스크립트] 4장. 콜백 함수 [4장] 콜백 함수1. 콜백 함수란?콜백함수: 다른 코드의 인자로 넘겨주는 함수콜백함수는 제어권과 관련이 깊음어떤 함수 X를 호출하면서 특정 조건일 때 함수 Y를 실행해서 나에게 알려달라는 요청을 보내는 것임.2. 제어권📍호출시점❓제어권실행흐름 or 프로세스var count = 0;var cbFunc = function() { console.log(count); if (++count > 4) clearInterval(timer);};var timer = setInterval(cbFunc, 300);// 실행 결과// 0 (0.3초)// 1 (0.6초)// 0 (0.9초)// 1 (1.2초)// 0 (1.5초)code호출 주체제어권cbFunc()사용자사용자setInterval(cbFun.. 2024. 6. 14. [코어자바스크립트] 3장. this [3장] this❓this 대부분의 객체지향언어에서 - 클래스로 생성한 인스턴스 객체JS에서 - 어디서든 사용 가능 (상황에 따라 this가 바라보는 대상이 달라짐)→ 함수와 객체(메서드)의 구분이 느슨한 자바스크립트에서 this는 실질적으로 이 둘을 구분하는 거의 유일한 기능임!1. 상황에 따라 달라지는 thisthis는 기본적으로 실행 컨텍스트가 생성될 때 함께 결정된다.실행 컨텍스트는 함수를 호출할 때 생성함 = this는 함수를 호출할 때 결정된다.📍전역 공간에서의 this전역공간의 this = 전역객체브라우저에서의 전역객체 = windowNode.js에서의 전역객체 = globalvar a = 1console.log(a) // 1console.log(window.a) // 1 (브라우저 환경에.. 2024. 6. 14. [코어 자바스크립트] 2장. 실행 컨텍스트 [2장] 실행 컨텍스트1. 실행컨텍스트란?스택: 후입선출 큐: 선입선출실행할 코드에 제공할 환경 정보들을 모아놓은 객체동일 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고, 이를 콜 스택(call stack)에 쌓아올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드들을 실행한다.실행 컨텍스트를 구성하는 방법: 함수를 실행하는 것function outer() { const outerVar = 'Outer' function inner() { const innerVar = 'Inner' console.log(innerVar) // Inner console.log(outerVar) // Outer console.log(globalVar) // Glob.. 2024. 6. 11. 이전 1 2 다음 반응형
