Next14 6

[Next14 + Netlify] 나를 소개하는 홈페이지 만들기 (5) - 방명록 (feat. Utterances)

블로그를 적으시는 분들이나 여기저기 찾아보면 깃허브와 연동하여 댓글 기능을 구현하는 모습들을 종종 볼 수 있다.아직 블로그 형식으로 제작하지는 않았지만, 방명록 형식을 통해 해당 기능을 추가해볼까 한다. Utterances를 이용하여 구현한다. 1. Github App에 설치한다. 2. 사용할 레파지토리를 설정한다.Utterances는 생성된 레파지토리에 이슈를 생성하여 해당 이슈에 댓글을 다는 형식으로 구성되어 있다. whosbax-dev-comment라는 새로운 레파지토리를 생성하여 설정했다. 3. [이름]/[레파지토리] 형식으로 작성한 후, 포스트랑 이슈 매핑, 라벨, 테마를 어떻게 할지 하단에서 선택한다.현재 내가 작성한 방명록의 pathname은 guestbook으로 지정해뒀다. 여기서 작성/선..

[Next14 + Netlify] 나를 소개하는 홈페이지 만들기 (4) - SEO

페이지의 구조가 완성되고 Netlify에 배포가 되었다면, 이제 SEO를 적용해보자. - Netlify는 SignUp 이후 깃 레파지토리만 연결하면 자동으로 main 브랜치로부터 push시 배포를 적용해준다- SEO는 Search Engine Optimization, 검색엔진 최적화의 줄임말로, 검색엔진이 콘텐츠를 이해하도록 돕고, 사용자가 사이트를 찾고, 검색엔진을 통해 사이트를 방문할지 여부를 결정하도록 돕는다.https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=ko\ SEO 기본 가이드: 기본사항 | Google 검색 센터  |  문서  |  Google for Developers검색엔진 최적화의 기본사항에 관한 지..

[Next14 + Netlify] 나를 소개하는 홈페이지 만들기 (3) - 페이지 및 폴더 구조

우선 개인적으로 Tailwind의 코드 형식을 썩 좋아하지 않는다. 가독성뿐만 아니라 인라인 스타일을 먹여 놓은 듯한 기분이 들어서 아직 어색한게 아닐까 하는 생각이 든다.가장 선호하는 방식은 기존 유명한 라이브러리(Bootstrap, Material UI, AntD 등)에 scss 형식으로 직접 수정하는 방식인데, 이왕 하는거 그냥 구조를 적절히 이해하면서 코드를 작성해보자- 라는 생각으로 scss로만 진행했다. (추후 NextUI 적용을 위해 Tailwind를 어쩔 수 없이 반영한다..ㅜ) src 폴더 안에 app 폴더와 model 폴더가 나누어져 있고, 모든 페이지는 app 폴더 내부에서 움직인다. 전체적인 css의 통일성을 위해서 globals.css에 내가 사용하려는 색상을 변수로 지정하여 사용..

[Next14 + Netlify] 나를 소개하는 홈페이지 만들기 (2)

어설프게 만들고 싶지 않다. 하지만 할 수 있는 부분의 한계는 명확했기에 할 수 있는 부분과 하지 않은 부분을 명확하게 구분할 필요가 있었다. 1. 어느 기능까지 구현/표현할 것인가?2. 디자인은 무엇을 참고할 것인가?3. 호스팅은 무엇을 이용할 것인가? '나를 소개하는 홈페이지를 만들기'를 주제로 나를 어디까지 소개할 것인가.빠른 시간 안에 홈페이지를 완성하고 싶기 때문에 우선은 노션에 적어뒀던 개인 이력서를 옮기는 방향으로 목표를 정했다. 추후 필요하다면 기능을 추가하는 방식으로 정해도 되니, 1차부터 마무리 짓기 위한 선택이다. 노션에 적어뒀던 이력서를 보니, 세부 페이지 없이 한 페이지에 진행했던 프로젝트와 그 내용을 적어뒀었다. 세부 페이지를 뜯어서 만드는 것이 좋을까 고민 끝에 메인 페이지(..

[Next14 + Netlify] 나를 소개하는 홈페이지 만들기 (1)

알다시피 근본은 공식문서. https://nextjs.org/docs Docs | Next.jsWelcome to the Next.js Documentation.nextjs.org node.js 18.17 버전 이상으로 지원한다. npx create-next-app@latest 따끈따끈한 신상으로 시작해보자. What is your project named? my-appWould you like to use TypeScript? No / YesWould you like to use ESLint? No / YesWould you like to use Tailwind CSS? No / YesWould you like to use `src/` directory? No / YesWould you like to ..

[Next14 + Netlify] 나를 소개하는 홈페이지 만들기 (0)

오랜만에 나를 소개하기 카테고리를 보니 뭐 제대로 끝낸게 없어서 이번에 Next14 만져볼 겸 자소서 페이지 만들어 보았다.정적페이지로 배포하기엔 아쉽지만 맛보기 정도이니 그냥 기록을 끄적여볼까한다. 대단한건 없으니 그냥 참고하시고, 이상한 점은 댓글로 무자비하게 피드백 주시면 적절히 수용하겠습니다. https://whosbax.netlify.app/ 꿈이 많은 어른 아이 : 박상호하고 싶은 것도 이루고 싶은 것도 너무나 많은, 어른이지만 아이처럼 - ${utils.title}whosbax.netlify.app