Front-end/React.js9 Next.js에서 SEO를 최적화해보자! 일반적으로 검색엔진이 일하는 과정 1. 크롤링 크롤링이란 검색봇이 웹페이지들을 읽으며 컨텐츠를 파싱하는 과정입니다. 크롤링 제외대상 로그인 후 사용할 수 있는 페이지 noindex가 적용된 페이지 rel="follow" rel="sponsored" 가 적용된 a태그 (적용되지 않으면 a태그로 연결된 페이지도 크롤링 대상으로 인식) 광고링크 2. 렌더링 JavaScript를 실행하여 컨텐츠를 보강하는 과정입니다. 하지만 모든 크롤링 봇이 자바스크립트를 실행하는 것이 아니고, 서버사이드 렌더링이 더 빠르게 컨텐츠를 제공하기 때문에 SSR이 CSR보다 SEO에 좋습니다. 또한 자바스크립트를 실행하는 크롤링 봇이더라고 하더라도 해당 봇이 지원하는 자바스크립트 문법을 사용해야합니다. 3. 인덱싱 페이지가 가지고 .. 2023. 10. 11. 리액트와 계층형 설계 계층형 설계란 계층형설계는 소프트웨어 아키텍처를 구성하는데 사용되는 패턴으로, 서로 다른 기능을 수행하는 여러 계층으로 애플리케이션을 나눕니다. 작동 원칙 계층형 설계의 원칙은 상위 계층에서는 하위계층으로만 접근할 수 있으며, 서로 마주보는 두개의 계층사이에서만 상호작용이 이루어집니다. 그리고 하위계층에서는 자체적으로 상위계층을 호출 할 수 없고, 상위계층의 호출에 응답만 하게 됩니다. 각 레이어는 그 위에 있는 레이어에 필요한 서비스를 제공하므로 가장 낮은 수준의 레이어는 시스템 전반에서 사용되는 핵심 서비스를 나타냅니다. 때문에 상위에 있는 레이어일수록 호출되는 빈도가 낮기 때문에 수정이 쉬워지고, 하위에 있는 레이어일수록 호출하고 있는 레이어가 그 위에 많기 때문에 수정이 어려워집니다. 모든 어플리.. 2022. 11. 29. 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. [React] class방식 vs. function 방식 컴포넌트 코드량 비교 클래스 컴포넌트와 함수형 컴포넌트의 코드를 비교해보면서 함수형 컴포넌트의 소중함(?)에 대해서 알아보도록 하자.. 위와 같이 + 버튼을 누르면 숫자가 1씩 증가하고, -버튼을 누르면 숫자가 1씩 감소되는 아주 간단한 기능을 만들어보면서 class형 컴포넌트와, 함수형 컴포넌트의 코드 양을 비교해보자. 클래스(class) export default class App extends React.Component { state = { num: 1 }; render() { const num = this.state; return ( {num} + - ); } incre = () => { this.setState((state) => { return { num: state.num + 1 }; }); }; decre =.. 2022. 1. 29. 이전 1 다음
