JavaScript (12) 썸네일형 리스트형 라이브러리 없이 라우터(Router) 만들기 오늘은 `react-router-dom` 라이브러리 없이 라우터를 만들어보면서 라우팅 시스템에 대해 공부해보려고 합니다. 라우팅 시스템 📖라이브러리 없이 라우팅 시스템을 개발하기 위한 2가지 방법이 있습니다. 첫 번째 Fragment 해시(해시 라우터)를 이용하는 방법과두 번째 history API(브라우저 라우터)를 이용하는 방법이 있습니다. history API는 `pushState``popState`메서드가 지원되면서 Fragment 해시를 쓰지 않고도 라우팅 시스템을 개발할 수 있지만 모든 브라우저에서 지원되는 라우터를 개발하기 위해선 아직까지 Fragment 해시 라우터를 사용해야 합니다. 이 포스팅에선 Fragment 해시를 이용해 라우터 구현 방법에 대해 소개하겠습니다. Fragment 해.. javascript 심화 7 (클로저) 클로저 📖1. 개념`클로저`는 함수와 그 함수가 선언된 렉시컬 환경의 조합입니다. 2. 렉시컬 스코프어디서 `호출했는지`가 아니라 어디에 `선언`했는지에 따라서 상위 스코프가 결정되는 것입니다!const x = 1;function foo() { const x = 10; bar();}function bar() { console.log(x);}foo(); // 1bar(); // 1 bar 함수는 foo 함수 내부에서 `호출`됐지만 전역에서 `선언`되었기 때문에 전역변수 x를 참조하게 돼서 1을 출력하게 됩니다! 3. 함수가 선언된 렉시컬 환경간단하게 설명하면 `클로저`란 외부 함수의 변수에 접근할 수 있는 내부 함수입니다!function outerFunc() { // 외부 함수의 변수 var x.. javascript 심화 4 (콜백함수) 콜백함수 📖다른 함수가 실행이 끝난 뒤 실행되는(=callback) 함수를 말합니다! 그리고 다른 함수로 인자를 넘겨주는 함수입니다! 즉, 콜백 함수는 다른 함수에 인자를 넘겨줌으로써 그 제어권도 함께 위임한 함수입니다. 콜백함수를 위임받은 코드는 자체적으로 내부 로직에 의해 콜백 함수를 적절한 시점에 실행하게 됩니다.function func(callback) { callback();}function callback() { console.log("callback 함수입니다.");}func(callback);// 결과 : callback 함수입니다. ❗간단하게 설명하면 함수를 등록하기만 하고 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 호출하는 함수! 제어권 📖1. 호출 시점콜백 함수의 제어권을 .. javascript 심화 1 (실행 컨텍스트) 실행 컨텍스트 📖실행할 코드에 대한 `환경 정보`들을 모아놓은 `객체`입니다. 이렇게만 말하면 이해가 잘 안 될 것 같으니 더 자세하게 설명해 드리겠습니다. 우선 실행 컨텍스트를 이해하기 위해선 `콜 스택`에 대한 이해가 반드시 필요합니다! 예시코드 ✅// ---- 1번var a = 1;function outer() { function inner() { console.log(a); //undefined var a = 3; } inner(); // ---- 2번 console.log(a);}outer(); // ---- 3번console.log(a); 실행 컨텍스트의 구성 순서📃코드실행 → 전역(in) → 전역(중단) + outer(in) → outer(중단) + inner(in) → inner(o.. javascript 기본 3 (기본형, 참조형 데이터와 불변성) 데이터 타입 📖자바스크립트에서 값의 타입은 크게 `기본형`, `참조형`으로 구분됩니다.구분 기준은 값의 저장 방식과 불변성 여부입니다. 1. 값의 저장 방식`기본형` : 값이 담긴 주소값을 바로 복제`참조형` : 값이 담긴 주소값들로 이뤄진 묶음을 가리키는 주소값을 복제 2. 불변성 여부`기본형` : 불변성을 띔.`참조형` : 불변성을 띄지 않음. * `불변성을 띈다`라는 말을 이해하기 위해서는 메모리 관점에서 봐야 하기 때문에 잠깐 메모리와 데이터에 대한 배경지식을 알아보도록 하겠습니다! 2-1. 메모리와 데이터비트(bit) 컴퓨터가 이해할 수 있는 가장 작은 단위 ex) 0, 10과 1을 가지고 있는 메모리를 구성하기 위한 작은 조각을 의미하고 이 조각들이 모여 메모리가 만들어집니다.바이트(byt.. Javascript 기본 2 (조건문, 반복문, 배열, 객체) 조건문 📖1. if문let x = 10;if (x > 0) { console.log("x는 양수입니다.");} if문은 조건이 참인 경우에만 코드를 실행합니다. 2. if-else문let x = -10;if (x > 0) { console.log("x는 양수입니다.");} else { console.log("x는 음수입니다.");} if-else문은 조건이 참인 경우와 거짓인 경우 각각 다른 코드를 실행합니다. 3. if-else if-else문let x = 0;if (x > 0) { console.log("x는 양수입니다.");} else if (x 여러 개의 조건을 순서대로 비교하여, 해당하는 조건에 맞는 코드를 실행합니다. 4. switch문let fruit = "사과";switch (.. Javascript 기본 1 (기본 문법) JS(자바스크립트)란? 📖언어는 사람과 사람 간 소통을 위해서 필요합니다. 그리고 사람과 컴퓨터와 소통이 필요한 순간이 생기는데 사람과 컴퓨터가 대화할 수 있는 방법이 바로 프로그래밍 언어입니다! 그중 가장 대표적인 `Javascript`에 대해서 설명해보려고 합니다!1. JS의 역사1995년 🌐 넷스케이프 커뮤니케이션이라는 곳에서 자바스크립트가 탄생했습니다!왜 생겼을까? -> 🖥️ 브라우저에 동작하기 하게 위해서 생겼습니다!(브라우저 동작 스크립트 언어)2005년 AJAX 등장! (비동기 웹 애플리케이션 개발 가능, 폭발적인 UX 향상 🚀)\2008년 V8 엔진 (google) 출시하면서 브라우저 속도가 빨라집니다! (super fast, 컴파일러🛠️, 메모리 관리 시스템👍)2009년 Nod.. [TIL] 24.07.17 쓰로틀링(성능 측정) Throttling 이란? 📖짧은 시간 간격으로 연속해서 이벤트가 발생했을 때, 과도한 이벤트 핸들러 호출을 방지하는 기법입니다. 1. 쓰로틀링 (throttling)일정 주 동안 이벤트 핸들러를 한 번만 실행하도록 제어하는 것 일정한 간격으로 한 번만 실행하는 기법이기 때문에 이벤트 처리를 제어하고, 성능 향상을 할 수 있습니다.예를 들면 스크롤 이벤트가 발생할 때 이벤트가 너무 많이 발생하면 성능 저하 문제가 생길 수 있기 때문에 이때 쓰로틀링을 적용하면 일정 주기 동안 이벤트를 제어하기 때문에 성능을 개선할 수 있습니다. 그래서 팀 소개 프로젝트에 쓰로틀링을 적용해보려고 합니다. 사용 방법실제로 작성한 코드 입니다.const throttleCallback = () => { const scro.. 이전 1 2 다음
