ES6

[JS]-1 : 호이스팅(Hoisting)/ 타입스크립트

무작정 프론트로 프로젝트를 시작하며 느낀 JS 지식 및 활용-1 백단만 개발하다 본격적으로 두달동안 Vue로 프로젝트를 하며 Javascript에 대한 코어 지식이 부족하다는 것을 뼈저리게 느꼈다. 이번 프로젝트를 하며 JS의 코어 지식들이, 단순히 "이론적으로 암기할 것"이 아닌 효율성과 유지보수, 안정적인 프로덕트를 위해 필수적으로 알아야 한다는 것을 깨달았다. 다음은 실제로 프로덕트를 개발하며 느낀 JS의 문제점들, 문제를 해결하기 위해 도입하고자 하는 것들에 대한 내용이다. 그중 호이스팅과 타입안정성에 대해 먼저 말해보고자 한다. Javascript로 개발한다는 것은 생각보다 쿨하지 못한 과정이었다. 동적 타이핑 언어로 런타임에러를 뱉는 점, 타입안정성이 떨어지는 점, 관용적인 문법 표현들은 오히..

Vue 점진적 도입(2): SFC 전환 경험 공유

이 글은 jQuery 기반의 미디어 플랫폼 모바일 앱에 Vue를 도입한 사례를 정리한 내용입니다. 웹뷰에 Vue를 도입하거나 기존 레거시와 함께 점진적 도입을 고민하고 있으신 분들을 위해 공유합니다. 웹뷰를 좀 더 네이티브 앱에 가깝게 구현하자 기존에 작성했었던 Vue 점진적 도입 경험기(1) 에 이어 MBC 앱을 지속적으로 담당하게 되면서 연말 개편을 맡게 되었다. 지난 버전에서 웹뷰를 도입하며 vue 2.0 버전 cdn을 다운받아 사용해 보는 것을 시작으로, 각 페이지 별로 JS를 로딩하는 고전적 MPA구조로 작성했다. 처음 버전에서는 웹팩의 엔트리를 이렇게 작성했다. module.exports = { devtool: 'source-map', entry: { main: './src/entry/main..

[모듈번들링] Module Bundler: Webpack 도입 적용 경험 #1,2

도입 배경 기존 프로젝트 포함 현재 진행하고 있는 프로젝트 또한 보통의 js 모듈들을 로딩받아 사용하고 있다. 학부생때부터 번들링을 경험해본적이 없어서 그냥 당연하게 사용해왔고 사내에서 또한 그랬다. 이번 프로젝트를 진행하면서 더욱이 번들링의 필요성을 느끼고 도입해 적용해 보았다. 번들링을 함으로써 기대할 수 있는 효과는 다음과 같다. 1. 로 이어지는 코드의 간결화 2. 네트워크 코스트의 이점 3. 코드 난독화, 압축 등 여러 기능 제공 일단 script로 이어지는 지저분한 코드들이 파일들 마다 이루어지던 서버요청을 한번에 요청/응답을 받으므로 네트워크 코스트가 줄어들었다. 또한 하나하나 요청을 함에 따라 발생하는 js 요청 순서도 굉장히 중요했는데, 이로 인해 발생하는 버그를 방지할 수 있었다. 예를..