profile
열심히 노력하는 신입 프론트엔드 개발자 문건우입니다.
태그 목록
전체보기 (185)JavaScript(45)알고리즘(40)프로그래머스(25)React(20)python(14)leetcode(13)부스트캠프(12)삽질(12)후기(8)typescript(8)js(7)ts(5)DSC(5)면접(5)next.js(5)next(5)멤버십(5)타입스크립트(5)DND(4)프론트엔드(4)express(4)boj(4)Nginx(3)카카오 코딩테스트(3)TIL(3)회고(3)debounce(3)리액트(3)우아한 테크 캠프(3)SSR(3)에러(3)컨퍼런스(3)위상정렬(3)webpack(3)백준(3)NHN Forward(3)redux(3)ES5(2)array(2)프로젝트(2)Recoil(2)throttle(2)key(2)ES6(2)리뷰(2)데브매칭(2)동아리(2)ux(2)https(2)(2)boostcamp(2)카카오 인턴(2)typeOrm(1)UI(1)action(1)cutom hook(1)error(1)Node(1)Saga(1)Tree Shaking(1)썸머코딩(1)garbage colerctor(1)ncloud(1)부산(1)자동배포(1)데이터베이스(1)목표(1)프론트엔드과제(1)useReducer(1)this(1)arrow function(1)mysql(1)챌린지(1)CSS(1)html(1)useCallback(1)Context API(1)es8(1)개발자(1)화살표 함수(1)PNU(1)홍보(1)개발자의 디자인 독해력(1)code splitting(1)상속(1)lazy(1)cookie(1)HMR(1)babel(1)Summer/Winter 코딩(1)dd(1)훌륭한 개발자(1)웹 표준(1)private(1)그룹 프로젝트(1)emotion(1)트랜스파일(1)생성자(1)카카오 인턴 코딩테스트(1)test(1)corejs(1)레디스(1)nextjs(1)웹 접근성(1)clipboard(1)웹팩(1)sql(1)figma(1)ScrollIntoView(1)우테캠(1)자료구조(1)dynamic routing(1)Sequelize(1)shell(1)트리 쉐이킹(1)React Hooks(1)Symbol(1)생각정리(1)bind(1)우아한 형제들(1)코드 스플리팅(1)queue(1)배포(1)호이스팅(1)개발(1)세션(1)쿠키(1)카카오(1)코딩테스트(1)해커톤(1)객체(1)Index(1)확장(1)arguments(1)Trie(1)유틸리티 타입(1)Prototype(1)NaN(1)카카오 알고리즘(1)class(1)책 리뷰(1)사이드프로젝트(1)

react-hooks 테스트하며 알게 된 점

react-testing-library 와 jest를 사용해서 react-hooks를 test 해보았다. 생각 보다 막히는 곳이 많았다.

2021년 6월 30일
·
0개의 댓글

프론트엔드 면접 질문 정리

제가 면접 보면서 질문 받았던 면접 질문들을 총정리 합니다. 여러 IT 대기업들 그리고 여러 스타트업들의 내용들을 정리하였습니다.DOCTYPE 이란 무엇인가요?여러 meta 태그들에 대한 질문시맨틱 태그란 무엇인가요?position에 대해 설명해주세요.display에

2021년 5월 10일
·
20개의 댓글

React의 Virtual Dom은 트리를 어떻게 비교하는가?

React의 V-DOM은 이전 V-DOM과 현재 V-DOM을 비교해서 바뀐 부분만 변경함으로써 최적화가 이루어진다. 그렇다면 React는 어떠한 방식으로 V-DOM 이 바뀌었는지 아는걸까? React는 Reconciliation 과정을 거친다. 일반적인 트리 비교 알고

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

prototype 언어의 장단점은 무엇일까?

javascript는 prototype을 쓰는 언어이다. prototype을 통해서 다른 class언어의 상속을 구현할 수 있다. 그렇다면 그냥 class 언어와 prototype 언어의 차이가 무엇일까? prototype 언어의 장단점은 무엇인가...내가 생각하고 공

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

컴포넌트의 key가 바뀌었을 때 리렌더링? 언마운트?

key 속성은 보통 list를 map으로 반복문으로 렌더링할 때 각 element를 구분하고 바뀌었는지 구분하기 쉽게 도와주는 역할을 한다. key는 props로 넘어가지 않고 단순히 리액트를 도와주는 역할을 하는 것이다.기본적으로 props가 바뀌면 리렌더링이 되는데

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

bind 구현해보기

bind는 함수 실행시 this 값을 특정한 값으로 고정시킬 수 있는 메소드이다.bind는 ES5에 추가되었기 때문에 ES5 이전에는 call, apply를 통해서만 this를 변경할 수 있었다. bind처럼 this를 변경 한 함수로 만들기 위해서는 직접 구현을 했어

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

잘 모르고 넘어간 html 속성

Document Type의 약자로 HTML이 어떤 버전으로 작성되었는지 미리 선언하여 웹브라우저가 내용을 올바로 표시할 수 있도록 해준다. <!DOCTYPE> 을 선언하지 않으면 호환모드(quirks mode)로 동작하는데, 호환 모드의 경우 각 브라우저마다 문서

2021년 3월 15일
·
2개의 댓글

웹팩5 HMR이 동작을 안 한다??

웹팩5를 쓰면서 잘 되던 HMR이 갑자기 동작을 안 한다. 너무 불편하다 하나를 바꿀 때마다 새로고침을 해주어야 한다.왜 그럴까... 찾아보니 target에 es5 를 추가 하면 안 된다고 하는 것 같다...아까 IE를 지원 하기 위해서 target: 'web'인 것을

2021년 3월 14일
·
0개의 댓글

웹팩 바벨 화살표함수가 ES5 일반 함수로 트랜스파일 안 될 때...

웹팩으로 IE를 지원 하기 위해서 babel을 사용하고 core-js도 설정을 해주었다. 그 설정은 다음과 같았다.babel.config.jswebpack.config.js다음과 같이 설정을 해뒀는데 build를 해도 계속 화살표 함수가 바뀌지 않는 것이었다. babe

2021년 3월 14일
·
4개의 댓글

2021 Dev-Matching: 웹 프론트엔드 개발자(상반기) 후기

오늘 오후 1시부터 4시까지 Dev-Matching이 있었다. 이번이 3번째 참가이다. 이번에는 저번과는 다르게 화상 감독을 도입하여서 캠을 켜야했다. 밥을 먹고 호다다닥 들어간다고 그냥 컴퓨터 캠으로 켰는데 끝나고 나서 알고보니 휴대폰으로 했어야 한다고 한다. (메일

2021년 3월 6일
·
0개의 댓글

BOJ 2252 줄 세우기 - Python

https://www.acmicpc.net/problem/2252가장 기본적인 위상정렬을 통해 해결 할 수 있다.어떤 사람 뒤에 어떤 사람이 와야하는지를 정렬하는 것이기 때문이다.

2021년 3월 2일
·
0개의 댓글

BOJ 2623 - 음악프로그램 - Python

https://www.acmicpc.net/problem/2623전체 가수의 순서를 정하는 것이다.위상정렬을 통해서 해결할 수 있다.가장 기본적인 위상정렬을 하고,마지막에 모든 가수가 정상적으로 result에 들어갔는지를 확인 해주면 된다.

2021년 3월 2일
·
0개의 댓글

BOJ14676 영우는 사기꾼? - Python

https://www.acmicpc.net/problem/14676골드 4 문제이다.위상정렬을 활용하면 된다.건물들을 순서가 있고, 건물을 하나씩만 지을 수 있는것이 아니기에 그것까지 체크해주면 된다.그리고 건물을 정상적으로 건설하거나, 건설한 만큼의 건물만

2021년 3월 2일
·
0개의 댓글

BOJ 9470 Strahler 순서 - Python

https://www.acmicpc.net/problem/9470잘 이해가 안 됐었던 문제이다.위상정렬을 응용하면 된다.Strahler 순서를 구하는 문제인데, 처음 시작하는 곳은 순서가 1이다. 그리고 이에 연결된 노드들은 그 노드로 들어오는 순서 중 가장

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

element.scrollIntoView

요즘 웹사이트에서 찾아보면 하나의 페이지만 있고, 상단의 네비게이션 바를 통해 화면을 이동하는 방식을 볼 수 있다. 이러한 페이지는 어떻게 구현하는 것일까? 물론 스크롤을 하나하나 계산해서 이동시킬 수도 있겠지만, element의 메소드인 scrollIntoView를

2021년 2월 22일
·
2개의 댓글

코드 스플리팅

요즘 개발 환경에서 번들링을 이용해서 모든 코드를 하나의 번들로 묶어서 만들게 된다. 앱이 비교적 간단한 편이라면 크게 문제가 되지 않지만, 프로젝트가 커지면 전달해야 하는 파일도 커지고, 유저의 브라우저가 파싱해야하는 정보도 많아지기 때문에 퍼포먼스 문제들이 생길 수

2021년 2월 22일
·
0개의 댓글

Tree Shaking

직역하면 나무 흔들기, 모듈을 번들링할 때 사용하지 않는 코드를 제거하는 최적화 과정을 말한다.이 용어를 처음 최적화 개념에 사용한건 rollup.js이다. Webpack 4 부터 대단히 영리한 최적한 빌드를 보여준다.Webpack의 optimization에서 prov

2021년 2월 22일
·
0개의 댓글

웹 표준, 웹 접근성

'웹에서 표준적으로 사용되는 기술이나 규칙'표준화 단체인 W3C가 권고한 표준안에 따라 웹사이트를 작성할 때 이용하는 HTML, CSS, JavaScript등에 대한 규정이 담겨있다.어떤 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상작동해야 함을 의

2021년 2월 22일
·
0개의 댓글

호이스팅은 왜 생기는 걸까?

호이스팅은 보통 변수를 위로 끌어올리는 것이라는 표현을 많이한다. 그렇다면 개발자들을 헷갈리게 하는 호이스팅을 왜 만들었을까?? 이를 알기 위해서는 JS엔진이 JS를 어떻게 해석하고, 어떻게 Excution Context를 만들고 어떤 작업을 하는지를 알아야한다.JS엔

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

Symbol

자바스크립트는 객체 프로퍼티 키로 문자형과 심볼형만을 허용한다. 숫자형, 불린형 모두 불가능하다.Symbol은 ES6에 새로 추가된 원시 타입이다. 심볼은 유일한 식별자를 만들고 싶을 때 사용한다.심볼은 unique 하기 때문에, description이 같아도 충돌하지

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