React를 공부하다보면, TypeScript라는 것으로 코딩할 수 있다고 알게된다. 그러면 이번시간에는 TypeScript가 무엇이며 왜 사용해야하는지에 대해서 알아보자. What is TypeScript? TypeScript는 JavaScript의 superset 언어로 JavaScript를 기반으로 하되 보다 확장된 프로그래밍 언어라는 뜻이다. 이는 아주 중요한 특징 중 하나로, TypeScript의 뿌리에는 여전히 JavaScript가 있다는 것을 의미한다. 그렇기에 JavaScript의 기본 문법들, 코드 작성법, 조건문, 반복문, 객체 사용법 등등 그대로 사용 가능할 것이다. 다만, 몇가지 기능이 추가된 것이다. 또한, TypeScript는 React와 달리 JavaScript의 library..
What is module? 개발하는 어플리케이션의 크기가 커지면 파일을 여러 개로 분류해야하는 시점이 찾아온다. 이때 여러 개의 파일로 분리된 .js 파일을 모듈(module)이라고 부르는데. 대게 class 하나 혹은 특정한 목적으로 묶인 function들로 구성된 library들로 구성된다. JavaScript가 만들어지지 얼마되지 않았을 때에는 그 script의 크기도 작고 단순한 기능들이 주를 이루었기에 module 관련된 문법이 없이도 크게 성장할 수 있었다. 그러나 그 크기가 커지고 복잡해지면서 특별한 library들을 묶어서 보관하여 언제든지 꺼내쓸 수 있는 module이 필요해졌고 ES6(2015) 이후로 표준 등재되어 사용되게 된다. Html로 파일을 읽어올 때 module 방식으로 작..
JavaScript를 배우거나 사용하는 사람이라면 ES6 표준, ES5, ES2020등의 단어를 들어본 적이 있을 것이다. 하지만 arrow function, let, const, spread operator등이 ES6에서 추가됐다는 것은 알아도 ES가 무엇인지 찾아보지 않아 그간 모르고 지내왔다. 이번 시간에는 ECMAScript가 무엇인지 정리해보겠다. What is ECMAScript? ECMAScript는 말 그대로 ECMA라는 기관이 만든 Script 언어이며, ECMA-262 표준를 따르고 있다. ECMA-262는 Ecma International[정보와 통신 시스템을 위한 국제적 표준화 기구]에서 정의한 ECMAScript의 언어 규격이다. JavaScript를 개발한 Netscape가 더 ..
React의 정의 React 공식 홈페이지에 따르면, 사용자의 인터페이스를 짓는 JavaScript library라고 설명한다. 문자 그대로 해석은 가능하지만 무언가 직접적으로 와닫지 않는다. 그렇기에 React를 사용하는 사이트들이 어떻게 동작하는가에 대해서 살펴볼 필요성이 있다. 많이들 알고있고 사용하고 있는 OTT(over-the-top) 서비스 중 하나인 Netflix를 예로 들어보자면, 처음 로그인을 하고 특정 버튼들을 눌러서 여러 상호작용이 가능하다. 이 때에 무언가를 로딩하느라 기다릴 필요도 없다. 또한, 화면 전환도 빠르며 브라우저에서 여는 웹 사이트가 모바일 앱과 같은 동작을 한다고 여길 정도로 매우 부르럽게 작동한다. 이는 기존의 웹 사이트 동작 방식과 사뭇 다른 느낌으로 다가온다. 전..
웹 서버라는 것은 무엇일까? 웹 서버는 간단히 말하자면 클라이언트(사용자)가 웹 브라우저를 통해 요청(request)한 페이지를 서버에서 반환(response)하는 것이다. 이 과정을 거치지 않는 환경은 로컬(인터넷이 연결되지 않아도 되는 환경)에서 돌아가는 환경이며, 흔히 html파일을 실행했을 때의 결과이다. 하지만 웹 서버를 사용하게 될 경우 그러한 파일을 불러온다 정도로만 이해하면 좋을 것 같다. 개발환경 설정 본격적인 프로젝트에 들어가기 앞서 우선 개발환경을 정리해둘 필요성이 있다. vscode라는 code editor를 설치해준다. vscode에서 가독성을 높이고 작업의 능률을 높이기 위해서 extensions을 설치해준다.(sftp, html snippets) SFTP : 서버의 소스를 vs..