Front-end25 Next.js에서 SEO를 최적화해보자! 일반적으로 검색엔진이 일하는 과정 1. 크롤링 크롤링이란 검색봇이 웹페이지들을 읽으며 컨텐츠를 파싱하는 과정입니다. 크롤링 제외대상 로그인 후 사용할 수 있는 페이지 noindex가 적용된 페이지 rel="follow" rel="sponsored" 가 적용된 a태그 (적용되지 않으면 a태그로 연결된 페이지도 크롤링 대상으로 인식) 광고링크 2. 렌더링 JavaScript를 실행하여 컨텐츠를 보강하는 과정입니다. 하지만 모든 크롤링 봇이 자바스크립트를 실행하는 것이 아니고, 서버사이드 렌더링이 더 빠르게 컨텐츠를 제공하기 때문에 SSR이 CSR보다 SEO에 좋습니다. 또한 자바스크립트를 실행하는 크롤링 봇이더라고 하더라도 해당 봇이 지원하는 자바스크립트 문법을 사용해야합니다. 3. 인덱싱 페이지가 가지고 .. 2023. 10. 11. CSR & SSR 동작 방식 정리 및 선택하기 MPA MPA는 Multiple Page Application의 약자로, 말그대로 여러개의 페이지로 구성된 애플리케이션입니다. MPA는 사용자가 애플리케이션 내에서 페이지를 이동할 때마다 페이지의 전체 컨텐츠와 기능을 매번 서버에서 받아와서 매번 전체 페이지를 다시 렌더링해주는 웹개발 방식입니다. MPA는 전통적인 웹 어플리케이션 구조로, 웹 초기 시절에는 대부분의 웹사이트가 MPA구조로 개발이 되었습니다. MPA방식으로 개발을 하게 되면, 구조가 간단하고 각 페이지가 독립적이기 때문에 개발자가 이해하고 유지보수하는데 큰 비용이 들지 않습니다. SPA SPA는 Single Page Application의 약자로, 하나의 페이지로 구성되어 있어 MPA와는 반대되는 개념입니다. 하나의 페이지에서 웹 어플리케.. 2023. 2. 1. 리액트와 계층형 설계 계층형 설계란 계층형설계는 소프트웨어 아키텍처를 구성하는데 사용되는 패턴으로, 서로 다른 기능을 수행하는 여러 계층으로 애플리케이션을 나눕니다. 작동 원칙 계층형 설계의 원칙은 상위 계층에서는 하위계층으로만 접근할 수 있으며, 서로 마주보는 두개의 계층사이에서만 상호작용이 이루어집니다. 그리고 하위계층에서는 자체적으로 상위계층을 호출 할 수 없고, 상위계층의 호출에 응답만 하게 됩니다. 각 레이어는 그 위에 있는 레이어에 필요한 서비스를 제공하므로 가장 낮은 수준의 레이어는 시스템 전반에서 사용되는 핵심 서비스를 나타냅니다. 때문에 상위에 있는 레이어일수록 호출되는 빈도가 낮기 때문에 수정이 쉬워지고, 하위에 있는 레이어일수록 호출하고 있는 레이어가 그 위에 많기 때문에 수정이 어려워집니다. 모든 어플리.. 2022. 11. 29. Cache-control로 캐시최적화하기 Cache란? 콘텐츠 요청에 빠르게 응답하기 위해 서버와 클라이언트 사이에서 응답 콘텐츠의 사본을 저장하는 공간을 캐시라고 합니다. 이 캐시를 유지하고 처리해주는 별도의 서버를 캐시 서버라고 합니다. 캐시는 보통 클라이언트와 서버 사이에 존재하며, 서버의 성능을 크게 향상시키는 역할을 합니다. 웹은 HTML, 이미지, CSS, 자바스크립트 등 정적 콘텐츠가 많기 때문에 캐시의 역할이 중요합니다. 웹 캐시는 서버와 브라우저 중간에 존재하면서 최초 원본 콘텐츠 요청을 최종 서버에 보내 응답을 받은 후 그 복사본을 만들어 저장하고 사용자에게 응답합니다. 이후 같은 콘텐츠에 대한 요청이 웹 서버에서 원본을 가져오는 대신 캐싱 서버에서 복사본을 받아 원본 서버로의 트래픽을 줄이고 사용자의 요청에 대한 반응 속도를.. 2022. 7. 12. Lazy loading 해서 중요한 리소스 순서 보장하기 웹사이트 페이지를 볼 때 많은 리소스들이 있는데, 그 중 중요하지 않은 리소스들이 먼저 네트워크를 통해 다운이 되고 그 이후에서야 여유가 될때 중요한 리소스가 다운되는 경우가 있습니다. 리소스들의 다운로드 순서가 보장이 되지 않기 때문인데요.(크롬 개발자 도구의 Network 탭에서 리소스들의 다운로드 상태가 pending인 경우 다른 리소들의 다운로드가 너무 많아 순서가 미뤄진 것입니다) 이럴 경우 사용자가 제일먼저 마주치는 최상위의 리소스가 제일 먼저 다운로드 되어서 사용자에게 가장 빨리 보여지도록 하위의 리소스들의 다운로드를 잠시 대기시켜놓는 것이 Lazy loading입니다. 말그대로 게으른(느린) 로딩이죠. 특정 리소스가 다른 리소들에게 밀려 느리게 로딩되는지 확인하기 위해서는 크롬 개발자도구의.. 2022. 5. 3. Next/link, route, <a> 뭐가 어떻게 다른데? Next.js를 사용해보다가, 와 Router 의 차이점에 대해서 궁금해져서 알아보았습니다. About me About me router.push("/about")}>About me 위 코드들은 겉으로 보기엔 경로이동을 한다는 점에서는 비슷해보이지만, 각자 다른 점이 있습니다. 가장 큰 차이점은 "검색엔진최적화(SEO)"였습니다. 1. Route router.push()를 이용하는 경우는 window.location과 비슷하게 동작합니다. 태그를 만들지 않기때문에 검색엔진최적화(SEO)을 신경쓰고 있다면(아마 Next.js를 사용하는 이상 대부분 신경을 쓰지 않을까요) 해당 링크는 크롤링되지 않아서 SEO에 불리합니다. 대부분 onClick과 같은 이벤트 핸들러와 같이 사용됩니다. 2. 하지만 태그는 태.. 2022. 4. 19. 프론트엔드 아키텍처 다층화구조(layered architecture) (+실제 폴더 구성) 해당 글은 아래 원문을 번역하여 다시 작성한 글입니다. (https://blog.logrocket.com/optimize-react-apps-using-a-multi-layered-structure/) 리액트로 사이드프로젝트를 만들면서 리액트의 구조를 어떻게 만들어야 미래의 내가 현재의 나에게 고마워할까^^ 라는 생각을 계속 했었고, 관련 정보를 찾기 위해 이글 저글 기웃기웃 하던 중에 해당 글을 발견했는데, 딱 제가 찾던 정보의 글이라 다시 한번 정리해놓으면 좋을것 같아서 정리했습니다. 그리고 글을 읽으면서 '개발바닥'이라는 유튜브채널의 영상(https://www.youtube.com/watch?v=oqAdL8Nw5j0)에서 'layered-architecture'이라는 용어가 등장했던 것이 기억이 나.. 2022. 4. 12. [Vue vs. React 비교] (4)vue에 watch가 있다면 react에는 useEffect가 있다 Vue Vue에서 watch의 역할은, 해당 데이터가 변경되었을때 이런 로직을 수행하도록 정해놓는 것입니다. 이런식으로 정해놓으면 input 입력창안에 어떤 입력이 들어와서 myName이 변경된다면, myName이 watch속성에 걸려있기 때문에 키보드가 입력될때마다(값이 변화가 있을때마다) 해당 로직(콘솔찍기)이 수행됩니다. 첫번째 인자가 바뀐 값, 두번째 인자가 바뀌기 전의 값으로 들어옵니다. React 이런 data의 변경에 따라 원하는 로직을 수행하고 싶은 경우, React에서는 useEffect() 훅을 이용합니다, useEffect() 안에는 하나의 인자가 들어갈수도, 두개의 인자가 들어갈 수도 있는데요. 하나의 인자가 들어갔다면 무언가 작업을 할 로직이 들어가게 되는데, 이 때 useEffe.. 2022. 3. 15. [Vue vs. React 비교] (3)vue에 computed가 있다면 react에는 useMemo가 있다 vue에서 computed는 간단하게 말하면 data이지만, template에서 바로 사용하지 않고 "계산을 해야하는" data입니다. 예를들어, {{ myMame.split('').reverse().join('') }} 위와같이 data를 template에서 뭔가 계산을 해줘서 뿌려줘야할 때가 있을때, template에서 그 연산을 하게되면, template이 지저분해질 수 있는데, 그것을 아래와 같이 간단하게 바꿀 수 있습니다. Vue {{ computedName }} react Vue에서 data를 연산하는 방법으로 computed가 있다면, react에서는 useMemo를 사용할 수 있습니다. function App() { const myName = "yoy" const computedName =.. 2022. 3. 13. [Vue vs. React 비교] (2) 반복, 조건부렌더링은 어떻게 다를까 1탄 : https://imagineu.tistory.com/70 [Vue vs. React 비교] (1) template 생김새, router 지난번 작은 웹페이지를 vue로 만드는 프로젝트를 포스팅(https://imagineu.tistory.com/60)했었는데, 그때 만들었던 Vue코드를 그대로 React코드로 바꿔보았습니다. 물론 같은 기능을 구현하더라도 여러가 imagineu.tistory.com 반복 결론부터 말하자면, Vue에서의 반복문은 v-for을, React에서의 반복문은 Array.map을 이용합니다. 그럼 제가 만들었던 사이트의 글목록 부분을 보면서 어떻게 생겼나 함께 살펴보겠습니다. Vue Vue는 컴포넌트 안의 속성으로 v-for과 key를 사용해주었습니다. list가 데이터를.. 2022. 3. 9. [Vue vs. React 비교] (1) template 생김새, router 지난번 작은 웹페이지를 vue로 만드는 프로젝트를 포스팅(https://imagineu.tistory.com/60)했었는데, 그때 만들었던 Vue코드를 그대로 React코드로 바꿔보았습니다. 물론 같은 기능을 구현하더라도 여러가지 방법이 있기때문에, 언제나 저의 방법이 정답은 아니라는 점 미리 알아두셨으면 좋겠습니다. 둘 다 자바스크립트 기반 프레임워크라서 그렇게 큰 차이가 없었지만, Vue가 더 익숙한 제 입장에서는 그래도 Vue보다 React가 좀 더 오랜 시간이 걸렸던 것 같습니다 ㅠㅜ 그리고 빠른진행을 위해 UI프레임워크로 Vue는 vuetify를, React는 materialUI를 사용했고, 사용한 컴포넌트의 이름이나 디테일한 디자인같은 부분은 조금씩 다르겠지만 좀 더 쉽게 비교하기 위해 최대한.. 2022. 3. 8. [Vue] options api로 웹사이트 만들기 - 9. 게시글 상세보기(2) ( + 파라미터 넘겨서 동적 라우팅) 시작하기에 앞서, 우리가 만들고 있는 웹사이트의 완성본은 이렇게 생겼습니다! : https://youthful-heyrovsky-6bcc71.netlify.app/ vue2-options youthful-heyrovsky-6bcc71.netlify.app 코드 전체를 다 적기보다는 필요한 부분만 잘라서 설명하기때문에, 전체코드가 궁금하신 분은 : https://github.com/yoycode/vue2-options 를 참고해주세요! GitHub - yoycode/vue2-options Contribute to yoycode/vue2-options development by creating an account on GitHub. github.com 저번글에서 라우터를 연결해봤는데요! 이번글에서는 게시물 .. 2022. 3. 3. [Vue] options api로 웹사이트 만들기 - 8. 게시글 상세보기(1) (+ router 연결) Router를 이용해서 게시글을 눌렀을 때 상세보기 창으로 라우팅해보겠습니다. 라우팅은 URL에 따라 보여줄 컴포넌트를 연결해놓고 , 해당 URL로 이동했을 때 연결된 컴포넌트를 보여주는 방법입니다. Vue Router의 기본적인 태그는 다음과 같습니다 : : 이동할 URL 변경 태그 : URL에 따라 연결된 component를 보여주는 부분 그럼 이제부터 vue-router를 사용해서 게시글 상세보기 창으로 이동하는 부분을 만들어보겠습니다! 1. vue-router 설치하기 우선 vue-router를 설치해줘야 하는데요, 그냥 npm install vue-router를 해보니, 저는 이런 에러 로그가 뜹니다! ERESOLVE unable to resolve dependency tree ~ 어쩌구 ~ F.. 2022. 3. 3. [Vue] options api로 웹사이트 만들기 - 7. 사용자별/ 태그별 게시물 조회하기 시작하기에 앞서, 우리가 만들고 있는 웹사이트의 완성본은 이렇게 생겼습니다! : https://youthful-heyrovsky-6bcc71.netlify.app/ vue2-options youthful-heyrovsky-6bcc71.netlify.app 코드 전체를 다 적기보다는 필요한 부분만 잘라서 설명하기때문에, 전체코드가 궁금하신 분은 : https://github.com/yoycode/vue2-options 를 참고해주세요! GitHub - yoycode/vue2-options Contribute to yoycode/vue2-options development by creating an account on GitHub. github.com 저번 글에서 메인의 왼쪽 섹션에 유저리스트까지 axios.. 2022. 2. 24. [Vue] options api로 웹사이트 만들기 - 6. axios 다중요청해서 동시에 리스트 뿌려주기 시작하기에 앞서, 우리가 만들고 있는 웹사이트의 완성본은 이렇게 생겼습니다! : https://youthful-heyrovsky-6bcc71.netlify.app/ vue2-options youthful-heyrovsky-6bcc71.netlify.app 코드 전체를 다 적기보다는 필요한 부분만 잘라서 설명하기때문에, 전체코드가 궁금하신 분은 : https://github.com/yoycode/vue2-options 를 참고해주세요! GitHub - yoycode/vue2-options Contribute to yoycode/vue2-options development by creating an account on GitHub. github.com 저번 글에서는 v-if를 통해 조건부렌더링을 해봤는데요... 2022. 2. 24. 이전 1 2 다음
