목록전체 글 (483)
음악, 삶, 개발
poiemaweb.com/typescript-interface /* js */ const man = { name : 'lee' } const woman = { name : 'jeong' } 위의 코드가 JS 의 약점을 보여준다. 이 둘은 똑같이 Object 타입이다. 이 둘을 코드상에서 구분하는 방법은 아마도 변수명 + 코멘트일것이다. TS 에서는 Object 를 더 세부 타입으로 분류하게 해준다. 이때 사용하는 키워드가 interface 이다. /* ts */ interface Man { name : string } interface Woman { name : string } const man: Man = { name : 'lee'} const woman: Woman = { name :..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/3FnT2/btqSmBggqlj/Az1Ii0WxtrRGwOiC60LMXk/img.png)
youtu.be/VJ8rvsw2j5w 나는 작년에 C++ 를 4개월간 공부했었다. C++ 는 극도로 type 에 예민한 언어인 반면, JS 는 type 을 완전히 무시할수있는 언어이다. 따라서 C++ 에서는 상상도 못할 아래와 같은 미친 대입이 가능하다. /* test.js */ let a a = 1 // a is now number a = 'one' // a is now string a = true // a is now boolean a = [] // a is now array a = {} // a is now object 따라서 JS 로 코딩할때는, "이 변수에 number 대신 array 를 대입할 일은 없을거야..." 라는 심약한 생각으로 코..
stackoverflow.com/questions/12503146/create-an-array-with-same-element-repeated-multiple-times 개발을 하다보면, 똑같은 요소들이 반복되는 긴 Array 를 만들어야할때가 있다. 2가지 방법이 있다. 이 Array 가 가진것들이 object 들일 경우, 각각이 reference 가 아닌 value 로 이어져야한다는것이 중요하다. const a = () => ({ v : 100 }) // 3번 반복하자 const b1 = Array.from({length: 3}, a) // 방법1 const b2 = Array(3).fill(null).map(a) // 방법2 b1[0].v = 999 b2[0].v = 888 con..
보통 객체안에 무언가를 집어넣을때는 key 와 value 가 필요하다. const o = { myKey : 'myValue!'} 위의 상황에서, value 를 제거하고 const o = { myKey } 하게되면, Uncaught ReferenceError: myKey is not defined 라는 에러가 발생한다. 하지만 아래와 같은 대입은 할수있다. const one = 1 const two = 2 const three = 3 const o = { one, two, three } console.log(o) // { one : 1, two : 2, three : 3} 위의 코드에서는 앞서, 여러 변수들을 각각 정의하였고, 이 변수명을 고대로 객체안에 집어넣었는데, 이때는 결과적으로 변수명이 해당 객체..
개인적으로 JS 에서 객체를 만드는 방법에 대해 여러 옵션들을 경험해보았다. 그중 가장 내 취향인것은 Factory function 이다. function make(a, b, c) { const obj = { a : a, b : b, c : c, } return obj } ES6 에서는 이 Factory Function 을 다음과 같이 매우 간결하게 작성할수있다. const make = (a, b, c) => ({ a : a, b : b, c : c }) make(20, 30, 40) // {a : 20, b : 30, c : 40}
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/bN8VyH/btqRI8GChLU/GRMRy985uhkGlbecnVu8x1/img.gif)
/* 반드시 overlay 여야함!! */ .test { overflow: overlay; } .test::-webkit-scrollbar { width: 1vw; } .test::-webkit-scrollbar-thumb { background-color: hsla(0, 0%, 42%, 0.49); border-radius: 100px; } scroll 바의 default 인 뒷배경을 날릴려면, 반드시 overflow 가 overlay 여야한다. overflow : scroll 인 상태에서 아무리 ::-webkit 을 지지고볶고해도 배경은 변하지않는다.
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/09Zhf/btqROdUjhBZ/CmfPV5SIc8kdqN1AGkjjNk/img.gif)
DropDown 메뉴를 만드는데 기본은, dropdown 창을 열수있는것은 오직 자기 자신이지만 닫는것은 자기 자신 또는 바깥에서도 닫을수있어야한다는것이다. 이를 위해 vue 의 ref 객체와 window.addEventListener 의 적절한 조합이 필요하다. 바깥을 클릭하는지 확인하기위해 vue 의 ref 를 사용하고, 이 객체를 e.target 과 비교하는것이 중요하다. if (e.target !== menu.value) close() // 바깥을 클릭했으면 close() 실행 ES6 스타일로 작성해보면.. const mouseDown = () => { !state.isOpened ? open() : close() } const open = () => { state.isOpened = true w..
{ } 가 => 뒤에 있냐없느냐에 따라 return 의 존재여부가 결정된다. { } 가 없을 경우는, 곧 바로 return 하게되며, { } 가 있을 경우는 return 을 적시해줘야한다. const f1 = () => 'hello' // { } 가 없으므로 'hello' 를 return 함! const f2 = () => { return 'world '} // { } 가 있으므로, return 을 작성해줘야함!
medium.com/@_diana_lee/default-export와-named-export-차이점-38fa5d7f57d4 developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export /* test.js */ //1 . 변수, 함수 정의 const value = 'One' const method = (msg) => { console.log(msg) } //2. 변수, 함수를 하나의 변수에 담기! const test = { value, method } //3. 이 변수 내보내기! (반드시 해야함!) export default test ES6 의 export, import /* text.js */ const value..