jest.getTimeCount()는 clearTimeout도 카운팅한다.

이 글을 적게된 이유는 해당 함수를 테스트하면서 내 예상과는 다른 결과를 보여줬기에 이를 이해하고 해결하면서 알게된 것들을 기록하고자 함이다.jest에서 time count 시 setTimeout 뿐만이 아니라 clearTimeout도 카운트가 되기 때문에 발생한 오류

2022년 5월 9일
·
0개의 댓글
post-thumbnail

이벤트 루프

자바스크립트는 싱글 스레드 기반 프로그래밍 언어입니다.싱글 스레드란 한 번에 하나의 작업만 할 수 있음을 의미합니다.따라서 하나의 작업이 오래 걸리면 다음 작업이 Blocking되어 suspend time이 늘어나게 됩니다.이를 해결하기 위해 자바스크립트는 이벤트 루프

2021년 8월 13일
·
1개의 댓글
post-thumbnail

React Router -왜 useLocation은 render를 일으킬까?

자란다 과제를 배포 전에 코드 정리를 하면서 의문점을 들게 한 코드를 찾게 되었다.화면에 랜더링 되는 공통 컴포넌트 Header.js 파일에서react router 패키지 함수인 useLocation() 호출만으로 useEffect와 useState 없이 해당 화면을

2021년 8월 8일
·
1개의 댓글
post-thumbnail

1차 프로젝트 : kakao 클론

글을 읽기에 앞서 글이 길어질거 같아서 1부 2부로 나눠 작성을 하겠습니다. 1부는 전체적인 진행 사항과 회의 방법 그리고 간략하게 내가 무엇을 구현했는지 프로젝트 동안 어떤걸 느꼇는지르 작성하고 2부에서 코드 관련 얘기를 진행하겠습니다.프로젝트 후보를 선출하기 위해

2021년 6월 20일
·
2개의 댓글
post-thumbnail

instagram 클론 회고

인스타그램 클론을 진행하면서 html css js로 작업했던 결과물을 react로 전환하면서 겪언던 부분에 대해 적어보겠습니다.로그인 부분은 id와pw에 대한 유효성 검사를 넣었습니다.유효성 검사에 따라 로그인 버튼의 활성화 여부를 결정하고 활성화 시 enter key

2021년 6월 6일
·
0개의 댓글
post-thumbnail

Css Position

Position? position프로퍼티는 요소의 위치를 정의한다. top, buttom, right, left 프로퍼티와 함께 사용되어 요소의 위치를 정한다. Position프로퍼티의 value는 4개의 값을 가진다. static relative absolute f

2021년 5월 11일
·
0개의 댓글

float

float mdn에 어떻게 정의 되어 있냐면 > float은 한 요소가 보통 흐름으로부터 빠져나와서 텍스트 및 인라인 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정한다. 여기서 보통의 흐름이란 위에서 아래, 좌에서 우로의 방향을 얘기하는

2021년 5월 11일
·
0개의 댓글
post-thumbnail

Semantic Web & Semantic Tag

시멘틱이란? 사전적 의미로 "의미의, 의미론적인"를 가진다. 즉, 간단히 말하자면 시멘틱 웹과 시멘틱 태그는 의미를 가진 웹과 태그인데 여기서 "의미를 가진"에 초점을 두어 글을 읽어보자. 시멘틱의 등장배경 기존 웹은 사용자가 문서를 읽기 쉽도록 정보를 표현하는것에

2021년 5월 11일
·
0개의 댓글
post-thumbnail

브라우저 작동 원리

렌더링 과정 간략하게 렌더링 과정을 적어보자면 아래와 같다. 브라우저는 html, css, js, 이미지, 폰트, 여러 등등 렌더링에 필요한 리소스 파일을 서버에 요청 & 응답 브라우저 렌더링 엔진은 html과 css를 각각 파싱하여 D

2021년 5월 2일
·
1개의 댓글
post-thumbnail

실행 컨텍스트

실행 컨텍스트는 자바스크립트의 동작 원리를 담고 있는 핵심 개념이다. 자바스크립트가 스코프를 기반으로 식별자와 식별자에 바인딩된 값을 관리하는 방식과 호이스팅이 발생하는 이유, 클로저의 동작 방식 그리고 태스크 큐와 함께 동작하는 이벤트 핸들러와 비동기 처리의 동작

2021년 4월 28일
·
0개의 댓글

일급 객체

일급 객체 다음과 같은 조건을 만족하는 객체를 일급 객체라 한다. 무명의 리터럴로 생성 할 수 있다. 즉, 런타임에 생성이 가능하다. 변수나 자료구조(배열,객체 등)에 저장할 수 있다. 함수의 매개변수에 전달할 수 있다. 함수의 반환겂으로 사용할 수 있다. 자바스크

2021년 4월 25일
·
0개의 댓글

this

this란, 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수 이다.this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.함수 호출 시 arguments객체와 this는 자바스크립트 엔진에 의해 암묵

2021년 4월 23일
·
0개의 댓글
post-thumbnail

스코프(유효 범위)

스코프란, 모든 식별자는 자신이 선언된 위치에 따라 식별자 자신을 참조 가능한 유효 범위를 갖는데 이를 스코프라한다.식별자는 어떤 값을 구별할 수 있는 유일성을 가져야한다. 따라서 식별자는 중복될 수 없다.하지만 같은 식별자이지만 다른 스코프를 가진다고 하면 중복이 가

2021년 4월 17일
·
0개의 댓글

변수 var & let & const

변수 변수란, 임의의 데이터를 담기 위한 공간이라 할수있다. 변수에 값을 할당하고 사용하기 위해서는 변수 선언을 해줘야한다. 변수 선언 변수 선언이란, 변수를 생성하는 것이라 말한다. 생성된 변수는 메모리에 저장되어 사용된다. 즉, 변수(=식별자)를 선언하게 되면

2021년 4월 17일
·
0개의 댓글
post-thumbnail

Display: inline VS block VS inline-block

Display None 요소가 랜더링 되지 않는다. inline box-model에서 width & height 가 적용되지 않는다. padding & margin & border 의 경우는 좌우에만 적용된다. block box-model의 모든 속성이 적용된다.

2021년 4월 12일
·
0개의 댓글

Webpack 최적화 Part 1. Optimization

웹팩에서 최적화는 mode 에 따라 다르게 적용되고 manual configuration하거나 overrides 방식으로 사용됩니다.따라서 development 와 production 에 대한 구성을 따로 파일로 만들어서 사용할 수 도 있습니다.이 부분은 다음 포스트

2020년 12월 11일
·
0개의 댓글

Webpack dev-server & Hot Module Replacement

live reloading 을 사용하기 위해 webpack과 함께 development server을 사용합니다.오직 development 용으로 사용되야 하며webpack-dev-middleware 를 사용하여 webpack assets에 대한 fast in-memo

2020년 12월 9일
·
0개의 댓글
post-thumbnail

ESLint

이 문서는 ESLint 공식문서를 참고하여 작성되었습니다.ESLint is an open source JavaScript linting utility Code linting은 빈번하게 문제가 있는 패턴들 또는 스타일 가이드라인을 따르지 않는 코드를 찾기 위해 사용되는

2020년 12월 6일
·
0개의 댓글

Webpack Part 3. Plugin

Plugin loader가 파일 단위로 처리하는 반면 plugin은 번들된 결과물을 처리한다. 번들된 자바스크립트를 난독화 한다거나 특정 텍스트를 추출하는 용도로 사용한다. plugin은 arguments/options을 사용할 수 있으므로 webpack conf

2020년 12월 4일
·
0개의 댓글
post-thumbnail

Webpack part 4. Babel

Babel is a compiler (source code => output code). 바벨의 기본 동작 기본 동작을 코드로 설명하자면 const babel = code => code;이라 할 수 있다. 주어진 코드가지고 변환된 새로운 코드를 생성한다. 바벨은

2020년 12월 3일
·
0개의 댓글