이전 포스팅에서 어떻게 진행할 지 알아보았다. ( https://aboveimagine.tistory.com/128 ) 이제 코드를 작성해볼 차례! 물론 내 코드가 절대 정답은 아닐 것이므로 개선해야할 부분이 있다면 댓글로 알려주시길 🙏🏻 마크다운 파일의 메타데이터 관리 Front matter 내 로컬 환경의 마크다운 파일을 이용하여 블로그를 만들려면 해당 마크다운 파일에 대한 상세 정보가 필요하다. 즉, 제목, 작성일, 카테고리 등등의 정보를 미리 마크다운 파일 상단에 작성해주면 된다. 이렇게 마크다운(markdown) 파일이나 다른 텍스트 기반 파일의 상단에 위치하며, 해당 파일에 대한 메타데이터(metadata)를 정의하는 부분을 Front matter 라고 한다. --- title: '제목' da..

백엔드 개발자들이 정말 많이 얘기하는 컨트롤러, 서비스, 서비스로직... 신입 프론트 개발자에게는 너무나 어려운 백엔드의 세계 🫠 Next.js is a React framework for building full-stack web applications. Next.js 를 공부하다 보면 자꾸 보이는, "Next.js는 풀스택 프레임워크"라는 말. 넥스트로 백엔드까지 구현할 수 있다는 것. 네임드 개발자 제로초님에 의하면, Next.js에는 서버 코드가 내장되어 있으며, 거기서 서버 코드를 작성하면 서버처럼 작동한다고 한다. Next.js를 이용하여 풀스택으로 블로그를 만들어 보았는데, 그 과정을 순서대로 포스팅하기 전에 작업하면서 개인적으로 미리 알고 시작했으면 좋았겠다 싶은 내용으로 먼저 시작해보고자..

개요 i18n i18next i18next is an internationalization-framework written in and for JavaScript. (https://www.i18next.com/) i18n은 국제화를 통틀어 칭하는 표현이고, i18next는 우리가 사용할 국제화 프레임워크를 뜻한다. 이 프레임워크를 이용하여 다국어 지원이 가능한 페이지를 만들 수 있다. 설치 작업환경 React.js 18.2.0 Next.js 13.0.0 Typescript 4.8.4 명령어 npm i next-i18next 세팅 // next-i18next.config.js module.exports = { i18n: { defaultLocale: "ko", locales: ["en", "ko"], },..

Next.js를 사용하는 이유 SEO(Search Engine Optimization)와 SSR이 가장 크다. 리액트 단독 사용의 경우 화면이 나중에 구성되기 때문에, 최초의 페이지는 빈 화면이기 때문. (CSR) 참조 : CSR과 SSR https://aboveimagine.tistory.com/114 비전공자 관점에서 보는 MPA, SPA, CSR, SSR MPA & SPA : 웹 어플리케이션을 구성하는 형태 MPA(Multiple Page Application) - 전통적인 방식, 다수의 페이지로 구성되어 요청마다 정해진 페이지를 반환 SPA(Single Page Application) - 단일 페이지, 해당 페이지 aboveimagine.tistory.com 설치 npx create-next-ap..

Next.js가 13으로 업그레이드 되면서 몇가지 변화가 생겼다 update release 에서도 확인이 가능한데, 내가 이번 프로젝트 작업을 하면서 변한 부분을 확인하자면, 참고로 현재 리액트, TS, Next, 테일윈드 를 사용 중. 1. Link import Link from 'next/link' // Next.js 12: `` has to be nested otherwise it's excluded About import Link from 'next/link' // Next.js 13: `` always renders `` About 기존에 링크 태그 안에 a 태그가 들어가는 방식이었는데, 이제는 링크 태그 단독으로 사용! 2. Layout // components/layout.js import ..