본문 바로가기

전체 글153

[TIL] Hydration 이란? 웹사이트는 두가지 방식으로 작동한다. 하나는 서버이고 하나는 클라이언트이다.서버 : 웹사이트의 데이터를 저장하고, 웹사이트의 페이지를 제공해주는 역할클라이언트 : 웹사이트를 보기 위해 사용하는 브라우저(크롬, 사파리 등)로 클라이언트는 서버에서 받은 데이터를 화면에 보여주는 역할 Hydration이란리액트같은 프레임워크를 사용할 때, 서버에서 먼저 웹페이지를 만들고, 그 페이지를 클라이언트에 보낸다. 그러면 클라이언트는 그 페이지를 받아서 화면에 보여주고, 리액트가 그 페이지에 기능을 추가하여 클릭이나 스크롤 같은 인터랙션을 할 수 있게 해준다. 이 과정을 hydration이라고 한다. Hydration Error하이드레이션 오류는 서버에서 보낸 웹페이지와 클라이언트에서 그 페이지를 처리할 때 서로 다르.. 2024. 8. 20.
[TIL] next.js Image 태그로 배경 이미지 적용하기 최종프로젝트를 진행하며 UI/UX 디자이너님이 피그마로 디자인을 해주셨다.css로 구현하기 어려운 디자인을 png 파일로 저장하여 해당 이미지를 불러와 배경 이미지로 적용해보자!next.js는 Image 태그를 제공하는데 이미지를 최적화해주는 장점이 있다.     의 파란 영역에 이미지를 넣어야 하는데 영상에 보는 것과 같이 모바일 환경에는 하단에 메뉴바가 고정 되어있어 메뉴바를 가리지 않게 신경 써야 했다. 변경 전 코드"use client";import Image from "next/image";import defaultImg from "../../../public/images/default.png";import Icon from "../../../public/icon/rightArrow.svg";i.. 2024. 7. 31.
[발표4회차] 프로토타입 객체와 생성자 함수자바스크립트에서 객체를 많이 쓰이는데 객체는 이름과 값을 가지는 속성들의 모음이다. let person = { name: 'John', age: 30, greet: function() { console.log('Hello, my name is ' + this.name); }}; 여기서 person 객체는 name, agem, greet을 가지고 있다. 이러한 형태로 여러 개를 만들고 싶다면 아래처럼 생성자 함수를 사용할 수 있다. function Person(name, age) { this.name = name; this.age = age; this.greet = function() { console.log('Hello, m.. 2024. 7. 24.
[TIL] React에서 key가 필요한 이유가 뭘까? DOM 노드의 자식들을 재귀적으로 처리할 때, React는 기본적으로 동시에 두 리스트를 순회하고 차이점이 있으면 변경을 생성한다. first second first second third Duke Villanova Connecticut Duke Villanova 위처럼 단순하게 구현하면 리스트의 맨 앞에 엘리먼트를 추가하는 경우 성능이 좋지 않다.React는 Duke와 Villanova 종속 트리를 그대로 유지하는 대신 모든 자식을 변경한다. 이러한 비효율은 문제가 될 수 있다. 이를 해결하기 위해  key 속성을 지원합니다. 자식들이 key를 가지고 있다면, React는 key를 통해 기존 트리와 이후 트리의 자식들이 일치하는지 확인한다. 예를 들어, 위 비효율적인 예시에 key를 .. 2024. 7. 24.
[DIL] 06 프로토타입 자바스크립트는 프로토타입 기반 언어이다. 클래스 기반 언어에서는 '상속'을 사용하지만 프로토타입 기반 언어에서는 어떤 객체를 원형으로 삼고 이를 복제(참조)함으로써 상속과 비슷한 효과를 얻는다. 유명한 프로그래밍 언어의 상당수가 클래스 기반인 것에 비교하면 프로토타입은 꽤나 독특한 개념이라 할 수 있다. 01 프로토타입의 개념 이해 6-1-1 constructor, prototype, instance위 그래프를 코드로 작성하면 다음과 같다.var instance = new Constructor(); 더 구체적으로 바꾸면 다음과 같다.윗변(실선)의 왼쪽 꼭짓점에는 Conjstructor(생성자 함수)를, 오른쪽 꼭짓점에는 Constructor . prototype이라는 프로퍼티를 위치시켰다. 왼쪽 꼭짓점으.. 2024. 7. 22.
swiper 캐러셀 라이브러리 https://swiperjs.com/demos Swiper DemosSwiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.swiperjs.com 2024. 7. 22.
[발표3회차] 클로저 개념정리클로저는 자바스크립트에서 중요한 개념 중 하나이다. 이 개념을 이해하려면 함수와 변수가 어떻게 동작하는 지 알아야 한다. 우선, 함수는 특별한 종류의 '작업'을 수행하는 코드 뭉치이다. 예를들어 우리가 만든 함수를 호출하면 그 안에 있는 코드들이 실행된다.클로저는 이 함수와 그 함수가 만들어진 환경(변수들의 집합)을 함께 기억하는 것이다. 이 말은 함수 안에서 정의된 함수가 외부 함수의 변수들에 접근할 수 있는 것이다.function outerFunction() { let outerVariable = '안녕'; // 바깥 함수에서 선언된 변수 function innerFunction() { console.log(outerVariable); // 바깥 함수의 변수를 사용 } return.. 2024. 7. 18.
[DIL] 05 클로저 01 클로저의 의미 및 원리 이해MDN에서는 클로저에 대해 "클로저는 함수와 그 함수가 선언될 당시 lexical environment의 상호관계에 따른 현상"이라고 정의하고 있다. 선언될 당시 lexical environment는 2장에서 소개한 실행 컨텍스트의 구성 요소 중 하나는 outerEnvironmentReference에 해당한다. LexicalEnvironment의 environmentRecord와 outerEnvironmentReference에 의해 변수의 유효범위인 스코프가 결정되고 스코프체인이 가능해진다고 했다. 어떤 컨텍스트 A에서 선언한 내부함수 B의 실행 컨텍스트가 활성화된 시점에는 B의 outerEnvironmentReference가 참조하는 대상인 A의 LexicalEnviro.. 2024. 7. 15.
[DIL] 04 콜백 함수 01 콜백 함수란콜백 함수는 다른 코드의 인자로 넘겨주는 함수이다. 콜백 함수를 넘겨받은 코드는 이 콜백 함수를 필요에 따라 적절한 시점에 실행한 것이다. callback은 '부르다', '호출(실행)하다'는 의미인 call과, '뒤돌아오다', '되돌다'는 의미인 back의 합성어로, '되돌아 호출해달라'는 명령이다. 어떤 함수 X를 호출하면서 '특정 조건일 때 함수 Y를 실행해서 나에게 알려달라'는 요청을 함께 보낸다. 이 요청을 받은 함수 X의 입장에서는 해당 조건이 갖춰졌는지 여부를 스스로 판단하고 Y를 직접 호출한다.이처럼 콜백 함수는 다른 코드 (함수 또는 메서드)에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수이다. 콜백 함수를 위임받은 코드는 자체적인 내부 로직에 의해 이 콜백 함수를 적.. 2024. 7. 13.
alert 디자인 라이브러리 https://notiflix.github.io/report 2024. 7. 12.
[DIL] 03 this 01 상황에 따라 달라지는 this자바스크립트에서 this는 기본적으로 실행 컨텍스트가 생성될 때 함께 결정된다. 실행 컨텍스트는 함수를 호출할 때 생성되므로, 바꿔 말하면 this는 함수를 호출할 때 결정된다고 할 수 있다. 함수를 어떤 방식으로 호출하느냐에 따라 값이 달라지는 것이다.  3-1-1 전역 공간에서의 this전역 공간에서 this는 전역 객체를 가리킨다. 개념상 전역 컨텍스트를 생성하는 주체가 바로 전역 객체이기 때문이다. 전역 객체는 자바스크립트 런타임 환경에 따라 다른 이름과 정보를 가지고 있다. 브라우저 환경에서 전역객체는 window이고 Node.js 환경에서는 global이다. 전역변수를 선언하면 자바스크립트 엔진은 이를 전역객체의 프로퍼티로도 할당한다. 변수이면서 객체의 프로퍼.. 2024. 7. 10.
[발표2회차] this와 콜백함수 this란this는  자기가 속한 객체를 가리킨다. 객체를 속상과 메서드(함수)를 가질 수 있는 일종의 상자라고 생각해보면 this는 그 상자 안에서 "내가 지금 속한 상자가 무엇인지"를 알려주는 역할을 한다. 아래 설명을 통해 각 상황에 따른 this를 살펴보자. 객체 내부에서 const 사람 = { 이름: '철수', 자기소개() { console.log(this.이름); // this는 '사람' 객체를 가리킴 }};사람.자기소개(); // "철수" 출력 this는 '사람'이라는 객체를 가리키고 있다. 그래서 'this.이름'은 '사람.이름'과 같다.  전역에서는 this는 윈도우를 가리킨다.전역에서 this는 브라우저 환경에서는 window라는 큰 상자를 가리킨다. 이 상.. 2024. 7. 8.

티스토리툴바