현인

이번 장에서는 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 프로젝트를 생성할 ..

웹 브라우저웹 브라우저란 인터넷을 통해 웹 페이지를 탐색하고 보는 데 사용되는 소프트웨어다. 구글 크롬(Google Chrome), 모질라 파이어폭스(Mozilla Firefox), 애플 사파리(Safari), 마이크로소프트 엣지(Microsoft Edge) 등 많은 브라우저들이 등장했고, 이러한 브라우저들은 웹 페이지 표시 및 인터넷 사용을 보다 편리하게 해주는 다양한 기능들을 제공해준다.모든 브라우저의 핵심 기능은 사용자에게 웹 페이지를 보다 빠르고 정확하게 보여주는 일이다. 이번 글에서는 어떤 동작 원리를 통해 브라우저가 사용자에게 웹 페이지를 보여주고 있는지 알아보려 한다.보다 나은 이해를 돕기 위해 구체적인 예시를 하나 들어보겠다.www.naver.com을 브라우저에 입력했을 때 어떤 일이 일어..