
RTK(Redux Tool-kit) Query 정의 API 호출 및 Redux store 내에서 상태 관리를 하는 데이터를 가져오고 캐싱하는 라이브러리. => API endpoint를 쉽게 정의하고 관리할 수 있도록 유틸리티 세트와 사용자 정의 가능한 API를 제공. 기반 Redux toolkit의 createAsyncThunk와 createSlice 기반으로 구축 . 기능 자동 로딩 상태 관리 자동 오류 처리 및 재시도 보류 중인 요청 자동 취소 자동 캐싱 및 네트워크 인식 무효화 데이터를 항상 최신 상태로 유지하기 위한 자동 백그라운드 리페칭 자동 요청 중복 제거 기능으로 동일한 요청이 여러 번 전송되지 않도록 방지 사용 방법 리액트 프로젝트 시작 시 CRA, 또는 vite 초기 설정 이후 초기 설정..
React란 Meta (전 Facebook) 에서 2011년에 만든 프론트엔드 라이브러리 (프레임워크) React의 작동원리 SPA(Single Page Application) => 하나의 HTML 파일만 보여주고 내부 요소는 모두 자바 스크립트를 활용해 변경 시키는 것. 기존의 방식은 페이지가 변경될때 마다 무조건 새롭게 HTML, CSS파일을 표시해야했던 예전 방식보다 훨씬 효율적 Virtual Dom with Diff Algorithm DOM은 HTML 문서를 통해서 생성된 자바스크립트를 통해서 조작 가능한 요소들. (쉽게 말하면 크롬 개발자도구에서 보이는 그 요소들을 생각하면 된다.) React는 가상으로 HTML 요소들을 생성하고 (Virtual DOM), 현재 화면에 표시되는 HTML 요소들(..
속성 선택자(Attribute) [Attr] : 속성을 포함한 요소 선택 속성 선택자를 사용할 때 사용하는 특수 기호는 [](대괄호 square brackets) 밑에 예제로 이해보자 disable이라는 속성에 red 색상을 부여 HTML 삽입 미리보기할 수 없는 소스 [type]에 orange 부여 HTML 삽입 미리보기할 수 없는 소스 [type ="value"] : 속성의 해당 값이 있는 요소 선택 HTML 삽입 미리보기할 수 없는 소스 TIL keypoint html 속성 및 속성값을 찾아서 css로 변경가능하다 느낀 점 페이지 컨셉에 맞는 부분을 해당 부분으로 스타일 할수 있다는 걸 알았다 오늘의 학습 만족도 ⭐⭐⭐⭐⭐
https://github.com/seon-mikim/localstorage GitHub - seon-mikim/localstorage: Learn local storage Learn local storage. Contribute to seon-mikim/localstorage development by creating an account on GitHub. github.com 강의시간에 팀과제를 위해서 필요하다고 하기도 했고 궁금해서 해당 부분에 대해서 공부했다. 사실 스토리지를 이용한 투두리스트를 만들어볼려하는데 쉽지가 않았다 대체 왜안될까? 추가적인 공부가 필요해보여서 조금 더 탐구하기로 하였다. https://velog.io/@yodiodine/LocalStorage로-투두-리스트-만들기 Loca..
가상요소 선택자(Pseudo-Elements) 가상요소 선택자: 가상의 요소를 선택하는 선택자 콜론 하나도 적용되나 웹표준을 지키기위해서는 :: 콜론 두개를 사용하는 걸 권장 ::before ::before : 선택자 요소의 내부앞에 내용(content)을 삽입 삽입되는 내용은 inline요소 content 속성은 꼭 작성해야한다(글자 안넣고 가상요소 어떤걸 만들때 content:"";) 코드펜 예제 HTML 삽입 미리보기할 수 없는 소스 ::after ::after: 선택자 요소 내부 뒤에 내용(content)을 삽입 삽입되는 내용은 inline요소 content 속성은 꼭 작성해야한다(글자 안넣고 가상요소 어떤걸 만들때 content:"";) 코드펜 예제 HTML 삽입 미리보기할 수 없는 소스 TIL..
:first-child :first-child : 선택자가 형제 요소 중 첫째라면 선택 코드펜 예시 HTML 삽입 미리보기할 수 없는 소스 :last-child :last-child : 선택자가 형제 요소 중 막내라면 선택 코드펜 예시 HTML 삽입 미리보기할 수 없는 소스 :nth-child(n) :nth-child(n) : 선택자가 형제 요소중 (n)째라면 선택 n은 0 부터 시작(Zero-Based Numbering) - 2n 이런 식으로 넣을 경우 2의 배수 번째만(2처럼 다른 숫자도 올 수 있다) - 2n+1 홀수 번째만 - n+2 1번째 자식 제외 하고 나머지 선택 코드펜 예시 HTML 삽입 미리보기할 수 없는 소스 :not() :not(selector): 선택자가 아니니 요소 선택 코드펜 예..
가상클래스 선택자 (Pseudo-Classes) 가상클래스 선택자: 사용자가 어떠한 행동을 했을 때 요소가 동작하게 하는 선택자 가상 클래스 선택자 기호는 : (콜론) :hover :hover: 선택자 요소에 마우스 커서가 올라가 있는 동안 선택 코드펜 예제 HTML 삽입 미리보기할 수 없는 소스 :active :active : 선택자 요소에 마우스를 클릭하고 있는 동안 선택 코드펜 예제 HTML 삽입 미리보기할 수 없는 소스 :focus :focus : 선택 요소가 포커스 되면 선택 focus가 될 수 있는 요소는 html 대화형 콘텐츠에 해당(input, a, button, label, select) 아니더라도 적용되게 하는 속성 tabindex를 사용하면 focus 적용가능 (tabindex는 대화..
- Total
- Today
- Yesterday
- 메가바이트스쿨
- 개발자취업부트캠프
- JSX
- 내일배움카드
- Git
- vim 편집기
- shell command
- 개발자치업부트캠프
- MegabyteShool
- html
- til
- 컴포넌트
- 가상클래스
- javascript
- 스코프
- 패스트캠퍼스
- 그룹스터디
- 리액트
- 북스터디
- Root_Component
- 국비지원
- CSS
- 국비지원교육
- export
- MegabyteSchool
- git flow
- react
- GitHub
- 그룹스터디_북스터디
- component
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |