전체 글 (5) 썸네일형 리스트형 Next.js로 풀스택 개발자 포트폴리오 만들기 (5) tailwind CSS 전역적으로 색상 세팅하기, tailwind.config 설정, tailwind primary color 설정 Tailwind CSS 설정 파일인 tailwind.config.js에서 hsl(var(--primary))를 사용하는 색상 설정을 구성하는 방법에 대해 설명드리겠습니다. 이 파일을 통해 Tailwind CSS의 기본 테마를 확장하고, 커스텀 유틸리티를 추가할 수 있습니다. Configuration - Tailwind CSSA guide to configuring and customizing your Tailwind installation.tailwindcss.com color를 전역적으로 설정하기 위해서는 여러가지 방법을 사용할 수 있는데 첫번째로 tailwindcss.config 파일에서 색상 변수를 설정하고 아래와 같이 만들 수 있습니다. /** @type {import('tailwindcss').. Next.js로 풀스택 개발자 포트폴리오 만들기 (4) GPT-4o를 사용하여 디자인 이미지를 CSS로 구현해보기, 네비게이션 접는 라이브러리 framer motion GPT-4o를 사용하여 디자인 이미지를 CSS로 구현해 보기 Hello GPT-4o최근 GPT-4o가 출시되었고, 이제 제한된 접근으로 무료로 사용할 수 있게 되었습니다. GPT-4o는 이미지 첨부와 GPT 탐색을 통해 확장된 경험을 제공하는 새로운 버전입니다. 이 기회를 활용하여 디자인 이미지를 CSS로 얼마나 잘 구현할 수 있는지 확인하고, 개발 속도를 높이기 위한 도움을 받아보려고 합니다. 무료버전 GPT-4o로 사용해 볼 수 있는 새로운 기능이미지 첨부 기능: GPT-4o는 이미지 파일을 업로드하여 이를 분석하고 이해할 수 있습니다. 이를 통해 디자인 이미지에서 필요한 CSS 코드를 생성하는 데 큰 도움을 줄 수 있습니다.확장된 GPT 탐색: 더 넓고 깊은 지식 베이스를 활용하여, 보다 정교한 .. Next.js로 풀스택 개발자 포트폴리오 만들기 (3) 프로젝트 git 연결하기, git 초기설정, VScode git 확장자 추천 1. 원격 저장소 생성 2. git init 하기프로젝트 파일에 들어가 git을 init(초기화) 해줍니다. 여기서 git file이 생성됩니다.맥에서는 시각적으로 확인하고 싶다면 [ cmd + shift +. ]으로 투명한 git 파일을 볼 수 있습니다. private으로 가려진 파일들입니다.// git initgit init 3. 로컬 저장소(컴퓨터)와 원격 저장소(Github) 연결하기// 로컬 저장소에 원격 저장소 주소 추가git remote add origin 4. 로컬 변경사항을 원격 저장소에 푸시 합니다.// 변경사항 저장전 원격저장소의 변경사항 가져오기git pull origin main// 로컬저장소의 변경사항 전체를 스테이징git add .// 로컬저장소의 변경사.. Next.js로 풀스택 개발자 포트폴리오 만들기 (2) Next.js 설치 및 세팅 1. Node.js 설치Next.js를 사용하려면 Node.js가 필요합니다. Node.js가 설치되어 있지 않다면, Node.js 공식 웹사이트에서 최신 LTS 버전을 다운로드하여 설치하세요. Node 버전은 18.17 or 그 이상이어야 합니다. 2. Create Next App으로 프로젝트 생성Next.js는 공식적으로 제공하는 프로젝트 생성 도구인 create-next-app을 사용하여 쉽게 새로운 프로젝트를 시작할 수 있습니다. 터미널이나 명령 프롬프트에서 다음 명령어를 실행합니다. npx create-next-app@latest ✔ TypeScript 사용TypeScript는 강력한 형식 시스템을 제공하여 코드 품질과 안정성을 높입니다.✔ ESLintESLint는 코드 품질과 일관성을 유.. Next.js로 풀스택 개발자 포트폴리오 만들기 (1) Intro Chapter 1 : Next.js IntroNext.js?Next.js는 React(리액트) 프레임워크이며 full-stack으로 web applications을 만들 수 있습니다. Why Next.js?1. 서버 사이드 렌더링 (Server-Side Rendering, SSR)서버에서 페이지를 렌더링 하여 클라이언트에 HTML을 전달함으로서 초기 로딩속도를 개선하고 SEO 성능을 향상 시키는 효과를 볼 수 있습니다. 2. 정적 사이트를 생성 (Static Site Generation, SSG)빌드 시점에 페이지를 미리 렌더링하여 정적 파일로 생성하여 빠른 로딩 속도와 캐시 활용을 통해 성능을 최적화합니다. 3. 자동 코드 분할 (Automatic Code Splitting)각 페이지에 필요한 .. 이전 1 다음
