그럼에도 불구하고

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는 데이터 사본을 만들고 ..

검색 알고리즘에 대해 알아보겠습니다. [ 목적 ] - 검색 알고리즘이 무엇인지 알아보자 - 배열에서 선형 검색 구현 - 정렬된 배열에서 이진 검색 구현 - 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()와 같은 고차 함수를 지원하기 때문입니다. 이렇게 작성하면 컴포넌트 트리를 거치면서 반복적, 계층적으로 속성을 전달하지 않아도 됩니다. 그렇다고 모든 표현 컴포넌트에 대해 컨테이너를 만드는..

git stash에 대해 알아보겠습니다. [ Git Stash ] 커밋하지 않은 변경사항들을 임시 저장하도록 해주고 불필요한 커밋으로 이력이 지저분해지는 것 없이 나중에 돌아올 수 있게 해 줍니다. 일반적으로, 아직 완성되지 않았거나 커밋할 준비가 되지 않은 것에 대해서도 커밋을 할 수 있습니다. 📌 git stash git stash 어느 시점에서, 커밋하지 않은 모든 변경사항이나 등록했거나 또는 등록하지 않은 변경사항을 모두 stash 합니다. 즉, 변경사항을 기억했다가 워킹 디렉터리의 변경사항을 되돌리는 것입니다. 그래서 더 이상 그 변경사항을 보지 못하지만, stash에서는 여전히 사용 가능해서 나중에 돌아와서 되찾을 수 있게 해 줍니다. 📌 git stash pop git stash pop ⭐️..

레이지 로딩에 대해 알아보겠습니다. :) 목차 [ 레이지 로딩 (Lazy Loading) ] SPA (Single Page Application)은 파일 하나와 다수의 자바스크립트 코드 그리고 CSS 파일로 구성됩니다. 이런 구성 때문에 SPA에는 약간의 문제점이 있습니다. 리액트 라우터를 적용한 수백에서 수천 개의 화면과 컴포넌트로 구성된 애플리케이션이 있다고 가정해 봅시다. 수백, 수천 개의 컴포넌트를 작성할 때 만들어진 자바스크립트 파일은 모두 빌드 과정을 거쳐서 하나 또는 몇 개의. js 파일로 빌드됩니다. 빌드된 파일은 모든 컴포넌트를 묶은 것이므로 파일의 크기도 클 것으로 예상할 수 있습니다. 브라우저는 첫 화면을 로딩하기 위해 브라우저가 웹 서버에 경로를 요청하면, 웹 서버는 하나의. js파..

Git Diff에 대해 알아보겠습니다. 목차 [ Gif Diff ] git diff 명령을 사용하면 commit, branch, file, 작업 디렉터리 간의 변경 사항을 볼 수 있습니다. 또한 git status 및 git log와 같은 명령과 함께 git diff를 사용하여 레포지토리에 대한 더 나은 그림과 시간이 지남에 따라 변경된 방식을 얻을 수 있습니다. git diff는 저장소에서 어떤 작업도 하지 않으며, git status나 git log처럼 아무런 영향도 미치지 않습니다. 순수하게 정보를 주는 명령어입니다. 📌 git diff git diff 이 명령은 다음 commit을 위해 stage에 등록되지 않은 워킹 디렉터리의 변경 사항을 모두 나열합니다. 따라서 워킹 디렉터리와 stage 영역..

브랜치 병합에 대해 알아보겠습니다. 목차 [ Merge ] branch를 이용하면서 개별 작업이 가능해지면서 편해졌지만, master를 기준으로 branch와 다른 branch를 결합해야 하는 상황에는 어떻게 해야 할까요? git merge 명령을 사용하여 이 작업을 수행할 수 있습니다. - merge는 특정 커밋이 아닌 branch를 병합합니다. - merge는 항상 현재 HEAD branch를 기준으로 병합합니다. 📌 사용법 git switch master git merge branch-name 1. 내가 병합하고 싶은 branch로 이동합니다. 2. git merge를 사용하여 현재 branch에 내가 원하는 branch를 병합시킵니다. 아래는 Master에서 branch 한 Bugfix를 Mast..

Context API를 이용하여 todoList를 만들어봅시다!! 목차 [ Context API란? ] 자세한 설명은 아래를 참고해 주세요 https://despiteallthat.tistory.com/184 [React] Context API란? 오늘은 Context API에 대해 알아보겠습니다. [ Context ] Context는 리액트 컴포넌트 간에 어떠한 값을 공유할 수 있게 해주는 기능입니다. 주로 Context는 전역적으로 필요한 값을 다룰 때 사용하는데, 꼭 despiteallthat.tistory.com 간단하게나마 다시 언급하자면, Context API는 컴포넌트 트리에서 속성을 전달하지 않고 필요한 데이터를 컴포넌트에 전달하는 방법을 제공하는 API입니다. [ todolist-app에..

오늘은 branch(브랜치)에 대해 알아보겠습니다. 목차 [ git branch ] git branch 명령어는 Git 저장소에서 사용 가능한 브랜치(분기)를 보여주고, 새로운 브랜치를 생성하거나 삭제하는 등의 브랜치 관련 작업을 수행하는 데 사용합니다. 프로젝트에서 브랜치 깃은 일종의 타임라인 같은 것이라고 생각할 수 있습니다. 브랜치는 우리가 원할 때마다 별도의 콘텍스트를 생성할 수 있게 해 줍니다. 이를 통해 새로운 것을 시도해 볼 수도 있고, 동시에 다양한 아이디어를 가지고 작업할 수도 있습니다. 여기서 중요한 점은 한 브랜치에서 어떤 작업을 하든 다른 브랜치에는 영향을 미치지 않는다는 것입니다. 📌 Master branch 새로운 프로젝트를 생성했을 때, 자동으로 생성되는 기본 브랜치 이름입니다..