브라우저 렌더링 과정 HTML은 렌더링엔진(사파리는 WEB KIT 파이어폭스는 Gecko ...) 을 거쳐 DOM 트리를 생성한다. DOM 트리 : HTML를 파싱하여 DOM 노드로 이루어진 트리 CSS는 렌더링엔진 을 거쳐 CSSOM 트리를 생성한다. DOM과

type VS interface 고민될때 When to use type When defining aliases for primitive types, use type When defining a tuple type, use type When defining a fu

지역변수를 지양하고 변수의 스코프를 줄일 수 있는 몇가지 방법을 살펴보자모든 코드를 즉시 실행 함수로 감싸면 모든 변수는 즉시 실행 함수의 지역 변수가 된다.전역에 네임스페이스 역할을 담당할 객체를 생성하고 전역 변수처럼 사용하고 싶은 변수를 프로퍼티로 추가하는 방법이

클래스 자체에는 데이터가 들어있지 않고 틀만 지정해 둔 것데이터 없이 정의만 해 둔것이기 때문에 실제로 메모리에 올라가지 않는다.오브젝트를 만들기 위한 틀templatedeclare onceno data in클래스를 이용해 데이터를 넣어 만든것이 바로 오브젝트실제 데이

코드에서 반복되는 디자인 문제를 해결하기 위해 사용자 지정할 수 있는 패턴을 미리 정해둔 것입니다.실제로 복사하여 붙여넣을 수 있는 알고리즘과 다르게 디자인 패턴은 프로그램에 복사 할 수 없기 때문에자신의 프로그램 현실에 맞는 솔루션을 구현할 필요가 있습니다.c++로

() => 화살표 함수일때 this는 부모요소를 가르킨다. function 선언문에서 this는 window를 가르킨다. call사용해 this를 명시적으로 조작 async await 을 쓰더라도 promise가 필요한 예

어찌보면 나는 조금 게으른 개발자인가?그동안 테오의 스프린트 모집을 1기부터 봐오면서 한 번쯤 참여해보면 좋겠네 생각만 하는 개발자였다.나는 아침 6시에 일어나서 개발일을 하고 틈틈이 운동까지 하는 "바쁜"일정을 해내고 있으니 나는 스프린트까지 할 시간이 없어 라며 자

currying 기본 사용예시중복코드 해결compose 함수 = 여러가지 함수를 순차적으로 실행시킴첫번째 함수의 리턴값을 다음 함수가 받아 처리 한다.시니어코딩님 유튜브 강의

$ npm init -ynpm 이란 node package manager으로 node.js 에서 사용하는 모듈들을 패키지로 만들어 관리 배포 합니다.옵션값에 대한 질문 없이 초기 디폴트 값으로 세팅한다면 -y를 붙여줍니다.npm init 완료 후 프로젝트 정보와 의존성

scroll, resize, input, mousemove 와 같은 이벤트는 짧은 시간 간격으로 연속해서 발생합니다.이러한 이벤트에 바인딩한 이벤트 핸들러는 과도하게 호출되어 성능에 문제를 일으킬 수 있습니다.버튼을 짧은 간격으로 여러번 클릭했을 때 일반적인 이벤트 핸

자바스크립트는 스크립트 언어라서 즉석에서 코드를 실행 할 수 있다.REPL이라는 콘솔 R(Read) E(Evaluate) P(Print) L(Loop)윈도우에서는 명령 프롬프트, 맥이나 리눅스는 터미널에 node 입력Node는 CommonJS 모듈시스템을 사용한다.co

React Router v6는 Reack hook를 많이 사용하므로 v6를 사용하기 위해 React 16.8 이상이 요구됩니다.6이상의 버전으로 업그레이드만 하더라도 번들 크기에 대한 최적화가 바로 이루어 질 수 있습니다.Switch는 기본적으로 동시에 여러개의 rou

Snowpack은 더 빠른 웹 개발을 위한 최신의 프론트엔드 빌드 도구입니다.기존의 Webpack, Rollup 그리고 Parcel 같은 무겁고 복잡한 번들러의 번들 소요 시간을 획기적으로 절약할 수 있습니다.번들 없는 개발(Unbundled Development)개별

boolean타입의 값을 리턴합니다.매치되는 값을 배열로 반환합니다.target, regExp 순서에 주의하세요... 안의 ^은 not 을 의미합니다.검색 대상 문자열이 http:// 또는 https://로 시작하는지 검사한다.html 로 끝나는지 검

$ vue create vue-project가장 쉽게 구분되는 차이점은 App.vue에서 사용되는 api 문법이 Vue.extend에서 defindComponent로 바뀌었다는 것을 확인 할 수 있습니다.이외에도 뷰 내부에서 사용하는 코드들에 대한 타입들이 다양해졌다.

대부분은 React앱들은 Webpack, Rollup, Browserify 같은 툴을 이용해 여러 파일을 하나로 병합해번들된 파일을 웹 페이지에 포함해 한번에 전체 앱을 로드합니다.서비스가 비교적 가벼운 편이라면 큰 문제가 없겠지만 프로젝트가 덩치가 커지고 전달해야하는

1. 주요 렌더링 경로 최적화 현재 사용자 잡업과 관련된 콘텐츠 표시의 우선순위를 지정하는 것을 말한다. 우선 우리가 성능을 최적화 하기 위해선 HTML, CSS 및 자바스크립트 바이트를 수신한 후 렌더링된 픽셀로 변환하기 위래 필요한 처리, 그 사이 포함된 중간 단

useEffect는 asynchronous로 즉 비동기적으로 실행되는 반면 useLayoutEffect 는 synchronous로 동기적으로 실행됩니다.렌더 순서의 차이useEffect는 component가 화면에 paint된 이후 실행된다.useLayoutEffect

웹서버 말그대로 웹사이트를 제공하는 서버라 한다.웹 사이트가 서비스 될 때 필요함 왜? 우선 웹사이트는 브라우저에서 돌아간다 (크롬, 사파리, 파이어폭스 등등)그리고 브라우저가 읽을 수 있는 코드는 html, css, javascript 각종 이미지와 데이터들이 있고

일정시간이 지난 후 함수 실행 vs 일정 시간 간격으로 함수를 반복clearTimeout : 예정된 작업을 없애준다.setTimeout : timeId를 반환함setTimeout과 달리 한번 수행하고 종료되는것이 아닌 반복 수행 된다.