음악, 삶, 개발

event listener 를 사용할때 대부분 div 의 id 나 classname 으로 어떤 버튼이 눌렸는지 추적하게되는데, 이때 div 내부에 대부분 다른 자식들이 존재하게된다. 이 자식들이 div 라면 괜찮지만, text 를 넣기위한 span, svg 를 넣기위한 svg 그안에 path 가 추적되는 경우가 발생한다. 이때 이들이 event listener 의 target 으로 잡히지않도록 css 에서 설정할수있다. /* Disable event listener catches this elements */ span, svg, path { pointer-events: none; }

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption..

위와 같이 깊게 들어가있는 폴더의 단축 경로를 tsconfig.json 에서 만들수있다. // tsconfig.json { "compilerOptions": { "baseUrl": "src", "paths": { "@foo" : ["nested/nested/nested/nested/nested/Foo"], } } 이때 반드시 baseUrl 을 설정해줘야하는것을 잊지말자. 저 baseUrl 을 기준으로 출발하기때문이다. 위와 같이 tsconfig.json 파일을 작성하였다면.. import { foo } from './nested/nested/nested/nested/nested/Foo' 에서 import { foo } from '@foo' 로 작성할수있게된다. '@' 는 꼭 붙이지않아도 되지만, 약간의 ..

Brad Frost on Twitter “Component developers, which way do you do it and why?” twitter.com This or that? Component Names: index.js or Component.js I'm not sure if you're aware, but there are sometimes different ways to do the same thing. Crazy, right? As a consultant I get to see a lot of different codebases, and I try study other projects' architecture in order to better understand this Brave Ne..

위와 같이 폴더 구조가 되어있는경우를 가정해보자. 나는 parent.ts 안에 내용물을 deelChild.ts 에 import 하려고한다. 그러면 아래와 같이 작성이 된다. 이런일이 일어나지않을거라 생각하겠지만, 거대한 app 을 작성하다보면 폴더 계층 구조가 점점 nested 되게 되고, 위와 같이 ../../../../ 의 지옥에 빠지게된다. 이렇게 되는 이유는 import from 의 경로가 현재 자신의 위치를 기반으로 출발하기때문이다. 이때 tsconfig.json 을 수정하면 본인이 원하는 경로에서 import 의 시작점을 지정할수있다. // tsconfig.json { "compilerOptions": { "baseUrl": "src" } } 위와 같이 tsconfig.json 파일안에, co..

Grid 의 column 의 width 를 px 로 고정한 상태에서 scroll bar 를 grid 에서 사용하는 방법이다. 먼저 html 작성시, 먼저 item 들을 묶어주는 div에 다시 scroll-bar 를 보여줄 div 로 감싸야한다. #scroll-box { position: relative; width: 100%; height: 100%; overflow: auto; } #items { position: absolute; width: 100%; height: 100%; display: grid; grid-auto-columns: 30px; /* 반드시! */ grid-auto-flow: column; /* row 를 가지지않을거라면 반드시! */ } 위에서 grid-auto-columns 를..

npm i react-device-detect import { browserName, isChrome, isChromium, isDesktop, BrowserTypes, deviceDetect, } from 'react-device-detect' https://www.npmjs.com/package/react-device-detect 접속한 Client 의 브라우저 정보를 구할때 사용할수있다. 반드시 import 는 클라이언트, 즉 react app 안에서 수행되어야한다.

package.json 파일을 열어보면 "scripts" 라는 항목안에 "bulid" 라는 항목이 있다. 이 부분에 "BUILD_PATH='상대경로' 를 아래와 같이 추가해준다. 자꾸 바보같이 tsconfig.json 을 수정하고서는, 왜 안되지? 하고 있었다. 다시 말하지만 package.json 을 수정해야한다! 이 BULID_PATH 를 사용할시 주의할점은, 해당 폴더를 삭제하고 다시 생성한다. 그래서 잘못해서 중요한 폴더를 실수로 설정해버릴경우, 안에 내용물이 다 삭제되는점을 명심하자. https://stackoverflow.com/a/62378644

1. 터미널로 원하는 가장 상위 폴더로 이동한다. 2. 그후 상위 폴더안에 생성할 폴더명을 포함하여 아래와 같이 입력하고 엔터를 친다. npx create-react-app my-folder-name --template typescript