개발👩💻/프론트엔드 (15) 썸네일형 리스트형 정규식 🔑 키워드 정규식, 정규식을 자주 사용하는 메서드(match, replace, exac, test...) ❓ 정규식 사용하기 정규식은 한번 알아 놓으면 굉장히 유용하다. 정규식 사용법을 예제를 통해 알아보자 정규표현식 Anchors beginning ^ 문자열의 시작 혹은 여러 줄에서 멀티라인 플래그(m)을 사용할 때 라인의 시작 부분과 매칭한다. 즉 문자가 아니라 위치를 찾아야 할 때 사용한다. 문자열에서 맨 앞에 있는 문자(1개 이상)를 찾을 때 ^\w+ she sells seashells end $ 문자열의 끝, 혹은 멀티라인 플래그(m)을 사용할 때 라인의 끝을 매칭한다. 해당 문자 또한 문자가 아니라 위치를 찾아야할 때 사용한다. 문자열에서 맨 뒤에 있는 문자를 찾을 때 \w$ she sells.. 브라우저 렌더링 최적화(Reflow, Repaint, Composite) 🔑 키워드 렌더링 성능 최적화, 리플로우, 리페인팅, 합성 ❓ 렌더링 성능 최적화 웹 사이트의 성능이 예상보다 느리다면 그 이유 중의 하나는 렌더링의 속도 저하일 가능성이 있다. 렌더링 속도를 저하시키는 대부분의 경우는 리플로우와 리페인트에 있을 것이다. 레이아웃과 리플로우 브라우저에서 DOM노드 트리가 생성되고 해당 트리 내 각 노드의 위치 및 크기에 대한 정보를 가지고 어디에 위치해야할 지를 파악하는 시간이 필요하다. 이를 "레이아웃"이라고 하며 이때 요소는 백터 상자로만 표시된다. 페인트와 리페인트 페인트는 백터상자를 가져와 레스터화(백터를 픽셀로 교환)하는 작업을 하는 단계이다. 그리고 이렇게 레스터화 된 작업물들을 레이어에 배치한다. 합성 이렇게 생성된 레이어들을 합치고 최종적으로 화면에 표시하.. 브라우저의 기능과 렌더링 엔진 동작 과정 사용자가 브라우저를 사용할 때 어떠한 과정을 통해 사용자에게 자원이 보여지는지 원리를 알아보고자 한다. 🔑 키워드 브라우저 동작 방식, 렌더링 순서 ❓ 브라우저의 기능 브라우저의 역할 브라우저는 하나의 소프트웨어로 사용자의 요청에 의해 자원을 서버에 요청하여 해당 자원을 사용자에게 보여준다. 이 때 자원은 주로 HTML 파일을 의미하나, PDF나 이미지와 같은 파일이 될 수도 있다. 사용자는 해당 자원의 주소를 URI(Uniform Resource Identifier)로 명시할 수 있다. 브라우저의 호환성 브라우저는 기본적으로 HTML과 CSS를 해석하여 이를 사용자에게 보여주게 된다. 이와 같은 파일의 해석을 위한 명세가 있고, 이는 웹의 표준을 정리해 놓은 것인데, W3C(World Wide Web .. JS for 반복문(foreach, for..in, for..of) 🔑 키워드 object map set forEach for..in for..of ❓ for in ? for of ? 뭐가 다르지 ? feat. forEach Object를 iterator하게 사용하기 위해서 사용하는 반복문이 있다. 그 외에도 JS에서는 내장메서드인 forEach 가 있다. 해당 메서드 및 반복문의 사용방식과 차이점에 대해 알아보자 한다. forEach 는 built-in object 내장 객체로 사용할 수 있는 컬랙션이 있다. 기존에는 Array 만 사용가능했지만, ES6 이후 부터는 Map Set 내에서도 사용할 수 있다. Map (삽입 순서 유지) forEach((value, key, map) => { /* … */ } [, thisArg]) 기존 Arry forEach 의 형태를 .. Babel (2): macro 바벨은 플러그인을 사용하여 커스텀하게 변환 작업을 할 수 있다. 하지만 Babel 플러그인에는 몇 가지 문제가 있다. 프로젝트의 코드를 볼 때 해당 코드를 변환하는 플러그인이 있는지 모를 수 있기 때문에 혼동을 일으킬 수 있음. 전역적으로 구성하거나 대역 외( .babelrc또는 webpack 구성에서)로 구성해야 함. 모든 babel 플러그인이 동시에 실행되기 때문에(Babel AST의 단일 워크에서) 매우 혼란스러운 방식으로 충돌할 수 있음. 이러한 문제는 Babel 플러그인을 가져와서 코드에 직접 적용할 수 있다면 해결할 수 있는데, 이는 변환이 더 명시적이며 구성에 추가할 필요가 없으며 플러그인을 가져온 순서대로 정렬할 수 있음을 의미한다. 현재 babel 생태계의 각 babel 플러그인은 개별적.. Babel (1): Babel과 plugin 바벨이란? 바벨은 JS의 컴파일러, 트랜스파일러라고 한다. 바벨의 역할을 이야기하자면 브라우저 호환을 위한 es 버전을 맞게 코드를 변환시키거나 typescript or coffescript를 js로 다시 변환시키는 작업을 하는데 이를 현대 한국어를 중세 한국말로 변환하는 역할이라고 비유하기도 한다. 조금 더 자세히 설명하자면 바벨은 일반적으로 다목적 JS 컴파일러이다. 더 나아가 많은 형태의 정적 분석 (Static analysis)에 사용되는 모듈들의 모음이기도 하다 정적 분석(Static analysis) 이란 코드를 실행하지 않고 분석하는 작업을 말한다. 코드를 실행하는 동안 분석하는 것은 동적 분석(Dynamic analysis)으로 알려져 있다. 정적 분석의 목적은 다양하다. 구문 검사, 컴파.. Package.json 살펴보기 Package.json name package.json 에서 가장 중요한 항목은 name과 version이다. 필수로 입력되어야 하며 없다면 패키지를 설치하게 할 수 없다. name과 version을 통해 각 패키지의 고유성을 판별하게 되고, 그렇기 때문에 내용이 변경된다면 version을 바꾸어 주어야만 한다. 규칙 점이나 밑줄로 시작할 수 없고 대문자를 포함해서는 안된다. URL의 일부분임으로, 커맨드라인의 인수이자 폴더명이다. 따라서 모든 URL-safe하지 않은 name은 거부된다. 조언 name에 node또는 js를 넣지 않는다. package.json을 쓰고 있는 시점에서 이미 JS라는 것을 알 수 있고, engines항목에서 실행기반을 지정할 수 있다. name은 JS 파일 내에서 requi.. Mono-Repo 와 관련 라이브러리 툴(turborepo, yarn workspace) Multi-Repo 멀티 레포는 여러 레포지토리에 패키지를 분산해 주는 것을 의미한다. 말 그대로 하나 또는 두개 이상의 패키지 관리는 하나 또는 두개이상의 레포지토리로 구성하여 관리하는 것이다. 예를 들어 A라는 패키지를 구성하는 B,C라는 패키지가 있을 경우 B-Repository, C-Repository 로 나눠 두는 것을 의미한다. 여기서 꼭 A라는 패키지가 없어도 상관 없다 의미자체를 보면 패키지별로 레포지토리를 분리한다고 보면 된다. 보통 패키지와 페포지토리는 1:1관계를 맺으며 통상 사용하는 방식으로 생각하면 된다. 장점 레포지토리멸 오너를 지정 패키지 별로 레포지토리가 분리되어있다는 것은 각 패키지 별로 관리가 가능하는 것이다. 이에 대해 각 레포지토리별 오너를 지정할 수 있고 이로 인해 .. 이전 1 2 다음
