반응형

TSError: ⨯ Unable to compile TypeScript:test.ts(2,1): error TS1208: 'test.ts' cannot be compiled under '--isolatedModules' because it is considered a global script file. Add an import, export, or an empty 'export {}' statement to make it a module.

에러내용 TSError: ⨯ Unable to compile TypeScript: test.ts(2,1): error TS1208: 'test.ts' cannot be compiled under '--isolatedModules' because it is considered a global script file. Add an import, export, or an empty 'export {}' statement to make it a module. 해결방법 tsconfig.ts 설정파일에서 false 로 바꿔주면된다. "isolatedModules": false,

  • format_list_bulleted 프론트엔드/TS
  • · 2023. 4. 6.
  • textsms

리마인드 ContextAPI

1. Context API 란? 전역적으로 사용해야되는 데이터를 관리하는 기능 context API 는 context 에서 무언가 변경이 일어날때 context 를 사용하는 컴포넌트가 어떤것이있는지 관련이있는지를 알아내서 바꾸는게 아닌 useContext 를 사용하는 모든 컴포넌트가 재 랜더링되게된다. 그렇기 때문에 최적화 측면에서 많은 반복이 있는 state 들을 관리하기 적합하지않다. 그런경우는 보통 전역적인 state 를 관리하고 최적화까지 이뤄지는 redux 를 사용하는것이 낫다. 그래서 주로 인증상태나 테마 같은 경우 사용된다. ( 고반복적인 관리가 필요없는것들 ) 2. 사용방법 root/index.js import React from "react"; import ReactDOM from "re..

  • format_list_bulleted 프론트엔드/React
  • · 2023. 2. 9.
  • textsms

NextJS- 페이지렌더링

페이지 렌더링 일반 리액트는 사전렌더링이 되지않아 SEO 에 적합하지못한다. 이같은경우 NextJS 에서 제공하는 페이지 렌더링 방법이 2가지가 있다. 이 방법은 코드실행부분이 다르다는것에 집중해서 학습해보자. Static Generation Static Generation 은 프로젝트를 빌드하게됬을때 사전렌더링이 되게된다. 수시로 데이터가 업데이트되야할때 는 추가적인 작업이 필요하지만 그렇지 않은경우 빌드할때만 해당내용들을 사전렌더링을 하게된다. getStaticProps 을 사용한다. 코드를 보며 살펴보자 import React from "react"; import MeetupList from "../components/meetups/MeetupList"; export const DUMMY_DATA ..

  • format_list_bulleted 프론트엔드/NextJS
  • · 2023. 2. 7.
  • textsms
NextJS- 파일기반 라우팅

NextJS- 파일기반 라우팅

NextJS 의 파일기반 라우팅 을 알아보자NextJS 의 파일기반 라우팅은 pages 라는 디렉토리에 파일이름으로 생성이된다.기본적인 사용법파일명, 폴더명이 해당 라우트명으로 지정되게된다.index 의 의미pages 안에 index.js 가 있는데 index 파일명은 해당 루트를 나타낸다.즉 pages 안에 있는 Index.js 는 http://localhost:3000 로 접근했을때 나타나는 페이지이다.중첩라우팅중첩라우팅 또한 디렉토리를 생성하여 구현할수있고 디렉토리명이 하위 라우트명이 되게 된다.여기서 news 디렉토리안에 index.js 가 또 있는데 이는 http://localhost:3000/news 로 진입했을때 페이지를 나타내게된다.이런식으로 중첩라우팅을 쉽게 구현할수있다.동적라우팅next..

  • format_list_bulleted 프론트엔드/NextJS
  • · 2023. 2. 6.
  • textsms

[TIL] 01-16 리액트 상태관리

리액트의 상태 관리 useState, useReducer 등으로 상태를 관리하게된다. 여기서 이 상태관리와 리액트간에 state를 처리하는 과정을 이해해보자 state 상태 업데이트 상태를 업데이트 하기위해서 useState 를 사용한다면 set~ 이름의 useState 를 사용해서 업데이트 할것이다. 그런데 업데이트 바로 직후에 state 값이 반영될것같지만 그렇지않다. 즉각적으로 바뀌지않고 상태 업데이트 예약을 하게된다. 이같은 이유는 리액트는 잠재적으로 우선순위에 따라 처리를 하기때문이다. 사용자가 입력할수있는 공간이 있다면 사용자 입력을 응답하는것이 화면에 문자를 변경하는것보다 더 우선이되야되겠죠 이러한 이유 때문에 상태 변경에대한 업데이트를 지연시키게된다. ( 하지만 너무빨라서 거의 사람에 눈으..

  • format_list_bulleted 프론트엔드/React
  • · 2023. 1. 16.
  • textsms

[35] 리액트 React.memo

React.memo ? 컴포넌트는 기본적으로 props, state, comtext 이 변경되면 리렌더링이된다. 다만 부모 컴포넌트에서 변경되면 자식컴포넌트또한 리렌더링되게되는데 만약에 자식컴포넌트는 변함이없는데 부모컴포넌트 때문에 자식까지 불필요하게 리렌더링된다면? 이것은 자원낭비이다. 이를 막아주는 훅으로 React.memo 의 인자로 들어가는 컴포넌트들의 props 들을 확인한다. 입력되는 모든 props 의 신규값을 확인한뒤 기존의 props 값과 비교하여 리액트에 전달한다. 값이 바뀐경우만 컴포넌트를 재실행 한다. 이렇게 성능 최적화를 하게된다. 이때드는 의문점, 그럼 모든 컴포넌트에 다 적용하면 최적화가 되지않을까? 이말은 틀렸다. 결국에 해당 컴폰너트 들의 props들을 비교하기위해서 드는 ..

  • format_list_bulleted 프론트엔드/React
  • · 2022. 12. 21.
  • textsms
반응형