TypeScript 3

[TypeScript] keyof와 typeof란 ?

타입스크립트를 공부하던중 typeof와 keyof 라는 키워드가 자주 보였다. 비슷한듯 다른듯 헷갈려 확실히 정리하기 위해 쓰는 글! 1. keyof - 객체 형태 타입에서 따로 속성들만을 뽑아 유니온 타입으로 만들어 주는 연산자이다. interface Person { name: string; } interface Lifespan { birth:Date; death?:Date; } type k = keyof (Person | Lifespan); // type은 never // k 를 풀어보면 -> (keyof Person) & (keyof Lifespan) -> name & ( birth | death ) -> never - 여기서 ( keyof Lifespan )을 주목해서 보면 속성들만 뽑은 후 유니..

FE/TypeScript 2023.03.01

[TypeScript] 타입스크립트 너는 누구냣

타입스크립트는 프론트엔드 공부를 하며 자연스럽게 알게되었다. 실무에서 많이 사용되고 있고, 또 타입을 개발자가 지정해줄 수 있는 장점이 있어서 (물론 단점도 있긴 하겠지만) 코드가 개발자 의도에 맞게 돌아간다 정도만으로 알고 있었다. 지금까진 공식문서를 한바퀴 훑었고 , 이제는 본격적으로 공부하면서 중요한 부분들을 정리해보려 한다. 1. 타입스크립트와 자바스크립트의 관계 타입스크립트는 자바스크립트의 superset이다. superset 굉장히 오랜만에 들어보는 용어인데 ..^^ 즉 해석하자면 타입스크립트가 자바스크립트의 상위집합이란 뜻이다. 이 말은 .js 파일을 .ts로 바꾼다고 해도 달라지는 것은 없다라는 뜻이다. 따라서, 자바스크립트 코드를 타입스크립트로 마이그레이션 하는데에 큰 이점이 된다. 여기..

FE/TypeScript 2022.08.22

리액트를 사용해보고 느낀점과 Next.js vs Gatsby 알아보기

프론트엔드 개발자라는 꿈을 정하고 난 후, 최근에 제대로 된 첫번째 팀프로젝트를 완성하였다. 리액트와 Redux-toolkit, thunk를 사용하여 프로젝트를 만들었는데, 이 프로젝트를 통해 얻을 수 있는 점이 많았다. 1. React는 CSR 방식이기 때문에 초기 구동속도가 느리다. 2. 더해서 SEO에 좋지않다.. 이 문제점을 해결하고자, 프로젝트에서는 react-helmet-async라이브러리를 사용하여 페이지별로 meta태그를 설정해 주었고, 초기 구동속도를 개선하기 위하여 React.lazy()를 이용한 코드분할을 시도했었다. (하지만, 개인적으로 만든 Private,Public라우터와 꼬여서 (?) 실패하긴 했다. 이 부분은 틈틈히 생각해보는걸로....) 하지만 , 이러한 문제점을 해결하기위..

FE 2022.08.04