본문 바로가기

전체 글

 (908)
[번역]모듈 번들러는 무엇이며 어떻게 동작하는가? 해당 글의 번역입니다 : https://lihautan.com/what-is-module-bundler-and-how-does-it-work/ What is module bundler and how does it work? | Tan Li Hau What is module bundler and how does it work? August 30, 2019 (Last updated August 30, 2019) Series: Write a module bundler JavaScriptmodule bundlerdev toolwebpack What is a Module Bundler? How do we bundle? The "webpack way" The "rollup way" Summary Refere lih..
Javascript ES module과 순환 참조 해결하기 TL;DR esm을 통해, 효과적인 변수 관리 모듈 정보 수집과 실행 단계를 분리하여 로더가 비동기 import, 코드 transform등 다양한 것을 쉽게 처리할 수 있게 되었다. esm, cjs를 쓸지 결정한 뒤 코드를 해석하는 것은 로더의 역할이다. esmodule과 전혀 다른 명세, 사양 브라우저는 html 사양을 이용하여 js 처리 html에 어떤 방식으로 처리할지(ex: type="module" 있음) 적혀있음 es module의 3단계 구성 : import, export 정보를 먼저 수집 (module record, modulemap) import, export 정보는 코드 실행 순서와 분리되어 있다. 인스턴스화 : module record 정보로 module environment recor..
OpenAPI 3.0 튜토리얼 아래 문서를 번역 및 요약한 글 https://support.smartbear.com/swaggerhub/docs/tutorials/openapi-3-tutorial.html OpenAPI 3.0 Tutorial | SwaggerHub Documentation OpenAPI 3.0 is an open-source format for describing and documenting APIs. In this tutorial, we will write a simple API definition in the OpenAPI 3.0 format. If you are using OpenAPI 2.0 (Swagger 2.0), see this tutorial instead. OpenAPI Specification (f..
타입스크립트 프로젝트 도입을 통해 얻을수 있는 효과와 아닌것 과연 타입스크립트는 런타임 최적화를 수행할까요? 물론 약간의 효과는 얻을 수도 있을 것 같지만, 클린하며 예측 가능한 코드를 작성하면서 얻는 우발적 효과일 것 같습니다. 아래 문서는 TypeScript 언어의 기반이 되는 일반적인 디자인 원칙을 설명합니다. 철저하게 모든 원칙을 다루진 않지만, 언어의 설계를 결정하는데 근거가 된 규칙을 요약하는 것을 목표로 작성되어 있습니다. 이러한 규칙 중 일부는 주관적이며 때때로 서로 상충됩니다. 올바른 균형에 도달하고 올바른 예외를 만드는 것이 성공적인 프로그래밍 언어 설계의 핵심입니다. https://github.com/Microsoft/TypeScript/wiki/TypeScript-Design-Goals GitHub - microsoft/TypeScript: ..
B2C IT기업 개발자와 B2B IT기업 개발자의 차이점, B2B에 어울리는 인재상 LG CNS 면접 질문으로 다음과 같은 질문이 나왔다고 하더라구요 LG CNS가 B2B DX 전문기업으로 B2C 기업과 다른 점을 설명하고 지원자 자신이 B2B DX 회사에 어울리는 인재를 설명하시오 두번째 질문은 제가 해결해 드릴 수 없지만, 첫번째 질문에 대한 대답은 정리해 드릴 수 있을 것 같네요. 엔지니어(개발자) 관점에서 정리해 보았습니다. B2C IT 회사란? 보통 IT업계의 B2C 회사라 하면 자체 서비스를 기반으로 다수의 불특정 개인 / 집단을 대상으로 하여 서비스를 제공하는 회사입니다. (물론 타겟으로 하는 고객의 구체적인 페르소나는 존재하겠죠. 네이버 검색서비스가 구글 검색서비스에 비해 글로벌에서는 압도적으로 밀리지만, 한국에서는 정반대죠) 예를 들어 네이버, 카카오, 구글, 토스 같은..
크롬 개발자 도구의 QueryObjects 객체로 Javascript 메모리 누수 잡기 자바스크립트 진영에서 메모리 누수에 대한 이야기가 덜 논의되는 이유 클라이언트 측 JavaScript는 일반적으로 서버 사이드 JS에 비해 수명이 짧기 때문입 대부분의 경우 웹 페이지는 오랫동안 열려 있지 않으며 사용자가 페이지를 새로 고치거나 탭을 닫으면 메모리가 자동으로 해제돔 하지만 SPA의 시대가 도래하면서 Javascript 메모리 누수는 꽤 자주 일어나는 모습을 보임 앱 상태가 사용자의 세션처럼 stateful하기 때문 JavaScript 메모리 누수를 식별하고 디버깅하는 작업 힙 스냅샷을 만들고 노이즈를 제거하고 스냅샷을 분석하여 메모리 누수를 일으킨 범인을 구별 이는 쉽게 자동화할 수 없는 시간이 많이 걸리는 작업들임. queryObjects라는 API를 활용해 크롭 개발자 도구에서 메모리..
프론트엔드 성능 최적화 가이드 스터디 4장 프론트엔드 성능 최적화 가이드의 4장을 스터디한 내용입니다 프론트엔드 성능 최적화 가이드 웹이 가벼워지면 사용자의 만족도는 올라간다 웹사이트를 방문했는데 페이지가 늦게 로드되면 금세 ‘뒤로 가기’ 버튼에 손이 갑니다. 구글의 연구에 따르면 페이지 표시 시간이 1초에서 3초 blog.insightbook.co.kr 이전 시리즈 2022.11.15 - [웹성능최적화] - 프론트엔드 성능 최적화 가이드 1장 스터디 프론트엔드 성능 최적화 가이드 1장 스터디 프론트엔드 성능 최적화 가이드의 1장을 기반으로 진행한 스터디 입니다. 프론트엔드 성능 최적화 가이드 웹이 가벼워지면 사용자의 만족도는 올라간다 웹사이트를 방문했는데 페이지가 늦게 itchallenger.tistory.com 2022.11.15 - [웹성능..
vue3의 반응성(reactivity) 원리 간단 정리 출처 : https://vuejs.org/guide/extras/reactivity-in-depth.html Reactivity in Depth | Vue.js vuejs.org 아래와 같은 코드가 실행된다 가정하자 import { ref, watchEffect } from 'vue' const A0 = ref(0) const A1 = ref(1) const A2 = ref() watchEffect(() => { // tracks A0 and A1 A2.value = A0.value + A1.value }) // triggers the effect A0.value = 2 1. 이펙트(ex: watchEffect,computed 내부 함수) 함수가 전역 변수에 할당되며 파라미터로 받은 업데이트 함수를 실행..

티스토리툴바