Programming/TypeScript, JavaScript (4) 썸네일형 리스트형 애플리케이션 렌더링 전략 (CSR, SSR) 웹 개발을 할 때 고려해야하는 중요한 사항들 중 하나는 애플리케이션 어디에서 로직 및 렌더링을 구현할지이다. 웹사이트를 만드는데에는 여러 다른 방법들이 있으므로 각자 방식의 특성을 이해하고, 상황에 맞는 전략을 사용해야한다. 렌더링 서버 사이드 렌더링(Server Side Rendering - SSR) 서버 렌더링은 네비게이션의 응답으로 서버의 페이지에 대한 전체 HTML을 생성한다. 이렇게 할 경우 브라우저가 응답 받기 전에 처리되므로 클라이언트에서 데이터 가져오기 및 템플릿을 위한 추가 동작이 필요없다. 서버 렌더링은 보통 빠른 FP(First Paint)와 FCP(Fisrt Contentful Paint)를 생성한다. 서버에서 렌더링을 하게되면, 많은 JS코드들을 클라이언트에게 전송할 필요가 없어진.. JavaScript의 Eventing이란? Eventing 전파를 막는 세 가지 기법 최근 동아리에서 FE 스터디를 진행하고 있다. web.dev 사이트에서 글을 하나 골라서 읽고 자료조사 후 설명하기가 스터디의 목적이다. 나의 발표 차례가 되었고, 어떤 내용을 공부해볼까? 하다가 흥미로운 글을 하나 발견했다. JavaScript의 eventing에 대한 글이었다.Eventing Style capturing, bubbling에 대해 알아보고 이벤트 전파를 막는 세 가지 기법 stopPropagation, stopImmediatePropagation, preventDefault에 대해 자세히 적혀있다. 이 글은 해당 내용을 다룬다. 아래 부분은 web.dev에 기재된 JavaScript eventing deep dive를 번역한 내용이다. (모든 내용을 번역하진 않았고, 핵심 내용만 진행했.. [ESLint] imports/exports 구문의 순서 자동 정렬하기 이 글은 ESLint를 통해 typescript(혹은 javascript)의 imports/exports 구문을 정렬하는 방법에 대해 공부하며 작성한 글이다. ESLint에 관심이 있거나, imports를 자동으로 정렬하는 방법을 찾고 고민하고 계신 분들이 읽으면 좋을 글이다. 사건의 발단 여러 명이서 작업하고 있는 Angular 프로젝트가 있었다. 요즘에는 개발을 시작할 때, 초기 세팅(tsconfig, eslint, babel, webpack 등등)을 다 한 상태에서 작업을 하지만(심지어 boilerplate도 너무 잘 나와있다.) 사건의 발단이 된 프로젝트는 그렇지 않았다. Linter 설정이 되어있지 않아서 사람마다 코드 스타일도 달랐고, 무엇보다 코드 리뷰할 때 PR 작업과 전혀 관련없는 오로지.. [DefinitelyTyped] 내가 쓰고있는 패키지의 타입 고치기! 최근에 오픈소스 컨트리뷰션에 참가하게되면서 TypeScript 번역을 집중적으로 하고있다. (관련해서는 활동이 끝나면 글을 써볼까 한다.) TypeScript로 개발하다보니, type definition은 이제 나에겐 없어서는 안될 존재가 되었고, 마침! 사용하던 패키지에서 타입을 고쳐야함을 발견했다. node-schedule이라는 패키지를 사용하고있는데 워낙 패키지가 업데이트도 느리고 (글 쓴 시점 기준, 가장 최근 버전 업데이트가 2019년 2월...) PR과 issue는 쌓여가는데 메인테이너들이 잘 안봐주는 것 같다. 아무튼, 이걸 쓰다가 타입을 고쳐야함을 알게되었는데, 타입을 고쳐 PR을 받아내기까지에는 시간이 걸릴 것 같아서 해당 코드에서는 일단 내가 타입을 직접 따로 정의해서 사용했었다. 그렇.. 이전 1 다음
