거의 알고리즘 일기장

아니! 있기는 있다 미칠듯한 무빙으로 사기꾼을 피하면 되는 방법이 유일하다. 근데 내가 좋아하는 유튜버가 괜찮은 어플을 소개해줘서 한번 서비스를 이용해보았는데, 괜찮은거 같아서 글을 쓴다. 내돈내산이다.. ㅋㅋ https://www.youtube.com/watch?v=t7p1YYmVeik&t=69s https://www.naezipscan.com/?utm_source=youtube&utm_medium=influencer&utm_campaign=naezipscan_1 내집스캔 전세사기 예방 일등공신 내집스캔 www.naezipscan.com 소개할 서비스는 내집스캔이라는 서비스이다. 한건당 약 8천 ~ 1만원 내외인거 같은데, 해볼만하다고 느꼈다. 한번 내가 살고있는집을 체크 해봤다. 그리고 서비스를 이용..

git의 오픈소스들을 항해하다 issue를 찾아 등록하려고 보면 아래의 사진과 같이 issue template 들이 구비되어 있는 경우가 있다. 우리의 프로젝트에서는 어떻게 추가할까? 방법 가이드 문서를 한번 봐보자 정리하면 1. github 로그인한다. 2. issue template을 만들고 싶은 repository로 간다. 3. Setting button을 누른다. 4. 그러다 보면, Feature 라는 타이틀의 섹션이 존재하는데 거기서 issues의 Set up templates 를 누른다. 5. 하단의 화면이 달랑뜨는데 중앙의 select box를 클릭하면 대충 감온다. 예시로 Bug report를 만들어보자 6. 예시로 만들어졌다. 이걸 수정해도되고 그냥 써도 된다. 꿀팁 우리가 이걸 만들 필..

react에서 prop을 다 넘겨주는 일은 상상이상으로 번거롭다. 이때, react의 context를 사용하면, prop drilling 없이도 컴포넌트 트리 전체에서 데이터를 가져다 쓸수있다. 그런데 이제는 이런 문제?가 생긴다. 자식1은 a데이터만 쓰고 자식2는 b데이터만 쓴다고 가정하자. 이때, a데이터가 변경되었는데, 자식1뿐만이아니라 자식2도 리랜더링 된다. 지금 우리의 프로덕트의 규모가 큰편이라 성능 최적화 관점에서 이 상황에서 자식 1만 리랜더링 되었으면 좋겠다. 어떻게 할까? 방법 1. context를 나눈다. a와 b가 현재 하나의 context인데 이걸 두개로 나눈다. 간단하쥬?? 그럼 context를 저렇게 손수 하나하나 만들어야 하나요??.. 이런 불편한 부분은 당연히 자동화 한 ..

원래 배포환경에 따라 달라지는게 없는 프로덕트를 수정할 일이 생겼다. cra의 내장된 .env 파일 사용시의 제약 이 수정사항 중 배포환경(dev or prod)에 따라서 환경변수가 몇개 바뀌어야 하는 상황이었는데, cra 환경에서는 이런식으로 .env.* 이런식으로 파일을 나눠서 환경변수를 관리할수 있다. 근데, 이러한 제약이 존재한다. /... this feature is available with react-scripts@1.0.0 and higher. (웬만한 프로젝트는 react-scripts1.0.0 버전상위다.) // -> 이 순서로 우선순위가 있다. npm start: .env.development.local, .env.local, .env.development, .env npm run ..

이번에는 눈효과에 이어 유성효과이다. 유성효과는 https://kunkunwoo.tistory.com/295 html canvas + ts로 눈효과 만들기 예전에 재밌게 했던 html canvas와 바닐라 js 를 이용해 효과들을 만든 기억이 떠올라 다시 만들어보았다. 워밍업으로 간단한 눈효과를 만들어보았다. 데모 세팅 vite, ts, pure css 사용 자세한 내용은 kunkunwoo.tistory.com 이 눈효과에서 조금만 바꾸면 된다. 1. 유성처럼 보이려면 일단 유성에는 꼬리가 있다. 2. 유성 대가리가 꼬리보다 밝다. (꼬리로 갈수록 서서히 색이 옅어지는 구조) 3. 안보이면 다시 재활용한다 (안보이면 -> init function 실행하여 새로나오는것처럼 구현, 음.. 약간 구현사항이 다..

예전에 재밌게 했던 html canvas와 바닐라 js 를 이용해 효과들을 만든 기억이 떠올라 다시 만들어보았다. 워밍업으로 간단한 눈효과를 만들어보았다. 처음 막상 하려고 하면 어떻게 하지 막막할수도 있지만, 구현사항은 간단하다! 눈 class를 만든다. 눈 클래스에서 협력할 기능은 다음과 같다. 1. requestAnimationFrame function에 실행할 draw function을 만든다.(눈그림을 그릴) (draw) 2.resize시에 동작할 function을 만든다. (resize가 되면 stageWidth, stageHeight가 바뀜으로) (init) 내부 function은 다음과 같다. 1. 그리기 전에 위치를 업데이트 해주어야 눈이 내리는것처럼 될것이다. 그러므로 위치 update..

요즘에는 vscode, intellij의 git 관련 plugin들이나 source tree같은 도구들이 엄청 좋아져서 command line에서 사용하는 일이 많지는 않을것이다. 하지만, 개인적으로는 user interface기반은 너무 자주 위치가 바뀌어 간단한 기능들은 명령어를 알고있으면 일이 편해지므로 아는게 좋다. 이번글에는 내가 일하면서 개인적으로 자주쓰는 command line에서 사용하면 좋을 명령어 모음들을 준비해보았다. 1. git add //변경사항 전부 add git add . //특정 파일만 add git add src/intro/index.ts 2. git commit //변경사항을 새로운 커밋으로 만들기 git commit //지금 현재 커밋 덮어쓰기 git commit --a..

상황 vite 사용시 multi page application을 만들고 싶을때, build할때에 대한 세팅은 공홈에 존재한다. https://vitejs.dev/guide/build.html#multi-page-app Vite Next Generation Frontend Tooling vitejs.dev 그리고 제대로 동작함을 테스트해보았다! 근데 dev서버일때의 대한 문서는 아무리 봐도 존재하지 않는다. 어떻게 할까?? 서칭 다행히 관련 issue를 금방 찾을수 있었다. https://github.com/vitejs/vite/issues/2958#issuecomment-1065810046 `transformIndexHtml` hook gets the wrong html filepath when runn..

만약 apple silicon이 들어간 컴퓨터가 아니라면, 여기서 node버전에 따른 지원정보를 확인하시면 거의 해결 가능합니다! 문제 node-sass는 apple silicon 이 들어간 노트북을 쓰는 경우 지원하지 않는 이슈 가 존재합니다. 환경 arch: apple silicon arm64 os: ventura nvm 이용, 테스트해본 node 버전 (14.19.2, 14.19.1, 14.21.2) node-sass 4.14+ < 5 관련 에러 테스트 해봤을때는 node 버전마다 나오는 에러 로그가 조금씩 달랐는데, 다음과 같습니다. force 옵션으로 깔고 npm run start 시에야 제대로된 로그가 나옵니다. python 관련 에러 로그 (npm i) gyp ERR! stack Error:..

nextjs 초심자 권모씨 평소와 같이 zustand persist를 사용하던중 content mismatch 문제가 발생하는데... 이게 어떻게 된일일까?? 사건의 전말은 이렇다! //... const Mismatch = () => { const user = useUser(); return {user?.name ?? 'user is null'}; }; 얼핏보면 문제가 없어보인다. 하지만, 피해자는 이 코드의 환경이 nextjs 라는 사실을 간과했다!! 문제는 store hydrate가 되는 지점이다!! html -> store hydrate -> react rehydrate 이런식으로 store hydrate가 react의 rehydrate 되기 직전에 된다!! 이게 왜 문제가 되는지는 react do..