전체 글
-
트래픽을 쓸어 담는 검색엔진 최적화 - chapter 3, 테크니컬 SEOBook Study 2022. 10. 1. 23:54
본문은 서적 '트래픽을 쓸어 담는 검색 엔진 최적화' 를 읽고 남기는 요약본입니다. 더 자세한 정보를 얻기 원하신다면 해당 서적을 구매하시는 것을 추천드립니다. 이전 글 보고 오기 트래픽을 쓸어 담는 검색엔진 최적화 - chapter 2, 다양한 SEO 캠페인 본문은 서적 '트래픽을 쓸어 담는 검색 엔진 최적화' 를 읽고 남기는 요약본입니다. 더 자세한 정보를 얻기 원하신다면 해당 서적을 구매하시는 것을 추천드립니다. 이전 글 보고 오기 트래픽을 junheedot.tistory.com 테크니컬 SEO는 웹 사이트의 콘텐츠를 검색엔진에 잘 전달하여 검색엔진이 해당 웹 사이트와 웹 페이지 정보를 이해하고 노출할 수 있도록 처리하는 SEO 프로세스의 한 부분입니다. 과거 테크니컬 SEO는 제목, 메타 디스크립..
-
트래픽을 쓸어 담는 검색엔진 최적화 - chapter 2, 다양한 SEO 캠페인Book Study 2022. 9. 28. 21:48
본문은 서적 '트래픽을 쓸어 담는 검색 엔진 최적화' 를 읽고 남기는 요약본입니다. 더 자세한 정보를 얻기 원하신다면 해당 서적을 구매하시는 것을 추천드립니다. 이전 글 보고 오기 트래픽을 쓸어 담는 검색엔진 최적화 - chapter 1, SEO를 하는 이유 본문은 서적 '트래픽을 쓸어 담는 검색 엔진 최적화' 를 읽고 남기는 요약본입니다. 더 자세한 정보를 얻기 원하신다면 해당 서적을 구매하시는 것을 추천드립니다. SEO란? SEO(Search Engine Optimization junheedot.tistory.com 변화하는 SEO의 범위 SEO 범위는 다이어그램으로 설명할 수 있습니다. 다이어그램의 원은 웹 사이트를 의미하며 좌측은 소유한 웹 사이트(온페이지)이고 우측은 다른 웹 사이트(오프페이지)..
-
트래픽을 쓸어 담는 검색엔진 최적화 - chapter 1, SEO를 하는 이유Book Study 2022. 9. 28. 21:42
본문은 서적 '트래픽을 쓸어 담는 검색 엔진 최적화' 를 읽고 남기는 요약본입니다. 더 자세한 정보를 얻기 원하신다면 해당 서적을 구매하시는 것을 추천드립니다. SEO란? SEO(Search Engine Optimization)란 검색엔진을 사용하는 타깃 고객에게 웹 페이지의 콘텐츠를 효과적으로 상위 노출하기 위한 기술적이고도 전략적인 작업이다. 놓칠 수 없는 트래픽 93%의 인터넷 사용자는 검색엔진에서 온라인 경험을 시작합니다. 그 중 75%의 검색엔진 사용자는 검색 결과에서 두 번째 페이지로 넘어가지 않습니다. 첫 번째 페이지에 있는 결과 내에서만 정보를 찾는다는 의미입니다. 70~80%의 사용자는 광고를 클릭하지 않고 검색엔진 결과에 집중합니다. 바로 자연 검색 결과로 넘어온다는 의미..
-
Next.js - middleware 사용하기 (로그인 연동하기)React.js, Next.js 2022. 9. 25. 21:49
이번 로그인 연결은 세션을 사용하기로 하였다. 웹 브라우저에서는 직접적으로 세션 ID 에 접근이 불가능하지만, 세션 쿠키에 들어있을 경우 자동으로 인식하여 헤더에 넣어 보내주기 때문에 로그인 로직을 구현하는데 문제가 되지 않았다. 시나리오에 사용되는 페이지는 다음과 같다 sign_up (회원가입 페이지) sign_in (로그인 페이지) welcome (로그인 시 접근하는 페이지) 해당 페이지에 미들웨어를 연동하여, 다음 상황을 구현할 것이다 로그인한 이후 /sign_in 페이지에 접근할 경우, /welcome 페이지로 보내주기 로그인하지 않은 경우 /welcome 페이지에 접근할 경우, /sign_in 페이지로 보내주기 따라서 미들웨어에서는 각각의 페이지에 대한 정보를 먼저 받아야 하고, 이를 미들웨어에..
-
Next.js - middleware 사용하기 (기본편)React.js, Next.js 2022. 9. 25. 21:37
Advanced Features: Middleware | Next.js Advanced Features: Middleware | Next.js Learn how to use Middleware to run code before a request is completed. nextjs.org nested-middleware | Next.js nested-middleware | Next.js Nested Middleware You are defining a Middleware file in a location different from /middleware , which is not allowed. While in beta, a Middleware file under specific pages would on..
-
Next.js - 스타일드 컴포넌트에 SSR 적용하기React.js, Next.js 2022. 9. 25. 21:33
Global style 및 헤더 컴포넌트에 SSR 적용하기 레퍼런스 next.js/examples/with-styled-components at canary · vercel/next.js GitHub - vercel/next.js: The React Framework The React Framework. Contribute to vercel/next.js development by creating an account on GitHub. github.com Start 기본적으로 Next.js 에서 SSR 을 공식적으로 지원하는 라이브러리는 다음과 같습니다. Examples Styled JSX Styled Components Emotion Linaria Tailwind CSS + Emotion Styletr..
-
Next.js - CSR, Client side data fetchingReact.js, Next.js 2022. 9. 18. 20:43
Data Fetching: Client side | Next.js Data Fetching: Client side | Next.js Learn about client-side data fetching, and how to use SWR, a data fetching React hook library that handles caching, revalidation, focus tracking, refetching on interval and more. nextjs.org Client-side 데이터 패칭은 SEO 인덱싱이 필요 없는 페이지에서 유용합니다. 해당 상황의 경우에는 너의 data를 pre-render 할 필요도 없고, 페이지가 빈번히 업데이트되야 할 것입니다. 서버-사이드 렌더링 API 들과 다르..
-
Next.js - SSG, getStaticPropsReact.js, Next.js 2022. 9. 18. 20:39
Data Fetching: getStaticProps | Next.js Data Fetching: getStaticProps | Next.js Fetch data and generate static pages with `getStaticProps`. Learn more about this API for data fetching in Next.js. nextjs.org 정의 getStaticProps 메서드를 export 한다면, Next.js 는 getStaticProps 에 의해 반환되는 props를 빌드 타입에 프리-렌더할 것입니다. export async function getStaticProps(context) { return { props: {}, // will be passed to the p..