석이의 개발일지

https://portfolio-ssseok.vercel.app/

getStaticProps Next.js 에는 getStaticProps라고 데이터를 가져올 수 있다. 쉽게 말해 getStaticProps은 처음 렌더링이 될 때만 가져오는 함수 같은 거다. components/projects.tsx import Layout from "@/components/layout"; import type { NextPage } from "next"; import axios from "axios"; import { IProjectProps, IProjects } from "@/types/project"; import ProjectItem from "@/components/projects/project-item"; import Seo from "@/components/seo"; i..

사용할 워크페이스에 포트폴리오 데이터베이스 페이지를 만들어줍니다. 처음에 빈 페이지이지만 /database를 입력해 표를 만들어 주고 프로젝트의 대한 정보들을 입력해 줍니다. 그리고 위 사진처럼 보여주기 위해서 레이아웃은 갤러리로 설정하고 속성을 눌러 프로젝트의 정보들을 보여줄 수 있게끔 표시를 해둡니다. 그리고 이미지가 안 보일 수 있는데 레이아웃에 들어가 카드 미리 보기를 커버로 해줍니다. notion API를 검색해 우측 상단에 View my integrations를 들어가시면 위 사진처럼 들어가지고 새 API통합 만들기를 클릭하면 됩니다. 클릭하면 위 사진처럼 나올 텐데 이름은 작성해 주고 연결할 워크스페이스를 선택해 주면 됩니다.(워크스페이스는 아까 만든 데이터베이스 페이지가 있는 워크스페이스를..

설치 yarn add next-themes GitHub - pacocoursey/next-themes: Perfect Next.js dark mode in 2 lines of code. Support System preference and any other theme wi Perfect Next.js dark mode in 2 lines of code. Support System preference and any other theme with no flashing - GitHub - pacocoursey/next-themes: Perfect Next.js dark mode in 2 lines of code. Suppor... github.com 사용법 pages 폴더 안에 _app.tsx 수정하면 된다...

LottieFiles: Download Free lightweight animations for website & apps. Effortlessly bring the smallest, free, ready-to-use motion graphics for the web, app, social, and designs. Create, edit, test, collaborate, and ship Lottie animations in no time! lottiefiles.com 움직이는 애니메이션을 사용하고 싶으면 위 사이트에 접속하면 된다. 그리고 마음에 드는 애니메이션을 찾았다 싶으면 다운로드를 누른 후 Lottie JSON 파일을 다운로드하여준다. 그리고 public 폴더 안에 넣어준다. 이러면 일단 애니메..

Tailblocks — Ready-to-use Tailwind CSS blocks tailblocks.cc tailwind 사용 시 레이아웃 블록들이 있는 유용한 사이트 tilwind block 에서 주의할 점은 가져올 거 가져오긴 하지만 JSX 문법에 맞게 바꿔야 한다. components/layout.tsx import React from "react"; import Header from "./header"; import Footer from "./footer"; interface ILayout { children: React.ReactNode; } export default function Layout({ children }: ILayout) { return ( {children} ); } tail..

사용 스택 Next.js TailwindCSS TypeScript Axios 설치 yarn create next-app —typescript “파일명” yarn add -D tailwindcss npx tailwindcss init tailwind.config.js /** @type {import('tailwindcss').Config} */ module.exports = { mode: "jit", content: [ "./pages/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}", ], darkMode: "class", theme: { extend: {}, }, plugins: [], }; globals.css @tailwind base; @ta..

개인 포토폴리오를 만들어보기로 했다. 원래 프로젝트 끝나고 만들어보려고 했지만 뭔가 새로운 기술들을 배우고 만들고 싶은 생각에 공부를 진행했다. (지금도 ing~) 그래도 어느정도 새로운 기술스택을 배우고 있는 지금 딱 적절한 시기인 거 같아서 다른 것들을 하면서 개인 포트폴리오도 만들기로 결정했다. 일단 앞서 개인 포토폴리오에 만들 기술스택으로는 Next.js + TypeScript + Tailwind CSS이다. Next.js => SEO 검색엔진최적화를 위해 검색이 잘됐으면 좋겠다는 생각과 처음 방문 시 빠르게 로딩되는 장점으로 개인 포트폴리오에 적합하다고 생각했다. TypeScript => JavaScript 는 이제 그만... Tailwind CSS => 쉽게 반응형을 웹을 만들기 위해서 이면서..

마음 한편으론 아쉽지만 또 한편으론 후련한 메인프로젝트 회고 시작합니다. 팀원 구성은 어떻게 한 것일까? 일단 먼저 다빈님을 중심으로 프론트엔드는 현석님(저), 다솜님, 다빈님으로 실전 프로젝트가 구성이 되었고, 백엔드분들 섭외하는 게 어려울 거 같았지만, 생각보다 빠르게 세 명이 구해져 프론트 3명 백엔드 3명 총 인원 6명으로 팀원이 구성이 되었습니다. 저희 팀원은 숙박 플랫폼을 하기를 원했고, 산업군은 유통/물류로 선택하여 만들어졌습니다. 굳이 많은 숙박 플랫폼도 있지만 왜 숙박 플랫폼을 원했는가? "호텔 하면, 대부분의 사람들은 여행/호캉스란 단어를 떠올리시곤 합니다. 하지만, 실제로 호텔에 투숙하는 목적은 다양하게 있습니다. 출장 또는 워케이션/워캉스의 목적으로 호텔에 투숙하시며 회의실이나 미팅..