당신의 친절한 이웃, 코딩맨

CSS를 하다 보면 Background-image를 넣을 일이 종종 발생한다. 그럴 때 마다, // 예제 클래스명은 "box" .box { background-image: url(""); background-position: center; background-repeat: no-repeat; background-size: cover; } ※ 백그라운드 이미지를 이렇게 제일 많이 사용한다. 반응형처럼 보일 수 있기도 하고, 사용목적이 위와 같은 코드로 많이 상용되기도 하기 때문. 하지만 매번 이렇게 적는 방법은 손도 아플 뿐더러, Sass를 사용하고 있지 않다면 계속해서 이렇게 스타일링을 지정하는 것은 불편하기만 하다. 위와 똑같은 코드를 굉장히 압축 시킬 수 있는데, 아래와 같다 .box{ backgro..

Todo list를 구현하거나, 게시글을 구현하는 일들은 프로젝트를 만들면 비일비재하게 일어난다. 리스트, 상품 목록, 유저 목록, 등등.. 사실 Vue를 사용하면 spa를 손쉽게 다룰 수 있다는 장점 덕에 쓰는 것인데, 흔히 말하는 '자식' 컴포넌트가 메뉴고, '부모'컴포넌트에서 리스트들을 보여준다면, 크게 2가지 방법이 있다. VUEX로 관리하거나, emit과 props로 이벤트를 생성해서 전달하거나 보통 이렇게 둘 중에 생각하는데 내 수준에서는 정답은 없는 것 같다. 하지만!! 1. 컴포넌트들의 규모가 커서 두번씩, 세 번씩 이벤트를 생성해서 데이터를 전달해야 하거나, 2. 반복적으로 여러 곳에서 사용할 것같다 하면, vuex를 사용하는 것이 상대적으로 데이터들의 state들을 관리하기 용이했다. ..

Vue Cli 는 컴포넌트 단위로 웹을 구성하여 만드는 React다음으로 유명한 프레임워크다. 컴포넌트들로 웹을 만들면 여럿 장점이 있지만, 모달창, 스낵바 등을 재사용할 수 있다는 장점이 가장 주된 이유일 것이다. 하지만 CSS를 이용해서 스타일링을 하게되면, 나도 모르게, 혹은 팀원 공교롭게 나와 같은 클래스이름을 지은 다른 컴포넌트들의 스타일링도 바뀌는 것을 목격했다. 웹의 서비스가 점점 커지다보면, 계속해서 새로운 이름을 만드는 것이 생각보다(?) 어려운 일이 된다. 따라서 이를 해결하기 위해, 라는 "scoped"를 style태그를 사용하게 된다면, 해당 컴포넌트에서만 css를 사용할 수 있게 된다. 관련 소스는 vue-loader-v14.vuejs.org/kr/features/scoped-cs..

Promise 는 비동기적으로 실행하는 작업의 결과(성공 or 실패)를 나타내는 객체이다. Promise(executor) 이렇게 'executor' 라는 한개의 인자 값이 들어간다. executor는 'resolve' , 'reject' 이렇게 두개의 인자 값을 받는 실행 함수이다. Promise라는 객체가 리턴해서 오기 때문에, 바로 그 값에 접근 할 수가 없다. 따라서, .then 같은 메소드들을 사용해야 한다. let promise = new Promise(function (resolve, reject) { setTimeout(function () { let ran = Math.random() * 10; if (ran > 5) { resolve(ran); } else { reject(); } },..