전체 글 (48) 썸네일형 리스트형 TypeScript TypeScript rest 파라미터 & destructuringrest 파라미터 : 파라미터 부분에 ...변수명을 붙이면 된다. TypeScript Literal types, 함수& methods에 타입 지정, typescript로 HTML 변경 및 조작, class 키워드(JS 문법), class 타입 지정, interface TypeScript Literal typesLiteral types : 해당 변수에 지정한 값의 타입만 들어오게(더 엄격) 한다방법 : :'kim' = kim만 들어오게 한다 ( |(union type)를 사용하여 설정 가능 )* 함수에도 사용 가능 literal types의 문제점 : 해당 값을 가져오는게 아니라, 해당 값의 타입을 가져온다해결방법 : 가져오는 값 뒤에 as const를 붙여준다 = literal type 지정을 알아서 해준다(속성들에 모두 readonly 적용)var 자료 = { name : "kim"} as constfunction 내함수(a :'kim'){}내함수(자료.name); TypeScript 함수, methods에.. TypeScript 설치 셋팅, 타입 지정, Narrowing & Assertion, type alias & readonly TypeScript 설치 셋팅이미 있는 React프로젝트에 설치 방법 : npm install --save typescript @types/node @types/react @types/react-dom @types/jest React 프로젝트를 새로 만들어 설치 방법 :npx create-react-app my-app --template typescript 그냥 vscode에서 typescript 실행 방법 : npm install -g typescripttsconfig.json파일(ts -> js컴파일시 옵션 설정 가능) 생성 후{"compilerOptions":{"target": "es5","module": "commonjs",}} 그 후 ts파일을 js로 인식하게 하려면 terminal창에 tsc .. React 성능 개선 (개발자 도구 & lazy import, memo & useMemo, useTransition & useDeferredValue) React 개발자 도구 & lazy import 개발자 도구https://chromewebstore.google.com/ - react delveloper tools 검색 - 다운로드 * react로 만들어진 페이지만 확인 가능F12 - Components = Element보다 좀더 편하게 확인 가능 F12 - Profiler = 성능저하되는 컴포넌트 범인 찾기 lazy importSingle Page Application 특징 : js파일 하나에 모든 코드를 다 쑤셔 넣는다. (사이즈가 크다)따라서, 해당 페이지를 로딩할 때 필요하지 않는 import부분이 있으면, 그 부분은 lazy import()로 묶어준다 로딩 중일 때, 흰색 화면이 뜨기 때문에 그것을 방지하기 위해 Suspense를 import.. React if문 작성 패턴, localStorage, react-query, PWA(앱 실행), async React if문 작성 패턴1. 컴포넌트 안에서 쓰는 if/else2. JSX안에서 쓰는 삼항연산자 3. && 연산자로 if 역할 대신하기4. switch / case 조건문5. object/array 자료형 응용 React localStorageLocalStorage : 브라우저에서 제공하는 데이터 저장소 (키, 밸류 형식)* 브라우저를 청소하면 삭제됨 * 새로고침하면 state가 초기값으로 돌아간다따라서, localStorage에 저장한다(반영구적 저장가능) localStorage 확인법 : F12 - application - Local StoragelocalStorage 데이터 저장법 : localStorage.setItem('이름', '값')localSto.. React Context API, Redux React Context APIcontext = state 보관함context 가져오는 법 : let 변수명 = createContext() (createContext는 import해줘야 한다)state공유를 원하는 것을 감싸준다 = value{} 안에 보내고 싶은 state명을 쓴다 보내고 싶은 state를 export해준다 받고싶은 파일에서 import 해준다 해당 파일에서 보관함을 해체(state들이 남는다) * 위와 같이 받아오면 useContext(변수명)을 통해 해당 파일의 어느 위치에서든 사용 가능 React Redux (Redux toolkit 설치)Redux = 보관함Redux 설치 : npm install @reduxjs/toolkit r.. React Styled-component, Lifecycle & useEffect, ajax, 동적 UI, transition) React Styled-component * Styled-component를 사용하면 css파일이 없어도 된다Styled-component 설치 : npm install styled-componentsimport styled from 'styled-components' 사용법 : let 변수명 = styled.button `내용` = 버튼을 만든것이고, 백틱으로 내용 설정끌어와서 쓰려면 으로 사용 장점 : 다른 js파일에 관섭을 하지 않는다. 페이지 로딩 시간 단축 해당하는것도 props를 이용해서 특정 부분만 변경 가능 단점 : js파일이 복잡해짐. React Lifecycle & useEffectLifecycle : 컴포넌트의 주기(장착, 업데이트, .. React Bootstrap, 이미지 및 public폴더 사용, import & export, 라우터 React Bootstrap 설치Bootstrap 라이브러리 설치 : react bootstrap 검색 (https://react-bootstrap.netlify.app/) - Get Started - npm ~~ 복사- terminal창 붙여넣기 CSS 부분 복사 - App.js 상단에 붙여넣기 또는 이 부분 복사 - public/index.html - head태그 안쪽에 붙여넣기 React Bootstrap 사용https://react-bootstrap.netlify.app/ - GetStarted - (ctrl + k)로 검색창 열기 - 검색필요한 것(button) 검색 - 복사 - App.js 붙여넣기 * 가져온 컴포넌트는 import 해줘야 한다*.. 이전 1 2 3 4 ··· 6 다음
