Frontend/Today I Learned 28

[React] Hooks - useContext, memoization

이번에는 지난주에 예고한대로 `useContext` hook과 `memoization`에 대해 살펴보려고 한다. 1. `useContext`React context의 필요성useContext를 사용하기 전에는 prop을 부모 컴포넌트에서 자식 컴포넌트로 전달해주며 데이터를 전달했다. 하지만 중간 컴포넌트에서 해당 데이터가 불필요한 경우도 많을 것이고 컴포넌트 사이의 거리가 아주 멀면 prop drilling이 발생할 것이다. Prop drilling이 발생하면 다음과 같은 문제점이 생긴다.깊이가 너무 깊어지면 어떤 컴포넌트로부터 전달된 prop인지 파악하기 어려움어떤 컴포넌트에서 오류가 발생할 경우 추적이 힘들어 대처가 늦어짐이 때 `useContext` hook, 즉 context API를 통해 쉽게 ..

[JS, redux] Redux Toolkit 기본 사용법

오늘은 `Redux Toolkit`(`rtk`)의 아주 기초적인 사용법에 대해 정리해보려고 한다. 지난번 Redux 기본 사용법에서는 initial state, action value, action creator, reducer를 직접 작성해주어야 했는데, `rtk`에서는 action value를 별도로 작성하지 않아도 된다. 큰 틀은 redux과 크게 다르지 않지만 세부적인 부분에서 차이점이 있다. Redux Toolkit 사용 기초기본 설정먼저 아래 명령어를 실행해 rtk를 설치해주자.yarn add react-redux @reduxjs/toolkit 이후 `src`폴더에 `redux`폴더를 만든 후 `config` 폴더와 `slices` 폴더를 만들자.먼저 `config/configStore.js`..

[JS] 이벤트 겹쳤을 때 막는 방법 (+ 이벤트 캡처링, 버블링)

전 프로젝트에서도 경험했지만, 부모 요소에 클릭 이벤트를 적용하고 자식 요소에도 클릭 이벤트를 적용하면, 부모 요소의 이벤트가 적용되는 문제점이 있었다. 이를 해결하는 방법을 찾아 정리하려고 한다. `Event.stopPropagation()`현재 이벤트가 버블링 단계에서 더 이상 전파(propagate)되지 않도록 막아준다. 아래 코드를 실행해보면 자식 요소를 클릭해도 '부모 요소 클릭' 알림창이 뜨는 것을 확인할 수 있다. {alert('부모 요소 클릭')}}> {alert('자식 요소 클릭')}} />  이때 자식 요소 onclick을 아래와 같이 수정하면 자식 요소를 클릭했을 때 '자식 요소 클릭' 알림창이 뜨는 것을 확인할 수 있다. {alert('부모 요소 클릭')}}> ..

[JS, redux] Redux 소개 및 기본 사용법

`useContext`, `useMemo`를 다루기로 했는데, 헷갈려서 까먹기 전에 redux 기본 사용법을 정리하려고 한다. Redux왜 redux를 사용할까?`useState`만 사용하여 state를 관리하려면 props를 통해 부모 컴포넌트에서 자식 컴포넌트로 공유해야 했다. 그러면 몇 단계 하위 컴포넌트에서 사용하려면 불필요한 props도 계속 전달해줘야 하는 불편함이 있다. 이처럼 props를 계속 아래로 아래로 내려보내는 것을 prop drilling이라고 한다. Prop drilling을 해결하는 하나의 방법으로 redux를 사용할 수 있다. Redux를 사용하면 state를 공유하기 위해 부모-자식 컴포넌트 관계를 유지하지 않아도 된다. 앞으로 `useState`를 사용해 특정 컴포넌트에서..

[React] Hooks - useState, useEffect, useRef

오늘은 React의 몇 가지 hook에 관해 정리해보려고 한다. 1. `useState`가장 기본적인 hook이며, 함수 컴포넌트에서 가변적인 상태를 갖게 해준다. 가장 기본적인 사용방법은 아래와 같다.const [value, setValue] = useState(initialState);// value를 nextState로 바꾸기setValue(nextState);그러면 초기에 `value`를 `initialState`로 설정하고 이후 `setValue`를 통해 `value`를 바꿔줄 수 있다. 하지만 이렇게 하면 setValue를 여러 번 수행한 경우, 마지막 setValue만 적용하게 된다. (렌더링 최적화를 위해 setState를 모아 한 번에 실행한다. batch update 방식)  함수형 업..

[CSS] 스크롤 바 스타일

이번 게시글은 개인과제 중 표에 스크롤 바를 이쁘게 적용하기 위해 찾아보다가 잘 정리된 글이 있어 정리하게 되었다. 🌟 스크롤 바(Scrollbar) 스타일링 💯 총정리Custom Scrollbar 스타일링 유튜브 홈페이지를 보면 스크롤바가 일반 브라우저 스크롤바와는 달리 동그랗게 스타일링 되어 있음을 볼 수 있다. 이처럼 스크롤바 역시 다른 요소처럼 CSS 스타일링이inpa.tistory.com결론은... 웨일에서 기본적으로 제공하는 스타일처럼 overlay가 되도록하고 싶었는데, 단순한 구조로는 불가능할 것 같고, 외부 라이브러리를 사용해야 할 것 같다. 웨일에서 스크롤바의 기본 스타일은 아래와 같다. 오른쪽은 마우스가 가까이 있을 때 반응이다.크롬에서 기본적으로 제공하는 스크롤바는 아래처럼 투박..

[JS] Module 기초 정리

firebase 등을 사용할 때 import { ... } from "./..../file.js"과 같은 내용을 본 적일 있을 것이다. 혹은 html에서 script 태그를 사용할 때 type='module'이라고 지정하는 경우가 있다. 느낌적으로 해당 파일에서 함수를 불러오는 것을 알 수 있다. (ES6 기준에서 작성합니다.) Module 기본 사용법ES6에서는 `export` 키워드를 사용해 모듈을 만들고, 다른 파일에서 사용할 수 있게 한다. 모듈은 재사용할 수 있는 함수, 객체 또는 원시값을 의미한다.// math.jsexport const add = (a,b) => a + b;export const multiply = (a,b) => a*b;export const ONE = 1;export co..

[git] 자주 사용하는 기초적인 git 명령어 정리

개발 공부 일지를 올리기 위해 티스토리를 처음 만들었다. 첫 글로 올리기에 git 명렁어 정리가 좋을 것 같아 첫 주제로 선택했다. 겸사겸사 제대로 익힐 수 있고 혹시 까먹은 경우 다시 보기에 좋을 것 같다.프로젝트를 진행하다보면 다른 사람의 코드에서 시작하는 경우가 많다. 이럴 때 git을 통해 github repository를 clone해서 해당 repository에 브랜치를 만들어 관리하게 된다. branch를 만들어 add/commit과  push/pull하는 방법에 대해 정리하려고 한다. (vScode 환경에서 진행한다.) 1. repository 주소 복사하기여기서 초록색 Code 버튼을 누르면 https 주소가 뜨고 이를 복사한다. 아래 친절하게 'cloning using the web U..