nextjs 14 metadata favicon title

nextjs 14에서 동적으로 title이나 favicon을 관리하기 위해서 가장 최상위에 config 폴더를 만들고 site.ts 파일을 만들어서 정보를 등록합니다. /config/site.ts 동적으로 설정하는 아이콘이 파비콘으로 나오게 하려면 /app 폴더 안에 favicon.ico파일이 없어야 합니다. favicon.ico 파일을 삭제해주세요. 설정한 site.ts 내용을 layout.tsx 에서 설정하세요. /app/layout.tsx 다크모드인 경우와 아닌 경우 다른 아이콘이 보이도록 설정 할 수 있습니다.

nextjs Layout Navbar 그리고 로고

상단 Navbar 만들기 위해서 components 아래 navbar.tsx 를 생성 합니다. _를 사용하여 페이지로 인식하지 않도록 합니다. /app/(marketing)/_components/navbar.tsx 이 Navbar 콤포넌트를 layout.tsx 에서 불러와 사용합니다. /app/(marketing)/layout.tsx 이제 화면을 보면서 Navbar를 만들어 갈 수 있어요. 이제 왼쪽 상단에 로고를 표현하기 위해 로고 콤포넌트를 생성 합니다. 로고는 다른 페이지에서도 사용 할 수 있어서 /components/logo.tsx 에 생성 합니다. 로고 … Read more

nextjs shadcn 콤포넌트 버튼 사용하기

nextjs 초기 프로젝트 설정에서 shadcn 초기화 했었는데요. 이제 버튼과 같은 컴포넌트 추가해서 사용할 수 있습니다. components 폴더에 button이 생겨 있을 것입니다. 이제 사용하기만 하면 됩니다. Button Components 를 사용하여 링크로 연결하는 예제입니다.

nextjs 14 온라인 폰트 로컬 폰트

온라인에서 폰트 사용하는 경우 woff2 확장자를 사용 할 수 있습니다. woff2 확장자 폰트를 구했다면 public/fonts 폴더로 이동 시켜서 사용 할 수 있습니다. nextjs 있는 next/font/local에서 import 할 수 있어요. shadcn을 이용해서 cn 함수 이용해서 폰트 사용 할 수 있어요. 구글 폰트를 이용할 수도 있어요. 먼저 선언하는 부분입니다. 역시 cn 함수를 이용해서 폰트를 사용 할 수 … Read more

nextjs 폴더와 파일 구조

nextjs 기본 구조를 만들고 나서 폴더를 만들어서 작업해봅시다. 용도에 따라서 구분해서 작업 하고 싶은 경우가 있을 수 있고 특정 페이지에 따른 테마를 구분 할 수도 있을텐데요. 그럴때 괄호를 사용 할 수 있어요. /app/page.tsx 파일이 기본으로 있는데 이 파일을 지우고 (marketing) 폴더를 만들어서 page.tsx 파일을 넣어도 동작 합니다. 괄호를 이용해서 여러 페이지를 구분하고 나누고 레이아웃을 그 … Read more

nextjs 14 초기 셋팅

2023년 말 시점으로는 이 방법이 14설치 방법이지만 시간이 지나면 다른 버전이 설치 될 수 있습니다. nvm 으로 node 버전 관리하고 있는데 요즘에는 node 20이 최신 LTS 버전이라고 해서 일단 nvm use v20으로 셋팅하고 진행했습니다. npx 명령어를 이용해서 구성합니다. 명령어 실행하고 나면 이것저것 물어보는데요. 대부분 기본값으로 하고 src 디렉토리 부분과 import alias 부분만 No로 합니다. trello-app … Read more

No module named torchvision

pytorch 사용하려고 했을 때 torchvision 이 없다고 나오는 경우가 있어요. 이런 경우 pip로 설치해서 해결 할 수 있습니다. pytorch만 설치해서 다 할 수 있는 것은 아닌가보네요. pytorch 설치 방법도 변경되어서 이제는 pip install torch로만 해야 하더라고요. pytorch를 항상 먼저 설치하고 그 뒤에 torchvision을 설치합니다. 설치하는 과정에서 디스크 공간을 많이 사용할 수 있어서 템프 공간 지정하는 … Read more

ubuntu No module named distutils.cmd

우분투 환경에서 파이썬 사용할 때 오류가 날 수 있는데요. 생각보다 간단히 해결 할 수 있습니다. 설치 할 때 아래 명령어처럼 파이썬만 설처하면 나오는 오류더라고요. 이렇게 설치 했더니 나오는 오류더라고요. 이렇게 설치하고 나서 가장 환경 설치하려고 했더니 바로 오류 나오더라고요. 이 오류가 나오면 python 실행하면서 필요한 것들이 부족하다는 의미인데요. 그냥 더 설치하면 됩니다. 골라서 설치하기 싫어서 … Read more

fastapi 오류 만들기 Error Handle raise

FastAPI 이용해서 간단하고 빠르게 만들어서 살펴봐야 하는 경우에 정말 잘 활용하고 있는데요. 오류를 일부러 의도적으로 만들고 싶은 경우에 여러가지가 있지만 가장 간단한 방법 메모합니다. 일단 특정 조건에서 오류 발생하도록 합니다. 간단하게 바로 오류코드와 같이 반환 할 수 있어요. 저는 찾는 문자열이 없는 경우 찾지 못했습니다. 하면서 오류 반환했어요.

PandasAI 데이터 하고 대화하기

PandasAI 이용해보려고 chatGPT 결제 했어요. 가입하고나서 얼마 지나지 않은 경우에는 무료로 조금 사용가능한데 시간이 많이 지나고 나서는 카드 등록해야 하더라고요. openai 로그인 하고 나서 api 부분에 있는 빌링 메뉴에서 카드 등록 할 수 있어요. 로그인 하고 나서 아래 주소로 이동해서 카드 등록할 수 있습니다. https://platform.openai.com/account/billing/overview 카드 등록하면서 초기에 얼마로 시작할지 나와서 5$로 시작했어요. 벌써 0.02 … Read more