기본적으로 Next.js는 Google Font에서 제공하는 폰트들을 별다른 요청 없이 가져와 쓸 수 있도록 되어있다. Next.js 앱의 기본 상태에서 app 폴더의 루트 layout.tsx를 보면, 실제로 다음과 같이 Inter 폰트를 next/font/google 으로부터 import하여 모든 페이지에 적용 중임을 확인할 수 있다.import { Inter } from 'next/font/google' const inter = Inter({ subsets: ['latin'] }) export default function MyApp({ Component, pageProps }) { return ( )}  내가 적용하고 싶은 폰트는 Pretendard로, Google Fo..

프론트엔드를 공부하다보면 한번쯤 웹팩, 번들, 바벨, 폴리필🤷‍♂️❓ 등등...과 같은 단어들을 들어본 적이 있을 것이다. 지금은 CRA를 사용해 초기 구축을 많이 하지만, 프로젝트를 완전히 커스터마이징해서 사용하기 위해서는 환경설정과 빌드세팅까지 직접 해야한다. 오늘은 그때 다루어야 할 개념들에 대해 포스팅을 쓰려고 한다. 궁금한 것도 많은데 알아야 할 것도 너무 많기 때문에 우선은 뭐가 뭔지 얕게만 정리해보면서 차차 알아가보자.   모듈 번들러(Module Bundler)명칭 그대로 모듈 단위로 쪼개진 코드 조각들을 하나로 묶어주는 도구이다. JS, HTML, CSS, 이미지 파일 등을 포함한 모든 리소스를 최적화하여 하나의 파일로 만들어준다. 크롬과 같은 브라우저는 이 단일 파일을 로드함으로써 애..

현재 운영 중인 Cotato 프로젝트가 V2에 들어가면서기존에 겨우 구현만 해놓았던 부분들에 대해 리팩토링을 통한 성능 향상,체계적인 작업 관리,기존의 UX 및 UI 개선,새롭게 디자인된 페이지 적용 등등...팀원들 모두가 개발 전반에 있어서 부족했던 부분에 대해 고민하고, 좀 더 완전한 프로젝트로 거듭나기 위해 유지보수에 힘을 쓰고 있다.사실 우리 팀의 프론트팀도 개선할 점들이 넘쳐났는데, 특히 부족했던 프론트장(= 나..) 탓에 전체 회의를 제외하고는 우리끼리의 소통이 부족했던 것 같아서 우선적으로 정기 회의를 만들었다. V2에 접어든만큼 제대로 해보자는 의미에서 얻어가고 싶은 점들을 공유하고, 앞으로의 방향성에 대해 이야기를 나누었다.그 중 하나가 바로 Git Flow 적용에 대한 부분이었는데,V2..

게시물 목록에서 특정 게시물의 삭제 버튼을 누르면 해당 글이 삭제되는 기능 구현 중 이 같은 에러가 발생하였다.  데이터베이스에서 게시물 데이터를 삭제하려면 해당 게시물의 id값을 넘겨줘야 어떤 항목을 삭제할지 알 수 있으므로, 위와 같이 request body에 id를 넘겨주려 시도하였다. 서버에 Object나 Array를 넘겨줄 때는 JSON.stringify()를 사용하여 문자열 형식으로 보내줘야 하기 때문에 저렇게 작성한 것이었는데, 이 부분(정확히는 해당 요청을 받는 부분)에서 문제가 발생한 것을 알게 되었다.// /app/list/ListItem.jsexport default function ListItem({ data }) { return ( // ... fetch(..

게시물 상세페이지 만들기 게시판 DB에 글 데이터를 몇 개 집어넣고 리스트를 조회하는거까지 해봤으니, 이제 특정 게시물을 눌렀을 때 해당 게시물의 상세페이지로 넘어가는 기능을 구현할 차례이다. Dynamic Route 현재 게시물 리스트는 /list에서 조회하고 있고, 게시물을 선택하면 그 게시물의 id 값에 따라 /detail/1, detail/2, detail/3 이런식으로 url이 바뀌면서 그 내용을 보여주면 된다. 1. 다음과 같이 detail 폴더를 만들고, 그 안에 [id]라는 폴더를 또 만든다. [폴더명] -> 폴더 생성 시 이렇게 대괄호로 감싸게 되면, 이 부분에 어떤 내용이 와도 상관없다는 의미가 된다. 따라서 /detail/123, /detail/ㅇ 이렇게 입력해도 /detail/[id..

TailwindCSS는 한 번도 사용해본적이 없는데 최근에 조금 궁금했던 적이 있었다. 언젠가 배워야징~ 하고 있었는데 이번에 Next.js 강의를 들으며 공부를 하는데, 프로젝트 생성 시 초기 세팅을 위해 묻는 질문들 중 TailwindCSS를 사용할건지를 묻더라. 어차피 대충 알기론 어렵다거나 배울 내용이 많다거나 한 건 아닌것 같아서, 기회 삼아서 그냥 한 번 써보기로 했다.ㅎ https://tailwindcss.com/docs/installation Installation - Tailwind CSS The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool...