profile
프론트엔드

dd

ddd

7일 전
·
0개의 댓글
post-thumbnail

useEffect Flow

Console을 통해 렌더링과 useState, useEffect가 어떤 순서로 진행되는지 살펴보자Parent Render start ->Parent useState ->Parent Render End ->Parent useEffect No deps/Empty/Somt

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

[JS인터뷰준비] 호이스팅

둘다 undefined?test: testtestValue:Error함수선언식: function name() {}함수표현식: const name = function() {}함수선언은 코드를 실행할 때 함수를 포함하는 스코프 최상단으로 끌어올려진다. 그래서 함수 선언 전

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

[JS인터뷰준비]자바스크립트 this(2)

함수를 호출하는 객체를 의미한다.this를 이용해 함수를 다른 객체에서도 재사용 가능하다일반적으로 this의 값은 자동으로 할당된다. 하지만 상황에따라 제어 가능하다.call 메서드는 this의 값을 바꿀수도, 함수를 실행할 때 사용할 인수도 전달가능하댜.call(바인

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

[JS인터뷰준비] 생성자로 객체생성

생성자 함수를 사용해서 객체를 생성할 수 있다. 생성자함수(constructor)란 new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수를 말한다. 생성자 함수에 의해 생성된 객체를 인스턴스(instance)라고 한다연산자 new생성자 constructor인스

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

[JS인터뷰준비] Closure

클로저는 자바스크립트 고유의 개념이 아니다. 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다. MDN에서는 클로저를 다음과 같이 정의한다클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다.outerFunc 함수 내부에서 중첩 함수

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

[JS인터뷰준비] Scope

유효범위. 변수의 접근성과 생존시간을 제어에 대한 개념이다. 전역에서는 함수 스코프 안으로 접근할 수 없다.스코프는 이름이 충돌하는 문제를 덜어주고, 자동으로 메모리를 관리한다.자바스크립트의 스코프는 전역, 함수, 블록스코프 3가지가 있다.스크립트 어디에서든 접근이 가

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

[JS인터뷰준비] 자바스크립트 타입(3)

있는 그대로 저장되는 데이터를 의미한다. 예를들어 변수에 7을 할당하면, 7이 출력된다. 이렇게 있는 그대로 저장되는 데이터가 원시타입이다.BooleanStringNumberundefinednullSymbol원시값을 변수에 할당하면 값이 복사되어 들어간다. 즉, 원시값

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

[JS분기다루기]삼항연산자

삼항연산자는 언제 사용하는가? 나만의 기준이 있는가? 일관성 있게 사용하고 있는가? 아니면 과도한 숏코딩(Short coding)을 하기 위해 사용하고 있는가?삼항연산자를 사용하는 경우는 많지만 중요한 것은 일관성을 가지고 삼항연산자를 사용하는게 중요하다.삼항연산자는

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

[JS분기다루기]값식문

문법은 중요한가? 중요하다면 왜 그럴까? 프로그래머는 프로그래밍 언어를 사용하는 사람이다.프로그래머는 언어를 통해 컴퓨터를 이해시켜야 한다. 문법에 에러가 있다면 컴퓨터를 프로그래머가 요청한 명령을 처리하지 못한다. 그치만 문법을 지킨다는 것은 쉽지 않다. 특히 문법이

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

[JS경계다루기] 매개변수

함수의 이름, 매개변수의 순서만 잘 지켜도, 그 자체가 경계가 된다.매개변수가 2개인 함수는 함수이름과 매개변수로 시작과 끝이 있다고 추론이 가능앞서 봤던 mix/max, first/last, bigin/end ...객체로 받기...사용arguements 객체 활용매개

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

[JS경계다루기] prefix/suffix

prefix/suffix 용어를 사용하는 경우react hooks의 use~jQuery의 $ ~underscore \_.~\_REQUEST\_SUCCESS\_FAILURE

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

[JS경계다루기] first/last

시작과 끝이 있다는 데이터를 다룰 때

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

[JS경계다루기] begin/end

데이터 선택시 처음은 포함되지만, 끝은 포함되지 않는 경우.처음은 고정, 끝이 많이 변하는 경우함수 이름만봐도 어떤 기능을 하는지 알 수 있다파라미터 이름도 잘 지정해줘서, 어떤 값을 넣어줘야하는지 파악이 가능하다결국, 이름을 잘 짓자는 것

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

[JS경계다루기] min/max

위와 같은 코드에서 함수 결과물에 1, 45는 과연 포함되는 것일까?위와 같은 코드에서 함수 결과물에 20살은 과연 포함되는 것일까?함수 이름만봐서는 알 수 없다는 문제. 그렇다면 어떻게 해야할까?최소값와 최대값을 다룬다면 최소값와 최대값포함 여부를 결정해야 한다(이상

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

[인터뷰준비] DocumentFragment

처음 자바스크립트로 돔을 만들고 추가하는 방법을 배울 당시, document.createElement()로 생성하고, appendChild()를 이용해 DOM에 등록을 한다.DocumentFragment Node를 사용하면 오직 메모리상에만 존재하는 경량화된 DOM을

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

[인터뷰준비] 이벤트 위임

요소에 이벤트를 등록하는 일반적인 방법은 addEventListener를 이용하는 것이다. 그렇다면 100개 요소에 이벤트를 등록하고 싶다면 어떻게 해야할까? 일일이 연결해야 할까?이벤트흐름을 잘 이용하면 1개의 이벤트 리스너로 수 많은 요소의 이벤트를 처리할 수 있다

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

[인터뷰준비] 이벤트 흐름

브라우저 관점에서 이벤트는 마우스 클릭 뿐만 아니라 휠의 움직임, 포인터 이동, 화면 터치 등 사용자가 하는 모든 동작을 의미한다.이벤트가 발생한 좌표에 무엇이 있는지 확인하기 위해 렌더링 과정중의 하나인 페인트 기록을 찾아본다.페인트 기록을 통해 좌표를 알아낸 브라우

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

[인터뷰준비] 리페인팅/리플로우

브라우저의 성능을 저하시킬 수 있는 리페인팅/리플로우에 대해 알아보자리플로우와 리페인트는 렌더링과정에서 레이아웃 단계와 페인트 단게를 다시 거치는 과정이다.생성된 DOM노드의 레이아웃 변경 시 영향을 받는 모든 노드(부모, 자식)의 수치를 다시 계산하여 레이아웃 트리(

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

[인터뷰준비] 브라우저는 어떻게 렌더링 하는가?

브라우저주소창, 뒤로가기, 앞으로가기, 새로고침 등웹 페이지에서 보이는 부분 외의 영역사용자 인터페이스와 렌더링엔징을 연결해주는 역할HTML, CSS, JS를 사용자에게 렌더링(화면에 보여줌)라는 역할코드를 해석하며 다운받아야할 이미지, 스크립트, 스타일 태그가 있으면

2021년 10월 27일
·
0개의 댓글