회사에서 공부해왔던 프론트엔드와는 무관한 ACS 시뮬레이션 업무를 해오며,본의 아니게 코드를 놓은지 거의 3개월째이다.경각심을 느껴, 제로초의 web-game 강의로 다시 리액트 감을 좀 끌어올리는 겸공부한 내용을 정리하려한다. 툴체인에 대한 이해가 많이 부족하다고 생각하는데,툴체인패키지 매니저 (package manager)번들러 (bundler)컴파일러 (compiler)포멧터 (formatter)린터 (linter)테스트 러너 (test runner)미니마이저 (minimizer)서버 (server)그중 첫번째로, 번들러중 하나인 Webpack에 대해 정리해보려 한다.1. Webpack이란?현대의 웹사이트는 수많은 HTML, CSS, JavaScript, 이미지들이 모여 구성되는데, 이 때, 수많은..
프론트엔드 취업준비생으로서, 타입스크립트는 사실상 '필수'라고 여겨지는 것 같다. 그렇다면 타입스크립트가 어떤 것이며, 왜 배워야하는 것일까? (개인적으로, 필요성을 느껴야 공부가 더 잘 되는 타입이기도 해서 궁금하기도 했다.) TypeScript란? 2012년에 마이크로소프트의 개발자이자 C#의 창시자로도 알려진 아주 유명한 덴마크 출신의 개발자 Anders Hejlsberg(앤더스 하일스버그)이 만든 언어로, TypeScript 공식 사이트에서는 “TypeScript is JavaScript with syntax for types.”라고 설명한다. 즉, “TypeScript는 타입을 위한 구문이 있는 JavaScript”라는 의미이다. TypeScript는 기본적으로 JavaScript이다. 쉽게 말..
멋쟁이 사자처럼 프론트엔드 스쿨 어느덧 10주차에 이르렀다. 자바스크립트 프로젝트를 앞두고 마지막으로 비동기 v통신을 중심적으로 배우고 있는데, 그에 대한 정리를 해보고자 한다. 동기 통신 과 비동기 통신 Ajax를 다루기에 앞서, 비동기 통신이 왜 필요한 지에 대해 먼저 짚어보고자 한다. 기본적으로,웹에서는 요청과 응답이 순차적으로 이루어지는 방식(동기 통신 방식)을 이룬다. 동기 통신 방식 클라이언트가 서버에 데이터를 요청 => 서버는 해당 요청 처리 후 데이터를 응답 => 클라이언트는 서버의 응답을 받을 때까지 대기 즉, 요청과 응답이 완전히 끝날 때 까지 다음 동작을 실행하지 않고 대기한다. 이런 순서로 작동하는 동기 통신의 단점으로, 1. 응답 대기시간 증가: 서버에서 응답 시간이 오래 걸리는 ..
멋쟁이사자처럼 프론트엔드 스쿨의 7주차를 지나고 있는 시점이다. Javascript의 개념들을 배우고 있는데, 한 번에 이해가 도저히 되지 않던 개념이었던 것중 하나인 Class에 대해 정리해보고자 한다. Class 정의 자바스크립트에서 함수의 한 종류로, 객체를 생성하기 위한 템플릿으로 사용되며, 값으로 사용할 수 있는 일급 객체(다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체)이다. 역할 일종의 설계도로, 클래스를 정의함으로써 객체를 만들기 위해 필요한 속성과 메서드의 구조를 미리 정의할 수 있다. 클래스는 생성자(constructor)를 포함하고 있다. 클래스 내부에서 정의된 메서드는 해당 클래스로부터 생성된 모든 객체에서 공유된다. 특징 // 1. 무명의 리터럴로 생성하여, 런타임..
