FrontEnd (8) 썸네일형 리스트형 Next js - [window is undefined 에러] "window is undefined" 라는 에러를 next js 프레임워크로 마이그레이션 하면서 처음봤다. react에서 서버사이드 렌더링(next js 프레임워크)을 할때에 웹 페이지를 렌더링 할때에 초기에는 window나 document 전역객체는 선언되지 않기 때문에 해당 변수를 참조할수 없기 때문에 벌어진 일이다. 원인 그러면 중요한 키포인트는 해당 변수를 참조하지 않아도 페이지가 '일단은' 구동하기만 하면 이후에 선언되는 window나 document 변수들이 참조되면서 변수가 제대로 구동하게 하면 되지 않나? 그래서 나중에 배포할 때에 웹페이지를 static page로 빌드 하면서 '일단은' 구동하기면 하면 되도록 문제를 일으키는 변수들에 대해서 조건부 렌더링을 걸었다. 해결 문제를 일으킨 .. CSS 애니메이션 & JS 애니메이션 애니메이션의 과정은 결국 브라우징 렌더링 과정에서의 Layout 단계와 연속적인 Paint단계에서 성능저하가 발생한다. 애니메이션의 성능을 높이는 방법 1. Layer 구성하기 Layout 단계에서 div의 style 속성이 무엇이냐에 따라 별도의 layer가 지정되거나 layout계산이 되기도 한다. 이렇게 나뉜 layer들은 layout의 계산이나 Paint없이 병합을 통해서 새로운 화면을 구상할 수 있다. 출처. http://blog.dotify.fr/interactive-video-part-2-developing-the-player-with-the-new-as3-api/ 브라우저는 다음과 같은 상황에서 DOM을 별도의 Layer로 구성한다. 3D(translate3d, preserve-3d)나 p.. CD와 CI CI (Continuous Integration, 지속적 통합) CI는 자동화된 빌드 및 테스트가 수행된 후, 개발자가 코드 변경사항을 중앙 레포지토리에 정기적으로 병합하는 방식입니다. 여러명의 개발자가 어플리케이션의 각기다른 기능을 동시에 작업하는 것을 목표로 합니다. 물론 기존에도 github과 같이 같은 레포지토리에 여러명이 각기 다른 어플리케이션의 기능을 만들다가 조직이 정한 한날에 모두모여 병합을 시도하면 각자 기능의 변경사항에 따라 충돌할 수 있습니다. CI는 빌드 및 테스트를 자동화 해주어 이러한 충돌을 방지해줍니다. CI의 동작예시 개발자는 자신의 로컬에서 코드를 수정하고 github에 push를 했다. CI도구에서 변경된 코드에 대한 빌드와 테스트를 수행하고 그결과를 피드백 해준다. 빌드.. 모듈 번들러와 트랜스파일러 모듈이란? 모듈이란 여러기능들에 관한 코드들이 한데 모여있는 파일로서 다음과 같은 용도로 사용됩니다. 유지보수성 : 기능들이 모듈화가 잘되어 있다면, 의존성을 그만큼 줄일수 있기 때문에 어떤기능을 개선한다거나 수정할 때에 훨씬 편하게 할 수있다. 네임스페이스화 : 자바스크립트에서 전역변수는 전역공간을 가지기 때문에 코드가 길어지다보면 네임이 겹치는 경우가 발생한다. 이때 모듈화를 하면 중복되는 변수를 줄일수 있다. 각 모듈만의 네임스페이스를 가지기 때문이다. 재사용성 : 똑같은 코드를 반복하여 사용하지않고 모듈로 분리 시켜서 재사용 할 수 있다. 이러한 장점들로 자바스크립트에서는 모듈을 만들고자 하는 여러 시도들이 있었다. CommonJS, AMD, UMD 및 ES6 등 다양한 방식중 ES6에 관하여 알.. BOM & DOM BOM(Brower Object Model) • 브라우저의 창이나 프레임을 프로그래밍적으로 제어할 수 있게 해주는 객체 모델이다. 이를 통해서 브라우저의 새창을 열거나 뒤로 가기 등 다른문서로 이동하는 등의 기능들을 실행 시킬 수 있다. • 전역객체로 window 가 있고 대표적인 하위객체로 location history navigator document screen 등이 있다. 이외 매우많다. • window는 모든 객체의 조상으로서 window 관련 코드를 작성할 때에는 생략도 가능하다. (하지만 다른 함수와 헷갈리므로 명시하자) • 심지어 개발자가 만든 javaScript 변수 또한 window 객체안에 들어간다. var really = 'Really?' window.really; // 'Reall.. 자바스크립트 엔진이 코드를 실행하는 과정 자바스크립트 엔진 • node.js로 생각하면 JS 구동 플렛폼으로서 구글크롬 자바크립트 엔진인 V8로 만들어졌다. • 보통 브라우저들마다 엔진의 종류는 다르나 구동방식은 비슷하다. • 자바스크립트 엔진은 자바스크립트 소스코드를 파싱하여 AST(Abstract Syntax Tree)로 변환한다. • 인터프리터는 AST기반으로 바이트 코드를 생성한다. • 인터프리터는 프로파일링 데이터(자주 사용하는 함수 및 타입정보)를 바이트코드와 같이 최적화 컴파일러(Optimizing compiler) 에게 보낸다. • 최적화 컴파일러는 바이트 코드와 프로파일링 데이터로 최적화 코드(Optimized code)를 생성한다. • 프로파일링 코드가 잘못된 경우 최적화를 풀고(Deoptimize) 다시 바이트코드로 돌아가 .. 브라우저의 렌더링 과정 브라우저가 화면에 나타나는 요소를 렌더링 할 때, 웹킷(webkit)이나 게코(Gecko) 등 과 같은 렌더링 엔진을 사용한다. 렌더링 엔진이 HTML, CSS, JavaScript로 렌더링 할 때 CRP(Critical Rendering Path)라는 프로세스를 사용한다. 웹킷(webkit) • 크롬이나 사파리에서 채용한 HTML, CSS 웹 브라우저 렌더링 엔진 입니다. • 그외 게코(Gecko)는 파이어 폭스에서 사용하는 렌더링 엔진입니다. • 종종 css 접두사로 '-webkit' 라는 표현이 사용됩니다. 해당 웹 브라우저에서 해석해서 렌더링이 가능합니다. CRP(Critical Rendering Path) • 렌더링 엔진이 HTML, JS, CSS 파일을 렌더링 할때 의 프로세스입니다. 1. H.. CSR(Client Side Rendering) 과 SSR(Sever Side Rendering SPA와 MPA • SPA (Single Page Application) • 하나의 html 파일을 기반으로 자바스크립트를 이용해서 동적으로 화면 구성을 바꿔주는 웹 어플리케이션 • MPA (Mutiple Page Application) • 사용자가 페이지를 요청할 때마다 웹 서버가 요청한 UI와 필요한 데이터를 html로 파싱해서 보여주는 웹 어플리케이션 방식이다. 보통 각 SPA방식은 CSR이고 MPA방식은 SSR방식이다. 왜 그런지 알아보도록 하자 CSR CSR에서는 웹브라우저가 서버에 html과 js를 요청하고 나서 해당 내용이 로드 되면 사용자의 상호작용을 JS를 이용해서 동적으로 렌더링 시킨다. 장점 • 첫 로딩만 기다리면, 동적으로 빠르게 렌더링이 되기 때문에 사용자 측면에서 활용하기 좋다... 이전 1 다음
