공부
-
[Github] repository 합치기공부 2021. 12. 28. 16:43
1. 깃허브에 기존 레포지토리를 합칠 새로운 레포지토리를 만든다. 2. 1번의 레포지토리를 git clone 해준다. 3. cd 레포지토리명 을 입력하고 해당 폴더(1의 폴더)로 이동한다. 4. subtree를 이용하여 합친다. git subtree add --prefix=(해당 Repository 하위의 디렉터리 명) (옮겨올 Repository 주소) (옮겨올 Repository의 branch) 예시) git subtree add --prefix=vue-practice https://github.com/djWjrh/어쩌고저쩌고.git main 여기에서 아래의 오류가 발생한다면 fatal: ambiguous argument 'HEAD': unknown revision or path not in the ..
-
[Next.js] SEO - 6. Monitoring your Core Web Vitals공부 2021. 11. 9. 15:28
사이트 최적화를 하면, 계속해서 반복할 수 있도록 프로덕션 중에 모니터링 하는 것이 중요하다. Core Web Vitals을 모니터링 할 때, 일회성 랩 테스트에 의존하는 것보다 시간 경과에 따른 추적이 핵심이다. Next.js Analytics Next.js Analytics는 Core Web Vitals를 사용하여 페이지의 성능을 측정하고 분석한다. Vercel 배포에서 구성 없이 Real Experience Score를 수집할 수 있고, 자체 호스팅하는 경우 분석에 대해서도 지원한다. Custom Reporting 또한 Next.js Analytics에서 사용하는 내장 relayer를 사용하여 데이터를 사용자 자신의 서비스로 전송하거나 Google Analytics에 푸시할 수도 있다. 이제 이것을..
-
[Next.js] SEO - 5. Improving your Core Web Vitals공부 2021. 11. 8. 17:59
Introducing Lighthouse 앞서 봤듯, Core Web Vitals은 로딩 수행력(LCP), 상호작용(FID), 시가적 안전성(CLD)를 통해 사용자 경험에 집중한다. 이번에는 Lighthouse라는 시뮬레이션 환경을 사용하여 Core Web Vitals을 어떻게 측정하는지 배운다. Lighthouse는 제공된 URL에 대한 일련의 감사를 실행하여 작동한다. 이러한 감사를 기반으로 페이지가 얼마나 잘 수행되었는지에 대한 보고서를 생성한다. 개선이 필요한 영역이 있으면, 보고서는 개선방법에 대한 통찰력을 제공한다. Lighthouse 보고서의 두 가지 예를 살펴보고 건강한 Core Web Vitals가 있는 사이트와 그렇지 않은 사이트의 차이점을 살펴보자. Optimized Example L..
-
[Next.js] SEO - 4. Web Performance & Core Web Vitals공부 2021. 11. 5. 17:23
Web Vitals은 웹에서 최종 사용자 페이지 경험을 측정하기 위한 통합 지침 및 측정 항목을 제공하기위해 구글에서 만든 첫 걸음이다. Core Web Vitals는 Web Vitals의 부분 집합이며, 로딩, 상호작용과 시각적 안전성을 측정하는 세가지 매트릭스로 구성되어 있다. 이는 LCP(Large Contentful Paint), FID(First Input Delay) 및 CLS(Cumulative Layout Shift) 이다. 이 세가지 매트릭스에서 좋은 성과를 내는것은 유저들에게 원활한 사용자 경험을 제공한다. Core Web Vitals의 각각에서 낮은 점수를 받은 웹사이트는 검색 엔진 순위에 영향을 미친다. 이는 구글이 Core Web Vitals를 검색 알고리즘의 순위 요소로 사용하기..
-
[Next.js] SEO - 3. Rendering and Ranking공부 2021. 11. 3. 16:12
JavaScript는 웹 개발 생태계의 중요한 부분이다. 과거에는 대부분의 프로그래밍 언어가 모든 콘텐츠를 서버에서 직접 전송했다. JavaScript와 같은 기술을 통해 브라우저에서 정보를 가져오는 것이 그 어느때보다 대중화 되었다. 이는 대부분의 봇이 서버에서 초기 HTML만 분석하고 브라우저로 로드하기 때문에 검색 엔진과 페이지를 이해하는 능력에 영향을 미쳤다. Rendering Strategies 1. Static Site Generation (SSG) Static site generation은 빌드 시 HTML이 생성되는 곳이며, 이 HTML은 각 요청에 사용된다. Static site generation은 사전 렌더링 되기 때문에 페이지 로드에 모든 HTML이 있을 뿐만 아니라 페이지 성능에도..
-
[Next.js] SEO - 2. Crawling and Indexing공부 2021. 11. 2. 21:07
What are HTTP Status Codes? HTTP 응답 상태 코드는 특정 HTTP 요청이 성공적으로 완료되었는지 여부를 나타낸다. 많은 상태코드가 있지만 SEO 컨텍스트에서 의미 있는 것은 소수에 불과하다. 200 'HTTP 200 OK' 성공 상태 응답 코드는 요청이 성공했다는 것을 가리킨다. Google에서 페이지의 색인을 생성하려면 상태 코드 200을 반환해야 한다. 이는 일발적으로 페이지가 유기적 트래픽을 수신하기 위해 페이지에서 찾고자 하는 것이다. 이것은 Next.js가 페이지를 성공적으로 렌더링 할 때 설정된 기본 코드이다. 301/308 'HTTP 301 Moved Permanently' 리디렉션 상태 응답코드는 요청된 리소스가 대상 URL로 확실히 이동되었음을 나타낸다. 이것은 ..
-
[Next.js] SEO - 1. Introduction to SEO공부 2021. 11. 1. 16:26
SEO는 검색 엔진 최적화(Search Engine Optimization)를 의미한다. SEO의 목표는 검색 엔진 결과에서 순위를 높이는 전력을 만드는 것이다. 순위가 높을수록 사이트에 더 많은 유기적 트래픽이 발생하여 궁극적으로 더 많은 비즈니스로 이어진다. Why is SEO so important? SEO는 브랜드에 대한 전환율과 자신감을 높이는 열쇠이다. 더 높은 검색 순위 배치는 더 많은 유기적 방문자와 동일하다. 검색 엔진 유기적 트래픽(검색 엔진에서 결과를 클릭하여 사이트를 방문하는 방문자)은 다음 세가지 이유로 많은 비즈니스의 핵심이다. 질적으로 - 방문자가 고객으로 전환될 가능성이 높아진다. 신뢰할 수 있는 - 브랜드 또는 사명에 대한 더 높은 자신감 저비용 - 소요된 시간과 노력을 제..
-
[Next.js] 7. Deploying Your Next.js App공부 2021. 10. 29. 17:18
Next.js를 만든 사람의 플랫폼인 Vercel에 Next.js를 배포하는 방법을 알아본다. 다른 배포 옵션에 대해서도 알아 볼 것이다. 들어가기에 앞서 깃허브 계정이 있어야 함을 알린다. Push to GitHub 배포하기 전에 깃허브에 우리의 Next.js 앱을 push한다. 이는 배포를 훨씬 더 쉽게 만든다. 개인 깃허브 계정에 next.js-blog라는 저장소를 만든다. 저장소는 공개 또는 비공개일 수 있다. ReadMe나 다른 파일로 초기화할 필요 없다. 저장소 설정에 도움이 필요하면 깃허브 가이드를 보라. 그리고 아직 Next.js 앱에 대해 로컬로 git 저장소를 초기화하지 않았다면 지금 한다. Next.js 앱을 내 계정의 깃허브 저장소로 push한다. Deploy to Vercel Ne..