이 포스팅을 통해 토큰방식이 아닌 SSH를 이용해 github를 이용해 한 컴퓨터에서 여러 git 계정을 사용할 수 있습니다 SSH Key를 생성하고 Github에 등록해줍니다. 자세한 사항은 참고링크에 자세히 기술되어있습니다. SSH키 생성, github 등록 먼저 SSH Key를 터미널에서 다음의 명령어로 작성해줍니다. 식별자는 이후 작업에 필요한 것이므로 회사면 work, 본인의 계정이면 own 등 식별할 수 있는 간단한 단어로 지정해주세요. 사용해보니까 간단한게 좋습니다. ssh-keygen -t rsa -C "사용자메일@gmail.com" -f "식별자" eg) ssh-keygen -t rsa -C "lia@gmail.com" -f "my" key생성이 완료되었다면 생성한 Key를 github에..
Lifecycle 컴포넌트가 render된 후 실행됨 useEffect와 다르게 동기적으로 실행 동기적으로 실행되기 때문에 로직이 클 경우 그만큼 화면에 보여지는 시간이 오래걸리게 되므로 간단한 로직들만 넣어서 사용한다. SSR일 때 useEffect, useLayoutEffect 둘 다 JS가 다운로드된 이후에 수행된다는 것을 명심하자 react가 warning을 주는 이유가 이 때문이다. useLayoutEffect를 사용하면 마주하는 warning ⚠️ Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer’s output format. This wi..
Emscripten으로 C++코드 JS로 포팅하기(2) - EMSCRIPTEN_BINDINGS, RDKit c++로 작성된 라이브러리 코드를 emscripten을 통해 js로 사용할 수 있게 한다. rdkit이라는 C++로 작성된 라이브러리를 emscripten을 통해 js+wasm으로 포팅되어 사용하고 있으나 누락된 함수들이 있어 이를 추가해 사용해보고자 함. 사전준비 docker 이미지 생성 및 로컬 build script Code/MinimalLib/scripts/build_rdkitjs.sh 에서 빌드스크립트가 MinimalLib의 도커파일을 실행하여 둘 중 아무거나 실행해도 됨 DOCKER_BUILDKIT=1 docker build --platform linux/amd64 -o $MINIMALL..
Emscripten으로 C++코드 JS로 포팅하기(1) Emscripten은 C 또는 C++, LLVM을 사용하는 다른 언어로 작성된 프로젝트들을 브라우저, 노드 또는 WASM 런타임에서 사용할 수 있도록 하는 컴파일러다 C, C++ -> JS로 변환시키는 툴 0. LLVM ? Swift를 개발한 사람(크리스 래트너)이 시작한 프로젝트 오픈소스 컴파일러, 툴체인 C, C++ 등 언어를 중간번역해서 여러 아키텍쳐에서 수행될 수 있도록 하는 컴파일러 1. 이해하기 emscripten은 웹어셈블리를 생성할 수 있다.(이걸 하기위한 포스팅이기도함) 웹어셈블리는 3D, 게임 등 브라우저 런타임 성능으로는 무리가 있는 것들을 브라우저에 넣기 위한 기술이다. 웹 어셈블리는 3가지 방법으로 개발할 수 있는데, 그중 하..
사이즈가 수백, 수천kb에 육박하는 이미지를 보여줄 때 적절한 처리가 필요하다. 레이아웃이 그만큼 밀릴 수도 있고 n초동안 화면에 사진이 보여지지 않다가 깜빡하고 보여지는 경우는 이슈가 될 수 있다. 이를 피할 수 있는 방법 - 간단하고 짧다 좌(직접구현), 우(next 기능) - load속도엔 차이가 거의 없다. 문제 이미지가 로드되는데 한참 걸림 그동안 흰색화면이어서 있는지 없는지 모르겠음 인터넷속도가 요새 많이 빠르지만 다 빠른게 아님. 일시적으로 느릴 수 있고, 사양이 좋지 못할 경우도 영향을 받음. 이런 디테일을 고려해야함 다양한 방법으로 해결할 수 있다. 디바이스 사이즈에 맞게 이미지 조절 이미지가 뷰포트에 위치했을 때 load하도록 하기 (lazy load) 이미지 최적화(압축) progre..
Rewrites request Path를 다른 destination path로 매핑시켜주는 것 클라이언트사이드에서 프록시요청이 필요할 때 react-proxy 이런거 대신 사용하기 위한 옵션 Case 1. Request URL에 숨기고 싶은 정보가 있을 때, 블로그에 가장 많이 소개되는 예제인데 API Key를 request url param으로 같이 던지는 경우가 있는데 이를 브라우저단에서 표시하지 않게하기 위해 사용한다. Case 2. COR proxy 도메인이 다른 서버로부터 Set 쿠키도 되는지는 확인이 안되는데, 예제가 있는 것으로 보아 ,, 백엔드에서 응답하는 응답 헤더의 Set-Cookie 은 domain 이라는 속성을 갖는데, 여기에 기술된 도메인의 요청에만 쿠키를 set할 수 있다. 명시..
TypeScript-component, hook npm에 배포하기 최근 반응형 pagination component와 hook을 작성했다. 이 둘을 npm에 배포해놓고 싶었다.(최근 package관련해서 경각심을 느끼게된 계기도 있고해서,, 겸사겸사) npm에 배포하기 전 해야할 것 먼저 npm계정이 있어야한다. npm login으로 로그인해야한다. package.json 에 배포관련 스크립트, 정보를 추가해야한다. tsconfig.json 에 빌드관련 정보를 추가해야한다. package.json { "name":"배포할 패키지 명을 작성한다.", "main":"dist/index.js", "types":"dist/index.d.ts", "version":"0.0.1" //시맨틱버저닝을 따른다, "des..
문제 Jest 테스트시 cypress의 test scripts를 실행 Jest 테스트파일에서 import한 파일들이 절대경로로 import하는 또 다른 파일들을 읽을 수 없어 cannot find module 이슈가 발생 //jest.test.ts import { add } from "../utils/func"; // accept //utils/func.ts import { type } from "components/Navbar"; //cannot find module 원인 jest.config.js 설정에 cypress를 제외하는 설정이 없음 절대경로 설정이 없었음 해결 //jest.config.js { //...other options testPathIgnorePatterns: [ "/node_mod..
fs error in storybook 발생 npm run storybook 실행 시 Module not found: Error: Can't resolve 'components/SomeComponent' in '/Users/css/Desktop/Project/styles' 등 module 에러 발생 ModuleNotFoundError: Module not found: Error: Can't resolve 'fs' in '/Users/css/Desktop/Project/node_modules/next-i18next/dist/esm/config' - fs module 참조에[러 runtime에 fileSystem 모듈을 찾을 수 없다. ..
- Total
- Today
- Yesterday