2024/05/13 4

[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