음악, 삶, 개발

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

위와 같이 일러스트레이터에서 만든 path 들의 모음이 있다. 이를 VSCode 로 복붙해보면.. 이렇게 각각의 path 태그로 연결이 된다. 하지만 이렇게 path 값이 분리되어있으면 사용하기 불편하다. path 안에 d 값을 하나의 변수로 저장해서 사용하는것이 용이하기때문이다. 따라서 이때는 일러스트레이서 Compound path 로 만들어줘야한다. Compound path 를 만드는 방법은 전체 path 들을 선택후 단축키 Cmd + 8 이다. 이제 다시 VSCode 에서 복붙하면... 위와 같이 하나의 path 태그안에 d 속성값으로 들어가있는것을 볼수있다. 여기서 style 안에 0 0 512 512 값을 viewBox 로 사용하고 d 안에 값을 path 값으로 사용하면 된다.

우리가 생각하는 드래그는 3개의 정확히 부분으로 나뉜다. 1. 'mousedown' 2. 'mousemove' 3. 'mouseup' 'mousedown' 이 발생했을시, 'mousemove' 와 'mouseup' 의 eventListener 가 등록되어야하며, 'mouseup' 리스너는 결과적으로 'mousemove' 와 자기자신에 대한 listener 를 제거해야한다. 이 listener 의 추가와 제거는 동일한 콜백함수의 reference 로 이루어진다. 절대 익명 함수로 작성하지말고, 독립된 변수를 만들어 함수객체를 생성후, 인자로 넘겨야한다. const mouseDown = (x, y) => { const mouseMove = (e) => { // Do something in Move (a.k...

위와 같이 font-size 를 변경했음에도, 크롬의 font 가 변경되지않았다. 원인은 크롬 확장팩이었다. 이것때문에 몇시간을 소비하여, 너무 열받아 글을 남겨놓으려한다. 어떤 확장팩이 뒤에서 !important 를 겁나게 달아서, 지맘대로 style 태그를 날리고있었다... 리액트로 개발할때, 크롬 확장팩은 설치하지않는것이 좋다 !!! 혹시 내가 CSS 를 먹이지않았음에도, 자동으로 버튼이 스타일링되거나 했다면, 무조건 크롬 확장팩이 뒤에서 style 태그를 js 로 쏴주고있어서, 크롬 개발툴로 들어가 추적해서 찾아내야한다.. 왜 이 이야기를 하냐면... dark reader 와 같은 CSS 를 변경해주는 확장팩이 아닌.... 다른 용도의 확장팩임에도 style 태그를 뒤에서 지맘대로 쏴준다는것이다...