Web 썸네일형 리스트형 CSR과 SSR의 차이점과 장단점 (feat. SEO 대응) SSR(Server Side Renering)이란 무엇일까 서버에서 렌더 될 준비를 끝마친 상태로 html 응답을 브라우저(클라이언트)에 보내는 것이다. 서버 사이드 렌더링에서의 렌더링 의미는 HTML 파일 내에 내용이 있는지의 여부이다. 모든 데이터가 이미 HTML에 담긴 채로 브라우저에 전달되기 때문에 SEO에 유리하다. CSR보다 초기 구동 속도가 빠르다. MPA(Multi Page Application) 전통적인 웹페이지 구성방식으로 페이지 이동할때마다 서버로부터 새로운 HTML 받아와 페이지 전체를 렌더링 하는 방식이 이에 해당된다. CSR(Clinet Side Renering)이란 무엇일까 CSR은 말 그대로 SSR과 달리 렌더링이 클라이언트 쪽에서 일어난다. 즉, 서버는 요청을 받으면 클라이.. 더보기 [Nuxt3] 구글 애널리틱스(GA) , 구글 태그 매니저(GTM) 세팅 구글 애널리틱스 적용 vue-gtag 사용 - 유니버설 애널리틱스 서비스를 종료될 예정이라 애널리틱스4를 사용 - 구글 지침 변경으로 이제 vue-gtag를 이용해서 googleAnalytics4를 연동할 수 있다. - 공식문서 : https://matteo-gabriele.gitbook.io/vue-gtag/ Get started - vue-gtag This is just an example by using the Google Analytics domain ID as a configuration ID, but it is possible to use things like Google Adwords as well, so make sure to read the gtag documentation if you .. 더보기 [PM2] node버전 변경 안되는 이슈 사건의 발단 운영하고 있는 서비스를 배포 했는데 아래 와 같은 현상 발생하였고, 확인해본결과 이번에 작업했던 node 변경한건이 적용이 안되었다는걸 발견하였다. 참고로 node 16 에서 node 18로 변경하였다. 해결 pm2 reload all 명령어로 해결했다는 글이 있어서 동일하게 작업 해보았지만 변경되지 않았다. pm2 삭제후 다시 재설치 하고 나니 해결되었다. 참고 https://velog.io/@milkcoke/Live-node.js-process-%EC%97%90-node-%EB%B2%84%EC%A0%84%EC%97%85%EC%8B%9C 더보기 [Nuxt3] 메모리 누수 (feat. nuxt3 버전 이슈) 사건의 발단 pc웹과 특히 모바일웹에서 페이지 이동을 반복적하다보면 메모리가 쌓이다가 결국 웹이 더이상 작동되지않고 콘솔에 스크립트에러를 뱉으며 멈추는 현상을 발견하기 되었다. 아래 메모리 누수 있을법한 자바스크립트는 수정은 해보았지만 왜 계속 메모리가 쌓이는건지 알수없었던 상황에서 우리와 비슷한 상황의 글을 발견했다. https://github.com/nuxt/nuxt/discussions/23087 How to debug a nuxt-related HUGE memory leak? · nuxt nuxt · Discussion #23087 Vue 3.6 / 3.7 production build. Every request with full SSR create a 1.2MB memory leak in ser.. 더보기 [Nuxt3] 서버 cpu 증가 이슈 (& 메모리 누수) 사건의 발단 현재 운영하고 있는 서비스에 라이브 서버에서 평균 8시간~10시간마다 cpu가 30%이상 오르는 현상이 발생하였다. 백엔드에는 cpu가 30%이상 올라가면 서버 재시작하도록 구성이 되어있다 왜 이런 현상이...? cpu가 점차 차오르는 현상을 보고 메모리 누수로 의심을 하였고, 사용하고 있는 패키지부터 메모리 누수가 생길만한 부분들은 다 확인을 하고 하나씩 수정도 해보았다. 결국 원인이 되었던건.. 현재 우리 서비스는 vuetify 3.3.9버전을 사용하고 있었고 해당 버전은 메모리 누수가 있는 버전으로 확인이 되었다. vuetify 버전 리스트중에 메모리 누수 해결된 (3.5.2 버전)최신버전으로 변경하고 해당 이슈는 종결되었다. 더보기 [Vue 시작하기] Nuxt란 무엇일까? 1. Nuxt란 무엇일까? Nuxt.js는 일반적인 Vue.js 어플리케이션을 만드는 프레임워크이다. 주요 범위는 클라이언트/서버 배포를 추상화 하는 동안의 UI rendering 이다. 비동기 데이터, 미들웨어, 레이아웃 등과 같은 클라이언트 측과 서버 측 사이에서 개발하는데 도움되는 기능을 제공한다. 2. 특징 Vue 파일 쓰기 (.vue) 코드 분할 자동화 서버 사이드 렌더링 비동기 데이터 기반의 강력한 라우팅 시스템 정적 파일 전송 ES2015+ 지원 JS & CSS 코드 번들링 및 압축 요소 관리 (, , 기타.) 개발 중 Hot module 대체 전 처리기 지원: SASS, LESS, Stylus 등 HTTP/2 푸시 헤더 준비 모듈식 아키텍처 확장 3. 구조 4. 서버 렌더링 (범용 SSR).. 더보기 [Vue 시작하기] Vue 의 구성 1. Vue의 필수 요소 Vue 인스턴스 생성 Vue 인스턴스의 옵션 data 반응형 모델을 선언할때 사용, 즉 값이 변경될때 뷰에서 보이는 값도 같이 연동되어 변경되는것을 의미한다. 인스턴스가 생선된 후 this.$data로 접근할 수 있다. 또한 Vue인스턴스는 데이터 객체 내부의 값을 프락싱 하므로 this.$data.a와 this.a는 같은 값이다. 자바스크립트의 Object 자료형은 메모리에 저장된 값을 직접 가져오는 호출이 아닌 메모리에 저장된 주소 값을 가져오는 참조에 의한 호출이기 때문에 컴포넌트에서 data 속성을 일반 객체로 선언한다면 같은 주소를 참조하는 데이터들을 컴포넌트들이 공유하게 된다. props 속성은 부모 컴포넌트로부터 데이터를 받아올 수 있게 노출된 속성들이다. HTML .. 더보기 [Vue 시작하기] 개발 환경 세팅 1. IDE 선택하기 vscode 설치하기 Vetur Extension : Vetur 플러그인은 Vue.js를 개발하는데 도움을 주는 플로그인(타입스크립트를 함께 사용) Vue Peek Extension : 코드상에 작성되어 있는 Vue 컴포넌트를 통해 해당 컴포넌트 파일을 바로 열고 그 파일로 이동할 수 있는 기능을 제공하는 플로그인 Vue 2 Snippets Extension : Vue 컴포넌트를 자동완성을 제공한다. 2. Nodejs 환경 구축하기 Vue, Angular, React와 같은 모던 자바스크립트 프레임워크는 대부분 nodejs를 사용하여 코드를 빌드한다. Nodejs의 공식 홈페이지에서 LTS(Long Term Support) 안정성 보장이되어 해당 버전을 다운받는다. 버전 확인하는방법.. 더보기 [Typescript] unkown type typescript 3.0 버전부터 unkown 타입이 추가되었다. 우리가 흔히 어떤타입으로 사용해야할지 모를 경우 모든 타입을 할당받을수 있는 any 타입을 사용해왔는데, unkown 타입 또한 모든 타입을 할당될 수 있다. 그럼.. unkown 타입은 왜 생겨난걸까..? 아래 코드를 보면 그 차이를 알 수 있다. 각각 myThing() 이라는 존재 하지 않는 함수를 호출할 경우, unkown 타입은 미리 개발자에게 경고를 전달해주지만, any는 개발당시에 알려주지 않기때문에 오류를 발생하게 된다. 결론 any 타입 보단 unkown 타입을 사용하여 문제 되는 코드를 미리 예방하자 더보기 [Type Guard] is keyword 사용자 타입가드 : is - 타입스크립트에 is 라는 키워드를 사용하면 타입가드를 지정해 줄 수 있다. - typeof 같이 타입을 따져 분기 처리 역할을 해주고, 타입명제를 만족할 조건(boolean)을 return값으로 지정해주면 된다. 아래 소스 코드를 보면 is 사용할때와 boolean 사용했을 경우 차이점을 확인 할 수 있다. 샘플코드처럼 is를 사용하지 않았을 경우 p.meow()를 사용하기위해 (p as Cat).meow()를 강제 케스팅을 시켜줬어야 했지만 is 를 사용하면 컴파일러에서 값의 타입을 알기 때문에 강제 케스팅을 시켜주지 않아도 된다. 소스 출처 : https://github.com/ipenywis/typescript-mistakes 더보기 [펌]IE 핵 (css hack) 출처 | http://blog.naver.com/gjsl19/120194908595 IE 핵 (css hack) IE7. IE8. IE8+9 프로퍼티의 속성값 뒷부분에 \0/IE8 를 붙이면 IE8 에서 적용이 됩니다. 프로퍼티의 속성값 뒷부분에 \0/IE9 를 붙이면 IE9에서 적용이 됩니다. 프로퍼티의 속성값 뒷부분에 \0/IE8+9 를 붙이면 IE8과 IE9 모두 적용이 됩니다. ex) div {width:100px \0/IE8+9; height:50px \0/IE8+9;} IE8 (속성핵) *이거 잘 안됨 프로퍼티의 속성값 앞부분에 (/*＼**/) 를 붙이면 IE8에서만 적용이 됩니다. ex) div {width:/*＼**/100px; height:/*＼**/50px;} IE8 *이거 잘 안됨 프.. 더보기 DOM API 정의 출처 | http://blog.naver.com/tnsgus239/220512860363 ■ DOM (Document Object Model)- HTML과 XML 문서의 data를 효과적으로 다루기 위한 API- 문서의 논리적 구조와 문서가 접근되고 다루어지는 방법 정의- 객체(Object)로 모델링, 트리(tree)구조의 논리적인 형태로 표현 ■ DOM의 장점- 문법으로부터 내용을 추천- 내부 문서 조작의 단순화- 전형적인 계층적 또는 관계형 DATABASE 구조와 유사 ■ XML 문서에서의 DOM 해석 ■ Node Object ■ insertBefore(newChild, refChild)- newChild: 문서의 계통도에 삽입될 새로운 element를 지정 createElement 메소드에 의하여 .. 더보기 이전 1 2 3 다음
