yoosmg

CSS Styling index 페이지(http://localhost:3000)에는 이미 몇 가지 스타일이 있다. 파일 구조를 보면, styles 폴더안에 글로벌 스타일시트(globals.css)와 CSS Module(Home.module.css)이라는 두 개의 CSS 파일이 존재한다. CSS Module Next.js에는 .module.css 확장자를 사용하는 CSS Module을 기본 제공한다. CSS Module은 고유한 클래스 이름을 자동으로 생성하여 CSS를 로컬로 범위 지정한다. 따라서 충돌에 대한 걱정 없이 여러 파일에서 동일한 클래스 이름을 사용할 수 있다. 이러한 동작 덕분에 CSS Module은 컴포넌트 수준 CSS를 포함하기에 이상적인 방법이다. Layout 컴포넌트 먼저 모든 ..

서드파티 자바스크립트는 제3자 소스에서 추가된 모든 스크립트를 말한다. 일반적으로 서드파티 스크립트는 분석, 광고, 고객 지원 위젯 등 사이트에 새로운 기능을 간편히 도입하기 위해 포함된다. Next.js 페이지에 서드파티 스크립트를 추가하는 방법을 자세히 살펴보자. 에디터에서 pages/posts/first-post.js를 열고 다음 코드를 찾는다. 보통 최대한 빨리 로드하고 실행해야 하는 스크립트는 페이지의 이 스크립트는 Facebook 소셜 플러그인 및 기타 기능을 도입하는 데 흔히 사용되는 Facebook SDK를 포함한다. 이러한 방식으로 스크립트를 포함하면 작동은 하지만 같은 페이지에서 가져온 다른 자바스크립트 코드와 비교해서 어느 시점에 로드될지는 명확하게 알 수 없다. Script 컴포넌..

과 같은 페이지의 메타데이터를 수정하려면 어떻게 해야 할까? 은 하지만 소문자 First Post ); } http://localhost:3000/posts/first-post 에 접속하면 브라우저 탭에 "First Post"라고 표시된다. 개발자 도구를 확인해보면 title 태그가 에 추가된 것을 확인할 수 있다. 추가학습필요 - Head 컴포넌트에 대해 더 자세히 알아보기위해 next/head에 대한 API reference를 확인하기 - lang 속성을 추가하는 등 태그를 사용자 정의하려면 pages/_document.js 파일을 생성하여 사용자 정의할 수 있음(Custom Document 참조).

Next.js에서는 최상위public 디렉토리에 있는 정적 에셋(static assets)을 사용할 수 있다. pages처럼 root에서 참조할 수 있다. public에 me.png를 추가하면, 다음과 같이 이미지에 액세스할 수 있다: import Image from 'next/image' export function Avatar() { return } 디렉터리 이름은 꼭 public이어야 하며 변경할 수 없다. 이곳이 정적 에셋을 제공하는 데 사용되는 유일한 디렉토리다. 그리고 빌드 시점에서 디렉토리 내에 있는 에셋만 제공된다. 런타임 시 추가된 파일은 사용할 수 없다. 영구 파일 저장이 필요하다면 AWS S3와 같은 타사 서비스를 사용하는 것이 좋다. 이미지 추가하기(일반적인 경우) HTML tag..

일반적으로 웹사이트와 웹 애플리케이션은 많은 다양한 페이지로 구성된다. 이제 애플리케이션에 페이지를 추가하는 방법을 살펴보자. Next.js의 페이지 Next.js에서 페이지란 디렉터리 안에 있는 파일에서 익스포트 한 React 컴포넌트다. 페이지는 파일 이름을 기반으로 경로와 연결된다. 아래는 예시다. pages/index.js는 / 경로에 연결된다. pages/posts/first-post.js는 /posts/first-post 경로에 연결된다. pages/posts/first-post.js를 생성하여 어떻게 작동하는지 살펴보자. 새 페이지 만들기 posts 디렉터리 안에 first-post.js파일을 만들고 아래와 같이 입력해 보자. (컴포넌트 이름은 어떻게 지어도 괜찮지만, export defa..

Next.js app 생성하기 Next.js 앱을 생성하려면 터미널을 열고 앱을 생성하려는 디렉터리에 다음 명령을 실행해 준다 npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter" 개발서버 실행하기 이제 nextjs-blog라는 새 디렉터리가 생겼다. npm run dev 실행하고 http://localhost:3000에 접속하면 다음 페이지가 표시된다. 이 페이지는 Next.js에 대한 유용한 정보를 보여주는 스타터 템플릿 페이지. 페이지 편집하기 스타터 페이지를 편집하려면, Next.js 개발 서버가 실행 중인지 확인한다...

Next.js는 웹 애플리케이션을 제작하기 위한 빌딩 블록을 제공하는 flexible 한 React 프레임워크다. 이게 정확히 무엇을 의미할까? React와 Next.js가 무엇이며 어떻게 도움이 되는지 알아보자. 웹 애플리케이션의 빌딩 블록 최신 애플리케이션을 구축할 때는 고려해야 할 몇 가지 사항이 있다. 예를 들면 다음과 같다: ✔️ User Interface - 사용자가 애플리케이션을 소비하고 상호 작용하는 방식. ✔️ Routing - 사용자가 애플리케이션의 여러 부분을 탐색하는 방법. ✔️ Data Fetching - 데이터 위치 및 데이터 가져오는 방법. ✔️ Rendering - 정적 또는 동적 콘텐츠를 렌더링 하는 시기와 위치. ✔️ Integrations - 사용하는 타사 서비스(CMS..

택슬리 브릿지코드에서 개발한 서비스로 네이버 지식인의 세금 버전이다. 개인적으로 조언 구할 곳을 찾다가 택슬리에서 세무사님께 상담받았다. 나중에 다른 일 생기면 방문 상담을 고려해봐도 괜찮을듯하다. 로폼 상담 내용을 토대로 문서를 작성하다 보니 법률 지식이 너무 부족했다. 하지만 로폼에서 최소한의 필요 정보를 입력하니 기본 템플릿이 바로 완성되었다. 법률 문서에 대한 감이 전혀 오지 않을 때 참고하면 좋다.

nvm install => curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash check list => nvm ls-remote choose what you want => nvm use v16.19.1 confirm => node -v

Error code @firebase/firestore: Firestore (9.17.1): Uncaught Error in snapshot listener: FirebaseError: \[code=permission-denied\]: Missing or insufficient permissions. Solution Cloud Firestore내 Rules의 config를 다음과 같이 변경한다. (상황에 맞게 택1) // 1. for Test mode // Allow read/write access to all users under any conditions // Warning: **NEVER** use this rule set in production; it allows // anyone to over..