음악, 삶, 개발

최근에 React 로 GUI 개발을 시작하면서 절실하게 느낀... 개발을 할수록 머리속에 예상된 가장 큰 점 하나는.. 미디나 오디오 관련된 코드보다 GUI 와 관련된 코드가 압도적으로 길것 이라는 생각이다. 왜 그러냐면, 우선 사용자 눈에 이뻐야하면서도, workflow 를 향상시켜줄 UX 여야만 하기때문이다. 결국 아무리 내부적으로 뛰어난 알고리즘을 장착하고있다하더라도, 사용성이 불편하다면 사용자의 외면을 받게된다. 이 둘을 동시에 떠올리는것은 생각보다 창의력 + 미적 감각을 요하는 굉장히 난이도 있는 작업이다. 미디 데이터나 오디오를 다루는 알고리즘을 잘 만들었다고 해도, 결국 GUI 를 하지않았다면 프로덕트로 향하는 길의 절반도 가지 못한것이다. 다시 말하지만 확실한건, GUI 관련 코드가 오디오..

HTML5 의 canvas 는 보통 div 안에 넣어서 아래와 같이 사용을 한다. 이 상황에서의 문제점은, browser 크기를 조절할때 canvas 는 가만히 있게 된다. 이 부분에 대해 window.addEventListener('resize') 를 활용하여, 브라우저 크기가 변할때마다 cavas.width 와 canvas.height 을 변경하는 JS 코드를 작성했었으나, 퍼포먼스는 매우 처참했다. 엄청나게 느리게 브라우저 크기가 조절이 된것이다. 이것저것 해본 결과 결론을 내었다. 1. canvas 를 꽤나 크게 만든다. canvas.width = 2000 canvas.height = 2000 2. css 를 사용해 div 에 맞춰 stretch 한다. .parent { position: rela..

이 부분이 작업할때마다 매번 해깔려서 다시 정리해놓으려한다. 위와 같은 상황에서, grid 를 사용하면 자식은 전혀 건들지않고, 부모의 css 에서 자식의 넓이를 결정할수있다. .parent { height: 100%; /* 반드시!! 안하면 자식이 안줄어서 y 스크롤바 생김 */ display: grid; grid-auto-flow: column; grid-auto-columns: 5rem; /* 자식 넓이 */ overflow: auto; } 이렇게만 하면 자식의 css 는 전혀 설정할 필요없다. 위의 코드를 보다시피, 반드시 height 를 100% 로 해줘야한다. 이는 자식의 height 로 inherit 되기때문이다. 부모의 height 이 설정되지않은 경우, scroll-bar 가 생긴만큼 자..

React 프로젝트 생성 툴을 cra 에서 vite 로 변경하였다. https://vitejs.dev/guide/#scaffolding-your-first-vite-project npx create-react-app my-app --template typescript 에서.. npm init @vitejs/app my-vue-app -- --template react-ts 로 이동하였다. Vite 는 예전 vue 를 사용할때 써보긴했었는데, react 프로젝트를 생성할수있는줄은 몰랐다. 개인적으로 cra 보다 훨씬 빠릿한 느낌이 든다. 무엇보다 tailwindcss 를 사용하기위해서는 vite 랑은 이미 협업상태라 매우 잘 돌아가는데, cra 에서는 npm run start 를 계속 실행해줘야 css 가..

그동안 px 만 사용하다가 responsive layout 을 구현하게되면서 큰 벽에 부딛혔고, 하루종일 구글링을 하며, 각 property 에 적합한 unit 을 찾아보았다. "적절히 잘 써야한다" 는 개발할시 날 매우 혼란스럽게 만들기에, 많은 글들을 보여 조금 결론을 내보았다. width : % font-size : rem padding : em @media query : px px 를 사용하는 위치는 media query 이외에는 거의없지만, box-shadow 나 border 또한 px 로 사용한다. 대부분 1px ~ 4px 매우 작은 단위이기때문. .container { width: 100%; /* % */ font-size: 1rem; /* rem */ padding: 0.1em; /* em..

1 2 3 4 5 6 7 8 위와 같이, 1 -> 2 -> 3 -> 4 -> ... 8 을 화면에서는 거꾸로 쌓이게끔 해보자. .container { display: flex; flex-direction: column-reverse; } flex-direction 속성에서 column 또는 row 뒤에 -reverse 를 붙여주면된다. 또한, 각 item 들을 stretch 해주기위해 item 들의 속성에 flex-grow 를 1로 설정한다. .item { flex-grow: 1; } 결과물.

React 앱을 작성하다보면, className 이나 id 를 고유한 파일안에 const 로 정리해놓는것이 좋다. 추후 event listener 로 id 나 classname 또는 dataset 을 확인할때 유용하기때문이다. 나는 className 과 id 를 따로 구분하지않고 그냥 AppNames 라는 ts 파일안에 다 몰아서 적었다. 어짜피 id 면 suffix 를 숫자로 추후 붙여주거나 할수있기때문이다. /* AppNames.ts */ export const APP = 'app' export const APP_HEADER = `${APP}-header` as const export const APP_FOOTER = `${APP}-footer` as const 참조 : https://leestrum..

Node 에서 string 과 string 을 연결할때 ${} 기호를 자주 사용하곤한다. export const APP = 'app' export const APP_HEADER = `${APP}-header` // app-header 하지만 일반적으로 const 로 작성된 string 은 리터럴 type 으로 지정이 되는 반면, ${} 가 들어가버리면 string type 으로 지정이 된다. 대부분의 경우 상관이 없겠지만, APP 과 APP_HEADER 를 하나의 type 으로 사용하고자할때 문제가 된다. 우리가 기대하는건 'app' | 'app-header' 일텐데, 일괄적으로 string 으로 잡혀버린다. 이를 고치기위해서는 ${} 를 사용한 변수뒤에 as const 를 붙여야한다. export co..

지금까지 id 나 classname 뒤에 _1, _2 식으로 원하는 글짜를 추가한뒤에, 다시 event listener 에서 파싱하는 귀찮은 작업을 했었는데, 사용자 정의 속성을 정의할수있다는것을 알았다. data-속성명 으로 html 태그안에 아래와 같이 넣어준다. 이때 중요한것은 속성명은 절대 camelCase 가 아닌 kebab-case 로 작성되어야한다. html 은 kebab-case 를 기본으로 사용하며, 만약 camelCase 를 사용하는 경우 react 에서는 에러가 난다. 속성명이 길다면 - 를 사이에 껴넣어서 표현해야한다. 이렇게 속성을 저장하였다면, 반대로 event listener 로 가져오는 방법도 알아야한다. const data = e.target.dataset dataset 이..

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; }