티스토리

우리집 코딩

검색하기

블로그 홈

우리집 코딩

imagineu.tistory.com/m

img 님의 블로그입니다.

구독자: 4

방명록 방문하기

주요 글 목록

Next.js에서 SEO를 최적화해보자! 일반적으로 검색엔진이 일하는 과정 1. 크롤링 크롤링이란 검색봇이 웹페이지들을 읽으며 컨텐츠를 파싱하는 과정입니다. 크롤링 제외대상 로그인 후 사용할 수 있는 페이지 noindex가 적용된 페이지 rel="follow" rel="sponsored" 가 적용된 a태그 (적용되지 않으면 a태그로 연결된 페이지도 크롤링 대상으로 인식) 광고링크 2. 렌더링 JavaScript를 실행하여 컨텐츠를 보강하는 과정입니다. 하지만 모든 크롤링 봇이 자바스크립트를 실행하는 것이 아니고, 서버사이드 렌더링이 더 빠르게 컨텐츠를 제공하기 때문에 SSR이 CSR보다 SEO에 좋습니다. 또한 자바스크립트를 실행하는 크롤링 봇이더라고 하더라도 해당 봇이 지원하는 자바스크립트 문법을 사용해야합니다. 3. 인덱싱 페이지가 가지고 .. 공감수 3 댓글수 2 2023. 10. 11.
CSR & SSR 동작 방식 정리 및 선택하기 MPA MPA는 Multiple Page Application의 약자로, 말그대로 여러개의 페이지로 구성된 애플리케이션입니다. MPA는 사용자가 애플리케이션 내에서 페이지를 이동할 때마다 페이지의 전체 컨텐츠와 기능을 매번 서버에서 받아와서 매번 전체 페이지를 다시 렌더링해주는 웹개발 방식입니다. MPA는 전통적인 웹 어플리케이션 구조로, 웹 초기 시절에는 대부분의 웹사이트가 MPA구조로 개발이 되었습니다. MPA방식으로 개발을 하게 되면, 구조가 간단하고 각 페이지가 독립적이기 때문에 개발자가 이해하고 유지보수하는데 큰 비용이 들지 않습니다. SPA SPA는 Single Page Application의 약자로, 하나의 페이지로 구성되어 있어 MPA와는 반대되는 개념입니다. 하나의 페이지에서 웹 어플리케.. 공감수 0 댓글수 0 2023. 2. 1.
리액트와 계층형 설계 계층형 설계란 계층형설계는 소프트웨어 아키텍처를 구성하는데 사용되는 패턴으로, 서로 다른 기능을 수행하는 여러 계층으로 애플리케이션을 나눕니다. 작동 원칙 계층형 설계의 원칙은 상위 계층에서는 하위계층으로만 접근할 수 있으며, 서로 마주보는 두개의 계층사이에서만 상호작용이 이루어집니다. 그리고 하위계층에서는 자체적으로 상위계층을 호출 할 수 없고, 상위계층의 호출에 응답만 하게 됩니다. 각 레이어는 그 위에 있는 레이어에 필요한 서비스를 제공하므로 가장 낮은 수준의 레이어는 시스템 전반에서 사용되는 핵심 서비스를 나타냅니다. 때문에 상위에 있는 레이어일수록 호출되는 빈도가 낮기 때문에 수정이 쉬워지고, 하위에 있는 레이어일수록 호출하고 있는 레이어가 그 위에 많기 때문에 수정이 어려워집니다. 모든 어플리.. 공감수 0 댓글수 0 2022. 11. 29.
Cache-control로 캐시최적화하기 Cache란? 콘텐츠 요청에 빠르게 응답하기 위해 서버와 클라이언트 사이에서 응답 콘텐츠의 사본을 저장하는 공간을 캐시라고 합니다. 이 캐시를 유지하고 처리해주는 별도의 서버를 캐시 서버라고 합니다. 캐시는 보통 클라이언트와 서버 사이에 존재하며, 서버의 성능을 크게 향상시키는 역할을 합니다. 웹은 HTML, 이미지, CSS, 자바스크립트 등 정적 콘텐츠가 많기 때문에 캐시의 역할이 중요합니다. 웹 캐시는 서버와 브라우저 중간에 존재하면서 최초 원본 콘텐츠 요청을 최종 서버에 보내 응답을 받은 후 그 복사본을 만들어 저장하고 사용자에게 응답합니다. 이후 같은 콘텐츠에 대한 요청이 웹 서버에서 원본을 가져오는 대신 캐싱 서버에서 복사본을 받아 원본 서버로의 트래픽을 줄이고 사용자의 요청에 대한 반응 속도를.. 공감수 2 댓글수 0 2022. 7. 12.
Lazy loading 해서 중요한 리소스 순서 보장하기 웹사이트 페이지를 볼 때 많은 리소스들이 있는데, 그 중 중요하지 않은 리소스들이 먼저 네트워크를 통해 다운이 되고 그 이후에서야 여유가 될때 중요한 리소스가 다운되는 경우가 있습니다. 리소스들의 다운로드 순서가 보장이 되지 않기 때문인데요.(크롬 개발자 도구의 Network 탭에서 리소스들의 다운로드 상태가 pending인 경우 다른 리소들의 다운로드가 너무 많아 순서가 미뤄진 것입니다) 이럴 경우 사용자가 제일먼저 마주치는 최상위의 리소스가 제일 먼저 다운로드 되어서 사용자에게 가장 빨리 보여지도록 하위의 리소스들의 다운로드를 잠시 대기시켜놓는 것이 Lazy loading입니다. 말그대로 게으른(느린) 로딩이죠. 특정 리소스가 다른 리소들에게 밀려 느리게 로딩되는지 확인하기 위해서는 크롬 개발자도구의.. 공감수 0 댓글수 0 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. 하지만 태그는 태.. 공감수 1 댓글수 1 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'이라는 용어가 등장했던 것이 기억이 나.. 공감수 4 댓글수 5 2022. 4. 12.
[Vue vs. React 비교] (4)vue에 watch가 있다면 react에는 useEffect가 있다 Vue Vue에서 watch의 역할은, 해당 데이터가 변경되었을때 이런 로직을 수행하도록 정해놓는 것입니다. 이런식으로 정해놓으면 input 입력창안에 어떤 입력이 들어와서 myName이 변경된다면, myName이 watch속성에 걸려있기 때문에 키보드가 입력될때마다(값이 변화가 있을때마다) 해당 로직(콘솔찍기)이 수행됩니다. 첫번째 인자가 바뀐 값, 두번째 인자가 바뀌기 전의 값으로 들어옵니다. React 이런 data의 변경에 따라 원하는 로직을 수행하고 싶은 경우, React에서는 useEffect() 훅을 이용합니다, useEffect() 안에는 하나의 인자가 들어갈수도, 두개의 인자가 들어갈 수도 있는데요. 하나의 인자가 들어갔다면 무언가 작업을 할 로직이 들어가게 되는데, 이 때 useEffe.. 공감수 1 댓글수 0 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 =.. 공감수 3 댓글수 0 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가 데이터를.. 공감수 2 댓글수 0 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를 사용했고, 사용한 컴포넌트의 이름이나 디테일한 디자인같은 부분은 조금씩 다르겠지만 좀 더 쉽게 비교하기 위해 최대한.. 공감수 0 댓글수 3 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 저번글에서 라우터를 연결해봤는데요! 이번글에서는 게시물 .. 공감수 3 댓글수 1 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.. 공감수 3 댓글수 2 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.. 공감수 1 댓글수 1 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를 통해 조건부렌더링을 해봤는데요... 공감수 2 댓글수 1 2022. 2. 24.
[Vue] options api로 웹사이트 만들기 - 5. v-if로 조건부 렌더링 (v-show 와 v-if의 차이) 시작하기에 앞서, 우리가 만들고 있는 웹사이트의 완성본은 이렇게 생겼습니다! : 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 저번 글에서 글 하나하나를 컴포넌트화 시켜봤었는데요. 이.. 공감수 1 댓글수 1 2022. 2. 24.
[Vue] options api로 웹사이트 만들기 - 4. 컴포넌트화해서 props로 데이터보내기 ( + 가상DOM ) 시작하기에 앞서, 우리가 만들고 있는 웹사이트의 완성본은 이렇게 생겼습니다! : 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 이번 글에서는 반복되는 부분을 컴포넌트화 시키고, pro.. 공감수 1 댓글수 1 2022. 2. 23.
[Vue] options api로 웹사이트 만들기 - 3. v-for로 리스트 뿌려주기 시작하기에 앞서, 우리가 만들고 있는 웹사이트의 완성본은 이렇게 생겼습니다! : 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 저번시간에 데이터를 받아와 브라우저에 뿌려주는 것까지 봤.. 공감수 1 댓글수 1 2022. 2. 23.
[Vue] options api로 웹사이트 만들기 - 2. axios로 API 요청하기 ( + 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 1. axios 설치하기 axios는 간단하게, 서버와 .. 공감수 2 댓글수 1 2022. 2. 20.
[Vue] options api로 웹사이트 만들기 - 1. 초기세팅 ( + 환경변수 설정 ) 시작하기에 앞서, 우리가 만들고 있는 웹사이트의 완성본은 이렇게 생겼습니다! : 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 1. vue 프로젝트 생성하기 우선 초기세팅을 해줘야 합.. 공감수 1 댓글수 0 2022. 2. 20.
[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 =.. 공감수 1 댓글수 1 2022. 1. 29.
CSS sprite - 한번의 통신으로 여러개의 이미지를 한번에 불러와서 웹성능 개선하기 지금 바로 네이버 메인화면에서 F12를 눌러 개발자도구를 들어가봅니다. 개발자 도구에서 Network 탭을 들어가면, 네이버 메인화면을 띄우면서 이루어진 네트워크 전송들이 찍혀있는것을 볼 수 있는데요. 그 중 이미지 파일(.png) 하나를 눌러보면 다음과 같이 메인화면에서 사용된 이미지들을 하나의 png파일로 모아서 하나의 이미지로 만들어놓은 것을 볼 수 있습니다. 이런 방법을 CSS 스프라이트(sprite)라고 하는데, 여러개의 이미지를 하나의 이미지 파일로 결합해 필요한 이미지가 위치하는 픽셀 좌표 정보를 사용하는 방법입니다. 주로 위에서 처럼 아이콘이나 버튼 등 작은 이미지를 사용할 때 많이 사용합니다. 왜 이런 방법을 사용할까? 결론부터 말하자면 웹사이트 성능을 개선하기 위해 http 요청 수를 .. 공감수 1 댓글수 1 2021. 12. 21.
크롬 Lighthouse로 내 웹사이트 성능을 측정해보자 Lighthouse를 통해서 웹 성능을 전반적으로 검사하고 성능을 향상하기 위한 가이드를 제공해줍니다 지금 F12를 눌러 [개발자도구]를 들어간 후 [Lighthouse] 탭 ( 크롬버전에 따라 이름이 [Audit] 일 수도 있습니다. ) Categories는 어떤 부분을 검사하고싶은지, Device는 어떤 기기환경에서의 성능을 검사하고 싶은지 선택해주시면 됩니다. 각각 선택해 준 후 [ Generate report ] 를 눌러 성능 검사를합니다. 그러면 웹 성능 최적화가 왜 중요한지에 대해서 열심히 설명을 해주다가 로딩이 끝나면! 검사를 한 웹 사이트는 제가 vue코드를 react코드로 바꾸면서 만들었던 사이트였는데요. 이런식으로 결과가 나왔습니다. 67점이라는 점수는 Metrics라는 기준에 의해 나.. 공감수 0 댓글수 0 2021. 10. 28.
vue UI라이브러리 Vuetify vs. Quasar ( vs BootstrapVue) 사용해본 장단점 및 느낀점 비교 Vuetify 기반 개발 경험이 있어서 그런지 vuetify가 개인적으로 뭔가 더 익숙하지만 개인 프로젝트를 할 때에는 다른 UI프레임워크도 한번 써보고싶어서 ( + 그 당시에는 vuetify가 vue3을 지원을 안해서 ) 대체 라이브러리를 찾던 중에 Quasar를 사용해봤다. Vuetify보다는 좀 더 얕게 공부하고 사용한 느낌이지만 그래도 둘 다 사용해보면서 느낀점과 이와 관련해 좋은 글이 있어서 중요한부분만 참고해서 번역을 함께 공유:-) https://blog.bitsrc.io/quasar-vs-vutify-vs-bootstrap-vue-choosing-the-right-vuejs-ui-library-cf566f61bc4 Quasar vs. Vutify vs. Bootstrap Vue: Choos.. 공감수 5 댓글수 0 2021. 10. 22.
HTML API Drag and Drop (D&D) 활용 + Vue에 적용 해당 API는 HTML기반 API로 아래 링크에서 자세한 사항을 확인할 수 있다 https://developer.mozilla.org/ko/docs/Web/API/HTML_Drag_and_Drop_API HTML 드래그 앤 드롭 API - Web API | MDN HTML 드래그 앤 드롭 인터페이스는 파이어폭스와 다른 브라우저에서 어플리케이션이 드래그 앤 드롭 기능을 사용하게 해줍니다. developer.mozilla.org 스케쥴 관리 사이트를 Vue로 구현하기 위해 Drag & Drop 기능이 필요했는데, 처음엔 좀 더 다양한 기능이 있는 Vue.Draggable을 시도했었다가 (https://github.com/SortableJS/Vue.Draggable) 내가 원하는 기능 (item 서로 바꾸기).. 공감수 0 댓글수 0 2021. 9. 12.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.