React Router v6 에서 새롭게 도입된 API 중 하나로, 라우터 객체를 생성하는데 사용됩니다.이 함수는 라우터 구성을 객체 형태로 선언적으로 만들 수 있게 해줍니다. 이를 통해 보다 상세한 정의를 할 수 있게 됩니다. 또한, loader 라는 기능을 사용하여 컴포넌트를 렌더링할 때 데이터를 미리 보낼 수 있습니다.정의한 곳에서 이제 useLoaderData 를 이용하여 데이터를 가져와서 사용할 수 있습니다.소스 코드import { lazy, Suspense } from "react";// React Router v6에서의 createBrowserRouter 사용 예import { createBrowserRouter, RouterProvider } from 'react-router-dom';//..
React 에서 폼을 간편하게 관리하기 위한 라이브러리입니다.설치# npmnpm install react-hook-form# yarnyarn add react-hook-formuseForm설치가 완료되면, useForm 훅을 사용하여 폼을 초기화하고 제출 처리 함수를 정의하면 됩니다.import { useForm } from "react-hook-form";function UseForm() { const { register, handleSubmit, formState: { errors }, } = useForm({ defaultValues: { name: "", }, }); const onSubmit = (data) => { console.log(data)..
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 사용법은 아래와 ..
- Total
- Today
- Yesterday
- vue composition api
- NextJS
- nodejs
- 스벨트
- Vite
- React
- 네이버 서치 어드바이저
- 서버 to 서버
- vscode
- nuxt2
- vue router
- 깃허브
- nextjs13
- Github Actions
- 티스토리챌린지
- Git
- Storybook
- docker
- nextjs14
- dockerfile
- openAI
- github
- AWS
- cors
- NUXT
- webpack
- svelte
- 타입스크립트
- 오블완
- seo
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 |