한달간 강의를 듣고 매일 간단히 배운 내용에 대해 정리를 해보겠습니다.
자세한 내용들은 추후 스터디를 하고 다시 추가 정리하도록 하겠습니다.🙌
🤔 우아한 테크러닝? React&TypeScript?
우연히 페이스북에서 배달의 민족에서 우아한 테크러닝을 한다는 소식을 보고 신청하게 되었습니다. 신청 마감일자 하루전날에 알아서 등록했습니다.(lucky! 😀)
오프라인으로 진행하면 30명으로 할 예정이라고 하셨는데 코로나 때문에 온라인으로 진행하게 되었다고 합니다. 그래서 약 400-500명정도라고 하십니다. ㅎㅎ
이 강의는 전체적으로는 react, typescript, redux등등 간략하게 포인트를 짚어주고 넘거가는 강의라고 합니다.
또한 아키텍쳐나 각 도구(react, typescript, redux 등 )마다 흐름을 이해하여 목표에 맞춰 잘 적용할 수 있도록 도와주는 역할을 한다고 합니다.
🚀 강의 커리큐럼
- typescript
https://www.typescriptlang.org/play- react
https://codesandbox.io/index2- redux
https://redux.js.org/- mobx
https://mobx.js.org/README.html- redux-saga
https://redux-saga.js.org/- UI Framework -> blueprint
https://blueprintjs.com/- testing library
https://testing-library.com/
typescript
ts는 컴파일 타임에 작동하는 것들도 있고 런타임까지 작동하는것들도 있습니다.
이 내용에 대해서는 추후 강의를 들으면 알 수 있을 것 같습니다. 🙌
🤔 사용목적??
컴파일타임에 어느정도 실수를 잡을 수 있어 사전에 실수방지?로 매우 좋다고 합니다.
ts를 몇번 사용하면서 느낀점은 타입에 대해 체크를 하다보니 놓쳤던 부분들이 생각보다 많이 잡혔습니다. 👍👍
🤔 명시적 > 암시적
let age:number = 27;
let age = 27;위의 코드를 보면 첫번째 코드는 타입에 대해 명시를 했고 두번째 코드는 타입명시를 하지 않았습니다.
ts는 타입에 대해 추론이 가능하여 age가 number라고 인지합니다.
명시적? 암시적? 어떤게 더 좋을까요???
요즘 추세는 명시적으로 나타내는게 좋다고 합니다. 실제로 다른 개발자가 봤을 때도 명시적으로 되어 있으면 코드 내용에 대해서 좀더 쉽게 이해할 수 있습니다.
function test() {
arguments
}
function test(...arg) {
}위의 코드는 가변인자를 통해 어떤 작업을 하는 함수인데 첫번째 코드만 보고서는 한눈에 무엇을 하는지 알 수 없지만 es6에 추가된 spread를 사용한 ...arg는 명시적으로 매개변수에 넣기때문에 어떤 작업을 할건지 좀더 명시적으로 알 수 있습니다.
🤔 ts 타입 종류
ts 사이트에 들어가 학습을 하면 될것 같습니다.
🤔 type alias vs interface
항상 이 두가지에 대해 차이점이 궁금했는데 이 부분도 실제 개발을 하면서 사용을 해보면서 알 수 있다고 합니다.
react
jsx문법은 react가 제공해주는 문법이며 babel을 통해 트랜스파일해줍니다.
아래 부분은 그 동안 제가 몰랐던 부분들입니다.
우리가 다 알고 있는 jsx문법을 사용한 리액트 코드입니다.
import React from 'react';
function test() {
return (
<div>hi</div>
)
}babel을 통해 트랜스파일한 내용입니다.
react.default.createElement라는 함수를 보면 이 부분이 실제로 태그를 만들어 주는 부분인 것을 알 수 있습니다.
react 라이브러리내에 있는 함수(createElement)를 사용해서 태그를 만들고 있습니다.
개발을 하면서 리액트를 사용하는 부분에는 항상 import React from 'react'; 이 구문을 위에 선언해야했는데 사실 왜 하는지 잘 몰랐습니다.
이번 계기로 그 이유에 대해서 알 수 있어 너무 좋습니다!😀
(사실 개발하면서 조금만 더 주의깊게 보면 알 수 있는 내용인데 많이 놓치고 있는것 같습니다.ㅠ)
위의 코드에 props로 id값을 넘겨보겠습니다.
import React from 'react';
function test() {
return (
<div id='root'>hi</div>
)
}babel 트랜스파일한 내용을 보면 넘긴 id값이 object형태로 되어 있습니다.
여기서 볼 수 있듯이 우리가 넘긴 값들이 props라는 값을 통해서 object로 사용할 수 있는 것 입니다.
언젠가 리액트로 개발을 하다보면 가끔 react.createElement를 사용하는게 편할 때도 있다고 합니다. 그 때를 위해 기억해두도록 합니다.!! 👍👍
redux
여러 컴포넌트간에 공유되어야하는 전역상태에 대해 관리를 하는 도구입니다.
flux 아키텍쳐가 쓰기가 불편하여 나온 라이브러리라고 합니다.
그러나 redux도 사용하기 어렵다고 하여 나온 라이브러리는 mobx라고 합니다.
저는 둘다 간단히 사용을 해보았는데 확실히 러닝커브가 높은건 redux인 것 같습니다. 😳
daily1 느낀점
이전에 원티드에서 주최한 컨퍼런스에서 김민태님을 처음 뵙고서 우와! 너무 멋지고 저런 분 밑에서 한번 배워보고 싶다는 생각이 마구마구 들었습니다. 👍👍
온라인이지만 김민태님의 강의를 들을 수 있어 너무 행복하고 주옥같은 말씀들 다 기록할 예정입니다.😀
첫날은 전체적은 강의흐름이나 커리큘럼에 대해 설명하는 날이라 크게 스터디할 부분은 없던 것 같습니다. 앞으로 강의 따라가려면 열심히 스터디 해야할것 같습니다.👍 화이팅!!
