일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 빡킹독
- React #Hook rules #Hook 규칙
- React #리액트 이벤트 주기 #리액트 이벤트
- 버블링 #갭쳐링 #이벤트 #JS
- React-Query
- html entities
- 코드스테이츠 #알고리즘 #그리디
- React #controlled component #비제어 컴포넌트 #제어 컴포넌트
- 백준 #직각삼각형
- 얕은 복사 #깊은 복사 #shallow copy #deep copy
- #useRef #언제 쓰는데?
- react
- react #useCallback #react Hook
- raect typescript #react #typescript #styled-component
- JWT #토큰 #refreshToken #accessToken #Token #token #localStorage #sessionStorage
- 플로이드 #c++
- interceptors
- 이친수
- 노마드 코더 #타입스크립트 #typescript #class
- React #effect hook #useEffect
- npm #not being able to find a file #npm install Error
- donwstream #upstream #origin
- react fragment
- DP #c++
- RateLimit
- 백준 #적록색약
- useState #Hooks
- axios
- rate limit
- 다익스트라 #파티 #백준
- Today
- Total
목록전체 글 (111)
꿈꾸는 개발자
Hook의 규칙(16.8 version에 추가된 기능) https://www.npmjs.com/package/eslint-plugin-react-hooks eslint-plugin-react-hooks ESLint rules for React Hooks. Latest version: 4.6.0, last published: 8 months ago. Start using eslint-plugin-react-hooks in your project by running `npm i eslint-plugin-react-hooks`. There are 7139 other projects in the npm registry using eslint-plugin-rea www.npmjs.com 위 링크는 Hook 규칙을..
보호되어 있는 글입니다.
보호되어 있는 글입니다.
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dRVsQy/btrXJfz0vRC/pAlAgPZK1ePOajCSDL1Bn0/img.gif)
useEffect란? React component가 렌더링 후 어떤 작업을 수행해야 할지를 명시할 때 useEffect을 사용한다. useEffect의 적용은 보통, 마운트(화면에 나타날 때), 언마운트(화면에서 사라질 때), 그리고 업데이트 될 때 사용된다 마운트: 외부 API 요청(REST API 등) props로 받은 값을 component local 상태로 결정 라이브러리 사용(D3, 등) setInterval을 통한 반복 작업 혹은 setTimeout을 통한 작업 예약 언마운트: (useEffect 내에서 함수 반환을 통해 구현할 수 있으며 이를 clean-up이라 한다!) clearInterval을 통한 setInterval, setTimeout 등록된 작업을 clear하기 라이브러리 인스턴스..
로이 필딩이 HTTP의 장점을 최대한 활용할 수 있는 아키텍처로서 REST(Representational State Transfer)를 소개함 → 웹이 HTTP의 장점을 최대로 살리고 있지 못 했음 → HTTP 프로토콜을 의도에 맞게 디자인하도록 유도함 REST의 기본 원칙을 성실히 지킨 서비스 디자인을 “RESTful”이라 표현함! REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처 REST API는 REST를 기반으로 서비스 API를 구현한 것 44.1. REST API의 구성 REST API는 자원, 행위, 표현 (3가지)로 구성됨 REST는 자체 표현 구조로 구성되어 REST API만으로 HTTP 요청의 내용을 이해할 수 있음 페이로드에 대한 추가적 정보: ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bQbd6p/btrXH8eTL9j/gS4rxZsy2kBjVMrh4FFKn1/img.png)
웹 어플리케이션의 클라이언트 사이드 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행됨 → 효율적인 자바스크립트 프로그래밍을 위해 브라우저 환경을 고려해야 함! 브라우저는 HTML, CSS, 자바스크립트로 작성된 텍스트 문서를 어떻게 파싱해서 브라우저에 렌더링할까? 💡 파싱: 구문 분석 💡 렌더링: HTML, CSS, 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것 브라우저의 렌더링 수행 과정 브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받음 브라우저의 렌더링 엔진은 서버로부터 응답 받은 HTML & CSS를 파싱하여 DOM과 CSSOM을 생성 → 이들을 결합하여 렌더 트리를 생성 CSSOM(CSS ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/YoMaf/btrXCn41x05/BkBnHvNWmmGfqVMmrDrkx1/img.png)
REST 성숙도 모델 - 0단계 0단계에서는 단순히 HTTP 프로토콜을 사용하기만 해도 됨 => but, REST API라 할 수 없음(restful 하지 않음?) REST 성숙도 모델 - 1단계 개별 리소스(Resource)와의 통신을 준수해야 함 => 웹에서 사용되는 모든 데이터나 자원(Resource)을 HTTP URI로 표현! => 모든 자원은 개별 리소스에 맞는 endpoint을 사용해야 함 => 요청 및 받는 자원에 대한 정보를 응답으로 전달해야 한다는 것이 1단계의 핵심! endpoint: 컴퓨터 네트워크에 연결 => 컴퓨터 네트워크와 정보를 교환하는 물리적 디바이스 (ex: 모바일, 서버 등등) ' https://www.microsoft.com/ko-kr/security/business/s..
Fragment는 DOM에 별도의 노드를 추가하지 않고, 여러 자식을 그룹화할 수 있다. class Table extends React.Component { render() { return ( ); } } 코드가 위와 같이 작성됐을 때 component는 무조건 만 반환해야 한다! class Columns extends React.Component { render() { return ( Hello World ); } } 코드가 위와 같이 작성됐을 경우 html은 유효하지 않을 것이다 => 태그가 끼어있기 때문에! Fragment은 위와 같은 상황에서 발생하는 문제를 해결해준다! 사용법: class Columns extends React.Component { render() { return ( Hello ..