얼음저장소

SEO가 왜 그렇게 중요한가? SEO는 브랜드에 대한 전환율과 자신감을 높이기 위한 키이다. 더 높은 검색순위 배치는 더 많은 방문자로 연결된다. 검색엔진 유기적 트래픽(검색 엔진에서 사이트를 방문하는 방문자)은 다음과 같은 세가지 이유로 많은 비즈니스의 핵심이다. 정성적 - 방문자가 고객으로 전환될 가능성이 높다 신뢰할 수 있는 - 브랜드에 대한 더 높은 신뢰도 저비용 - 소요된 시간과 노력을 제외하고 검색 엔진 순위를 높이는 좋은 SEO 관행을 무료로 할 수 있다. 상위 자연 검색 결과 위치에 표시되는데 직접적인 비용이 없다. ** SEM(검색 엔진 마케팅)과는 다름 웹사이트 최적화 프로세스 기술 - 크롤링 및 웹 성능을 위해 웹사이트를 최적화 생성 - 특정 키워드를 대상으로 하는 콘텐츠 전략을 만든..

이 글은 Next.js 공식 튜토리얼을 참고하여 정리한 글입니다. 동적 경로 (Dynamic Routes) 동적 경로로 페이지를 정적 생성 하는 방법 각 게시물에 경로가 있어야함 ‘/posts/’, 여기서 id 는 최상위 posts 디렉토리 아래에 있는 마크다운 파일의 이름이다 pages/posts 폴더 내에 [id].js 라는 파일을 생성 대괄호로 묶인 파일 이름은 동적경로를 나타냄 getStaticPaths 를 이용 객체 배열이 들어옴 (params 내에 id 값이 있어야함) // Returns an array that looks like this: // [ // { // params: { // id: 'ssg-ssr' // } // }, // { // params: { // id: 'pre-rend..

기본적으로 Next.js 는 모든 페이지를 미리 렌더링한다. 즉, Next.js 는 클라이언트 측 JavaScript 로 모든 작업을 수행하는 대신 각 페이지에 대해 미리 HTML을 생성한다. 생성된 HTML은 해당 페이지에 필요한 최소한의 JavaScript 코드와 연결된다. 브라우저에서 페이지를 로드하면 해당 JavaScript 코드가 실행되고 페이지가 완전히 대화식으로 만들어진다 (이 과정을 hydration, 수화 라고 함) 사전 렌더링이 진행중인지 확인하는 방법 브라우저에서 JavaScript 를 비활성화한다 (개발자도구 → 커맨드+Shift+P → 자바스크립트 검색 후 사용중지) 다음 페이지에 액세스 → https://next-learn-starter.vercel.app/ 앱 UI 가 제대로 ..

이 글은 Next.js 공식 튜토리얼을 참고하여 정리한 글입니다. 0. 설치 npx create-next-app nextjs-blog --use-npm --example "" 1. 라우팅 page 폴더 내 폴더나 파일 생성 ex ) /posts/first-post 경로를 만들고싶다면 pages/posts/first-post.js 이런식으로 파일 생성하면 자동으로 라우팅이 된다. import Link from 'next/link'; // .. 이동하기 ⇒ 위와 같은 예제로 링크 라우팅이 가능 Link 를 이용하면 client-side Navigation 이 가능하다. 브라우저 내 개발자도구로 style 을 변경한 후 페이지 이동하고 돌아와도 바꾼 스타일이 그대로 적용되어있음! a 태그를 쓴다면 브라우저가 ..

다섯번째 수업을 진행하였다. 이번 수업은 과제에 적용해야하는 Next.js 를 비롯하여 SPA, SSR/CSR 그리고 SEO 에 대한 수업을 듣게 되었다. Next.js 는 듣기만 들어보고 실제로는 써본적이 없었기 때문에 단순히 라이브러리처럼 설치하여 사용하면 되는건가? 라는 생각을 했었는데, 실제로 사용해보니 그냥 CRA 를 사용하는 것과 많은 부분이 달랐다. 이번 과제는 두개의 기업 과제 중에 선택해야 했는데 우리 팀은 그 중에 많이 적용해보지 못했던 스크롤 애니메이션이 많이 들어간 과제를 선택하게 되었다. 게다가 이번 과제에서는 E2E Test 를 구현해야한다는 조건이 있었다. 써보지 못한 프레임워크(Next.js)에다가 써보지 못한 E2E 테스트 툴(Cypress)을 3일 안에 적용해야했기에 현실..