profile
작은 실패, 빠른 피드백, 다시 시도

React useDebounce Hook 사용기

공부를 하면서 여러가지 레퍼런스 및 블로그를 보며 적은 글이라 틀린 부분이 있을수도 있습니다. 혹시 그런 부분이 있다면, 바로 잡아주시면 감사드립니다 :) 문제상황 검색창을 만들면서 값을 입력할 때마다 api를 호출하기 보다는 시간이 어느 정도 흐른 후에 api를 호

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

React Router 업데이트 정리 (v5 -> v6)

이번 프로젝트에서 react-router 쓰는데 내가 원래 알던 방식이 아니였다 ! "뭐지?" 하면서 구글링하니 업데이트가 되었다.. 이런ㅎ ㅎ 슬쩍 봤는데 조금 헷갈리는 부분도 있지만 ? 조금 더 직관적이고 간단해진 느낌은 있는거 같다! 본 글은 링크된 영상을 보고

2022년 6월 14일
·
0개의 댓글
·

SWR[stale-while-revalidate]에 대하여

SWR을 공부하게 된 계기는 작년에 Redux를 사용하여 프로젝트를 진행했다가 길어지는 코드량과 저장하고 있는 데이터를 업데이트 해주기위해서 많은 노력을 하다보니 조금 지쳤던 거 같습니다.다른 라이브러리를 공부하고 싶었고, 그중에서 같은 상태관리 라이브러리는 아니지만

2022년 5월 1일
·
0개의 댓글
·

file-loader vs url-loader

웹팩에서 파일을 다루다가 file-loader와 url-loader의 차이점이 궁굼하여 정리하게 되었습니다.처음에는 이상한..삽질을 하다가 아차 싶었습니다..! 파일을 모듈로 사용할 수 있게 만들어주는 처리를 해줍니다. 즉 실제로 사용하는 파일을 output direc

2022년 4월 7일
·
0개의 댓글
·

CSR(Client-Side-Rendering) vs SSR(Server-Side-Rendering)

MPA (Multiple Page Application): 사용자가 페이지를 요청할 때마다, 웹 서버가 요청한 UI와 필요한 데이터를 HTML로 파싱해서 보여주는 방식의 웹 어플레이케이션이다. 사용자가 아주 사소한 요청을해도 매번 전체 페이지를 랜더링 해주어야 한다.

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

[Javascript] 실행 컨텍스트란 ? (Execution Context)

이번 포스팅은 javascript의 실행컨텍스트와 호이스팅 그리고 스코프체이닝에 대해서 공부한 내용들을 정리할 것입니다. (본 포스팅은 코어자바스크립트 책을 기반으로 작성되었습니다.) 1.실행 컨텍스트(Execution Context)? 실행 컨텍스트()는 실행할 코

2022년 3월 26일
·
0개의 댓글
·
post-thumbnail

[React] webpack으로 구축한 React 프로젝트에서 환경변수 적용하기

CRA를 사용하지 않고, webpack과 babel로 직접 구축한 프로젝트에 환경변수 설정을 하다가 삽질한 내용을 정리하고자 합니다. '리액트에서 환경변수 적용하기' 키워드로 구글링하다가 보면 dotenv 패키지 설치 > 프로젝트 루트에 .env 파일 생성 > REAC

2022년 3월 21일
·
0개의 댓글
·
post-thumbnail

[Javascript] 불변객체와 복사(얕은 복사와 깊은 복사)

본 포스팅은 코어자바스크립트 라는 책을 기반으로 작성되었습니다. 1.불변객체 > 불변객체란 ? 어떤 객체 내부의 프로퍼티들을 변경할 수 없도록 되어있는 객체입니다. 1) 불변객체의 필요성 해당 코드를 실행했을 시에 결과물이 어떻게 나오실지 예상이 되시나요? 앞에

2022년 2월 27일
·
0개의 댓글
·
post-thumbnail

[React] 라이프사이클(Life Cycle) 이해

리액트 라이프 사이클에 대해 알고는 있지만 정확하게 정리해본 적은 없는 거 같아서 정리하게 되었습니다. 리액트는 컴포넌트 기반의 view를 중심으로 한 라이브러리이다. 그러다보니 각각의 컴포넌트에는 라이프 사이클 즉, 컴포넌트의 생명주기가 존재한다. 컴포넌트의 수명은

2022년 2월 19일
·
0개의 댓글
·
post-thumbnail

[React] 최적화 > useMemo, useCallback, React.memo

React 최적화 공부를 하면서 useMemo, useCallback, React.memo를 접하게 되었다. 어떨때 쓰이는지 제대로 알 필요가 있어서 따로 학습하고 정리하려고 합니다.Memoization이란 이전 값을 메모리에 저장해 동일한 계산의 반복을 제거해 빠른

2022년 2월 16일
·
0개의 댓글
·
post-thumbnail

모듈 번들러 webpack과 babel

React를 공부하는 자들이라면 webpack, babel에 대한 이해도는 필수라고 생각합니다. 자! 그럼 webpack과 babel에 대해서 알아보도록 합시다.=> 모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)

2022년 2월 11일
·
0개의 댓글
·
post-thumbnail

React를 사용하는 이유 ?

순수 자바스크립트를 배우고 Vue를 통해 작은 프로젝트들을 만들었습니다. 하지만, Vue를 통해 프로젝트를 할 때 많은 제약사항들(정보 부족, 라이브러리 부족..)에 부딪히게 되었고 요즘 트렌드를 따라가기엔 React 프레임워크를 사용하는 것이 좋을 거 같다는 생각을

2022년 2월 8일
·
0개의 댓글
·
post-thumbnail

[Javascript] javascript 의 메모리와 데이터 할당

본 포스팅은 코어자바스크립트 라는 책을 기반으로 작성되었습니다.위의 그림을 해석하자면, 1003이라는 메모리 주소에 a라는 이름의 식별자를 부여했다는 뜻입니다.따라서 a라는 이름을 활용하여 1003 주소에 데이터를 넣고, 가져올 수 있습니다.javascript는 a라는

2022년 1월 29일
·
0개의 댓글
·
post-thumbnail

리액트 시작하기

Node.jsNode.js 는 자바스크립트가 브라우저 밖에서도 동작하게 하는 환경을 의미합니다. 리액트 애플리케이션은 웹 브라우저에서 실행되는 코드이므로 Node.js와 직접적인 연관은 없지만 프로젝트를 개발하는데 필요한 주요 도구들(ex. 바벨, 웹팩)이 Node.j

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