패스트캠퍼스 챌린지 최종 후기

패스트캠퍼스 챌린지 최종후기

 

 

- 강의를 듣게 된 이유

 

이번에 패스트캠퍼스에서 김민태의 프론트엔드 아카데미: 제 1강 JavaScript & TypeScriptEssential 강의를 들어봤다. 처음 TypeScript에 관심이 생긴건 JavaScript를 자바처럼 클래스 객체지향 형식으로 사용하는 것을보고 관심이 생겼다. ES6에도 class를 사용할 수 있지만 이것보다 TypeScript는 JavaScript에 타입도 지정하기 때문에 좀 더 기존에 알고있었던 자바와 가까운 느낌(?)이 들었기 때문에 관심있게 보다가 수강하게 되었다. 듣다보니 점점 TypeScript보다 JavaScript에 관심이 더 생겼다. TypeScript도 JavaScript의 슈퍼셋이기 때문에 결국엔 JavaScript를 잘 알아야 TypeScript도 잘 알수 있는것이다. 처음 강의를 보기 전과 후의 마음은 다르지만 결국엔 JavaScript나 TypeScript나 두가지 다 관심이 있기때문에 시작했다.

 

물론 지금까지도 전부 다 이해했다고 할 수는 없지만 강의를 들어보니 단순히 처음 시작할 때 알고 있었던 것보다 더 많은 것들을 알게되었다. (알면 알수록 더 어려운 듯한 느낌도 같이 오는...) 처음엔 JavaScript를 어느정도 사용할 줄 안다고 생각했고 (그냥 어느정도 자주 사용하는 DOM이나 웹 변경하는 기능만 아는 수준이었다) 거기에 추가하여 TypeScript를 좀 더 배우고 알게되면 좋겠다고 생각을 했는데 TypeScript 뿐만 아니라 JavaScript를 포함해서 여러가지를 더 알게 되었던거 같다.

 

 

- 강의를 듣고 알게된 점

 

강의 처음 소개할 때 우리는 웹앱을 만든다고 했다. 웹이면 웹이고 앱이면 앱인데 웹앱은 뭐지 ? 라는 생각을 했는데 웹을 모바일 앱처럼 (예를 들면 인스타그램 등) 화면의 동작이 부드러운 웹, 마치 동작이 앱처럼 동작하는 웹을 웹앱이라고 하는것같다. 그리고 이렇게 동작하는데 있어서 SPA를 구현해야 한다는데 내가 기존에 알고있었던 SPA는 React, Vue, Angular 등 JavaScript 라이브러리나 프레임워크를 사용해서 구현하는 것, 다시 말해서 위와같은 프레임워크를 사용하는 것이 SPA 그 자체인줄 알았다. 하지만 이런 라이브러리나 프레임워크도 JavaScript로 만들어진 것이기 때문에 그러한 기능을 사용하는데 좀 더 편하게 만들어 놓은것이고 그냥 바닐라 JavaScript를 사용해도 SPA를 구현할 수 있다는 것이다. 본 강의에서 구현하는것들은 SPA 방식으로 구현한다. 

 

이런 부분에 대해서 강의에 대해 좀 더 흥미가 생긴것 같다. 지금까지 내가 개발해 본 것들은 SSR 방식으로 페이지 하나당 하나의 html, 하나의 jsp를 생성해야했고 화면의 전환이나 어떤 기능의 동작이 발생했을 때, 화면을 새로 불러와야 했다. (물론 ajax를 사용해서 데이터를 받아오고 화면을 변경한 경우도 있기 때문에 꼭 그런 것만은 아니다) SSR 방식이던 CSR 방식이던 간에 어플리케이션에 맞고 어울리는 방식이 있을 것이다. 하지만 이 강의를 들으면서 CSR 방식을 가지고 SPA를 구현해 보는 것은 충분히 좋은 경험이 되었다.

 

또한 화면을 구현할 때, ES6의 class를 통해서 클래스를 통해 인스턴스를 만들어서 사용했다. JavaScript로 만들어 놓은 구조를 TypeScript로 후에 변경한다. 이 말은 처음 프로그래밍을 자바로 시작했던 나한테 관심을 생기게 만든 큰 이유이기도 했다. 클래스 객체지향 방식, 클래스 안에 필드와 메서드를 만들어서 여러개의 인스턴스를 통해 상태와 동작을 관리한다. 어플리케이션의 로직은 이러한 방식으로 관리하고 화면, UI 부분은 jsp의 <script> 태그 안에 제이쿼리의 ready 함수나 DOMContentLoaded 등을 사용해서 그 안에 각각 화면에 사용하는 부분만 만들어서 사용하는 경우가 허다했지만 JavaScript를 가지고 객체지향 형식으로 구조를 만들 수 있는 것은 앞서 말한대로 SPA를 구현할 수 있고 화면을 페이지 하나마다 재사용성 없는 복사 붙여넣기에서 좀 더 자유로워질 수 있다는 것에 큰 관심이 생긴것 같다.

 

 

- 강의를 듣고 난 후

 

그리고 강의에서 나온 내용들을 보면서 추가적으로 다른 것들에 대해 더 관심이 생기게 되었다. 예를 들어 아까 위에서 언급했듯이 React는 SPA를 구현하는 JavaScript 라이브러리이다. 강좌에서는 class를 통해서 SPA를 구현했고 React의 마찬가지로 class를 사용해서 개별적은 컴포넌트를 만들었다. 최근 버전의 React는 class 없이 function을 통해서 컴포넌트를 생성한다. 그 이유는 JavaScript의 class는 자바나 C++ 등과 같은 클래스 기반 객체지향언어와는 약간의 차이가 있기 때문이다. JavaScript는 함수형 프로그래밍이 가능하다. 이 말은, 강좌에서는 SPA를 class를 사용하여 객체지향으로 구현했지만 함수형으로 구현도 가능하다. 강좌를 보면서 기존에 알고있었던 객체지향 프로그래밍 말고도 함수형 프로그래밍에도 관심이 생겼다.

 

또한 3~5강엔 웹앱을 만들고 라이브러리를 만들어보면서 어떤 식으로 프로그래밍하며 그에 대한 구조와 동작들에 대해 들었다면 6강엔 JavaScript에 관한 참조 사전 형식의 강의였다. 기본적인것부터 다소 생각이 필요한 부분도 있으며 npm이나 번들러, REPL 등의 개념적인 부분과 개발하는 것에 있어서 필요한 도구 등을 소개해주는 강의도 있다. 누구에게나 그렇지만 해당 강의를 보면서 기본이 중요하다는 생각을 또 하게되었다. 본 강의에서 코드에대한 내용과 다른 여러가지 참조할 만한 강의가 있지만 동작을 완벽하게 이해하고 새로운 기능을 추가하려면 어느정도의 언어에 대한 특성이나 기본적인 지식은 필요하다고 생각되었다.

 

강사님도 강의에서 말씀하시는게 쉽게 변하는 기술은 배움에대한 비용은 상대적으로 적고 쉽게 변하지 않는 기술을 익히는데 배움에대한 비용이 크다고 한다. 쉽게 변하지 않는 기술은 단기간에 알 수 없기 때문에 꾸준한 학습이 필요하다. 그래서 이번엔 표지에 도마뱀이 그려져 있는 900페이지가 넘는 책도 샀다... 무엇보다도 강의를 들으면서 자바스크립트에 관한 기본적인 지식이 중요하다고 생각했다. cs적인 지식이나 어떤 언어에 대해서 공부를 할 때, 아무것도 모르는 상태에서 공부를 하는것과 어느정도 아는 상태에서 공부를 하는것과는 큰 차이가 있다고 생각한다. 아무것도 모를 때보다 어느정도 알게됐을 때 잘 기억되고 그것이 앞으로 다른 프로그램 등을 개발 할때 사용할 수 있는 나의 지식이 된다. 이 강의는 전부 다 알려준다고 할 수는 없지만 앞으로의 다른 지식들을 배우는데 있어서 도움이 될것 같다.

 

 

- 만들어본 결과물

 

개인적으로 처음으로 ES6 class와 TypeScript를 사용해서 만들어봤다. 물론 동작은 SPA로 동작한다. 강의를 처음 들으려고했던 이유처럼 리액트가 SPA인건 알겠는데 세세한 동작이라던지 어떤 식으로 구조를 가지고 있는지에 대해 좀 더 자세하게 알게되면서 라이브러리나 프레임워크 등은 사용하지 않고 순수 JavaScript & TypeScript로 만들었다. 또한 강의에서 언급되었던 webpack이나 node.js 등을 번들러나 서버로서 동작할 런타임 환경으로 사용했고 강의에는 없었지만 추가적인 기능으로 데이터관리를 위한 데이터베이스 연동이나 서버와 클라이언트의 중계기 역할을 하는 proxy 등을 사용했다.

 

첫 번째 사진은 강의에서 했던 방식대로 class를 만들고 공통적인 부분은 extends로 상속하면서 template을 따로 만들고 만들어지는 데이터에 따라 변경되는 부분만 렌더링해주는 방식으로 SPA를 구현한다. 폴더 구조도 그렇듯이 기능을 담당하는 파일 따로 html, css를 갖는 template따로 구분한다. 강의랑 한가지 다른 점은 여기선 css 파일도 각 해당하는 기능의 파일에 따라 독립적으로 작용한다. 동일한 css 이름이 사용되더라도 다른 컴포넌트의 css에 영향을 주지 않는다. css module 방식을 사용했다.

 

두 번째 사진은 서버를 node.js를 사용해서 구현했다. 강의를 진행하면서 JavaScript로 UI적인 부분 뿐만아니라 서버, 더 나아가서 추후에 앱이나 머신러닝도 할수 있기 때문에 해당하는 서버를 JavaScript 런타임인 node.js로 구현했다. express.js를 사용했고 데이터베이스와 연동하는 것, 로그인 처리, 데이터 API 받아오기 등의 기능을 구현한다. 현재는 데이터베이스로 mysql에 연동했고 화면의 전환에따라 데이터 API를 받아오는 정도의 기능이 구현되어 있다.

 

세 번째 사진은 webpack 번들러를 사용한 것이다. 강의에서는 parcel을 통해서 번들링을 한다. 강의의 특성상 parcel을 사용하게되면 webpack보다 설정하는 부분에 있어서 빠르게 설정할 수 있는 이점이 있다. 하지만 webpack 필수적이라고 할 정도로 많은 어플리케이션에 사용되며 더 상세한 설정을 직접 할 수 있기 때문에 결과물에서는 webpack을 사용했다. html, css, JavaScript, TypeScript 등의 설정 등을 여기서 할 수 있다. 번들링 한 파일의 위치나 이름, css모듈화 네이밍 형식, 파일 크기, 프록시 설정 등을 할 수 있다. 

 

네 번째 사진은 작업하던 결과물이다. SPA형식으로 작업했으며 하얀색 텍스트로 나열 되어있는 데이터는 공공데이터 포털에서 가져온 데이터이다. 아직 진행중이지만 강의에서 듣고 알게된 내용들을 적용해야 할 부분이 많다. 지금은 3-4강의 기본적인 구조에 맞춰서 화면의 라우팅과 렌더링 등을 통한 SPA의 기능 구현 정도이다.

 

 

- 결론

 

결론적으로 나에게 있어 여러모로 변화를 준 강의라고 생각한다. 회사에서도 개발을 꾸준히 해왔지만 일정 수준이나 시기에 도달했을 때, 비슷하고 반복적인 결과물이나 비슷한 코드들이 대부분이었다. 어찌됐건 내가 찾아보지 않으면 알수 없었던 부분이었다. 다른 곳으로 면접을 보러 다닐 때 SPA에 관해서 질문을 받은 적이 있다. 그때는 그냥 SPA라는 말 그대로 Single Page Application이라고 대답은 했지만 그것이 어떻게 동작하고 어떤 구조를 가지고 있는지는 몰랐다. 막연히 Multi Page Application 이랑 반대겠거니 생각만 했다가 그것에 대해 관심을 가지게 됐고 강의도 듣게 되었다. 처음 강의를 듣게 된 이유는 이것이 아니지만 결국엔 내가 궁금하고 관심있었던 부분까지 알게된 강의였다. 이것 뿐만 아니라 자바스크립트에 관심이 있거나 구조 등에 관해 궁금하다면 많은 도움이 될것같다. 나는 이 강의를 듣고 알게 된것도 많지만 앞으로 무엇을 공부해야 할지 어느정도 방향도 잡을 수 있다고 생각한다. 

 

 

 

https://bit.ly/37BpXiC

패스트캠퍼스 [직장인 실무교육]

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

 

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #김민태의프론트엔드아카데미:제1강JavaScript&TypeScriptEssential