JudithHopps JudithHopps

TypeScript type과 interface 차이 하나의 프로젝트에서 type과 interface 중 한가지 일관된 스타일을 확립하는 것이 좋다. interface type 재선언 O (선언적 확장) 재선언 X 객체만 가능 모든 타입 가능 computedValue 가능 ex) [ k in list ] : string interface의 경우 extends를 이용해서 타입을 확장한다. type의 경우 & 연산자를 이용해서 타입을 확장한다. type 집합 - & interface Person { name : string } interface Lifespan { birth : Date, death : Date, } type personSpan = Person & Lifespan // type의 경우 & 연..

What is TypeScript? JavaScript and More TypeScript adds additional syntax to JavaScript to support a tighter integration with your editor. Catch errors early in your editor. TypeScript는 JavaScript에 추가 구문을 추가하여 편집기와의 긴밀한 통합을 지원합니다 . 편집기에서 초기에 오류를 포착하십시오. A Result You Can Trust TypeScript code converts to JavaScript, which runs anywhere JavaScript runs: In a browser, on Node.js or Deno and in your..

What is TypeScript? JavaScript and More TypeScript adds additional syntax to JavaScript to support a tighter integration with your editor. Catch errors early in your editor. TypeScript는 JavaScript에 추가 구문을 추가하여 편집기와의 긴밀한 통합을 지원합니다 . 편집기에서 초기에 오류를 포착하십시오. A Result You Can Trust TypeScript code converts to JavaScript, which runs anywhere JavaScript runs: In a browser, on Node.js or Deno and in your..

리덕스 라이브러리란? 1. 상태를 체계적으로 관리할 수 있다. >> 프로젝트 규모가 클 때 적합하다. 2. 개발자 도구 지원해준다. 3. 미들웨어를 지원해준다. >> 비동기 작업이 용이하다. react-redux 사용하기 방법 1. 임시함수를 생성한다. import React from 'react'; import Counter from '../components/Counter'; import { connect } from 'react-redux'; import { increase, decrease } from '../modules/counter'; const CounterContainer = ({number,increase,decrease}) => { return ( ); }; const mapState..

immer 구조가 복잡한 객체도 매우 쉽고 짧은 코드를 사용하여 불변성을 유지하면서 업데이트해 줄 수 있다. immer 사용하지 않고 불변성 유지하기 import React,{useRef,useCallback,useState} from 'react'; const App = () => { const nextId = useRef(1); const [form,setForm] = useState({name: '',userName: ''}) const [data,setData] = useState({array:[], uselessValue:null}) const onChange = useCallback( e => { const {name,value} = e.target; setForm({ ...form, [nam..

npm install gh-page가 다운이 되지 않고 아래와 같이 에러창이 뜨기도 한다. 이럴 땐 -g 명령어를 추가로 적어준다. npm install -g gh-pages --save-dev 그러면 성공적으로 패키지를 다운받을 수 있다. 그 다음 과정은 아래 링크를 참고하길 바란다. https://velog.io/@nemo/github-page-deploy-%EB%B0%B0%ED%8F%AC [React] 깃허브 페이지에 리액트 프로젝트 배포하기 자, 이제 제작한 앱을 깃허브 페이지에 배포해보자.메인 디렉토리 URL : https://{본인아이디}.github.io/서브 디렉토리 URL : https://{본인아이디}.github.io/movie-app우리는 메인이 아닌 서브 디렉토리에 배 velog.io

프로젝트 마무리 파일 정리 1. 컴포넌트 폴더 생성 컴포넌트는 Component 폴더로, Scss는 Scss 폴더로 이동하기 2. App.js 수정 - bulk 데이터 수정 - useReducer => useState로 수정 import React , {useCallback, useRef, useState} from "react"; import TodoTemplate from "./Component/TodoTemplate"; import TodoInsert from "./Component/TodoInsert"; import TodoList from "./Component/TodoList"; const App = () => { const [todos,setTodos] = useState([ { id :1,..

리액트 투두리스트 보완 불변성의 중요성 불변성이란? 기존의 값을 수정하지 않으면서 새로운 값을 만들어 내는 것 TodoList 컴포넌트 최적화 하기 리스트 내부에서 사용하는 컴포넌트도 최적화 해야 하고, 리스트로 사용되는 컴포넌트 자체도 최적화해 주는 것이 좋다. react-virtualized를 사용한 렌더링 최적화 하기 리스트 컴포넌트에서 스크롤 되기 전에 보이지 않는 컴포넌트는 렌더링 하지 않고 크기만 차지하게 끔 할 수 있다. 스크롤 이벤트 발생 시, 스크롤 위치에서 보여 주어야 할 컴포넌트를 자연스럽게 렌더링 시킨다. 이 라이브러리를 사용하면 낭비되는 자원을 아주 쉽게 아낄 수 있다. 사용방법 1. 패키지 설치 npm install react-virtualized 2. UI 컴포넌트 px 알아보..