● any 타입 어떤 타입이든 모두 가능한 타입이다. 근데, any타입을 활용하게 되면 타입스크립트의 기능들을 잘 활용할 수 없기 때문에 즉, 그냥 자바스크립트를 적는것과 다름이 없기 때문에 그닥 많이 활용하지 않은 타입이라고 한다. let daeun : any; let arr : any[]; ● union타입 function daeun( user : { name : string; age : number} ){ ~~~~~~ } 위와 같은 함수가 있다고 해보자, 매개변수는 객체를 받는데 매개변수 안에서 정해주니 가독성이 떨어져보이고, 또 타입정의가 자주 활용될 수 있기 때문에 union 타입으로 빼서 써줄 수 있다. type User = { name : string; age : number; } funct..
Javascript
● 튜플이란? 튜플이란, 자바스크립트에서는 일반 배열로 인식되지만 타입스크립트에서는 정해진 길이의 요소와 특수 배열을 입력해야지 오류가 뜨지 않는 것을 이야기한다. const person = { name : 'daeun', age : 19, hobbies : ['Sports', 'Cooking'], role : [2, 'front-developer'] } 만약에 위와 같은 객체가 있다고 했을 때, role에 있는 배열의 구조의 타입들을 명확하게 하고 싶을 땐 어떻게 해야할까? const person : { name : string; age : number; hobbies : string[]; role : [number, string]; } = { name : 'daeun', age : 19, hobbie..
● 로더 웹팩에서 로더는 모든 파일을 자바스크립트의 모듈 처럼 만들어줍니다. (이미지, CSS, 폰트.. 등) 웹팩(1)에서 실습했던 파일을 그대로 가지고 실습을 진행해 보겠읍니다. 폴더 최상단에 파일을 하나 만들어줍니다. my-webapck-loader.js module.exports = function myWebpackLoader(content){ console.log('myWebpackLoader가 작동함'); return content; } 로더는 함수로 만들어줍니다. 다시 confing파일로 돌아와서 webpack.config.js const path = require('path'); module.exports = { mode : 'development', entry : { main : './s..
웹팩 같은 경우는••• 이전에 한번 포스팅을 한적이 있었는데요, 웹팩에 대한 내용을 포스팅한거라기보다는 모듈에 대해서 포스팅한 적이 있었습니다. ESMAScript에서 표준으로 채택된 모듈방식은 import export 이고, node.js환경에서 쓰이는 모듈방식은 CommonJS방식이었죠. 그래서 require, module.export 방식이었습니다. [48장 모듈] ● 모듈의 일반적인 의미 모듈이란 무엇인가? 우리가 어떤 문제를 해결할 때, 막상 문제에 도전한다면 해결하기 어려울 것이다. 하지만 문제를 쪼개어 하나씩 해결한다면 조금 더 쉬울 것이다. ddaeunbb.tistory.com 기본적인 이런 사항만 일단 알아두고 웹팩에 대해 알아봅시다. ● Webpack 이란? 이전에 모듈방식이 지원되기 ..
● 서버 사이드 렌더링의 이해 CSR SSR 에 대해서 자꾸 많은 것을 보고,, 그게 먼지 개념은 항상 들었지만 이해하기가 너무 힘들었습니다. 이번기회에 실습으로 아예 SSR을 접하면서 그 차이를 직접 느껴보고 개념을 이해하려고 합니다. ❍ 웹의 역사(SPA 시대까지) 1990년대 중반 - 정적 웹 사이트들 1990년대 중반까지는 모두 정적 웹 사이트들(Static Sites)이었다. 이미 잘 만들어진 HTML 문서들이 만들어져 있고, 사용자가 브라우저에서 해당 사이트에 접속하면 서버에 이미 배포되어져 있는 HTML 문서를 받아와서 보여주는 방식입니다. 예를 들어 페이지 내에서 다른 링크를 클릭하면, 다시 서버에서 해당 페이지의 HTML 문서를 받아온 후 페이지 전체가 업데이트 되어야 한다. 사용성이 떨..
SSR 서버사이드렌더링 구현하려고 했더니 바벨을 마주 안할 수가 없네요..ㅎ ㅎ %^~ㄴㅇㄹ~@#$~!! 예상 외의 스터디가 되었습니다. 바벨 -> 웹팩 -> SSR 순으로 공부를 하면 좋을 것 같다는 생각이 드네요. 이전에 스터디에서 바벨에 대해서 듣기만 했는데, 역시 제 스스로의 것으로 만드는 건 그냥 발표를 듣는거랑 직접해보는 거랑은 차이가 있는 것 같습니다.. ● 바벨이란 무엇인가? 바벨은 브라우저에서 ES6이상의 문법들을 사용하기 위해서 이전 버전의 자바스크립트 코드로 변환해주는 도구입니다. (트랜스파일러) 브라우저마다 ES6의 문법의 호환성이 각각 달라서 크로스브라우징 이슈가 생겨나곤 했는데요, 이를 해결하기 위해 나타난 것이 바벨입니다. ● 트랜스파일러 VS 컴파일러 우리는 컴퓨터는 0과 1..
