글쓰는 개발자

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. 화면의 요소는 언제든..

기억도 나지않는 어느 날엔가, 누군가 내게 제목과 같은 질문을 했다. "Javascript의 Class도 호이스팅이 되나요?" 그리고 내가 답했다. "네, Class도 당연히 호이스팅 됩니다." 그러자 질문자가 되물었다. "하지만 아래와 같은 코드는 에러를 뱉는걸요?" var foo = new Foo(1, 2); //ReferenceError class Foo { constructor(x, y) { this.x = x; this.y = y; } } "네, 에러를 뱉겠죠. Foo class의 선언보다 사용이 앞섰으니까요." 0. 누구에게나 처음은 있다. 위의 일화가 본 포스팅을 작성하게 된 이유다. 아마도 Javascript를 시작하는 길목에서 처음 호이스팅이라는 개념을 이해할 때면, 우리는 아래와 같은 ..

이 포스팅은 미완입니다. 써놓은 포스팅임에도 불구하고 미완이라니, 그럼 굳이 왜 써놓는거지? 싶은 생각을 하실 수도 있는데... 사실 앞선 포스팅(Javascript의 불변성)에서 설레발치듯 '밑밥'이라는 표현을 써서 이렇게 빈 포스팅을 남겨두게 되었습니다(밑밥을 깔아뒀더니 순서상 다른 주제로 포스팅하기가 뭔가 애매해져서...이렇게 영역부터 차지해두려고 합니다) 그래도 미완이지만 포스팅을 하는김에 또 썰을 풀어보자면, 이번 포스팅에서 다루고싶었던 주제는 React.js와 Vue.js에서 데이터를 바라보는 관점, 혹은 다루는 차이에 대해서 작성을 하려고 했습니다. 저는 보통 기술 포스팅을 할 때면, 눈을 감고도 입에서 술술 나올만큼 완전히 체화된 지식을 바탕으로 포스팅하려하는 편입니다. 그러다보니, 아직 ..

이 포스팅은 사실, 하고싶은 다음 포스팅을 위한 밑밥이라고 보시면 됩니다. 오랜만에 포스팅해보고 싶은 이야깃거리가 생겼는데, 거기서 불변성의 개념까지 설명하기엔 너무 주제를 벗어나는 느낌이기도하고 불변성(Immutability)이라는 개념 자체도 충분히 하나의 포스팅거리로 삼을법한 주제이기 때문에, 이 포스팅을 작성하게 되었습니다. 0. 변수인데 불변한다는게 무슨 말이야? 처음 불변성이라는 용어를 Javascript를 공부하며 들었을때, 머릿속에 들었던 첫 번째 물음. 우리는 개발을 하고 코드를 작성하며 수많은 변수를 사용한다. 변수라는 건 엄연히 변경이 가능한 수를 뜻하고, 변하지 않는 수라면 그건 상수라고 칭하면 될 텐데 굳이 불변성이라는 용어로 정의하면서까지 설명을 해놓는 이유가 뭘까. 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 명령을 통해서, 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가 정상적으로 끝난 것처럼 정적 리..

문제점 npm install 명령어를 통해서 패키지를 설치하는데, 아래와 같이 run `npm audit fix` to fix them, or `npm audit` for details 라는 에러가 발생했다. npm을 다룬지도 한참됐는데...처음보는 에러라서 또 뭔가 프록시 설정을 누락했거나, npm config 설정값에 문제가 있는 줄 알았는데, 그게 아니고 npm audit 라고, 각 패키지들이 가진 취약점을 체크해주는 로직이 들어 왔다는 거였다. npm 패키지 자체가 install 시에 물고물고물린 의존성에 따라 여러 패키지들을 알아서 설치해주다보니, 그 과정에 발생할 수 있는 이슈를 대비하기위해 해주는 거라고 한다. 해결법 생각보다 심플하다. 해당 audit 옵션을 쓰지 않겠다는 옵션을 아래와 같..

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

0. 시작하기에 앞서 사실 저번 편에 이어서 이번 편도 좀 지루하지 않을까, 라는 생각이 듭니다. 대체 Vue.js 에 대해서 설명하는 포스팅이라고 해놓고 Vue.js를 실질적으로 활용하는 설명은 어디 있는거냐, 라는 생각이 드실수도 있어요, 충분히. 이래저래 필요한 개념들부터 짚고 넘어가려다보니 포스팅이 길어지고 있는데요, 하지만 그렇다고해서 ‘이 정도는 알아야 할 거 같은 것’들을 모른 척 당장 넘어갈 수는 없잖아요? 당장에 급하기에 활용법부터 필요하실 수도 있습니다만, 급히 먹는 밥은 체하기 마련이니까요. 최소한의 기본은 쌓고 인지한채로 개발을 해야하지 않겠습니까?ㅎㅎ 그러니 이번편도 당장 Vue.js를 ‘코드’로써 활용하고자하시는 분이라면 스킵하셔도 됩니다. 이번 포스팅은, 이전 글에서도 언급했던..