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 모듈을 찾을 수 없다. ..
cloneElement() React.cloneElement( element, [config], [...children] ) 새로운 element를 복사하여 반환하는 func config는 key, ref를 포함한 모든 props를 담음 결과 element는 원본 element의 prop과 새로 추가된 props을 합친 요소다 새로운 children역시 기존 children을 대체하는 새로운 요소가 된다 원본의 key, ref는 config에 새로운 prop이 없다면 유지된다. import React from "react"; import "./styles.css"; const Parent = ({ children, anotherProps }) => { const parentsVar = "Tired"; r..
i18n setting with Next 다국어 설정을 위한 Setting 설치 npm i next-i18next 필요한 설정파일 next.config.js const { i18n } = require("./next-i18next.config"); module.exports = { i18n, }; next-i18next.config.js const path = require("path"); module.exports = { i18n: { locales: ["en", "ko"], defaultLocale: "ko", }, }; public/locales en/[file].json ko/[file].json Wrap app component import { appWithTranslation } from "n..
UseEffect, useLayoutEffect useEffect layout, paint를 완료한 뒤 호출된다. 함수컴포넌트 호출 -> render문 반환 -> 배치 -> 그림 -> useEffect 호출 dep arr를 줬을 때 의존 상태의 변화가 있을 때마다 호출되므로 비동기요청에 대한 결과를 보여줄 때 깜빡 거림 3번째 항목인 깜빡거림을 경험하지 않도록 useLayoutEffect hook이 추가됨 이런거.. useLayoutEffect 그리기 이전에 func를 호출 함수컴포넌트 호출 -> render문 반환 -> 배치 -> useLayoutEffect 호출 -> 그림 effect와 문법도 같은데 생명주기에서 호출되는 시점에서 그리기 전(화면에 보이는 것)이냐, 보이고 나서 호출되냐의 차이점 필요..
settings about styled-component - styled-components storybook 사용은 npx로 설치하고 npm run 으로 돌리면 바로 수행되지만 styled-component의 props을 사용하려고 할 때 에러 발생 -> ThemeProvider를 감싸주는 데코레이터가 없기 때문 또한 엄청난 에러라인이 발생하는데 절대경로 설정해주지 않아서 나는거 임 "거의" 절대경로 //main.js const path = require("path"); module.exports = { stories: [ //.stories를 읽을 경로도 잘 지정해주어야 한다. default에 있는 폴더 외에 스토리를 작성할 때 변경 "../components/**/*.stories.mdx", "....
- Total
- Today
- Yesterday