
RTK(Redux Tool-kit) Query 정의 API 호출 및 Redux store 내에서 상태 관리를 하는 데이터를 가져오고 캐싱하는 라이브러리. => API endpoint를 쉽게 정의하고 관리할 수 있도록 유틸리티 세트와 사용자 정의 가능한 API를 제공. 기반 Redux toolkit의 createAsyncThunk와 createSlice 기반으로 구축 . 기능 자동 로딩 상태 관리 자동 오류 처리 및 재시도 보류 중인 요청 자동 취소 자동 캐싱 및 네트워크 인식 무효화 데이터를 항상 최신 상태로 유지하기 위한 자동 백그라운드 리페칭 자동 요청 중복 제거 기능으로 동일한 요청이 여러 번 전송되지 않도록 방지 사용 방법 리액트 프로젝트 시작 시 CRA, 또는 vite 초기 설정 이후 초기 설정..
Props - properties 의 줄임말로, (비구조할당)상위 컴포넌트에서 하위 컴포넌트로 값/변수를 전달하기 위해서 사용. - props 를 쓰는 것이 좋은 이유는, 하위 컴포넌트를 마치 백지수표처럼 쓸 수 있다 백지 수표처럼?? => 틀은 유지한 채로, 값만 우리가 원하는대로 바꿔서 여러 개의 변수를 사용한다. 즉, 백지 수표처럼 수표모양은 그대로인데 원하는 금액을 적어 해당 금액을 사용가능하다 State state를 설명하기 전에 import React from 'react' function First() { var test = 0; const countUp = () => { test = test+1; }; return ( {test} 카운트업! ) } export default First 이러..
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): 선택자가 아니니 요소 선택 코드펜 예..
- Total
- Today
- Yesterday
- 국비지원교육
- export
- MegabyteShool
- 패스트캠퍼스
- til
- 리액트
- 내일배움카드
- 북스터디
- component
- JSX
- javascript
- 그룹스터디
- MegabyteSchool
- Root_Component
- react
- CSS
- GitHub
- 컴포넌트
- 메가바이트스쿨
- 그룹스터디_북스터디
- shell command
- git flow
- vim 편집기
- Git
- 스코프
- 국비지원
- 개발자취업부트캠프
- 가상클래스
- html
- 개발자치업부트캠프
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |