내 아들은 효자인가 #3 - TypeScript로 변환하기

제목은 변환하기로 썼지만 사실상 다시 만들기...

 

 

본래 자바스크립트는 따로 타입을 지정하지 않는 동적 언어이다.

때문에 중간에 같은 변수에 다른 타입을 집어넣어도 따로 에러를 뱉어내지는 않는다.

 

이와 다르게 javascript에서 파생된 변수를 타입을 지정하여 정적으로 사용하는 typescript가 있다.

저 동적 언어의 특성 때문에 중간에 변수 타입이 바뀌면서 생기는 에러를 잡기 힘들어

변수를 정적으로 지정하는 타입스크립트가 나온 게 아닌가 싶다.

 

사실 이렇게 작은 거에서 굳이 타입스크립트로 바꿀 필요가 없긴 한데,

감을 잃지 않게 타입스크립트로 진행해보기로 한다!

 

 

타입스크립트로 바꾸는 방법 찾아보다가 알게 됐는데

npx create-react-app [이름] --template typescript

-- 나의 앱 이름은 myson-app이다.
npx create-react-app myson-app --template typescript

처음 리엑트를 시작할 때 이렇게 뒤에 명령어 몇 줄 더 적으면 타입스크립트 기반으로 앱이 만들어진다는 것이다...
(젠장 처음부터 찾아보고 만들걸)

 

 

하나하나 수동으로 바꿔줄까 고민했었는데, 

수동으로 바꿔줄 만큼 많이 진행하지 않기도 하고, 고칠 것도 별로 없어서 프로젝트를 다시 만들기로 했다.

(물론 많이 진행했어도 뜯어고칠게 한두 가지가 아니긴 했을 거다.)

 

일단 기존에 만들어놓은 폴더의 이름을 바꿔주고, 원래의 같은 app으로 위의 명령어를 적어준다.

 

app이 만들어졌으면 그 폴더로 이동해 실행해본다.

cd [이름]
npm start

다음 명령어로 실행했을 때 다음과 같은 화면이 실행된다면 맞게 만들어진 것이다.

 

뱅글뱅글

 

처음 딱 봤을 때 보이는 차이점은 확장자가 js에서 tsx로 바뀌었다.

또 tsconfig.json이라는 타입스크립트 설정 파일이 생성되었다.

 

package.json파일을 보니 타입스크립트에 관련된 패키지도 같이 설치된 걸 확인할 수 있다.

tsconfig.json에 들어가면 기본값으로 target에 es5가 들어가 있다.

es6부터는 문법이 꽤 많이 달라 지기 때문에 es6를 넣어주겠다.

자신이 원하는 브라우저에서 그 언어를 지원하는지 한번 찾아보고 변경하는 것이 좋다.(http://kangax.github.io/compat-table/es6/)

 

 

이제 마찬가지로 필요 없어 보이는 파일은 대충 정리해주고,

material-ui를 설치하고,

기존에 만들어놓은 소스코드를 옮겨준다.

마크업 위주로 만들어 놓은 것들이라서 딱히 수정할 것은 없었다.

 

 

App.tsx

import React from "react";
import "./App.css";
import {
  Grid,
  Container,
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  RadioGroup,
  Radio,
  TextField,
  FormControlLabel,
  InputAdornment,
  Button,
  Box,
} from "@mui/material";

function App() {
  return (
    <div className="App">
      <header>
        <h3>내 아들은 효자인가?</h3>
      </header>
      <Container maxWidth="sm">
        <Grid container spacing={3}>
          <Grid item xs={6}>
            <FormControl fullWidth>
              <InputLabel id="selectUnitLabel">유닛</InputLabel>
              <Select
                labelId="selectUnitLabel"
                id="selectUnit"
                label="Unit"
                onChange={() => {}}
              >
                <MenuItem value="all">all</MenuItem>
                <MenuItem value="유성대">유성대</MenuItem>
                <MenuItem value="발키리">발키리</MenuItem>
              </Select>
            </FormControl>
          </Grid>
          <Grid item xs={6}>
            <FormControl fullWidth>
              <InputLabel id="selectIdolLabel"> 아이돌 </InputLabel>
              <Select
                labelId="selectIdolLabel"
                id="selectIdol"
                label="Idol"
                onChange={() => {}}
              >
                <MenuItem value="all">all</MenuItem>
                <MenuItem value="모리사와 치아키">모리사와 치아키</MenuItem>
                <MenuItem value="신카이 카나타">신카이 카나타</MenuItem>
                <MenuItem value="나구모 테토라">나구모 테토라</MenuItem>
                <MenuItem value="센고쿠 시노부">센고쿠 시노부</MenuItem>
                <MenuItem value="타카미네 미도리">타카미네 미도리</MenuItem>
                <MenuItem value="이츠키 슈">이츠키 슈</MenuItem>
                <MenuItem value="카게히라 미카">카게히라 미카</MenuItem>
              </Select>
            </FormControl>
          </Grid>
          <Grid item xs={12}>
            <FormControl>
              <RadioGroup
                row
                aria-labelledby="demo-controlled-radio-buttons-group"
                name="controlled-radio-buttons-group"
                value={"ko"}
                onChange={(event) => {}}
              >
                <FormControlLabel
                  value="ko"
                  control={<Radio />}
                  label="한스타"
                />
                <FormControlLabel
                  value="jp"
                  control={<Radio />}
                  label="일스타"
                />
              </RadioGroup>
            </FormControl>
          </Grid>
          <Grid item xs={12}>
            <TextField
              label="사용 다이아"
              id="useDia"
              sx={{ m: 1, width: "25ch" }}
              InputProps={{
                endAdornment: (
                  <InputAdornment position="end">개</InputAdornment>
                ),
              }}
            />
          </Grid>
          <Grid item xs={12}>
            <TextField
              label="사용 스카우트 티켓"
              id="useTicket"
              sx={{ m: 1, width: "25ch" }}
              InputProps={{
                endAdornment: (
                  <InputAdornment position="end">개</InputAdornment>
                ),
              }}
            />
          </Grid>
          <Grid item xs={12}>
            <TextField
              label="뽑은 픽업 카드 수"
              id="pickCnt"
              sx={{ m: 1, width: "25ch" }}
              InputProps={{
                endAdornment: (
                  <InputAdornment position="end">개</InputAdornment>
                ),
              }}
            />
          </Grid>
          <Grid item xs={12}>
            <Button variant="outlined">확인</Button>
          </Grid>
          <Grid item xs={12}>
            <Box
              component="span"
              sx={{ p: 2, gap: 2, height: 300, border: "1px dashed grey" }}
            >
              당신의 (아이돌)은 (웬수) 입니다!
            </Box>
          </Grid>
        </Grid>
      </Container>
    </div>
  );
}

export default App;

 

 

 

어쩌다 보니

다시 제자리거허어얼음~~

 

 

 

이글 쓰면서 찾아본 것들... (기회가 된다면 정리해보기)

npm과 npx 차이

tsconfig.json 세부 설정

es5와 es6차이