분류 전체보기
Redux-Saga
전체 소스코드는 여기에서 확인해볼 수 있습니다. 개요 Redux-Saga의 Github에서는 아래와 같이 설명하고 있다. Redux-Saga는, 애플리케이션 부작용(예: 데이터 가져오기와 같은 비동기 작업 및 브라우저 캐시 액세스와 같은 순수하지 않은 작업)을 보다 쉽게 관리하고, 보다 효율적으로 실행하고, 테스트하기 쉽고, 오류를 더 잘 처리하도록 만드는 것을 목표로 하는 라이브러리입니다. 그래서 언제 쓰나? 사실 Redux-Saga는 도입한다고 드라마틱하게 뭔가가 바뀌지는 않는다. 다만, 사용자 환경에 있어서 조금 더 좋은 환경을 제공해줄 뿐이지. 그 더 좋은 환경은 뭘까? API 호출 등의 비동기 작업에서 사용자 부주의로 인한 세부적 컨트롤이 가능하다. Async / Await으로 처리하는 것이..
Redux 적용하기 (Typescript)
전체 소스코드는 여기에서 확인해볼 수 있습니다. 프로젝트 생성 $ npx create-react-app redux-test --template typescript # Typescript는 옵션입니다. Redux 설치 $ npm i redux react-redux // package.json { "name": "redux-test", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "@types/jest": "^27.5.2", "@types/nod..
[React.tsx] 'never'형식에 '...'속성이 없습니다 (Typescript Never Type)
생각해보면 당연한 내용이였는데 왜 안되는지 한참을 고민했기에, 기억을 강화하기 위해 작성한다. never는 일반적으로 함수의 리턴 타입으로 사용됩니다. 함수의 리턴 타입으로 never가 사용될 경우, 항상 오류를 출력하거나 리턴 값을 절대로 내보내지 않음을 의미합니다. 이는 무한 루프(loop)에 빠지는 것과 같습니다. -- Typescript 가이드북 나는 React + Redux를 적용하는 도중 문제를 직면했다. 타입 지정 export interface UserSearchList { characterId: string; characterName: string; jobGrowId: string; jobGrowName: string; jobId: string; jobName: string; level: ..
Hooks
Hooks는 React v16.8 이후 새로 도입된 기능으로, 기존의 함수 컴포넌트에서 할 수 없었던 기능을 가능하게 해 준다. useState 함수 컴포넌트에서 가변적인 상태를 지닐 수 있게 도와준다. 다음은 버튼을 클릭해 Count를 올리고 내리는 컴포넌트다. import { useState } from 'react'; const Test = () => { const [count, setCount] = useState(0); // 비구조화 할당 return ( Count value = {count} setCount(count + 1)}> +1 setCount(count - 1)}> -1 ); }; export default Test; useReducer useState보다 더 다양한 컴포넌트 상황에 ..
[미해결][React.tsx & Electron] Google OAuth Login 에러 문제
인터넷에 있는 예제를 보고 따라하고 있는데, 에러가 발생했다. import GoogleLogin from "react-google-login"; const clientId: string = process.env.REACT_APP_GOOGLE_OAUTH_CLIENT_KEY ?? ""; export default function GoogleButton(params: { onGoogleLogin: Function }) { const onSuccess = async (response: any) => { const { googleId, profileObj: { email, name }, } = response; await params.onGoogleLogin({ socialId: googleId, socialTy..
Symbol
Symbol은 몇 번은 들어보았지만, 사용할 기회도 없고 생소한 타입이기에, 기억하기 위해 작성한다. Symbol Type? Symbol 타입이란, 객체의 프로퍼티 키를 고유하게 설정함으로서 프로퍼티 키의 충돌을 방지하기 위해 사용한다. 얼핏 보면 무슨 소린가 싶지만, 결국 객체 내에서 유일한 식별자를 만들고 싶을 때 사용한다는 뜻이다. const voidSymbol = Symbol(); // 변경 불가능한 원시값 const mySymbol = Symbol('conative'); console.log(voidSymbol);// Symbol() console.log(mySymbol);// Symbol(conative) console.log(typeof mySymbol);// symbol Symbol은 생성..
추론 가능한 타입을 사용하기
Type Script의 Type Checker는 타입 추론이라는 기능을 가지고 있어서, 사용자가 직접 타입을 입력하지 않아도 알아서 타입을 체크한다. // 이렇게 쓰지 말자 let letNum1: number = 11; const constNum1: number = 33; // 직접 타입 작성을 하지 않아도, 알아서 추론해준다. let letNum2 = 11;// number type const constNum2 = 33;// Union type(33) 심지어 복잡한 객체 구조까지 추론이 가능하다. // 아래 두 코드는 동일하게 타입이 추론된다. // 너무 안타깝다 const person1: { name: string; born: { when: Date; where: string; }, age: numb..
타입 선언과 타입 단언
타입스크립트를 처음 시작할 때 타입 단언방식은 사용하지 말고, 타입 선언 방식만 사용하라고 들었는데 왜 그래야 하는지 궁금해 찾아보고, 정리했다. 타입 지정 방식 타입 지정에는 두 가지 방법이 있다. 설 명 타입 단언 선택된 값을 해당 타입으로 간주한다. 타입 선언 선택된 값이 선언된 타입임을 명시한다. interface Person { name: string; age: number; gender: boolean; } // 타입 단언 const user1 = { name: 'Conative', age: 25, gender: true } as Person // 타입 선언 const user2: Person = { name: 'Contia', age: 27, gender: false } 아래 간단한 예시를 ..
라이프사이클 메서드란?
모든 리액트 컴포넌트에는 라이프 사이클이 존재하는데, 컴포넌트의 수명은 페이지에 렌더링되기 전 준비 과정부터 시작하여 페이지에서 사라질 때 끝난다. 기본적으로 클래스형 컴포넌트만 사용할 수 있으며 함수형 컴포넌트에서 사용하기 위해서는 Hooks를 사용해야 한다. 접두사로 알아보는 라이프사이클? Will 접두사가 붙은 메서드는, 어떤 작업을 작동하기 전에 실행되는 메서드이며 Did 접두사가 붙은 메서드는, 어떤 작업을 작동한 후에 실행되는 메서드다. 메서드들은 크게 세 가지 카테고리 로 나뉜다. Mount DOM이 생성되고 웹 브라우저상에 나타나는 것 메서드명 설 명 constructor 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 getDerivedStateFromProps props에 있..
