분류 전체보기 (1092) 썸네일형 리스트형 WIL(22.07.31) 내가 배운것 Nomad Coders - React JS 마스터클래스 수강 팀 개발을 위한 Git, GitHub 시작하기 React 공식 문서 읽기 차주에 진행할 것 프로그래머스 문제 풀이 Nomad Coders - React JS 마스터클래스 완강 Effective TypeScript 팀 개발을 위한 Git, GitHub 시작하기 React 공식 문서 읽기 앞으로 진행할 것 React 벨로퍼트와 함께하는 모던 리액트 Hook Redux TypeScript OPP Design Pattern Test 시각적 회귀 Refactoring(마틴 파울로) 2판 읽기 외출난이도 리팩터링 Effect Hook 사용하기(2) 1. Clean-up Effects vs. non-clean-up Effects side effect를 실행 하고 나서 후처리가 필요한 경우가 있음 Clean-up이 필요한 경우 외부 데이터를 구독하는 경우 addEventListener를 지정한 경우 why? 메모리 누수 방지를 위해 Clean-up이 필요하지 않은 경우 API 호출 DOM 수동 조작 로깅 effect에서 함수를 반환하는 이유 effect를 위한 추가적인 정리 메커니즘 effect의 추가와 제거 로직을 가까이 묶을 수 있음 React가 effect를 정리(Clean-up)하는 시점 컴포넌트가 마운트 해제되는 때에 정리(Clean-up) 실행 Clean-up Effects 예시 event listener를 Clean-up Class Com.. Effect Hook 사용하기(1) 1. useEffect의 역할 함수 컴포넌트에서 side effect를 수행 side effect 데이터 가져오기(API 호출) 구독 설정하기 수동으로 React 컴포넌트 DOM을 수정 정리(Clean-up)가 필요한 것, 필요하지 않은 것 두 종류가 있음 useEffect는 class 생명주기의 componentDidMount + componentDidUpdate + componentWillUnmoun를 합친 것으로 보아도 됨 React Component가 렌더링되기 전에는 side effect를 실행하지 않음 why? 이 시점은 이른 시기로서 React가 DOM을 업데이트하고 난 이후에 실행해야 함 2. useEffect가 하는 일 React에게 컴포넌트가 렌더링된 이후에 어떤 일을 수행해야하는 지를.. React Hook Form(2) 본 내용은 Nomad Coders - React JS 마스터클래스 강의를 토대로 작성하였습니다. 1. watch 등록한 input의 변화를 감지하고 해당 값을 반환할 수 있음 첫 번째 파라미터는 register로 등록한 input name 2. handleSubmit 입력한 input data들의 유효성 검사가 성공하면 form data를 받음 첫번째 인자 valid 함수 form 데이터가 유효할 때만 호출되는 함수 두번째 인자 form 데이터가 유효하지 않을 때 호출되는 함수 예시 // form datas의 interface를 전달받게 되므로 타입 지정 const onValid = (data: IOrderForm) => { // submit 되기 전의 data validation을 정의 if (data.. 브라우저 호환성 1. 슬라이더 이미지가...! 2021년 12월 어느날, 서비스 중인 회사 웹 페이지의 슬라이더의 UI가 깨지는 이슈가 인입되었다. 진행중인 프로모션 이미지를 보여주는 슬라이더였는데, 슬라이더를 구성할 모든 이미지가 쭉 나열되어버리는 것이었다. 2. 상황 재현 해당 이슈의 상황 재현은 다행히도 어렵지 않았다. Safari에서만 재현이 되었고 Chrome에서는 정상적으로 슬라이더가 정상적으로 보였다. 즉 브라우저 호환성 이슈였다. 3. 원인 파악 각 브라우저에서 지원하는 CSS Property는 차이가 있다. 그러므로 슬라이더에 적용된 Property 중 Chrome에서는 지원하지만 Safari에서는 지원하지 않는 것을 찾아내야 했다. 의심되는 Property는 overflow였다. 보여지지 않아야할 요소.. React Hook Form(1) 본 내용은 Nomad Coders - React JS 마스터클래스 강의를 토대로 작성하였습니다. 1. React Hook Form? React에서 Form을 간단하게 다룰 수 있게 하는 라이브러리 많은 input 요소를 효율적으로 관리할 수 있음 Validation 지원 2. useForm form을 사용하기 위한 함수들을 return하는 hook register: input을 등록 watch handleSubmit formState setError setValue 예시 TypeScript와 함께 사용할 때는 제네릭으로 form data의 interface를 전달해야 함 import React from "react"; import { useForm } from "react-hook-form"; // .. 이펙티브 타입스크립트(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, .. 이전 1 ··· 17 18 19 20 21 22 23 ··· 137 다음