본문 바로가기

Web Study124

타입스크립트 필수 문법 정리 인터페이스 interface readonly 읽기전용 키워드 ? 선택적 프로퍼티/메서드 키워드 열거형 enum 리터럴 타입, | 를 사용 Any 어느 타입이든 가능하게 설정 유니언 타입 | 를 사용하여 여러 타입들을 동시에 지정 타입 검사 typeof 커스텀 타입 만들기 type 매개변수의 기본값 지정 (= 기본값) 접근 제한자 private public protected 클래스의 constructor 클래스로부터 객체를 만들 때 호출되어 객체의 초기화 담당 private로 정의된 프로퍼티를 다루기 위한 Getter/Setter get 프로퍼티() { return } set 프로퍼티(value) { } 타입스크립트와 HTML 자바스크립트 -> document.querySelector() 로 DOM 에 접.. 2023. 4. 25.
React 와 API axios GET : 데이터 조회 POST : 데이터 등록 PUT : 데이터 수정 DELETE : 데이터 제거 axios 와 위의 요청 메서드들을 사용하여 API 요청을 해줄 수 있다. import axios from 'axios'; axios.get(APIurl); axios.post(APIurl, 등록하고자하는정보); axios.put(APIurl); axios.delete(APIurl); useState 로 요청 상태를 관리하고 -> useEffect 를 사용하여 컴포넌트가 렌더링 되는 시점에 요청하게 작업 요청에 대한 상태를 관리할 때 3가지 상태 관리가 필요 1. 요청의 결과 2. 로딩 상태 3. 에러 useEffect 자체는 async 를 사용할 수 없으므로 async 로 api를 읽어올 새로.. 2023. 4. 24.
슬랙 클론 코딩 - 2 프론트 입장에서 로그인이 된 것의 여부를 알려면? 이때 로그인 정보를 state에 저장하게되면 한가지 컴포넌트에서만 로그인 여부를 알 수 있게 되므로 여러 컴포넌트에서 로그인된 데이터를 사용해줘야 하므로 리덕스로 관리해줄 필요성이 생긴다. 다만 리덕스를 사용하지 않고, Context API SWR 를 사용하여 전역적으로 상태 관리를 할 수 있다. --- 리액트로 비동기 통신을 다루기 위해 redux-saga, useSWR, react-query 등이 있는데.. 리덕스의 경우 하나의 액션을 작성하는데 많은 부가적 코드가 필요하므로 SWR 설정하기 주로 GET 요청을 저장하기 위해 사용 (POST 도 가능은 함) 다만 로그인은 POST 요청이므로 POST 이후에 GET 요청을 또 보내줄 필요가 있음 npm .. 2023. 4. 23.
useSWR 정리 슬랙 클론 코딩을 진행하다가 아직 개념이 잘 이해가 되지 않아서 ... 데이터 fetch 를 위한 훅 SWR (Stale While Revalidate) 캐시를 재검증하는 동안 기존에 캐시된 데이터를 사용하게 하는 기술 캐시된 데이터를 활용할 수 있게 하여 데이터를 계속 호출하는데 시간을 쓰지 않고 캐시된 데이터를 이용하여 효율적으로 동작한다. 그리고 전역 상태관리에도 유용 react-query 라이브러리도 비슷한 기능을 수행한다고 함 axios는 필요할 때마다 api를 호출해야 데이터가 갱신되는데 반해, SWR은 포커싱을 다른 곳으로 옮겼다가 돌아오더라도 자동으로 재검증을 통하여 갱신을 해준다는 장점이 있다고 한다. 그래서 설정에 따라 원하는 순간과 주기로 재검증 하는 것도 가능하다고 함 useSWR은.. 2023. 4. 23.

티스토리툴바