지난번에 만들었던 간단한 Counter App을 Github action과 연동해서 AWS S3를 이용한 배포를 진행해보려고 합니다. 먼저 Repo를 생성하고 github action을 연동해줍니다. cli는 node.js를사용했습니다. Node.js를 선택하고 node.js.yml 파일 설정을 해줍니다. 기본 제공하는 포맷을 그대로 사용합니다. 아직-- 모르는게 넘 많아서 차차 공부해보겠습니다. # This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node # For more inform..

CRA 프로젝트를 진행하던중 TDD 주도 개발에관한 글을 보았다. 간단하게 한번 만들어 보면 좋을것 같아서 CRA를 하나 임시로 만들었다. App.js import { useState } from 'react'; function App() { const [count, setCount] = useState(0); const [disabled, setDisabled] = useState(false); return ( {count} {/* minus btn */} setCount((prev) => prev - 1)} disabled={disabled} >- {/* plus btn */} setCount((prev) => prev + 1)} disabled={disabled} >+ {/* on/off btn *..

Vercel을 이용한 배포를 진행합니다. Github의 Remote Repository와 Vercel 계정을 연결시키고 해당 Repo를 Import Import를 하면 이제 환경변수를 추가해줘야하는데 Github에 .env.local 에 들어있는 데이터들은 gitignore로 올라가지 않아서 따로 입력해줘야한다. 그리고 Deploy하면 build에서 오류가 생기면 수정해주고 다시 remote repo 에 수정한 코드를 push 해서 새로 deploy하면 됨. 이렇게 완성된 나의 portfolio page ! https://nextjs-portfolio-wpjh.vercel.app/ Porkbelly's Portfolio Welcome to Porkbelly's Portfolio page 안녕하세요. 저는..

Data Fetching 방법 고르기 그러면 이제 Next.js 에서 Notion에 있는 데이터를 가져오는것을 구현해야되는데, Next.js 에서 제공하고있는 Data Fetching 함수 중 내가 고려하고 있는것은 getStaticProps라는 함수와 getServerSideProps 라는 함수다. getServerSideProps는 요청이 있을때마다 서버에서 데이터를 가져오는데 이 경우는 데이터가 자주변경되거나 동적인 경우에 사용된다고 하는데 내 프로젝트 같은경우엔 자주 변경되지도 않고 정적인 데이터이기 때문에 굳이 ServerSideProps 함수를 이용할 필요가 없다고 생각한다. getStaticProps를 사용할 것이고 사용방법은 다음 링크에서 자세히 알려준다. https://nextjs.org..

Notion은 작년까지만해도 공부 기록용으로 잘 사용하던 서비스였는데 간단한 DB 기능까지 제공하고 있는지는 몰랐다... 하여튼 Notion에다가 DB를 만들고 Notion API와 연결하고 요걸 내 포트폴리오 사이트랑 연계하는 작업을 진행할 것이다. /database inline으로 데이터베이스를 만들어준다. 예시 파일들은 내가 진행했던 팀프로젝트와 현재 진행하고있는 포트폴리오 페이지 제작도 추가했다. -0- 사실 한시라도 빨리 끝내고 다른 작업을 준비해야되는데 요렇게 짜잘하게 시간낭비하는게 너무 재밌어서 어쩔수가 없다. 그 다음에 해야 할 작업으로는 Notion API 페이지에서 요렇게 API 통합을 생성해주고 Secret Key를 저장하고 기본적인 설정을 요것저것 만져야한다. 사실 별로 만질것도 없..

https://github.com/pacocoursey/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 Usage 보면서 바꿈