메로그

SEO 는 검색엔진에 친화적인 사이트를 구축하여 광고가 아닌 자연 검색 결과를 통해 트래픽의 양과 질을 잡는 작업을 의미 합니다. 이렇기 때문에 SEO 는 단순한 방법이라기 보다는 우리가 사용자에게 유의미한 양질의 콘텐츠를 제공함하는 일종의 마케팅 작업이라고 생각해야 합니다. 그렇기 때문에 SEO 에서 가장 중요한 것이 무엇일까? 라는 질문에는 사용자가 검색한 검색어를 기반의 키워드 콘텐츠를 작성해야하고 이를 통해 싸이트의 순위를 올리는 것 입니다. SERP(Search Engine Result Page) 에 Ad, 광고 라는 라벨이 붙어 상단에 노출되는 부분을 Paid Search Result 라고 하며, 그 밑이 자연 검색 결과로 SEO의 영향을 받는 부분 입니다. 우리는 이 부분을 공략해야 하는 것..

props drilling 을 해결하기 위해 페이스북에서 만든 공식 라이브러리로 redux 대신 사용하는 상태관리 라이브러리 입니다. atoms 기반의 상태관리를 사용하여 컴포넌트 간 상태를 유기적으로 관리할 수 있습니다. 조끔더 쉽게 말해서 redux 보다 사용하기 쉬워서 사용하는 라이브러리입니다. 대신 단점으로는 별도의 디버깅 툴이 존재하지 않습니다. 설치 yarn add recoil 설치가 완료되면, 바로 최상단 루트로 가서 recoil 을 사용하겠다라는 명시를 해주도록 합시다. RecoilRoot 를 사용해서 최상단에 감싸주면 됩니다. import React from 'react'; import { RecoilRoot } from 'recoil'; function App() { return ( )..

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 로 가봅시다! 자 페이지를 가면 사이트가 자동으로 연동된 것..