글쓰는 개발자

목차 1. ES11문법을 위한 babel의 최신화(Hi, Unexpected token, bye!) 2. polyfills는 Default를 가지고있다. 3. core-js 3 라고 왠만하면 명시하자. ...그리고 -1. 별첨. es6? es7? ㄴㄴ es! 1. ES11문법을 위한 babel의 최신화(Hi, Unexpected token, bye!) 문제점 현재 프로젝트에서 사용하고 있는 컴포넌트의, 새버전이 릴리즈되어 현장에 적용하려하였는데... 아래와 같은 에러 로그를 만나게 되었다. Module parse failed: Unexpected token Unexpected token 이라는 에러는 보통, Javascript 문법을 잘 못 썼거나 컴파일 단계에서 babel이 이해하지 못 하는 구분자(t..

0. 왜 이 포스팅을 쓰게되었는지에 대하여. 이 포스팅은 계획에 없던 포스팅이다. 사실 CSS Triggers에 대한 포스팅은 저번 포스팅으로 끝내려고 했었다. 근데 왜 또, 포스팅을 작성하고 있냐...면, 사실 내가 숱한 기술 블로그 포스팅들을 보면서 답답했던 부분이, 왜 이론은 엄청 방대하고 자세하게 설명들을 하면서 쉽고 직관적이며 이해하기 쉬운 예제는 잘 안 넣어두시는 걸까, 였었다. 그래서 예시가 있으면 이해가 더 쉬울 것 같은 포스팅에는 그때그때 예시를 될 수 있으면 넣으려고 하는데...그래서 저번 포스팅이었던 [CSS] CSS Triggers 에서도 역시나, CSS Triggers에 대한 쉬운 예제 코드를 넣으려 했었다. 근데 아뿔싸, 예상치 못 한 현상을 봐버린거다. CSS Trigger 그..

0. Rendering Pipeline 브라우져는, HTML을 어떻게 해석해서 우리의 눈에 버튼과 텍스트 필드와 아이콘과 테이블과, 지금 읽고 있는 이 글을 보여주게될까? 보통 이에 대한 설명을 단순하게는 'HTML을 해석해서 보여준다'라고들하지만, 순차적인 단계의 입장에서보면 대략 아래와 같은 절차를 거치게된다. 위 그림은 크로미움에서 사용하는 Blink의 렌더링 엔진에서 제공하는 그림이다. 브라우져 별로 사용하는 렌더링 엔진은 다 다르지만, 대부분 위와같은 프로세스에서 크게 벗어나지 않는다. * 브라우저별 Rendering Engine Blink : 크롬, 신형 Edge Gecko : 파이어폭스 WebKit : 사파리 Trident : IE EdgeHTML : 구형 Edge 1. 화면의 요소는 언제든..

한줄요약. !important >>> inline >>> id선택자 >>> class명 >>> HTML 태그명 >>> DOM구조의 상위 상속 위에 요약한 것과 같이 아래 정리된 번호를 기준으로 낮은 번호가 우선순위가 높습니다. 즉, 1번과 2번이 동일한 Element를 가리키면서 CSS를 정의한다면, 1번 내용이 적용됩니다. 1. !important 가장 높은 우선순위입니다. 해당 키워드는 정의되는 CSS의 요소 값 뒤에 위치하게 됩니다. h3태그에 대해서 아래와 같은 CSS요소가 정의되어있다면 h3태그의 색상이 빨갛게 나오게 됩니다. .title-box{color: red !important;} .title-box{color: blue;} 타이틀 CSS는 일반적으로 후정의사항이 우선순위가 높게 책정됩니..

문제점 npm run build 명령을 통해서 떨어지는 최종 결과물에, Code Split를 적용하기 위해서 아래와 같은 옵션을 적용했다. module.exports = { configureWebpack: { optimization: { minimize: true, splitChunks: { chunks: "all" // 이거 }, }, }, } Entry파일을 여러개로 나눈, Multiple Entry 형태의 구조로 개발을 하기위해서 공통으로 활용되는 npm 패키지들을 하나로 묶고자 위와 같이 설정한 것인데...위와 같이 정의하고 npm run build로 webpack을 동작시키면 의도한대로 최종 빌드된 html과 js파일들은 잘 생성이 된다. 하지만, npm run serve를 통해 webpack-..

문제점 npm run build 명령을 통해서, Vue Cli로 만든 프로젝트를 빌드하려했는데... Accessing non-existent property 'cd' of module exports inside circular dependency Accessing non-existent property 'chcmod' of module exports inside circular dependency Accessing non-existent property 'cp' of module exports inside circular dependency ..... 위와 같은 메세지가 콘솔창에 가득차며 되게 에러처럼 보이는 무언가를 뱉어낸다. 물론 이 메시지가 끝난 이후에도 build가 정상적으로 끝난 것처럼 정적 리..

안녕하세요, 오랜만에 Vue.js 관련 포스팅을 합니다. 와...벌써 2021년 4월이라니...Vue.js 관련 마지막 포스팅이 작년 11월이네요. ([Vue.js_#04_2] 라우터(vue-router) vol.2) 무려 4개월이 넘는 시간동안 포스팅을 하지 않다니... 바쁘다는 건 늘 핑계라고 생각하는 성격상 입이 열개라도 할 말이 없습니다......만! 그래도 열 한 번째 입이라도 강물에 둥둥떠서 살아보고자 이 포스팅을 쓰게 되었습니다. 사실, 티스토리에서 못 다한 Vue 가이드 포스팅을 Github Page에서 완성해버렸답니다? 에헷>_

어,음…저번 포스팅때 이번편부터 본격적으로 Vue 파일들에 대해 파헤쳐보겠다고 했던 거 같은데, 생각해보니 라우터와 관련해서 못 다한 이야기가 있어서 이렇게 또 라우터를 주제로 작성하게 됐습니다. 그냥 나중에 좀 더 상세한 내용을 담는 포스팅에서 쓸까하다가, 그냥 나온김에 쓰자 싶어서요. (제 성격이 방학숙제조차도 미뤄놓으면 되게 찜찜해하는 타입이라 그렇습니다) 그래서 이번편은 #04_2편 입니다. 1. vue-router는 사실 2개야. 우선, Vue에서 라우터 기능을 사용하기 위해서 우리는 하나의 npm 패키지를 설치해줘야 합니다. 대략 vue-router 라는 이름을 가진 npm 패키지구요, Vue.js를 활용하신다면 필수적으로 사용할 수 밖에 없는 라이브러리입니다. 근데 여기서 중요한 점은 포스팅..

0. Intro 이전 편을 쓴 지 일주일이 넘었네요. 빠르게 되짚고 시작해보도록 하겠습니다. 왜냐면 지금 이미 새벽 4시거든요. 그리고 오늘은 화요일이라, 오늘도 출근을 해야하니까요! 우선 저번 포스팅에서 했던 마지막 단락을 되짚어 보겠습니다. index.html 이라는 하나의 정적 파일이 있고, 브라우저는 얘만 로딩합니다. 그래서 SPA(Single Page Application) 개념이 적용이 되는 거였구요. 그 index.html 파일에는 우리가 익히 아는 태그 하나와, build.js를 정의하는 코드로 이루어져 있었습니다(기타 메타태그는 그냥 무시할게여) 그리고 딱 하나 있는 태그가 가진 id ‘app’를, Vue Application 인스턴스(Vue 2.x버전의 경우 Vue 인스턴스)가 가리킴으..

0. 어때요, 서버는 잘 떴나요? npm run serve의 결과로 띄워진 http://localhost:8080 에 브라우저로 접속해서, 아래와 같은 화면을 띄웠다면 이제 절반은 끝낸 겁니다(시작이 절반이니까요?) 아, 시작하기에 앞서서 당부드리자면 오늘은 좀 지루한 이야기를 해야 할 거 같습니다. 그러니 좀 더 집중해서 글을 읽어주시면 좋을 거 같습니다. 저도 지루한 이야기는 별로 좋아하지 않습니다만, 지루하더라도 해야하는, 이야기는 해야하니까요ㅎㅎㅎ 아, 뭐 그렇다고해서 되~~~~게 어려운 개념을 설명하려는 건 아닙니다. 물론 듣는 이에따라서는 이게 대체 뭔 소리야? 라고 생각할 수도 있긴합니다. 그러니 차근차근 설명을 시작해보도록 하겠습니다. 1. SPA (Single Page Applicatio..