programming study (889) 썸네일형 리스트형 이펙티브 타입스크립트(1) 본 내용은 댄 밴더캄, 『이펙티브 타입스크립트』, 장원호 옮김, 프로그래밍인사이트를 토대로 작성하였습니다. 1. 타입스크립트는 자바스크립트의 상위 집합 자바스크립트의 문법은 타입스크립트에 포함이 됨 타입스크립트만의 독자적인 문법이 있음(타입 체크 문법) 일부 자바스크립트만 타입 체크를 통과 호환성이 높아, 자바스크립트에서 타입스크립트의 마이그레이션에 엄청난 이점이 됨 단, 타입스크립트 설정을 느슨하게 시작해야 함(strct를 false) 타입스크립트 컴파일러는 자바스크립트를 포함하여 유용 타입추론으로 런타임 오류 방지 단, 타입스크립트가 모든 오류를 찾아낼 수는 없음 2. 타입스크립트 설정 타입스크립트 컴파일러에는 다양한 설정을 적용할 수 있음 nolmplicitAny, strictNullChecks는 .. Recoil(2) 본 내용은 Nomad Coders - React JS 마스터클래스 강의를 토대로 작성하였습니다. 1. useRecoilState value, modifier 함수를 반환 예시 import { atom, useRecoilState } from "recoil"; interface IOrderList { product: string; id: number; status: "배송전" | "배송중" | "배송완료"; } // atom 정의할 때 제네릭으로 인터페이스를 전달 const orderList = atom({ key: "orderList", default: [], }); function OrderListPage() { // value, modifier 함수를 반환 const [orderList, .. Recoil(1) 본 내용은 Nomad Coders - React JS 마스터클래스 강의를 토대로 작성하였습니다. 1. Recoil 이란? React JS에서 사용할 수 있는 state management library 여러 컴포넌트에서 전역적인 상태값에 접근 또는 변경할 수 있음 ex) 다크 모드, 로그인 상태(인가) 전역 상태관리 없이 전역적인 상태값을 사용하려면 props Drilling이 일어날 수 있음 props Drilling: 하위 컴포넌트로 상태를 넘기기 위해 props를 그 컴포넌트까지 여러번 넘겨야 하는 것 규모가 큰 앱일수록 하위 컴포넌트가 많아지고 이 컴포넌트들에 상태를 props 전달을 위한 코드를 반복적으로 써야 함 문제의 원인 파악에도 어려움 2. atom 상태의 일부를 나타냄 어떤 컴포넌트에서.. 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.. 이전 1 ··· 15 16 17 18 19 20 21 ··· 112 다음