현인

이전 챕터에서는 Next.js 어플리케이션의 스타일링 방법에 대해 알아봤다. 이번 장에서는 커스텀 폰트와 hero image를 추가하는 방법에 대해 다뤄볼 예정이다.hero image란?웹사이트나 애플리케이션에서 가장 상단에 큰 배너 형식으로 배치되는 이미지. 보통 첫 화면에서 사용자가 가장 먼저 보게 되는 이미지로, 브랜드의 메시지나 핵심 내용을 시각적으로 전달하는 역할을 한다. - https://vwo.com/glossary/hero-image/3장에서 다룰 내용next/font를 활용한 커스텀 폰트 추가 방법next/image를 활용한 이미지 추가 방법Next.js에서 폰트와 이미지를 최적화하는 방법폰트는 왜 최적화 해야 할까?폰트는 웹사이트 디자인에서 중요한 역할을 한다. 하지만 커스텀 폰트를 활..

이번 장에서는 Next.js 어플리케이션의 다양한 CSS 스타일링 방법을 다뤄볼 예정이다.2장에서 다룰 내용글로벌 CSS 파일 추가 방법CSS 모듈과 Tailwind 스타일링 방법의 차이clsx 유틸리티 패키지를 활용한 조건부 클래스 네임 추가 방법글로벌 스타일링/app/ui 디렉토리를 보면 global.css 파일을 찾을 수 있다. 이 파일을 활용하여 어플리케이션의 모든 경로에 CSS 규칙을 추가할 수 있다. 예를 들어, CSS 재설정 규칙이나 페이지 전역에 대한 HTML 요소 스타일링 등이 있다.global.css 파일은 어플리케이션에 모든 컴포넌트에서 불러 올 수 있지만, 가장 상위 컴포넌트에서 불러오는 것이 좋다. Next.js의 경우에는 루트 레이아웃에 해당한다./app/layout.tsx 파일..

학습을 시작하며NextJS 공식 사이트 학습 자료를 통해 공부한다. 어디까지나 예제를 통한 튜토리얼이지만 공식 사이트에서 제공하는 자료이기도 하니 꼼꼼하게 살펴보며 NextJS의 장점을 경험해보고 React와의 차이점은 무엇인지 경험해보려 한다. 물론 상세한 동작 원리나 세부적인 부분에 대해서까지 깊게 살펴보긴 어려울 것 같지만, 해당 부분은 기본적인 틀을 갖춘 이후에 학습할 예정이다.새 프로젝트 생성해당 튜토리얼에서는 pnpm 패키지 매니저를 사용한다. yarn이나 npm 패키지에 비해 더 빠르고 효율적이라 pnpm을 활용한다고 한다.TODO : 패키지 매니저 별 차이점에 대해서 공부할 필요가 있어 보인다.먼저 pnpm 매니저를 설치한다.npm install -g pnpmNextJS 프로젝트를 생성할 ..

1. grep 명령어로 특정 문자열이 포함된 브랜치 목록 찾기$ git branch | grep "MEDIA-1" deploy/MEDIA-1078 deploy/MEDIA-1210 feature/MEDIA-10682. grep으로 찾은 브랜치를 xargs 명령에 pipeline으로 넘겨줘서 삭제한다.xargs 명령어는 앞 명령어의 출력 결과를 다음 명령어의 인자로 넘겨주는 명령이다.$ git branch | grep "MEDIA-1" | xargs git branch -DDeleted branch deploy/MEDIA-1078 (was f21fb73ce).Deleted branch deploy/MEDIA-1210 (was d8918276b).Deleted branch feature/MEDIA-106..

※ 제 글은 리액트를 처음 접하시거나 아직 Hook에 대해 익숙하지 않으신 분들이 빠르게 Hook에 대해 이해하실 수 있도록 핵심만 정리했습니다. 조금 더 상세한 내용은 React Hook 공식 문서를 통해서 이해하시면 좋을 것 같습니다. 참고 자료 : 김민준. 『리액트를 다루는 기술』. 길벗, 2019. useEffect useEffect는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook입니다. 클래스형 컴포넌트의 componentDidMount와 componentDidUpdate를 합친 형태로 보아도 무방합니다. useEffect 적용 예시 useState 글에서 만들었던 Info 컴포넌트에 useEffect를 한 번 적용해 보겠습니다. import React, {..

※ 제 글은 리액트를 처음 접하시거나 아직 Hook에 대해 익숙하지 않으신 분들이 빠르게 Hook에 대해 이해하실 수 있도록 핵심만 정리했습니다. 조금 더 상세한 내용은 React Hook 공식 문서를 통해서 이해하시면 좋을 것 같습니다. 참고 자료 : 김민준. 『리액트를 다루는 기술』. 길벗, 2019. useState uesState는 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해줍니다. 만약 함수형 컴포넌트에서 상태를 관리해야 한다면 이 Hook을 사용하면 됩니다. useState 활용 예제 useState 훅을 사용한 숫자 카운터 예제를 보겠습니다. import { useState } from 'react' const Counter = () => { const [value, setValu..

클래스는 프로토타입의 문법적 설탕인가? 자바스크립트는 프로토타입 기반 객체지향 언어다. 비록 다른 객체지향 언어와의 차이점에 대한 논쟁이 있긴 하지만 자바스크립트는 강력한 객체지향 프로그래밍 능력을 지니고 있다. ES6에서 도입된 클래스는 기존 프로토타입 기반 객체 지향 프로그래밍보다 클래스 기반 객체지향 프로그래밍에 익숙한 프로그래머가 더욱 빠르게 학습할 수 있도록 클래스 기반 객체지향 프로그래밍 언어와 매우 흡사한 새로운 객체 생성 메커니즘을 제시한다. 그렇다고 ES6의 클래스가 기존의 프로토타입 기반 객체지향 모델을 폐지하고 새롭게 클래스 기반 객체지향 모델을 제공하는 것은 아니다. 사실 클래스는 함수이며 기존 프로토타입 기반 패턴을 클래스 기반 패턴처럼 사용할 수 있도록 하는 문법적 설탕이라고 볼..

클로저는 자바스크립트 고유의 개념이 아니다. 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다. 클로저는 자바스크립트 고유의 개념이 아니므로 클로저의 정의가 ECMAScript 사양에 등장하지 않는다. MDN에서는 클로저에 대해 다음과 같이 정의하고 있다. 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. 렉시컬 스코프 자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의 했는지에 따라 상위 스코프를 결정한다. 이를 렉시컬 스코프라 한다. 스코프의 실체는 실행 컨텍스트의 렉시컬 환경이다. 렉시컬 환경은 자신의 외부 렉시컬 환경에 대한 참조를 통해 상위 렉시컬 환경과 연결된다. 이것이 바로 스코프 체인이다. 정리하면, 렉시컬 환경의 “외부 렉시컬..

들어가며 개발을 할 때 네이밍은 언제나 골칫거리 입니다. Github에 관련된 치트시트가 있어서 내용을 알아보게 되었습니다. 참고로 자바스크립트를 예제로 사용하기에 자바스크립트가 주 언어가 아니시라면 가볍게 개념만 읽어주셔도 좋을 것 같습니다. 영어 사용 /* Bad */ const primerNombre = 'Gustavo' const amigos = ['Kate', 'John'] /* Good */ const firstName = 'Gustavo' const friends = ['Kate', 'John'] 식별자 네이밍은 영어를 활용합니다. 좋든 싫든 영어는 프로그래밍에서 지배적인 언어입니다. 모든 프로그래밍 언어의 구문은 영어로 작성되며 수 많은 문서와 교육 자료도 영어로 작성 되기에 코드를 영어로..

실행 컨텍스트는 자바스크립의 동작 원리를 담고 있는 핵심 개념이다. 실행 컨텍스트를 바르게 이해하면 자바스크립트가 스코프를 기반으로 식별자와 식별자에 바인딩된 값을 관리하는 방식과 호이스팅이 발생하는 이유, 클로저의 동작 방식, 그리고 태스크 큐와 함께 동작하는 이벤트 핸들러와 비동기 처리의 동작 방식을 이해할 수 있다. 소스코드의 타입 ECMAScript 사양은 소스코드를 4가지 타입으로 구분한다. 4가지 타입의 소스코드는 실행 컨텍스트를 생성한다. 소스코드의 타입 설명 전역 코드 전역에 존재하는 소스코드. 전역에 정의된 함수, 클래스 등의 내부 코드는 포함 X 함수 코드 함수 내부에 존재하는 소스코드. 함수 내부에 중첩된 함수, 클래스 등의 내부 코드는 포함 X eval 코드 빌트인 전역 함수인 ev..