🚩 이 글은 [웹퍼블리싱 완전 정복 : 모션 디자인으로 완성하는 반응형 웹 디자인] 강의를 들으며 정리한 내용입니다. Parallax Scrolling 이란?: 레이어별 스크롤 속도를 다르게 하여 입체감을 주는 디자인 기법이다. 예시 사이트https://www.firewatchgame.com/ parallax scrolling 기법을 구현하는 방법은 2가지가 있다. 1) 자바스크립트를 이용하는 방법 const div1 = document.getElementById("div-1");const div2 = document.getElementById("div-2");window.addEventListener("scroll", (e) => { div1.style.transform =..
자바스크립트에서는 값이 항상 특정 자료형, 예를 들어 문자열이나 숫자와 같은 형태로 존재한다.그리고 자바스크립트 언어 레벨에서 값으로 취급하는 것은 무엇이든 변수에 넣을 수 있다는 원칙이 있다. 자바스크립트에서는 값으로 취급하는 범위가 매우 넓은데 숫자나 문자열뿐만 아니라 함수, 배열 등도 모두 값으로 취급한다.또한, 자바스크립트의 변수는 어떤 특정 타입과 연결되지 않으며 모든 타입의 값으로 할당 및 재할당이 가능하다.let foo = 42; // foo는 Number 타입이었다가foo = "bar"; // 이제 foo는 String 타입이 되었고foo = true; // 지금은 Boolean 타입이 되었다. 이처럼 자료의 타입은 있지만 변수에 저장되는 값의 타입은 변할 수 있는 언어를 "동적 타입 언..
✅ 자바스크립트에서 식별자(Identifier)란? 코드 내의 변수, 함수, 혹은 속성을 식별하는 문자열이다. 즉 변수, 함수, 속성 명을 지을 때 사용하는 이름이다.let age = 31function setAge() {}const o = { day: 6,}// age, setAge, o, day가 식별자 - 대소문자를 구별하며 유니코드 글자, $, _, 숫자(0-9)로 구성할 수 있지만, 숫자로 시작할 수는 없다.- 공백문자는 사용할 수 없다.- 자바스크립트 예약어(if, else, for 등..)는 사용할 수 없다.- 길이 제한은 없으나 통상적으로 길게 쓰지는 않는 편이다.- 식별자는 코드의 일부이지만 문자열은 데이터이기 때문에 식별자와 문자열은 다르다.- 식별자를 문자열로 변환하는 방법은 ..
프로토타입(Prototype) 이란? 자바스크립트에서는 객체를 상속하기 위해 프로토타입(prototype)이라는 방식을 사용한다. 자바스크립트의 모든 객체들은 메서드와 속성을 상속받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다. 프로토타입 객체도 또 다시 상위 프로토타입 객체로부터 메서드와 속성을 상속받을 수 있고 그 상위 프로토타입 객체도 마찬가지이다. 이를 프로토타입 체인(prototype chain)이라 부르며, 다른 객체에 정의된 메서드와 속성을 한 객체에서 사용할 수 있도록 하는 근간이 된다. → 상속되는 속성과 메서드들은 각 객체가 아니라 객체의 생성자의 프로토타입이라는 속성에 정의되어 있는 것이다. 자바스크립트에서는 객체 인스턴스와 프로토타입 간의 연결이 구성..
1️⃣ 동기식 처리 모델 vs 비동기식 처리 모델 글로 설명하기 전에 동기와 비동기를 비유한 아래 그림을 보면 이해가 훨씬 쉬울 것 같다. 동기식 처리 모델 (Synchronous processing model) 동기식 처리 모델은 태스크(task)를 직렬적으로 처리한다. → 태스크는 순차적으로 실행되며 어떤 작업이 수행 중이면 다음 작업은 대기하게 된다. 동기 프로그래밍 const name = 'Miriam'; const greeting = `Hello, my name is ${name}!`; console.log(greeting); 브라우저는 위 코드를 프로그램을 작성한 순서대로 한 줄씩 실행한다. 1) name이라는 문자열을 선언한다. 2) name을 사용하여 greeting이란 또다른 문자열을 선..
호이스팅에 대해서는 옛날에 퍼블리셔 수업에서 제이쿼리를 배울 때 함수를 어디에다 선언해도 사용할 수 있도록 선언을 맨위로 끌어올려주는 기술이라고 배웠던 기억이 난다. 지금까지 그정도의 개념만 가지고 코드를 작성하는데에 문제는 없었지만 자바스크립트에 대해 제대로 공부하고 있으니 자바스크립에서의 호이스팅에 대해서도 자세하게 알아보자. 1️⃣ 호이스팅이란? 자바스크립트는 ES6에서 도입된 let, const를 포함한 모든 선언(var, let, const, function, function*, class)을 호이스팅한다. 여기서 호이스팅이란 무엇일까? 호이스팅(hoisting)에 대한 다양한 정의를 찾아보았다. "인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다." - MDN "..
자바스크립트에서 함수는 일급객체(first-class object)이다.일급 객체란 변수처럼 대상을 다룰 수 있는 것을 얘기하는데 즉, 자바스크립트에서 함수는 변수처럼 다룰 수 있다.클로저는 함수의 일급객체성질을 이용한다. 함수가 생성될 때 함수 내부에서 사용되는 변수들이 외부에 존재하는 경우 그 변수들은 함수의 스코프에 저장된다.함수와 함수가 사용하는 변수들을 저장한 공간을 클로저라고 한다. 여기까지는 아직 무슨 말인지 이해가 안가니 클로저의 정의에 대해 더 찾아보기로 했다. 클로저(Closure) 정의 찾아보기 - 함수와 그 함수가 선언된 어휘적 환경( Lexical Environment)의 조합이다.- 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 가르킨다.- 내부함수..
브라우저 콘솔의 Sources 탭에서 원하는 라인의 라인넘버를 클릭한 뒤 새로고침하면 해당 라인에 브레이크 포인트가 걸려 해당 라인에서 프로그램이 멈춰있게 된다. debugger 기본 사용방법 정리글 아래와 같은 예시 코드를 디버깅할 때 2번 라인(n0 ='n0')에 브레이크 포인트를 걸고 우측 노란 표시된 버튼(한 줄씩 실행하는 버튼)을 클릭하면 Scope의 Global에서 n0를 확인할 수 있다. → 변수 선언 시 var, let, const 등을 붙이지 않고 이름만 주면 그 값은 Global에 저장된다. ESC를 눌러 console을 열고, n0를 입력하면 n0값을 가져온다. → 자바스크립트는 어떤 변수를 읽으려고 할 때 Scope에서 변수를 찾는다. Scope의 Script 안에 변수가 없으면 G..
JavaScript의 런타임 모델은 코드의 실행, 이벤트의 수집과 처리, 큐에 대기 중인 하위 작업을 처리하는 이벤트 루프에 기반하고 있다. 이는 C 또는 Java 등 다른 언어가 가진 모델과는 다르다. 이벤트 루프 (Event Loop) : Call Stack 내에서 현재 실행중인 task가 있는지 그리고 Event Queue에 task가 있는지 반복하여 확인한다. 만약 Call Stack이 비어있다면 Event Queue 내의 task가 Call Stack으로 이동하고 실행된다. 브라우저는 단일 스레드에서 이벤트 드리븐(event-driven)방식으로 동작한다. 자바스크립트는 단일 스레드 기반의 언어이다. (💡 자바스크립트가 단일 스레드 기반의 언어라는 말은 '자바스크립트 엔진이 단일 호출 스택을 사..
초보자를 대상으로 하는 자바스크립트 기초 강의를 빠르게 수강하며 내가 이미 알고있는 내용은 제외하고 기존에 놓쳤던 내용이나 알고있지만 헷갈리는 내용들만 정리해보았다. (지극히 개인적인 기준) [강의] 인프런 - 렛츠기릿 자바스크립트 [무료] [리뉴얼] 렛츠기릿 자바스크립트 - 인프런 | 강의 본 강의에서는 자바스크립트를 활용해 프로그래밍 사고력을 기르는 연습을 합니다. 웹 게임인 구구단을 시작으로 끝말잇기, 숫자 야구, 반응 속도 테스트, 틱택토, 로또 추첨기, 가위바위보, 카 www.inflearn.com 0자릿수 표현하기 5e4 // 50000 5e-4 // 0.0005 진법 표현하기 2진법 (0b~) 8진법 (0o~ 또는 0~) 16진법 (0x~) // 2진법 0b111 // 7 // 8진법 011..
