개발에 도움이 되는 (78) 썸네일형 리스트형 localStorage, sessionStorage Web Storage 객체인 localStorage와 sessionStorage는 브라우저 내에 key-value 쌍을 저장할 수 있게 해 준다. 개발자 도구(F12)에 Application 탭에 들어가면 Storage를 확인할 수 있다. 이 두 Storage는 같은 API를 가지며, key-value는 반드시 문자열이어야 한다. 쿠키와는 다르게 Web Storage 객체는 네트워크 요청 시 서버로 전송되지 않는다. 이런 특징 때문에 쿠키보다 더 많은 자료를 보관할 수 있다. 대부분의 브라우저가 최소 2MB 그 이상의 Web Storage 객체를 저장할 수 있도록 해준다. 쿠키와 또 다른 점은 서버가 HTTP Header를 통해 Storage 객체를 조작할 수 없다는 점이다. Web Storage 객체 .. 생명 주기(Life Cycle) - 생명 주기 (Life Cycle) : React는 Component 기반의 View를 중심으로 한 Library이다. 그러다 보니 각각의 Component에는 생명 주기가 존재한다. Component의 수명은 보통 Page에서 Rendering 되기 전인 준비 과정에서 시작하여 Page에서 사라질 때 끝이 난다. - 생명 주기 (Life Cycle) 유형 : 생성될 때(Mount), 업데이트할 때(Update), 제거할 때(Unmount) 총 3개로 나뉜다. - Mount : DOM이 생성되고 웹 브라우저 상에서 나타나는 것 - Update : 뜻 그대로 DOM이 업데이트 되는 경우인데, 아래와 같은 상황에서 발생. 1) props가 바뀔 때 2) state가 바뀔 때 3) 상위 Component가 .. 스코프(Scope) - 스코프 (Scope) : 선언한 상수나 변수들의 허용된 영역, 접근할 수 있는 범위 - Scope Type : 스코프 타입은 크게 두 가지로 나뉜다. 1. Global Scope : 어디서든 접근할 수 있는 변수들이 있는 범위 (전역 변수) 2. Local Scope : 해당 지역 범위에서만 접근할 수 있는 변수들이 있는 범위 (지역 변수), Local Scope는 또 아래와 같이 나뉜다. 1) Function Scope : function로 선언한 함수 지역변수로 어떠한 변수(var, let, const)도 외부에서 접근 불가능, Arrow function은 Block scope이다. 2) Block Scope : {} 안이 scope로 적용되며 If 문, for 문, while 문, try / c.. react-beautiful-dnd - react-beautiful-dnd? atlassian에서 만든 Drag and Drop Library이다. https://github.com/atlassian/react-beautiful-dnd react-dnd 처럼 customizing 할 수는 없지만, 위 그림과 같이 간단하게 drag and drop을 구현하기 위해서는 사용하기 좋다. - 예제 - react-beautiful-dnd install 후 import import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; - drag and drop 을 할 요소 상태 생성 const [fields, setfields] = useState(formList) - 위 그림.. RTK Query - RTK Query란? Redux Toolkit core 위에서 작성된 Data Fetching, Caching Tool 기존 Redux에 비해 훨씬 적은 양의 코드로 처리하여 상태 관리를 할 수 있다. 그 이유는 API 요청부터 데이터를 받아서 바로 Store에 저장하는 단계를 쭉 이어서 처리하기 때문이다. - 언제 사용하면 좋을까? Redux의 fetching 로직을 단순화 시킬 때나 코드 간결화, Redux DevTools를 이용해서 상태의 히스토리 변화를 보고 싶을 때 사용하면 좋을 것 같다. 그리고 isLoading 같은 변수를 이용하여 Data를 받아오기 전에 특정 UI를 보여줌으로써 UX를 향상시킬 수 있다. - 예제 - API 생성 import { createApi, fetchBaseQu.. Git 명령어 모음 개인적으로 사용하는 명령어들 기록 (계속 업데이트 예정) Git Clone 생성 : git clone [생성할 Repo URL] Git 원격 저장소 정보 확인 : git remote -v Git branch 생성 : git checkout -b [생성할 branch 이름] Git branch 생성 후 Remote에 Push : git push -u origin [Push할 branch 이름] Git branch 조회 : git branch Git branch 변경 : git checkout [변경할 branch] Git branch 삭제 : git branch -d [삭제할 branch] Git Push 과정 1. git add . 2. git commit -m "내용" 3. git push [저장소 이.. DOM(Document Object Model) - DOM (Document Object Model) 스크립트 언어로 HTML 요소를 제어할 수 있도록 하는 문서 객체 모델이다. 일종의 인터페이스며, DOM은 웹사이트를 구축하는 데 사용하는 Web API이다. HTML 문서를 기반으로 Node Tree로 표현하며, HTML과 항상 동일하지 않다. 예를 들어 자바스크립트로 DOM을 조작하여 수정하여도 HTML이 바뀌는 것이 아니다. - DOM 간단 조작 1. Create : createElement으로 원하는 tag를 생성할 수 있고 할당도 가능 ex) document.createElement('div'); 2. Append : 요소에 append or appendChild ex) document.body.append(넣을 요소); 3. Read : q.. JavaScript : Set() Set은 중복되지 않는 유일한 값들의 집합이다. - 특징 1. 동일한 값을 중복하여 포함할 수 없다. 2. 수학적 집합을 구현하기위한 자료구조이며, set을 통해 교집합, 합집합, 차집합, 여집합 등을 구현할 수 있다. 3. 요소 순서에 의미가 없다. 4. 인덱스로 요소에 접근할 수 없다. -> 그래서 Array로 변환해서 확인 (스프레드 문법 이용 ex. const arr = [...Set]) - 문법 1. 생성 : let setName = new Set(); 2. 개수 확인 : setName.size; 3. 요소 추가 : setName.add(추가할 요소); 4. 요소 삭제 : setName.delete(삭제할 요소); 5. 모든 요소 삭제 : setName.clear(); 6. 존재 여부 확인 : .. 이전 1 2 3 4 5 6 7 ··· 10 다음
