개발일지

들어가면서 사실, 제가 이전 글의 제목을 잘못 적었습니다. Next.js로 블로그 만들기라는 제목을 가지고 있지만, 블로그를 만드는 내용보다 다크모드를 적용한 내용을 적었기 때문에, 제 블로그를 방문하는 분들이 충분한 정보를 얻어가지 못했을 거라 생각됩니다. 잘못적은 글 그래서 지금, 미처 남기지 못했던 내용들을 적어보려 합니다. MDX 이 블로그는 Next.js와 MDX를 활용해서 만들어져 있습니다. MDX는 마크다운과 JSX를 섞은 끔찍한 혼종 입니다. 사실 이렇게 블로그를 만들고 있는 도중에도 완벽하게 사용하고 있는 기분이 들지 않고, 글을 작성해나가면서 생기는 오류들을 수정하면서 작성하고 있습니다. 그럼에도 불구하고 제가 괜찮다고 생각하는 이점 중 하나는 커스텀이 가능해집니다. 내가 자주 사용하는..

Intro 아무리 좋은 서비스를 만들었다 하여도, 사람들에게 노출이 되지 않으면 서비스 자체를 만날 수 없습니다. SEO를 잘 설정해놓으면, 사람들이 검색한 단어와 연관된 웹 서비스를 노출시킬 수 있고, 이는 결국 서비스에 유입이 될 수 있습니다. 오늘 글의 주제는 SEO와 이를 제 블로그에 설정한 과정입니다. 블로그를 만든 이유는 개발을하며 배운 내용들을 정리하고, 제가 원하는 템플릿을 만들기 위해서도 있지만, 다른 사람들에게 제 블로그 내용들을 다른 사람들과 공유하는 것이 가장 큰 이유입니다. 이를 위해선 기본적으로 SEO를 적용하여 구글 및 타 사이트에서 검색이 되도록 만들어야 합니다. 이를 하기 위해서는, SEO를 위해 몇 가지 과정을 거쳐야 하는데요, 이러한 과정들을 서술하기 앞서, SEO에 대..

MDX 적용이 궁금하신 분은 이 포스트에 정리했습니다. 다른 서비스들 두고 왜..? 저는 티스토리 블로그를 사용하고 있었습니다. 블로그를 사용하면서, 제 마음에 드는 블로그 스킨이 없었고, 프론트엔드 개발자로 시작한 이상 제 블로그를 직접 만들어서 사용하는 것도 의미가 있겠다란 생각을 했습니다. 그리고 제가 사용하면서 제가 필요한 기능들은 개발하면서 추가해나가면서 블로그를 운영하면 실력도 늘고, 좋은 경험이 될 것이라 생각했습니다. 사용한 스택 사용한 스택은 다음과 같습니다. Typescript, Next.js, Styled-Components, MDX, Zustand 입니다. 구현한 (구현하지 못한) 기능들 제가 처음부터 있었으면 하는 기능들은 다음과 같습니다. 마크다운으로 블로그 포스트 작성 다크모드..

Next.js란 뭘까? 서버사이드 렌더링을 효율적으로 개발할 수 있도록 도와주는 프레임워크 현재 내가 가지고 있는 책 '실전 리액트 프로그래밍'에서는 'SSR을 서버에서 리액트 코드를 실행해서 렌더링 하는것' 이라고 설명하고 있다. 이것이 필요한 이유는 대표적으로 검색엔진 최적화(SEO)를 해야한다. 빠른 첫 페이지 렌더링이 중요하다. 이다. Next.js 시작하기 mkdir 폴더이름 cd 폴더이름 npm init -y npm install next react react-dom 여기서 package.json에서 scripts를 이렇게 수정했다. 여기서, React와 달랐던 점은 폴더 구성이 node_modules밖에 안만들어져 있어서 처음 잘못 설치된 것인지 헷갈렸는데, 이것이 정상이다. 여기서, pag..