[React-Native/typescript]프로젝트 처음 시작 시 App.tsx 에서 생길 수 있는 오류(window, vscode)

리액트 네이티브 앱을 만들었을 때, App.tsx에 이런 오류가 생길 수 있습니다.

 

오류 01. Delete `CR` eslint(prettier/prettier) 

 

단순한 개행문자 오류일 가능성이 높습니다. Mac에서 작업했던 파일을 윈도우에서 열었을 때 자주 생기는 문제입니다.

두 운영체제의 개행문자 default 스타일이 달라서 생깁니다.

이 오류가 생기면 파일 내부 모든 코드의 끝부분에 에러가 뜹니다.

 

해결책(vscode)

vscode 하단을 보면 이렇게 CRLF 라고 적힌 버튼이 하나 있습니다. 이걸 누른 뒤에 아래 사진처럼 LF로 고치면 됩니다.

 

오류 02. Typescript - Cannot use JSX unless the '--jsx' flag is provided.ts(17004)

 

tsconfig.json 파일에 jsx 플래그를 추가해주면 해결됩니다.

 

해결책

tsconfig.json 파일을 열어서 "compilerOptions" 안에 "jsx": "preserve", 를 추가해주시면 됩니다.

사진과 파일의 내용이 다를 수 있는데, 상관없이 compilerOptions 안에 추가하면 됨!

타입스크립트니까 뒤의 반점까지 꼭 넣어주셔야 오류가 없을거에요. 

프리티어 쓰시는 분들은 컨트롤S 누르시면 자동으로 생길 수도 있으니 너무 걱정마시길

 

오류 03. 이 모듈은 'export ='를 사용하여 선언되었으며 'esModuleInterop' 플래그를 사용하는 경우에만 기본 가져오기와 함께 사용할 수 있습니다.

 

import React, {PureComponent} from 'react'; 부분 (심지어 바로 첫줄이라 코딩의 의지를 꺾음) 에서 오류가 뜹니다.

 

React는 다른 모듈처럼 export default React; 로 되어있지 않고 export = React로 코딩되어있습니다.

default 가 아닌 모듈을  import 하는 중이라 import * as 로 가져와야 하는데, 그렇게 하지 않았기 때문에 타입스크립트는 오류를 띄웁니다.

 

해결책

기존 코드

import React, {PureComponent} from 'react';

수정 코드

import * as React from "react";
import {type PropsWithChildren} from "react";

이렇게 기존 코드를 두 줄로 나눠서 import 해주시면 됩니다.