본문 바로가기

분류 전체보기

 (1092)
Recoil(1) 본 내용은 Nomad Coders - React JS 마스터클래스 강의를 토대로 작성하였습니다. 1. Recoil 이란? React JS에서 사용할 수 있는 state management library 여러 컴포넌트에서 전역적인 상태값에 접근 또는 변경할 수 있음 ex) 다크 모드, 로그인 상태(인가) 전역 상태관리 없이 전역적인 상태값을 사용하려면 props Drilling이 일어날 수 있음 props Drilling: 하위 컴포넌트로 상태를 넘기기 위해 props를 그 컴포넌트까지 여러번 넘겨야 하는 것 규모가 큰 앱일수록 하위 컴포넌트가 많아지고 이 컴포넌트들에 상태를 props 전달을 위한 코드를 반복적으로 써야 함 문제의 원인 파악에도 어려움 2. atom 상태의 일부를 나타냄 어떤 컴포넌트에서..
WIL(22.07.24) 내가 배운것 Nomad Coders - React JS 마스터클래스 수강 팀 개발을 위한 Git, GitHub 시작하기 차주에 진행할 것 프로그래머스 문제 풀이 Nomad Coders - React JS 마스터클래스 완강 Effective TypeScript 팀 개발을 위한 Git, GitHub 시작하기 앞으로 진행할 것 React 벨로퍼트와 함께하는 모던 리액트 Hook Redux TypeScript OPP Design Pattern Test 시각적 회귀 Refactoring(마틴 파울로) 2판 읽기 외출난이도 리팩터링
React Query(2) - 사용 예시, Query Key, TypeScript 적용 본 내용은 Nomad Coders - React JS 마스터클래스 강의를 토대로 작성하였습니다. 1. React Query 사용 예시 useQuery Data를 Fetching할 때 사용하는 React Query Hook 파라미터는 대표적으로 세 가지 queryKey: query의 고유 식별자 Fetcher Function: API를 호출하여 Data를 받아오는 함수, Promise를 return해야 함 options: 쿼리에 대한 옵션. refetchInterval과 같은 것을 설정 가능 return하는 값은 대표적으로 두 가지 isLoading: 로딩 상태를 나타내는 Boolean data: Fetching에 성공해서 받아온 data useQuery를 사용하면, 기존에 API를 불러오고 상태를 최신화..
React Query(1) - 세팅 본 내용은 Nomad Coders - React JS 마스터클래스 강의를 토대로 작성하였습니다. 1. React Query란? Data Fetching을 위한 라이브러리 리액트에서 API 호출, 이에 따른 상태 및 로딩 관리를 간단하게 할 수 있게 도와줌 불러온 Data의 캐싱 지원 2. React Query 세팅 React Query 사용을 위해 Root에서 Provider로 React Query를 주입하기 전역적으로 주입이 되므로 하위 컴포넌트에서 React Query를 사용할 수 있음 import React from "react"; import ReactDOM from "react-dom"; import { QueryClient, QueryClientProvider } from "react-quer..
React Router Dom(1) 본 내용은 Nomad Coders - React JS 마스터클래스 강의를 토대로 작성하였습니다. 1. Router States React Router Dom에서 제공하는 Link 컴포넌트를 활용하여 현재 화면의 데이터를 다른 화면으로 보낼 수 있음 이미 가지고 있는 데이터를 활용하여 다음 페이지의 화면 렌더링 좋은 UX 제공 useLocation: Router State에 접근할 수 있는 Hook 예시 import { Link } from 'react-router-dom'; ... ​ function PreviousPage() { return ( 이전 페이지 다음 페이지 가기 ); }; import { useLocation } from "react-router-dom"; ​ function NextPag..
[프로그래머스] 문자열 내 마음대로 정렬하기 - JavaScript 풀이 본 게시물은 프로그래머스의 연습 문제 풀이입니다. 저작권은 (주) 그랩에게 있습니다 자바스크립트 코드(나의 풀이) function solution(strings, n) { return strings.sort((a, b) => { const comparedNumber = a.charCodeAt(n) - b.charCodeAt(n); if (comparedNumber === 0) { if (a > b) return 1; if (b > a) return -1; } else { return comparedNumber; } }); } Reference 프로그래머스
React & TypeScript 본 내용은 Nomad Coders - React JS 마스터클래스 강의를 토대로 작성하였습니다. 1. Prop Types vs. TypeScript Prop Types는 prop이 컴포넌트에 전달되었는지 런타임에서 확인(콘솔) TypeScript는 런타임 이전에 prop이 컴포넌트에 전달되었는지 확인 즉, TypeScript가 더 강력하게 오류를 방지할 수 있음 2. interface object shape를 TypeScript에게 설명 강력한 타입검사 지원 IDE 자동완성 지원 import styled from 'styled-components'; ​ const Container = styled.div` font-size: 34px; color: ${(props) => props.color}; bold..
Styled Components(4) 본 내용은 Nomad Coders - React JS 마스터클래스 강의를 토대로 작성하였습니다. Themes & TypeScript styled-components 모듈에 theme에 대한 타입을 추가 자동완성 기능 일관적인 테마 정의 styled.d.ts 정의하기 d.ts 파일 : 선언 파일 styled-components의 Definitely Typed 에서 비어있는 DefaultTheme 인터페이스를 정의하기 import 'styled-components'; ​ // styled Components 테마 정의 확장 declare module 'styled-components' { export interface DefaultTheme { backgorundColor: string; textColor:..

티스토리툴바