웹팩을 자유자재로 활용하기 위해 노력하고 있다만, 역시 오늘도 사투를 벌였다. 👊 내가 하려던 것 : extract-text-webpack-plugin을 사용하여 수많은 scss를 단 하나의 styles.css로 압축시키기 그런데 이 포스팅의 제목과 같은 에러가 떴다. 내가 오타를 낸건지, 다른 라이브러리 버전을 잘못받은건지 한참 동안 디버깅했다. 그러다가 제작자 깃헙 레포에서 원인을 발견했다(진작 제작자의 충고를 들을걸) ❗️ 원인 : extract-text-webpack-plugin은 css 용으로 쓰여서는 안되므로, mini-css-extract-plugin을 사용해야 했던 것이다. 💖 해결 : 기존에 쓰던 extract~를 mini~로 변경했고, 다음과 같이 webpack.config.js를 수정..

HTML만을 다루거나 정적 웹사이트를 만들 때는 그럴 일이 거의 없겠지만, 사용자의 입력에 따라 다르게 반응해야 하는 웹앱(CRUD는 기본)을 제작한다면 JavaScript에서 innerHTML로 태그를 직접 수작업으로 넣어주어야 하는 경우가 있다. 그래서 실수하기 쉽다. IDE에서 오리지널 HTML이나 EJS, PUG 등 템플릿을 사용한다면 HTML Element의 속성들도 자동추천해주기 때문에 버그가 적다. 하지만 JS에서 수작업을 한다면 특정 속성을 간과한 것이 큰 버그로 이어질 수 있다. 나는 사용자들의 댓글 내용을 li 태그로 뿌리면서, "현재 로그인한 유저의 id"와 "댓글작성자의 id" 같은 li에 한해서 삭제버튼을 부여하려고 아래와 같은 코드를 만들었다. myForm.innerHTML = ..

JavaScript로 DOM을 조작하면서 사소할지라도 결코 무시할 수 없는 것이 있다. 바로 getElementById 와 querySelector의 구분이다. JS파일에서 "querySelector"로 DOM 객체를 선언한다면, 그 객체가 HTML에서 자식으로 품고있는 하위 노드들까지 이어서 조회할 수 있다. querySelector는 하위객체까지 모두 데려오기 때문이다. const 고조할아버지 = document.querySelector("#js-고조할아버지"); const 증조할아버지 = 고조할아버지.querySelector("#js-증조할아버지"); const 할아버지 = 증조할아버지.querySelector("#js-할아버지"); const 아버지 = 할아버지.querySelector("#js-..

Context : 문학에서는 "문맥"이라면, 프로그래밍에서는 현재 이 오브젝트가 document상 어느 위치에 있는지 알려준다. this 키워드 사용. 만약 어떤 함수가 {} 객체 내 속성으로 정의되어 있고 그 함수 내에서 this를 사용한다면, 해당 this는 객체 내 함수만을 가리킨다. const obj = { myFunc: function () { console.log(this); } }; Instantiation : 클래스(Constructor Function)를 정의하고 해당 속성과 메서드를 가지는 객체들을 인스턴스화하는 것. new 키워드 사용. 클래스는 extends로 상속이 가능하며, 상속시에는 반드시 super(인자들) 메서드를 먼저 사용한 후에 오버라이딩 또는 커스터마이징해야 한다. c..

프론트엔드는 웹서비스의 얼굴로서 고객과 가장 맞닿은 부분을 책임지는 아주 중요한 역할을 한다. 기존 방식대로라면 하나의 페이지에 담긴 여러 HTML 요소의 이벤트에 따라 전체 페이지를 리로드해야했다. 하지만 페이스북에서 좋아요 하나 누른다고 전체 페이지를 리로드한다면 지금까지 내려서 보던 피드 스크롤이 날아갈 것이고, 페이지를 렌더링하는 데 필요한 파일들 역시 다시 다운로드 받아야 하는 낭비가 생긴다. 하지만 React는 DOM 트리를 항상 주시하고 있으며, 그중 변화가 생긴 부분만 새로 렌더링한다. 그렇기 때문에 더욱 빠르고 사용자 경험에 능하다고 볼 수 있다. 그리고 React는 클래스마냥 웹페이지를 구성하는 각 요소(nav바, 친구목록, 알림창 등)의 구조를 따로 정의해놓는다. 이때 각 요소들은 별..

JavaScript의 별난 점! array와 object를 아예 새로운 형태로 초기화하지 않는 한, 그 원소를 추가/삭제하는 정도는 충분히 가능하다.