그럼에도 불구하고

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 새로운 프로젝트를 생성했을 때, 자동으로 생성되는 기본 브랜치 이름입니다..

오늘은 useReducer를 이용한 todoList를 만들어보겠습니다. 목차 [ useReducer ] useReducer 훅을 사용하는 방법은 다음과 같습니다. // state : 상태 // dispatch : 상태를 변경하는 메서드 // reducer : 새로운 상태를 리턴하는 리듀서 함수 /// initialState : 초기 상태로 지정할 객체 const [state, dispatch] = useReducer(reducer, initialState); useReducer 훅에 리듀서 함수와 초기 상태를 인자로 전달하여 호출하면 상태와 상태 변경을 위해 메시지를 전달할 수 있는 dispatch 함수가 리턴됩니다. dispatch 함수가 미리 정의한 형식의 메시지를 전달하면 상태를 변경하도록 리듀서 ..

오늘은 git commit과 commit message를 수정하는 법에 대해 알아보겠습니다. 목차 [ commit 수정 ] git으로 작업할 때, 새 커밋을 실행한 다음 그 커밋에 관련 파일을 포함시키는 것을 잊었거나, 커밋 메시지를 읽었을 때 오타가 있는 것을 뒤늦게 깨달을 때가 있습니다. 이를 해결하는 방법에 대해 알아보겠습니다. 💡 전제 조건: local에서 commit을 하고 push를 하지 않아 remote에 올라가지 않은 상태여야 한다. 📌 1. git commit --amend $ git status ---- modify: **/js 등등 ---- $ git add. $ git commit -m "Upload filename" $ git commit --amend 위와 같이 amend를 이용..

오늘은 Git commit message에 대한 이런저런 얘기를 나눠보겠습니다. :) [ commit은 원자적으로 유지하자 ] 원자적? 작다? 네 Git 공식 문서에 따르면 commit은 가능하다면 단일 기능이나, 단일 변화, 수정을 포함해야 하며 각각의 커밋은 한 가지에만 집중하는 게 좋다고 합니다. ⭐️ GitHub에 올려진 내 프로젝트 혹은 공부하던 작업물을 올리려고 할 때, 수도 없이 commit을 하고는 하는데요. 혹시, commit은 어떤 기준으로 하는 것이 좋은지 생각해보신적 있으신가요? 한 가지 예시를 들어보도록 하겠습니다. 📌 예시 어떤 쇼핑몰을 만드는 프로젝트를 작성하고 있다고 할 때, 쇼핑몰 안에 있는 물건들의 목록이 있는 파일이 있습니다. 그 파일에는 50가지의 물품이 저장되어 있는..

시작! 목차 📌 webpack.config.js HTML 삽입 미리보기할 수 없는 소스 ⭐️ 1. 모드 설정 mode 매개 변수는 다음 3가지 값 중 하나를 사용할 수 있다. mode: "production", mode 값 설명 development 개발 모드 production 배포 모드 (기본 값) none 기본 최적화 옵션 설정 해제 "production" 모드는 Webpack 모듈 번들링 과정에서 자체적으로 코드를 최적화하여 용량을 줄일 수 있다. ⭐️ 2. 엔트리 설정 entry : 애플리케이션의 진입점 (entry point)를 설정한다. 나는 "main", "additional", "myClothes" 세 가지 엔트리 포인트를 정의하였다. 이는 각각에 해당하는 JavaScript 파일이 엔트..

SyntheticEvent를 통한 React 이벤트 적용에 대해 알아보겠습니다. 목차 [ Event Argument ] 리액트 이벤트 핸들러 함수에서의 이벤트 아규먼트는 브라우저의 종류와 관계없이 이벤트를 처리할 수 있도록 SyntheticEvent 타입으로 추상화합니다. SyntheticEvent를 기반으로 확장된 다양한 Event 타입은 다음과 같습니다. 각 Event Argument 타입에서 사용할 수 있는 속성은 다음 문서의 타입 정보를 확인하세요. https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/v17/index.d.ts GitHub - DefinitelyTyped/DefinitelyTyped: The repo..

빅 오 표기법(Big O Notation)에 대해 알아보겠습니다. 목차 우선, 문제 하나 풀고 가실까요? 💡 quiz. 1부터 특정한 N 값과 그 사이에 있는 모든 숫자들을 더하는 함수를 만들어보세요. 📌 해답 1 function addUpTo(n) { let total = 0; for (let i = 0; i O(n) 앞의 상수는 중요하지 않습니다. 📌 2. O(500) => O(1) O(500)은 쉽게 말하면 연산 갯수가 어떤 상황에든 500개가 있다는 것입니다. 즉, 변동이 없습니다. 📌 3. O(13n²) => O(n²) 13n²이 무진장 많이 커진다면, 정말 셀 수 없이 커진다면 앞에 있는 13이 큰 의미가 있을까요? n² 보다?? ※ 더 작아지는 것도 중요하지 않습니다. 📌 1. O( n + ..