분류 전체보기 (118) 썸네일형 리스트형 생명 주기(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가 .. TIL - 6 - Keyword React / localStorage / useRef - Quiz 정리 Q1. React의 개념과 장점, 그리고 컴포넌트란 무엇인가요? A1. 페이스북에서 만든 UI를 만들기 위한 JavaScript 기반 라이브러리입니다. 장점으로는 사용자와의 인터렉션을 UI로 쉽게 구현이 가능하고, 대규모의 복잡한 동적 웹페이지를 관리할 수 있습니다. Virtual DOM을 사용하여 불필요한 렌더링을 줄임으로써 성능을 향상 시킵니다. 또한, 컴포넌트별로 나눠서 개발하기 때문에 모듈화를 할 수 있고 유지 보수가 쉽습니다. SSR, CSR 모두 가능하고 라이브러리다보니 다른 프레임워크와 혼용도 가능합니다. 컴포넌트란 UI를 구성하는 개별 단위입니다. 페이지는 컴포넌트의 조합인 느낌으로 이해하면 좋습니다... 스코프(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.. TIL - 5 - Keyword react-dnd (react-beautiful-dnd) 기업 과제 중 Component를 Drag를 하여 순서를 바꾸는 UI를 구현하는 것이 있었는데, 직접 구현하려다가 결국 능력 부족으로 라이브러리를 이용하였다. - 오늘 하루 느낀 점 이번 기업 과제는 다행히 제시간에 제출하였고, 저번 과제랑 비교하면 기능 구현도 거의 다 했다. 1주차가 끝났다. 주마다 기업 과제를 2개씩 진행하다 보니 시간도 정말 빨리 가고 사실 정신도 없다. 그래도 혼자서 하는 것이 아니라서 좋다. 새로운 지식도 얻어가고 이야기하다 보면 insight를 얻어 갈 때도 있으니 그리고 라이브러리를 사용만 하는 것이 아닌 깊게 어떻게 구현했는지를 보는 것도 중요하다는 것은 알지만 실제로 하려 하니 정말 어렵다. 이번.. TIL - 4 - Keyword Git / Styled-Component / React / Canvas / CSS 애니메이션 Git 명령어를 기억하기 위해 포스팅을 하였다. 필요한 명령어를 마주칠 때마다 수정할 예정이다. 이번 기업 과제 CSS는 tailwind에서 벗어나 styled-component를 사용하였다. CSS를 컴포넌트화 하여 재사용도 가능하고 일단 기존에 알던 CSS 문법과 유사하여 금방 적응하였다. React 자식 컴포넌트에 OnChange 설정해서 부모 컴포넌트에서 자식 컴포넌트 인자를 받아오는 신박한 경험을 하였다. 저것 때문에 시간을 얼마나 쓴 건지.. Canvas Tag와 CSS 애니메이션 관련 글을 읽었다. Canvas로 그림만 그리는 줄 알았는데 게임 개발까지 할 줄은 생각도 못 했다. -.. 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 [저장소 이.. 이전 1 ··· 5 6 7 8 9 10 11 ··· 15 다음
