목록web (40)
거의 알고리즘 일기장
최근에 회사에서 따로 관리하던 프로젝트 repo를 monorepo에 넣기로 결정이 되어 해당 작업을 맡아 하게 되었다. 그래서 오늘 작성할 주제는 monorepo 마이그레이션 중 git history 유지를 하는 방법이다. 디렉토리 구조는 turbo repo의 구조로 가정한다. 상황 및 조건 monorepo repo, proj-b repo 따로 따로 있다고 가정한다. 1. 현재 이러한 구조의 monorepo 가 있다. 2. proj-b를 monorepo에 추가하고 싶다. (app directory 안에) 3. git history는 유지된 상태여야 한다. 계획 1. proj-b 를 그대로 monorepo에 merge를 때리면 root에 있는 설정파일과 겹치기 때문에 conflict 난다. 2. proj-..
에러코드 Using SSH Config Dir '/home/circleci/.ssh' git version 2.34.1 Cloning git repository Cloning into '.'... Warning: Permanently added the ECDSA host key for IP address '140.82.114.4' to the list of known hosts. ERROR: Repository not found. fatal: Could not read from remote repository. Please make sure you have the correct access rights and the repository exists. exit status 128 상황 - ssh key는 ..
https://kunkunwoo.tistory.com/307 React Native를 이용한 사이드 프로젝트 만들기 -8. 오랜만의 수정 또 수정 (with 오늘의 그림일기) 예전에 만든 그림일기라는 프로젝트가 있었다. rn 시작할때 만든 프로젝트였는데, 최근에 기억이 나 들어가보니 생각보다 사람들이 써줘서 약 1년? 만에 조금 손보았다. https://kunkunwoo.tistory.com/253 kunkunwoo.tistory.com 최근 오늘의 그림일기라는 프로젝트를 리뉴얼하면서 기존의 webview를 이용한 raster drawing 방식에서 svg drawing 방식으로 바꾸었다. react-native-draw라는 모듈을 이용하였는데, 몇몇 문제가 있어 모듈을 살펴볼 일이 좀 있었다. 살펴보다..
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..