코딩애플

[코딩애플] 타입을 변수에 담자 : type alias

type alias 타입을 변수에 담을 수 있다. type alias는 영문 대문자로 시작하는 규칙이 있다. type Name = string | number; let 이름 :Name = 'kim'; type MyObject = { name? : string, age : number } let 철수 :MyObject = { name : 'kim', age : 50 } Object 변경 에러띄우기 type MyObject = { readonly name : string, } let 철수 :MyObject = { name : 'kim', } 철수.name = 'Park'; // 에러 const는 변수 재할당이 불가능하지만, object의 내부 속성은 변경할 수 있다. 타입스크립트에서는 이것에 에러를 띄울 수..

타입스크립트 숙제 Part 1 (1~4) : 함수 타입지정

이름을 파라미터로 입력하면 콘솔 출력 그리고 파라미터가 비어있을 시 비어있다고 알려주기 let doConsole = function(name? :string): void { if(typeof name === 'string'){ console.log(`안녕하세요 ${name}`); } else { console.log(`이름이 없습니다.`) } } doConsole('철수') 파라미터로 숫자 혹은 문자를 넣으면 자릿수 알려주기 let doConsole = function(numish? :string | number): number { if(typeof numish === 'string'){ return numish.length; } else if(typeof numish === 'number') { ret..

[코딩애플] 타입스크립트 타입 지정 방법

변수 타입 지정하기 일반 타입 지정 let 이름 :string = 'kim' //string, number, boolean, bigint, null, undefined,[], {} 여러가지 타입 지정 let 이름 :string | number = 'kim'; object 타입 지정 let 나이 :{ age : number } = { age : number } 한꺼번에 타입 지정하기 type MyObject = { [key :string] : number, } let 철수 :MyObject = { age : 50, weight : 100, } 어떤 속성이 들어갈지 모를 때 사용 가능하다. array 타입 지정 let 이름 :string[] = ['kim', 'park'] let 나이 :{ age : num..

React : memo로 재렌더링 막기 (memo, useMemo)

memo 부모컴포넌트가 재렌더링되면 자식컴포넌트도 항상 함께 재렌더링된다. 이 때 자식컴포넌트가 무겁다면 특정 버튼을 클릭할 때마다 모두 재렌더링 되어 로딩시간이 걸리는 등 문제가 생길 것이므로, memo로 자식컴포넌트가 특정 상황에서만 재렌더링되도록 작성해주면 좋다. 쓰기 전 주의사항 memo로 감싼 자식컴포넌트는 기존 props와 현재 props를 검사해 props가 변할 때만 재렌더링한다. 그러므로 props가 매우 길고 복잡하다면 오히려 memo를 쓰는 것이 손해일 수 있다. 전 function 컴포넌트(){}는 물론 당연히 이렇게도 표현이 가능하다. let Child = function(){ return 자식컴포넌트 } 후 memo를 import 해온 후 memo()로 function(){}을 ..

React : lazy로 로딩속도 향상시키기 (lazy, Suspense)

lazy 리액트로 만드는 Single Page Application는 html,js가 한 파일만 생성되기 때문에 무거워져 속도가 느리게 된다. 그럴 땐 파일을 쪼개면 되는데, lazy를 쓰면 된다. 전 import Detail from './Routes/Detail.js' import Cart from './Routes/Cart.js' 위 코드에서 Detail과 Cart js는 첫 페이지에서 불러올 필요가 없기 때문에 아래같은 문법으로 import하면 된다. 후 import { createContext, lazy, Suspense, useEffect, useState} from 'react'; // 여기서 lazy, Suspense const Detail = lazy( () => import('./Rou..

React : 개발자도구 크롬 확장프로그램 (React/Redux Developer Tools)

크롬 확장프로그램 스토어 https://chrome.google.com/webstore/ Chrome 웹 스토어 Chrome에 사용할 유용한 앱, 게임, 확장 프로그램 및 테마를 찾아보세요. chrome.google.com React Developer Tools 기존 개발자 도구에서 react 구조를 찍어보며 state, props 등을 확인할 수 있다. Profiler 탭에서는 성능확인도 할 수 있다. (녹화 버튼 → 페이지 조작 → 녹화 중지버튼) 오래 걸리는 경우는 대게 서버에서 ajax 요청결과가 늦게 도착해서 그렇다. Redux Developer Tools Redux store에 있던 state를 전부 확인 가능하며, dispatch 날릴 때마다 어떻게 바뀌었는지 로그를 남겨준다. 출처 : 코딩..