후니후니

#Vue.js 프로젝트 작업 중 created로 API Call을 하고, 값을 Component Data에 저장하여 mounted에서 데이터를 가공하려고 했는데, created에서 API 응답으로 Data에 저장한 값을 mounted에서 찾지 못하는 현상이 생겨 고생했다. 나의 지식으로는, created에서 API Call을 하면, Life Cycle에서 created 후 mounted가 되기 때문에 값을 가져올 수 있을 거라 생각했는데, 그게 아니었다. 정확한 Vue Life Cycle의 로직을 알 순 없지만, Created에서 함수를 부르면 함수는 갈길가고, mounted도 갈길을 가서 이어지지 않는건가...? 라는 생각이 들었다. 결국 한시간 정도 디버깅하며 mounted 내에서 API Call을 ..

항상 인강으로만 공부하다가, 회사 동료가 자바스크립트 이론 책을 하나 빌려주어 책을 보게됐다. 책 제목은 '코어 자바스크립트' 로, 이론적인 부분에서 많이 도움이 된다고 하여 시작했다. 첫 시작은 자바스크립트의 데이터 타입에 관련한 내용이었다. 자바스크립트의 데이터 타입은 기본형, 참조형이 있는데 둘의 차이가 무엇인지의 내용이었다. 기본형은 불변형인데, 불변이라는 것은 변하지 않는다는 것인데 a라는 변수에는 여러 값들을 넣을 수 있다. var a = 'abc' 를 선언했다가, a = 'abcdef' 를 다시 선언하여 값을 바꿀 수 있는데 왜 불변이라고 할까? 먼저, a라는 값을 선언하면 메모리에서 공간을 확보한다. 그리고 해당 공간의 이름을 a라고 저장한다. var a = 'abc' 로 값을 넣을 경우 ..

프로젝트에서 조금 더 의미있는 마크업을 하기 위해 시멘틱 마크업 관련 글을 검색해서 찾아보았다. 기본적으로 의미가 있는 태그를 사용하는 게 의미 있다고 생각하여, 리스트 관련 내용은 ul & li, 테이블은 table, 상단, 하단 헤더 푸터는 header & footer, 적절한 태그가 없을 경우 div 등을 사용해왔다. 근데 의미있는 마크업을 검색해보니 section, article 등이 나왔다. 알고 있는 태그이긴 했지만 잘 사용하지 않았기 때문에 어떤 태그인지 조금 자세히 찾아보고, 앞으로 더 의미있는 마크업을 하기 위해 사용해보려고 한다. article : 해당 컨텐트 영역은 페이지에서 독립적인 내용이어야 하며, 해당 부분을 떼어 다른 페이지로 이동해도 그 영역의 내용만으로 온전히 하나의 기사가..

소규모 프로젝트에서는 상관없지만, 프로젝트가 커지면 커질수록 CSS양은 늘어나게 되고, CSS가 많아지면 많아질수록 당연히 성능도 저하된다. 성능 개선 방법 1. @import 를 사용하지 않는다. 속도 측면에서 import는 좋지 않은 방식이라는 내용이 많다. 하지만 Vue에서는 style 내부에 import로 파일을 불러오고 있는데, 해당 방식보다 더 나은 방법이 있는지는 알아봐야 한다. 추가로, index에서 모든 스타일 시트를 불러오는 것보단, 컴포넌트 별로 사용할 스타일 시트를 분리하여 불러오는 게 속도 향상에 좋다. 2. 선택자 방식 header > ul > li > p 보다는 클래스 명을 지정하여 뎁스를 줄여주는 게 좋다. 또한 태그 선택자를 사용하지 않는다. 태그 선택자의 경우 속도의 문제..

BEM (Block Element Modifier) 작명규칙 소문자, 숫자만을 이용하여 작명한다. 여러단어의 조합은 하이폰으로 연결하여 작명한다. (sub-header__title--color-red) 기본적으로 id (label for에서는 사용), 태그 선택자를 사용하지 않고 class 만을 사용한다. (태그 선택자는 성능 저하를 유발하기 때문에 방법론이 아니더라도 사용을 하지 않는 것이 좋다) Block Block은 재 사용할 수 있고, 독립적인 구성요소여야 한다. (header, footer, nav, logo 등) 형태 (small, big, red, blue)가 아닌 목적 (error, menu, button, success)에 맞게 결정해야 한다. 환경에 영향 받지 않아야 한다. (여백, p..

#JavaScript, ES6 프로젝트를 하다보면, 가끔 예상하는 this의 값과 전혀 다른 값을 불러오는 경우가 있다. 예를 들면, window를 바라보게 this를 썼는데 특정 객체나 함수를 본다던가, 특정 객체나 함수를 바라보도록 this를 썼는데 window를 바라본다던가의 문제로 헤맬 때가 있었다. this를 어디서 부르는지의 차이도 있지만, 일반 함수와 화살표 함수의 this는 다르기 때문에 이를 정리하고자 한다. function func() { return console.log(this); } const obg = { text: "1234", testFunc: func, }; 우선 일반 함수를 작성해봤다. 이 상태에서 obg.testFunc() 을 실행하면 나오는 this는 어디일까? 위 코..

#Node.js 어제 작업했던 코드를 get에서 post로 변경하고 (데이터를 변경하기 위해), 함수 하나를 추가해줬다. const registerView = () => { const videoId = window.location.href.split("/videos/")[1]; fetch(`/api/${videoId}/view`, { method: "POST" }); }; function handleEnded() { registerView(); videoPlayer.currentTime = 0; playBtn.innerHTML = ''; } 현재 url을 가져온 후 /videos/를 기준으로 split하고, 1에 해당하는 배열을 가져온다. 1에 해당하는 배열은 video의 id가 되고, fetch를 해당..

#Node.js 프로젝트를 할 때 백엔드에서 API가 완료되어야 프론트에서 최종적으로 API를 통해 데이터를 받고, 가공해서 최종적으로 완성을 한다. 지금까지 수많은 API 통신을 했지만, API는 어떻게 만들까? 궁금하기도 했었다. 하지만 백엔드쪽을 들여다 볼 일이 없으니...그 동안은 API 로직을 몰랐지만! 풀스택 강좌를 통해서 작은 API 하나를 생에 처음으로 구현하게 됐다. 먼저, 이 API는 동영상을 끝까지 시청한 경우 View가 +1 되는 로직이고, Video의 Model은 이미 구현이 되어 있는 상태이다. // app.js app.use(routes.api, apiRouter); // apiRouter.js import express from "express"; import routes f..

#유튜브 클론 코딩 input.videoPlayer__volume#jsVolume(type="range", min="0" max="1" value="0.5" step="0.1") const volumeRange = document.getElementById("jsVolume"); volumeRange.value = 0; function handleDrag(event) { const { target: { value } } = event; videoPlayer.volume = value; if (value >= 0.6) { volumeBtn.innerHTML = ''; } else if (value >= 0.2) { volumeBtn.innerHTML = ''; } else { volumeBtn.innerH..

동영상을 직접 스타일링 하기 위해 구현한 코드다. 오늘 날짜로 TIL이 2개인데, 글이 길어질까봐 글을 나눴다. const fullScrnBtn = document.getElementById("jsFullScreen"); const currentTime = document.getElementById("currentTime"); const totalTime = document.getElementById("totalTime"); function exitFullScreen() { fullScrnBtn.innerHTML = ''; fullScrnBtn.addEventListener("click", goFullScreen); if (document.exitFullscreen) { document.exitFulls..