스파르타코딩클럽 내일배움캠프 56일차

오늘 일과 간단 요약

1. 내일배움캠프 TypeScript 강의 듣기
2. TypeScript, React로 투두리스트 만들기 (따라해보기)
3. 깃허브 Repository 정리
4. 프로그래머스 level 1 1문제

 

 

 

 

 

 

 

TypeScript 시작

약 이주간의 앱개발 이후 다시 웹개발로 돌아왔다. 돌아왔다는 표현도 좀 머쓱하긴 하지만....ㅋㅋㅋㅋ

오늘부터는 TypeScript 공부 시작이고 이제 4일간의 공부 이후에는 다시 프로젝트 시작이다.

공부할 시간이 너무 적지 않나 싶지만, 이번 프로젝트에서 typescript가 필수는 아니라고 하니까 괜찮은 건가...?

어제 친구를 만났는데 친구 말로는 요즘 typescript까지는 알아야 한다고 해서 좀 두렵긴 하다.

매번 공부하면 새로운 공부할 게 또 나오고 그러다보면 예전 걸 다시 복습할 시간도 없는 이런 애매한 상황....?

사실 시간을 더 써서 공부해야 맞는 건데 내가 게으른거지 뭐....ㅠ

 

아무튼 오늘부터 시작이긴 했지만 주말에 튜터님의 조언을 듣고 미리 예방주사(?)를 맞았기 때문에(?)

나름대로 익숙한 단어들이 눈에 띄기는 했다. 그래봤자 10분짜리랑 10~12분 영상 길이의 강의 8개를 본게 다지만..?

 

이번에는 이진수 튜터님이 강의를 진행해주셨는데, 라이브 강의는 아니고 제공된 강의를 들었다.

사실 처음 배우는 거라서 실시간보다는 여러번 돌려볼 수 있는 강의가 더 낫긴 하다.

아무튼 오늘 오전과 오후에는 계속 강의를 듣는 걸로 시간을 다 보냈다.

 

노션에 나름 정리도 하면서 했는데 이걸 블로그 글로 옮기진 못했네...

주말에 들었던 거랑 합쳐셔 정리하고 싶은데, 아직 제대로 이해했는지 잘 모르겠어서 내일 복습하면서 해봐야지.

 

확실히 C랑 비슷한 부분이 많다. 똑같다는 건 아니고...

 

let age: number = 30;
let isAdult: boolean = true;
let a: number[] = [1, 2, 3];
let a2: Array<number> = [1, 2, 3];

let week1: string[] = ["mon", "tue", "wed"];
let week2: Array<string> = ["mon", "tue", "wed"];

이런 식으로 변수 type을 지정하는 게 비슷하다는 뜻이다.

약간 처음 보는 형식이어서 어제에 이어 아직도 낯가리는 중이다. 빨리 익숙해져야 할텐데...내일은 더 열심히 해야지.

 

 

 

 

 

TypeScript, React로 투두리스트 만들기

react도 react native도 처음 공부할 때 투두리스트를 만들었었기 때문에 이번에도 투두리스트 만들기...ㅋㅋㅋ

사실 타입스크립트 문법 이런거 잘 모르지만 그냥 구글링해서 다른 사람이 만든 코드를 그대로 따라쳐봤다.

 

아무래도 투두리스트가 맨 처음 배울 때 가장 이해가 잘 되는 건 맞는 것 같다.

우선, 리액트 프로젝트 생성할 때랑 비슷하긴 하다.

 

$ npx create-react-app todolist --template=typescript

 

리액트 프로젝트 처음 생성할 때 CRA를 썼던 것처럼 동일하지만 template이 typescript라는 점만 다르다.

위 명렁어대로 프로젝트를 생성하고 나면 이전과 달리 App.tsx, Index.tsx 파일로 초기 프로젝트가 세팅된다.

 

튜터님한테 질문하러 갔다가 알게 된 사실인데,

타입스크립트를 이용할 때는 jsx 문법이 사용되는 파일은 무조건 tsx 파일로 생성해야 한다는 점이다.

자바스크립트는 .js로 만들어도 jsx 문법을 사용할 수 있었는데 타입스크립트는 그럴 수가 없다고 한다.

그래서 초기 세팅이 전부 .tsx 확장자로 파일이 만들어진 것...!

이건 몰랐는데, 다른 거 질문하러 갔다가 알게 되었다.

 

플러스로 리액트로 프로젝트를 생성한 것이니 리액트 프로젝트 처럼 yarn start 명렁어를 터미널에 입력하면 브라우저에서 타입스크립트가 자바스크립트로 자동으로 변환되어 실행된다고 한다.

 

그래서 나도 그렇게 투두리스트를 따라 쳐봤다.

 

 

타입스크립트로 투두리스트를 만들면서 가장 다른 점은 interface를 이용한다는 점이다.

interface InputTextProps {
  onChange(e: React.ChangeEvent<HTMLInputElement>): void;
  onKeyDown(e: React.KeyboardEvent<HTMLInputElement>): void;
  inputText: string;
}

const InputText = ({ onChange, onKeyDown, inputText }: InputTextProps) => {
  return (
    <>
      <input
        type="text"
        className="inputText"
        placeholder="내용을 입력한 후 엔터"
        onChange={(e) => onChange(e)}
        onKeyDown={(e) => onKeyDown(e)}
        value={inputText}
      />
    </>
  );
};

export default InputText;

위의 코드는 input 창에 관련된 코드인데, 전부는 아니고 일부를 가져왔다.

interface를 사용해서 type을 지정해주고 그걸 InputText 함수에 받아오면서 작동하는 형식이다.

아직 코드 전체를 이해한 건 아니지만 확실히 자바스크립트랑은 좀 다른 듯 하다.

 

폴더 구조를 보면 tsconfig.json 도 자동으로 생성되어 있다.

여기 보는 것처럼 모든 파일이 다 .tsx 로 되어있다. 다른 분들의 코드를 그대로 따라친 거라서 내가 한 게 아니긴 하다.

 

실행하면 보이는 화면

 

위에 링크한 분의 코드를 그대로 가져다가 따라 친거기 때문에 내일 다시 강의를 듣고, 혼자 만들어볼 예정이다.

예전에 리액트로 투두리스트를 만들 때처럼 만들되 typescript를 이용한다고 생각하면 되려나...?

사실 아직까지 완벽하게 감이 잡힌 건 아니고, typescript 핸드북이나 유데미 강의를 들으면서 보충해야지.

 

오늘 투두리스트를 따라친 목적은 단순히 어떤 식으로 코드를 쓰는지를 보고 싶어서였기 때문에...

일단 그 목적은 달성한 듯 하다.

 

 

 

 

 

깃허브 레파지토리 정리

react native를 배우면서 private으로 repository를 많이 만들었었는데 레파지토리가 많아지는 게 별로 안 좋아보이기도 하고(내기준임) 하나로 묶어서 정리하고 싶어서 예전에 했던 걸 다시 고대로 해봤다. 결과는 성공.

 

https://daydream-sy.tistory.com/145

[Github] 여러 Repository 하나로 합치기

 

이 글인데, 코딩 처음 배울때였나 깃허브 마구잡이로 사용해서 레파지토리가 너무 많아졌었다.

그걸 정리하고 싶어서 이글저글 보다가 정리해둔 건데 벨로그에 있던 글을 수정해서 다시 정리했다.

 

그래도 한 번 해봤다고 정리한 글 보면서 그대로 따라했더니 순조롭게 하나로 합쳐졌다.

내일은 react 투두리스트 폴더 전체를 정리해야겠다. 비슷한 게 너무 많아서...ㅋㅋㅋㅋㅋㅋㅋ

그래도 덕분에 오랜만에 터미널에서 하나로 합치는 걸 해봐서 새삼스러웠다. 복습한 셈 쳐야겠다.

 

 

 

 

 

프로그래머스 level 1 1문제

오늘은 색다르게(?) level 1에서 1문제를 풀었다. 물론 정답률 높은 순으로...ㅋㅋㅋㅋㅋ

level 0을 다 풀고 가려고 했는데 오늘 한번 시도해봤는데 시간은 좀 걸렸지만 풀긴 풀었으므로...

다른 사람들 풀이 보면 다른 사람들 풀이가 더 멋져보이긴(?) 하지만 그래도 풀었따는 것에 의의를 두며...

알고리즘 공부 관련해서도 정리를 딱 해야 하는데 타입스크립트 하느라 내일로 넘겨버렸다.

내일은 꼭 이것도 고민해봐야지. 까먹지 말자...

 

 

 

 

 

 

 

짧은 일기

javascript - react 넘어갈 때는 이렇게 낯설지 않았던 것 같은데 아무래도 어렵다는 말을 많이 들어서 괜히 겁먹은 거겠지..?

우선 하루는 이렇게 지나갔고 남은 3일간은 미리 구매했던 유데미 강의도 보고, 직접 투두리스트 같은 것도 만들어보고

하면서 익숙해지는 시간을 가져야겠다.

오전에 했던 발제에서 이전 프로젝트를 리팩토링하는 게 도움이 많이 될 거라고 해서 이전에 했던 react 팀프로젝트 팀원들끼리 그걸 타입스크립트로 리팩토링 할 원대한 계획(!)을 세웠다.

아직은 타입스크립트 자체에 익숙하지 않지만 하다보면 익숙해지겠지 뭐...

그냥 개인 공부 시간이 주어졌으니 그에 맞게 열심히 공부해야겠다. 별다른 계획 없고 그냥 열심히....ㅋㅋㅋ

그러고보니 타입스크립트 한다고 오늘은 알고리즘 생각을 못했다. 위에도 적혀있지만 알고리즘 관련해서도 고민이 있었는데 처음 배우는 타입스크립트에 관심을 다 쏟아버렸다.

 

내일은 타입스크립트와 한발자국 가까워지는 시간이 되었으면 좋겠다(ㅋㅋㅋㅋㅋ)