지난번에 만들었던 간단한 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 *..

오늘은 면접을 보고왔는데, 합격여부를 떠나서 좋은 말씀을 많이 들었다. 개발자로써의 마음가짐이라던지, 내가 평소 공부하고있던 SQL에서도 현업에서 사용하는 쿼리문의 성능의 중요성에 대해서 다시 생각해봄. 공부할때는 그냥 치면 결과가 쭈루룩나와서 성능부분에 대해서는 고민을 안해봤는데 현업에서 데이터가 수십만건이 되면.. 잘못된 쿼리문이 초래할 영향이.. 어질어질하다. 이게 최선인가? 하는 자기 검증을 하며 노력하자. 좋은 인연 덕분에 좋은 면접자리를 가질 수 있어서 좋았지만 그만큼 아쉽다. 좋은 사람들과 함께하기 위해선 내가 좋은사람이 되어야한다. 좋은 동료가 되기 위해서, 코딩 한 줄 더 해야겠다. 내가 좋은사람이라는걸 증명해서 우연히 들어온 기회를 놓치지 않도록. Eminem의 Lose Yourself..

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를 저장하고 기본적인 설정을 요것저것 만져야한다. 사실 별로 만질것도 없..