profile
빵돌입니다. 빵 좋아합니다.

React.memo, useMemo, useCallback 사용하기

렌더링 최적화 수단으로 많이 사용되는 3가지가 있다.3가지에 대해서 알아보자.React는 이전에 rendering된 결과와 비교해서 DOM Update를 결정한다. 만약 이전과 다르면 DOM을 업데이트할 것이다.이전 렌더링 결과와 현재 렌더링 결과를 비교하는 과정은 빠

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

실행 컨텍스트(Execution Context)

코드를 실행되기 위해 필요한 환경으로, LIFO 특징을 갖는 Stack으로 관리된다.코드가 실행되면 전역 실행 컨텍스트부터 스택에 쌓이게 되고, 함수가 실행되면 그 위에 해당 함수의 실행 컨텍스트가 쌓인다. 함수실행이 끝나면 해당 함수의 실행

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

⛏ state 선언 위치에 따른 rendering 차이

너무도 당연한 얘기를 실험과 함께 정리해보고자 한다.솔직히 React를 쓰면서, 'state가 바뀌면, re-rendering이 됩니다!' 정도만 알고 코딩했던 것 같다. 하지만 그런 와중에도'rendering이 적게 일어나게 하려면 state를 어떤 식으로 나눠야 할

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

20211004 TIL

지난번에 진행했던 모의 면접의 꼬리 질문으로,"var는 함수 스코프라고 했는데, 그럼 전역에서 선언하면 못읽어야하지 않나?"가 있었다.답변을 하기 위해 짧은 시간동안 머릿속을 굴려봤지만, 내 추측일 뿐 명확한 답이 아니었기에 답변하지 못했다.C나 C++는 기본적으로 m

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

20210916 TIL

javascript에서 싱글스레드에 대해 설명동기, 비동기란 무엇이며 차이는?array, set, map 차이parameter로 전달한 시간만큼 반복문을 돌다가 특정 문장을 출력하는 함수가 있다. 해당 함수를 setTimeout으로 실행하면 어떤 문장들이 출력되는지,

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

20210914 TIL

bundler는 연관된 파일들을 하나로 묶어주는 도구를 말한다.사용하는 이유는 여러가지 있겠지만, 일반적인 이유는 요청할 resource를 줄여줌으로서 network cost를 줄일 수 있다는 이점때문일 것이다.이에 반해, 성능 최적화를 위한 전략으로 code spli

2021년 9월 13일
·
0개의 댓글

202107_3W WIL

2021.07.18 - https://velog.io/@bandor/20210718-TIL미니프로젝트 주간은 굉장히 정신없었다. 밥먹고 운동하거나 쉬는 시간도 없이 계속 코딩했다. 특히 마감과 가까워질수록 더욱 몰아쳤다. 같이 하는 FE 팀원분에게도 알려드리고

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

20210718 TIL

실시간 통신을 가능케하는 웹소캣을 쉽게 사용할 수 있도록 돕는 라이브러리.애초에 HTTP 프로토콜은 TCP처럼 연결이라는 개념이 존재하지 않는다. 흔히 상태가 없는, stateless라는 특징이 대표적인 예시이다. client와 server가 한번 요청-응답을 받으면

2021년 7월 18일
·
0개의 댓글

202107_2W WIL

2021.07.05 - https://velog.io/@bandor/20210705-TIL2021.07.07 - https://velog.io/@bandor/20210707-TIL2021.07.08 - https://velog.io/@band

2021년 7월 12일
·
3개의 댓글
post-thumbnail

20210708 TIL

지난 주 TIL에서 무한 스크롤을 구현하고 정리했었다.이번 과제에도 무한 스크롤이 있어서, 강의에서 나온 방법말고 이전에 구현했던 방법으로 시도했었지만 잘 동작하지 않았다.이전에 구현했던 방법은 event.target.scrollTop, clientHeight, scr

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

20210707 TIL

firebase는 로그인까지 사용할 수 있게 해준다. email 부터 sns(OAuth)까지 다양하게 지원하고 있다.아래의 내용은 사실 공식 문서에 다 나와있다. 하지만 복습 겸 다음 번에도 firebase를 사용할 일이 있으면, 헤매지말자는 의미로 작성해본다.crea

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

20210705 TIL

input\[type="file"] 에서 받아온 파일을 읽어주는 API.input\[type="file"] 로 파일을 불러오면 event.target.files\[0] 에 파일정보가 담겨진다. 해당 값을 출력해보면 파일 이름, 크기 등 여러 정보가 나오지만 정작 파일의

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

202106_5W & 202107_1W

2021.06.30 - https://velog.io/@bandor/20210630-TIL2021.07.02 - https://velog.io/@bandor/20210702-TIL2021.07.03 - https://velog.io/@band

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

20210704 TIL

반복적으로 발생하는 이벤트를 효과적으로 관리하는 방법.onScroll이나 input의 onChange 같은 이벤트는 매우 좁은 간격으로 발생한다. Chrome의 확장 프로그램 React development tools를 설치하고, onScroll이나 input의 onC

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

20210703 TIL

action creator와 reducer를 편리하게 선언하고 코딩할 수 있게 돕는 라이브러리.기존 action creator는 return 해야할 객체를 일일이 코딩했다. action의 수만큼 만들어야할 객체가 늘어났는데, redux-actions의 createAct

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

20210702 TIL

호이스팅 > 코드가 실행되는 맥락(실행 컨텍스트)에서 변수 선언보다 사용을 먼저 했을 때, 변수 선언부를 변수 사용부분보다 상단으로 옮기는 작업. Javascript의 변수들은 특이하게도 선언보다 사용을 먼저 해도 호이스팅이라는 것 덕분에 문제없이 동작할 수 있었다.

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

20210630 TIL

firestore와 redux 연결하기 firestore는 firebase에서 제공하는 DataBase 서비스를 말한다. MongoDB와 같은 NoSQL DB이며, 구글계정만 있으면 무료로 이용할 수 있다. Redux에 있는 state들을 DB에 저장하고 연동하기

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

20210627 TIL

Redux > state를 전역적으로 관리하고 사용할 수 있게 해주는 툴. state를 전역적으로 사용할 수 있게 해주기 때문에, 말단의 자식이 필요한 state를 타고 타고 타고 들어가서 전달할 필요가 없어진다. Redux에는 총 5가지의 개념이 있다. Actio

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

202106_4W WIL

2021.06.25 - https://velog.io/@bandor/20210625-TIL2021.06.26 - https://velog.io/@bandor/20210626-TIL알고리즘 주차가 끝났다.이전에 혼자 공부했을 때보다 훨씬 많이 성장한 것

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

20210626 TIL

일반적인 웹사이트의 형태와 다르게, html 파일이 하나만 있는 Web Application. 특정 서비스에 가입하기 위해 form에 입력하다가, 입력 항목이 뭔지 알려주는 버튼을 눌렀을 때 페이지가 이동해버렸다고 가정하자. 항목에 대한 정보를 확인하고 '뒤로가기'를

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