개발👩💻 (72) 썸네일형 리스트형 정규식 🔑 키워드 정규식, 정규식을 자주 사용하는 메서드(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 의 형태를 .. geeksforgeeks contribute 하기 🔒 문제 geeksforgeeks 사이트에서 그리디 알고리즘 관련 아티클을 읽다가 뭔가 이상한 부분을 발견했다. https://www.geeksforgeeks.org/minimum-product-subset-array/ Minimum product subset of an array - GeeksforGeeks A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions. www.geeksfor.. 프로그래머스 JS: 두 큐 합 같게 만들기 https://school.programmers.co.kr/learn/courses/30/lessons/118667 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 🔒 문제 문제 설명 길이가 같은 두 개의 큐가 주어집니다. 하나의 큐를 골라 원소를 추출(pop)하고, 추출된 원소를 다른 큐에 집어넣는(insert) 작업을 통해 각 큐의 원소 합이 같도록 만들려고 합니다. 이때 필요한 작업의 최소 횟수를 구하고자 합니다. 한 번의 pop과 한 번의 insert를 합쳐서 작업을 1회 수행한 것으로 간주합니다. 큐는 먼저 집어넣은 원소가 먼저 나오는 구조입니다... 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)으로 알려져 있다. 정적 분석의 목적은 다양하다. 구문 검사, 컴파.. 이전 1 2 3 4 ··· 9 다음
