본문 바로가기

분류 전체보기

 (25)
크롬 개발자 도구의 Performance 패널 알아보기 Performance 패널 이번 글에서는 크롬 개발자 도구에서 Performace 패널에 대해서 알아보겠습니다. Performance 패널은 웹 페이지가 로드될 때, 실행되는 모든 작업을 보여줍니다. 특히 브라우저의 메인 스레드에서 실행되는 자바스크립트를 볼 수 있어서, 어떤 코드가 성능상에 문제가 되는지를 확인할 때 사용하기 좋습니다. Performance 패널으로 이동하여 새로고침 버튼을 누르면 현재 페이지를 새롭게 로딩하면서 그 과정에서의 여러 작업을 기록하게 됩니다. 각 파트에 대해서 알아보겠습니다. 1. CPU 차트, 네트워크 차트, 스크린 샷 최상단에 있는 CPU 차트는 시간에 따라 CPU가 어떤 작업에 리소스를 사용하고 있는지를 비율로 보여 줍니다. 스크립트 실행 작업은 노란색, 렌더링작업은..
크롬 개발자 도구(Lighthouse)를 이용하여 페이지 성능 검사하기 Lighthouse란? Lighthouse란 크롬에서 제공하는 웹 성능을 측정하고 개선 방향을 제시하는 자동화 툴입니다. Lighthouse를 이용하면 현재 페이지의 웹 바이탈(Web Vitals) 지표를 확인하여 웹 성능을 개선하기 위한 취해야 할 액션들을 파악할 수 있어 웹 성능을 최적화하는데에 매우 중요한 툴입니다. Mode Lighthouse는 3가지 모드를 제공합니다. Navigation: 초기 페이지 로딩을 분석합니다. (기본값) Timespan: 사용자가 정의한 시간동안을 분석합니다. 주로 사용자 인터렉션이 포함된 상황을 분석할 때 사용합니다. Snapshot: 특정 상태에서의 성능을 분석합니다. Device Device 항목은 데스크탑 환경, 혹은 모바일 환경에서 분석을 할지에 대해서 설정..
함수형 자바스크립트 (6-1) - 함수자, 모나드를 이용한 예외처리 예외 처리 우리가 흔히 아는 예외 처리 방식은 try-catch 문을 이용하는 것이죠. 이는 위험한 코드를 try 문으로 보호하고, 해당 코드에서 던지는 에러를 catch에서 처리하는 방식으로, 명령형 프로그래밍 방식입니다. try-catch는 함수형 프로그래밍에서 사용하기에는 몇가지 문제점들이 있습니다. 함수 합성이나 체이닝을 할 수 없습니다. 예외를 던지는 행위는 예측 가능한 값을 지양하는 참조 투명성 원리에 위배됩니다. 에러 조건을 처리하는 부분이 복잡해집니다. 따라서 함수형 프로그래밍에서는 다른 방식으로 예외를 처리합니다. 바로 모나드를 이용하는 것입니다. 함수자, 모나드 우선 함수자(Functor)와 모나드(Monad)에 대해 알아보겠습니다. 함수자와 모나드는 모두 값을 감싸는 컨테이너화를 통해..
<meta> 태그에 대해 태그란? HTML 문서의 head 태그 내에 여러 meta 태그에 대해서 본 적이 있을 겁니다. meta 태그는 어떤 역할을 하는 태그고 우리가 어떻게 이해하면 될지에 대해서 알아보았습니다. 우선 태그에 대해 알아보기 전에 태그에 대해 알아보겠습니다. 태그는 문서에 대한 기본적인 machine-readable한 정보를 웹브라우저나 검색 엔진에 정보를 제공하는 태그입니다. 즉 사용자보다는 기계를 위한 정보를 담고 있는 태그입니다. 태그 내부에는 여러가지 다른 태그들이 들어 올 수 있습니다. 대표적으로 , , , 가 있습니다. 태그는 의 위에 내부 태그들로는 표현할 수 없는 metadata 정보들을 표현하기 위해 사용되는 태그입니다. 태그가 표현할 수 있는 metadata는 4가지가 있습니다. 태그의 종류 ..
BEM(Block Element Modifier) 방법론 BEM이란? BEM이란 Block Element Modifier의 줄임말로, CSS 구조화, 네이밍 컨벤션과 관련된 방법론이다. BEM 방법론을 이용하여 css 코드를 작성하면 훨씬 구조화되고, 통일성 높은 코드를 작성할 수 있다. BEM은 이름에서 알 수 있듯이 Block, Element, Modifier를 3가지를 이용하여 클래스명 만들고 이를 사용하여 css를 적용하도록 한다. Block Block은 하나의 스스로도 의미를 가지는 독립적인 존재를 가르킨다. Block은 다른 block에 nested 되거나 상호작용할 수 있지만, 의미상으로는 선행이나 계층 구조를 지니지 않는다. Block 클래스 명은 알파벳, 숫자, '-'를 포함할 수 있다. ex) block Element Element는 Bloc..
함수형 자바스크립트 (5) - 함수 조합기 함수 조합기란 함수를 조합하여 제어 로직처럼 작동시킬 수 있는 고계 함수를 의미합니다. 이번에는 조합기들 중 가장 많이 사용되는 몇가지만 알아보겠습니다. 항등 (I-조합기) 항등 조합기는 주어진 인수와 똑같은 값을 반환합니다. const identity = a => a 항등 조합기는 다음의 경우 사용됩니다. 무인수 코드를 작성 할때, 함수 인수를 평가하는 시점에 데이터를 고계 함수에 제공 함수 조합기의 흐름을 단위 테스트하면서 단순한 함수 결과에 대해 단언하고자 할 때 캡슐화한 형식에서 데이터를 함수형으로 추출하고자 할 때 탭 (K-조합기) 탭 조합기는 코드 추가 없이 공형 함수(콘솔 로깅, HTML 페이지 쓰기)를 연결하여 합성할 때 유용합니다. 자신을 함수에 넘기고 자신을 돌려 받습니다. const..
Monorepo란? Monorepo 이번 글에서는 Monorepo가 무엇인지, 그리고 장점과 단점들에 대해서 알아보겠습니다. What is Monorepo? Monorepo란 별개의 프로젝트 여러개를 하나의 레포지토리로 관리하는 것을 의미합니다. 프로젝트들은 관련되어 있지만, 논리적으로 독립적이며 별개의 팀들에 의해 개발될 수 있습니다. Why Monorepo? 왜 모노레포를 사용하느지에 대해 알기 위해 모노레포에 반대되는 개념인 'Polyrepo'에 대해 알아보겠습니다. Polyrepo는 통상적으로 많이 사용되는 애플리케이션 개발 방식입니다. 하나의 팀, 하나의 프로젝트 혹은 하나의 애플리케이션마다 하나의 레포를 가지며, 하나의 빌드 파이프라인을 가집니다. Polyrepo를 사용하는 이유는 바로 팀 자율성 때문입니다. 하..
자바스크립트 프로젝트 환경 설정 (3) - Jest, Gitignore, Readme, husky 이번에는 테스트 코드 작성을 위한 Jest 라이브러리와, 필수적인 부분이지만 쉽게 설정가능해서 넘어갔던 gitignore와 readme 파일에 대해서 소개하겠습니다. 마지막으로 husky에 대해서도 알아보겠습니다. Jest Jest는 자바스크립트에 테스팅 프레임워크입니다. 페이스북에서 만들었으며, 가장 대중적인 테스팅 툴중 하나입니다. Jest를 사용하여 단위 테스트를 작성하여 코드가 의도한 대로 작동하는지 확인할 수 있으며, TDD가 가능해집니다. Jest 설치 후, 관련 설정은 jest.config.js 파일에서 하면 됩니다. module.exports = { moduleNameMapper: { '@/(.*)$': '/src/$1', '#/(.*)$': '/test/$1' }, testMatch: [..
자바스크립트 프로젝트 환경 설정 (1) - NPM, Webpack 최근에 바닐라 자바스크립트 프로젝트를 시작하면서 환경 설정을 진행했던 부분에 대해서 기록하고자 합니다. 프로젝트 기본적인 환경설정을 위해 사용한 기술들은 다음과 같습니다. 이번 글에서는 각 기술들에 대한 간단한 설명과, 어떻게 설정했는지에 대해서 작성해보도록 하겠습니다. npm Webpack Babel Eslint Editorconfig Husky Jest NPM Node Package Manager의 줄임말로, Node.js 패키지를 관리하는 도구입니다. npm은 프로젝트 환경설정에 가장 기본이기 때문에 빠르게 package.json 파일의 script 부분과 .nvmrc 파일만 보고 가도록 하겠습니다. // package.json ... "scripts": { "test": "jest --config..
자바스크립트 프로젝트 환경 설정 (2) - ESLint, Editorconfig, Babel 지난 번에 이어서 자바스크립트 프로젝트 환경 설정에 대한 내용을 공유하고자 합니다. 이번엔 꼭 필요하진 않지만 사용하면 큰 도움이 되는 몇가지 기술들에 대해서 작성해보겠습니다. Eslint Eslint는 자바스크립트와 JSX를 위한 linting 툴입니다. linting이란 코드를 분석해서 잠재적인 에러나 스타일적인 실수를 찾아주고, 수정할 수 있으면 수정하는 작업을 의미합니다. Linting tool은 코드의 잠재적인 에러를 찾아줄 뿐 아니라 가독성을 향상시키고 스타일 일관성을 부여하기 때문에 코드의 완성도를 높여줍니다. 또한 여러 사람들이 협업하여 코드를 작성할때 코드의 스타일 컨벤션을 지킬 수 있기 때문에 매우 중요합니다. 자바스크립트에서 사용하는 linting tool은 여러가지가 있지만, 가장 ..

티스토리툴바