메로그

SEO 최적화를 위해서는 robots.txt, sitemap.xml 을 생성해주어야 합니다.robots.txt 는 사이트에 크롤링을 할 대상을 알려주는 파일입니다.sitemap.xml 은 검색엔진에 색인할 모든 페이지를 나열한 XML 파일입니다. robots.txt 만들기Nextjs 14 에서는 app/robots.ts 파일을 만들면 됩니다. 그러면 ts 파일이 txt 파일로 만들어져 /robots.txt 로 접근이 가능해집니다.import { MetadataRoute } from 'next' export default function robots(): MetadataRoute.Robots { return { rules: { userAgent: '*', allow: '/', ..

우선 styled componets 를 알기 전에 CSS in JS 가 뭔지 알고 지나가야 합니다. CSS in JS css 파일을 사용하지 않고 JavaScript 로 작성된 컴포넌트에 바로 삽입하는 스타일 기법입니다. 이렇게 쓰면 별도의 css 파일을 관리하지 않기 때문에 관리 포인트가 줄어들 수도 있고 컴포넌트 기반의 개발시 좀 더 유용한 패턴이 될 수도 있습니다. (하지만, 사용하는 사람마다 다름!) 그 중에 가장 유명한 라이브러리가 styled components 다~~~ 라고 알고 있으면 됩니다. 설치 및 사용법 아래 명령어를 이용해 설치해줍니다. npm 쓰시는 분들은 yarn add 빼고 npm install 넣으시면 됩니다! yarn add styled-components 사용법은 아래와 ..

트러블 슈팅Vite 로 만든 React 를 마이크로 프론트엔드 아키텍쳐를 이용해서 다른 프로젝트에 정적파일로 넣는 방법을 하고 있습니다.그런데, build 시에 .html 에서 js, css 를 /assets/ 경로로 참조하는 것에 문제가 발생했습니다. 우리가 원하는 경로는  ./assets/ 입니다.방법은 아래와 같이 vite.config.js 에서 base 를 추가하여 상대 경로로 변경해줍니다.import { defineConfig } from "vite";import react from "@vitejs/plugin-react";export default defineConfig({ plugins: [react()], base: "./", // 상대 경로 설정});

소개 보통 자기소개 페이지를 하나 만든다고 하면, 호스팅을 하나 따로 만들어서 해야하는데, 깃허브에서는 Pages 를 이용해서 간단한 웹사이트를 퍼블리싱할 수 있도록 해줍니다. 간단한 일부 오픈소스 프로젝트 또는 블로그, 이력서 등을 호스팅할 수 있도록 해준다라고 깃허브 공식 홈페이지에 나와있습니다. 이 기능은 깃허브를 사용하는 모든 사용자들이 사용가능하고 간단하게 바로 사용할 수 있도록 가이드를 해드리도록 하겠습니다. 가이드 레포지토리를 하나 새로 만들어줍니다. 이름은 username.github.io 로 만들어주면 사실상 Pages 까지 자동으로 셋팅될 겁니다. 만들면 이제 위와 같이 나온 상태가 나오게 되고, Settings 에 Pages 로 가봅시다! 자 페이지를 가면 사이트가 자동으로 연동된 것..

준비하기 Redux 를 사용하고 있는데, 새로고침을 하게 되면 데이터가 다 날아가는 것을 볼 수 있다. 이를 유지하기 위한 방법으로 redux-persist 가 있는데, 이를 사용하는 방법을 알아보자. 우선 아래와 같이 준비를 해주자. 해당 로직은 redux-toolkit 을 이용한 셋팅이다. combineReducers 까지 사용해서 여러 리듀서를 묶은 것을 확인할 수 있다. import { configureStore, combineReducers } from "@reduxjs/toolkit"; import cartReducer from "./cartSlice"; import countReducer from "./countSlice"; // combineReducers 로 리듀서를 묶을 수 있음. co..

.env.local 을 일반적으로 사용하지만, 해당 파일은 무시되도록 되어 있어 .gitignore 에 설정하시면 됩니다. 우리는 .env.develpoment, .env.production 을 사용할려고 왔으니 사용해보자. .env.develpoment - 개발 환경에서 사용되는 환경 변수 - next dev 를 실행할 때 실행됩니다. - 개발 환경에서 사용할 키, API 엔드포인트 등을 설정해줍시다. .env.production - 프로덕션 환경에서 사용되는 환경 변수 - next start, build 에 실행됩니다. - 상용 환경에서 사용할 키, API 엔드포인트 등을 설정해줍시다. 서버, 클라이언트 사용방법 - 기본적으로 서버 측에서 사용시에는 환경 변수에 별도 접두사 없이 사용하시면 됩니다. ..