그럼에도 불구하고

새로고침해도 redux의 store를 유지하는 법에 대해 알아보겠습니다. 🧑🏻‍💻 Redux-Persist Redux는 새로고침하거나 창을 닫으면 store에 저장된 state가 리셋됩니다. 이를 방지하기 위해 Redux의 Redux-Persist를 사용해 보겠습니다. 현재 Posts 상에 있는 게시물에서 View Post를 누르면 해당 게시물의 상세 페이지로 넘어가고 각각의 게시물마다 nanoid로 지정된 id를 통해 해당 페이지로 이동하고 있습니다. 내 localhost/post/:nanoid 이때 생성된 nanoid는 무작위이며, 새로고침할 때마다 redux store는 기존 state를 가지고 있지 못하고 새로운 nanoid로 생성된 게시물 리스트를 갖고 있습니다. 그렇기 때문에 기존 state가..

createAsyncThunk에 대해 알아보겠습니다. 🧑🏻‍💻 createAsyncThunk 프로그램을 개발하다 보면, 전역에서 자주 사용되는 api를 호출하거나, api 호출한 결과를 여러 군데에서 사용해야 할 상황이 생기는데, 이와 같은 비동기 처리를 redux store에서는 자체적으로 하지 못하는 단점이 있습니다. 따라서 Redux를 사용할 때는 redux-thunk, redux-saga와 같은 미들웨어를 사용해서 비동기 처리를 진행했습니다. 하지만, 위의 기능들 같은 경우 Redux와 같이 사용하기 위한 러닝커브가 조금 있기 때문에, Redux Toolkit의 createAsyncThunk를 사용해 비동기 처리를 진행하고는 합니다. 📌 사용법 createAsyncThunk 1. createAsy..

오늘은 id를 자동으로 생성해 주는 @reduxjs/toolkit nanoid에 대해 알아보겠습니다. 🧑🏻‍💻 nanoid import { nanoid } from "@reduxjs/toolkit"; nanoId는 @reduxjs/toolkit안에 내장되어 되어있는 기능으로 자동으로 id를 생성해 줍니다. 예를들어, TodoList에 새로운 Post를 게시할 때 PostList의 각각의 post에 고유한 key를 지정할 경우 유용하게 사용할 수 있습니다. 📌 AddPostForm.tsx HTML 삽입 미리보기할 수 없는 소스 const onSavePostClicked = () => { if( title && content ) { dispatch( postAdded({ id: nanoid(), title,..

버블 정렬, 선택 정렬, 삽입 정렬에 대해 알아보겠습니다. 🧑🏻‍💻 정렬이 무엇인가? 정렬은 항목이 일종의 순서가 되도록 컬렉션(예: 배열)의 항목을 재정렬하는 프로세스입니다. 📌 정렬을 왜 알아야 하는가? - 정렬은 매우 일반적인 작업이므로 작동 방식을 아는 것이 좋습니다. - 물건을 분류하는 방법에는 여러 가지가 있으며, 기술마다 장단점이 있습니다. ⭐️ 버블 정렬 (Bubble Sort) 버블 정렬은 잘 사용되지 않고 엄청 효율적이지는 않습니다. 하지만 어떻게 사용하는지 알면 재미있는 정렬 방식입니다. 버블 정렬의 개념은 배열을 가장 작은 숫자에서 가장 큰 숫자 순으로, 즉 오름차순으로 정렬한다면 더 큰 숫자가 한 번에 하나씩 뒤로 이동한다는 것입니다. 📚 버블 정렬 예시 - 배열의 끝인 i라는 변..

git fetch와 git pull에 대해 알아보겠습니다. 🧑🏻‍💻 Remote Tracking Branches remote/branch 패턴을 따릅니다. - origin / master는 origin이라는 원격 repository의 master branch 상태를 참조합니다. - upstream / logoRedesign은 upstream(공통 원격 이름)이라는 이름의 원격에서 logoRedesign 분기의 상태를 참조합니다. 📌 Remote Branches git branch -r git branch -r을 실행하여 local repository가 알고 있는 원격 branch를 볼 수 있습니다. git checkout remote/branch github에서 git clone 해서 받아온 시점의 상태..

IntersectionObserver API에 대해 알아보겠습니다. 🧑🏻‍💻 IntersectionObserver API IntersectionObserver는 웹 API 중 하나로, 요소의 가시성 여부를 비동기적으로 감지하는 기능을 제공합니다. 이를 통해 무한 스크롤, 화면 리사이징, 이미지 로딩 지연, 트래킹 및 애니메이션 효과 등에서 유용하게 활용됩니다 Intersection Observer의 주요 개념과 사용법을 설명해 드리겠습니다. 📌 사용법 1. InterSection Observer 생성 const observer = new IntersectionObserver(callback, options); Intersection Observer를 생성하려면 콜백 함수(callback)와 옵션(opti..

오늘은 createSlice에 대해 알아보겠습니다. 🧑🏻‍💻 createSlice createSlice란 리듀서 함수의 대상인 초기 상태와 "슬라이스 이름"을 받아 리듀서와 상태에 해당하는 액션 생성자와 액션 타입을 자동으로 생성하는 함수를 말합니다. 내부적으로는 createAction 및 createReducer를 사용하므로 Immer를 사용하여 "변형"되지 않는 업데이트를 작성할 수 있습니다. 슬라이스를 생성하려면 슬라이스를 식별하기 위한 문자열 이름, 초기 상태 값 및 상태를 업데이트할 수 있는 방법을 정의하는 하나 이상의 리듀서 함수가 필요합니다. 슬라이스가 생성되면 생성된 Redux 액션 생성자와 전체 슬라이스에 대한 reducer 기능을 내보낼 수 있습니다. Redux는 데이터 사본을 만들고 ..

useTransition과 useDeferredValue에 대해 알아보겠습니다.  🧑🏻‍💻 전환 기능리액트 애플리케이션으로 개발하는 화면에서의 UI 업데이트는 두 가지 유형이 있습니다. 그중 하나는 사용자에게 즉각적인 피드백을 전달해야 하는 업데이트입니다. 예를 들면 화면의 입력 필드에 사용자가 타이핑하는 것을 예시로 들 수 있습니다. 사용자가 타이핑할 때 UI 업데이트가 느리면 실행 도중 화면이 깜빡거리거나 입력이 느려지는 등의 문제가 있을 수 있습니다.  이러한 경우를 긴급한 업데이트(urgent update)라고 부릅니다. 또 다른 업데이트 유형은 사용자가 입력한 필드의 값을 이용해 백엔드의 데이터를 조회해서 화면을 갱신하는 작업입니다. 이 유형은 긴급한 업데이트보다는 긴급하지 않은 업데이트(..

지속적으로 업데이트됩니다! 🧐 Start! 🧑🏻‍💻 자바스크립트 엔진 자바스크립트가 동작되게 하려면 브라우저 자체에서 내장되어 있는 JS 엔진이 필요하다. 이것이 동작하는 시간을 런타임이라고 하는데 런타임 하는 과정에서 코드를 한 줄씩 읽고 번역해서 실행을 해주는 것을 인터프리터 라고 한다. 런타임 : JS 엔진이 동작하는 시간 인터프리터 : 런타임 하는 과정에서 코드를 한 줄 한 줄 읽고 번역해서 실행해 주는 것 [JavaScript] 컴파일러 언어 vs 인터프리터 언어 오늘은 컴파일러 언어와 인터프리터 언어의 차이를 알아보자 우선, 컴파일러 언어와 인터프리터 언어의 이해를 돕기 위해 프로그래밍이란 무엇이며, 프로그래밍 언어가 무엇인지 짚고 넘어가 despiteallthat.tistory.com 🧑🏻‍..

검색 알고리즘에 대해 알아보겠습니다. [ 목적 ] - 검색 알고리즘이 무엇인지 알아보자 - 배열에서 선형 검색 구현 - 정렬된 배열에서 이진 검색 구현 - Naive String 검색 문자 알고리즘 구현 [ How do we search? ] 배열이 주어지면 값을 검색하는 가장 간단한 방법은 배열의 모든 요소를 살펴보고 원하는 값인지 확인하는 것입니다. [ 선형 검색 (Linear Search) ] 첫 부분에서 시작해서 끝 부분으로 이동하면서 한 번에 하나의 항목을 확인할 수도 있고, 끝 부분에서 시작해서 첫 부분으로 이동할 수도 있습니다. 중요한 것은 세트 간격으로 이동하면서 한 번에 하나의 항목을 확인하는 식으로 모든 항목을 확인한다는 것입니다. 📌 Linear Search Pseudocode ( 의..

git checkout, git restore, git reset, git revert에 대해 알아보겠습니다. [ git checkout ] git checkout or git checkout HEAD~? (1개, 2개, 3개 ~~~ ) 내가 입력한 commit hash 시점으로 돌아갈 수 있습니다. ( 돌아가서 확인이 가능하다. ) 📌 Detached HEAD git checkout을 사용하면 Detached HEAD 문구를 볼 수 있는데 두 가지 옵션이 있습니다. 1. 분리된 HEAD에 머물면서 이전 commit의 내용을 확인합니다. 2. 새 branch를 만들고 전환한다. HEAD가 더 이상 분리되지 않으므로 이제 변경 사항을 적용하고 저장할 수 있습니다. git check commit hash를 ..

connect 고차 함수와 useSelector, useDispatch에 대해 알아보겠습니다. [ 리덕스 컨테이너 컴포넌트 ] Redux 플로우 전체도 Connect Component = Container Component 리덕스 스토어와 연결되는 컴포넌트들은 모두 표현 컴포넌트(presentational component)로 작성할 수 있습니다. react-redux 같은 라이브러리가 리덕스 스토어의 상태를 표현 컴포넌트의 속성으로 전달해 주는 컨테이너 컴포넌트를 손쉽게 작성할 수 있는 리덕스 훅들과 connect()와 같은 고차 함수를 지원하기 때문입니다. 이렇게 작성하면 컴포넌트 트리를 거치면서 반복적, 계층적으로 속성을 전달하지 않아도 됩니다. 그렇다고 모든 표현 컴포넌트에 대해 컨테이너를 만드는..