티스토리

수박수의 블로그

검색하기

블로그 홈

수박수의 블로그

watermelonlike.tistory.com/m

수박수박좋다 님의 블로그입니다.

구독자: 5

방명록 방문하기

주요 글 목록

ubuntu driver설치 그래픽드라이버 자동설치sudo add-apt-repository ppa:graphics-drivers/ppasudo apt update 공감수 0 댓글수 0 2024. 5. 13.
tsconfig.json Why ? spa 등에서 지원할 수 있는 라이브러리를 만들기 위해 ts파일로 코드를 짜던 중 js에서 테스트해보기 위해 트랜스파일링해서 html에 import했지만 exports를 찾을 수 없다는 에러를 직면함; 전역에 없는 exports에다가 내보내려했기에 문제가 있었음. 트랜스파일링을 하는데 tsc명령어가 참조하는 json이 일단 nextjs앱꺼를 참조하고 있어서 commonjs방식으로 바꿔주고 있었음. tsconfig옵션 중 esModuleInterop이라는게 commonjs로 가져올 수 있게 해주는 거라 문제가 되었음. 변환시 변환하는녀석이 참조하는 config파일을 잘 확인해야함 ! 모듈방식에 대해 더 깊이 알고 있어야함 ! 당장 문제없다고 설정파일에 이것저것 껴넣는건 반드시 지양해야함 ! ht.. 공감수 0 댓글수 0 2023. 11. 16.
모듈 (cjs, mjs ?) 모듈 스크립트 기능과 양이 복잡해지자 모듈단위로 분리하는 방법이 필요해짐. 그 중하나로 CommonJS가 있음. 모듈은 단지 파일 하나에 불과함. 1스크립트 === 1모듈 js에서 모듈은 표준이 없어서 AMD니 commonjs니 등등 있었는데 ESM이 표준이 되었다. commonjs (CJS) Node.js용 js코드를 패키징하는 original 방식. 모듈을 동기적으로 로드, 내보내기 위해 require, module.exports 키워드 제공 동기방식이므로 모듈이 완전로드되기 전까지 코드실행이 차단됨 초기부터 사용되었기에 esm방식대신 대부분 node기반 라이브러리는 이 방식을 사용하고 있다. (ESM의 확대로 앞으로 점차 줄어갈듯) 모듈은 module-wrapper이라는 함수로 감싸져서 실행되는데,.. 공감수 1 댓글수 1 2023. 6. 28.
브라우저에서 대용량 파일 block없이 읽기 브라우저에서 대용량 파일 block없이 읽기 String으로 되어있는 파일을 읽기 위해서는 브라우저의 메모리에 올려야한다. 용량이 큰 파일은 전체를 올리는게 한계가 있다. 전체 파일을 한번에 읽지않고 chunk로 쪼개어 2gb가 넘는 파일을 브라우저에서 읽는 방법을 알아보자 이러한 작업이 필요했던 이유 사용자가 2gb가 넘는 소설파일을 업로드할 수 있다. 이 파일의 내용은 string으로 이루어져있고 각 챕터마다 @@@@라는 구분자가 존재한다고 해보자. 이 파일이 몇챕터로 이루어져있는지 알고싶다. 백엔드를 거쳐서 돌아오게 된다면 2gb파일을 업로드해야하므로 약 1분의 시간과 비용이 발생한다. 백엔드를 거친다해도 그 서버의 메모리를 2gb사용하는 것이므로 요청이 많아지면 서버에 부하가 올 것이다. 이를 브.. 공감수 0 댓글수 0 2022. 10. 28.
유저액션 중심의 컴포넌트 테스트를 위한 도구 testing library 유저액션 중심의 컴포넌트 테스트를 위한 도구 testing library Jest는 테스트러너로서 테스트를 돌리고 성공, 실패를 확인하거나 테스트에 대한 함수를 제공해주는데에 반면에 Testing library는 리액트 컴포넌트를 테스트하기위한 가상 DOM을 제공해준다. 이 둘은 각각 수행하는 역할이 다르다. 시작하기전에 읽어보면 좋은 포스팅 NHN 프론트엔드 테스트 초보자를 위한 React 어플리케이션 테스트 심층가이드(1) 초보자를 위한 React 어플리케이션 테스트 심층가이드(2) Testing Library Docs introduction, Guiding Principles 두 섹션 읽어보기 테스팅 원칙 유저가 페이지랑 인터렉션하는 방식과 매우 유사하게 테스트하는 것에 중점을 둔다. 컴포넌트 렌더.. 공감수 3 댓글수 1 2022. 9. 27.
MSW로 API 모킹 빠르고 쉽게 하기 설치 npm install msw --save-dev npx msw init --save 세팅 node환경에서 테스트하거나 browser에서 하기 위해서는 다음과 같은 세팅이 필요합니다. 작성해야하는 파일은 총 4개입니다. mock 하위에 다음의 4파일을 만들어주세요. browser.ts server.ts handlers.ts worker.ts 그리고 App에서 작성한 worker를 호출해오면 세팅이 끝납니다. 1. browser.ts import { setupWorker } from "msw"; import handlers from "./handlers"; // mocking될 response를 정의해놓는 곳 export const worker = setupWorker(...handlers); .. 공감수 0 댓글수 0 2022. 9. 24.
husky로 git hooks 빠르게 작성하기 git hooks 어떠한 이벤트가 발생했을 때 자동으로 스크립트를 실행할 수 있다. 예를 들어 commit 마다 lint체크를 하고 싶을 때 pre-commit 이라는 hook을 사용해 스크립트를 작성하면 된다. 종류 Git hooks의 종류 중 제가 사용할 것은 다음 두 가지입니다. pre-commit : 커밋할 때 가장 먼저 실행 prepare-commit-msg : 커밋메시지를 생성 후, 편집기 실행 전 실행 (커밋메시지를 지정하기 이전에 실행됨) - 커밋메시지를 자동으로 수정하고 싶을 때 사용 husky git hooks는 이미 레포지토리에 존재합니다. .git/hooks 에 스크립트들이 존재하죠. 이를 수정해서 사용해도 되지만 이렇게 수정되는 파일들은 git에 관리되지 않기에 따로 관리해야하는 .. 공감수 0 댓글수 0 2022. 9. 16.
React Query - useQuery useQuery useQuery로 요청한 API가 실패했다면 2번 더 보낸다. 모두 실패시 실패했다고 처리된다. const { data, isError, error, isLoading} = useQuery("posts", fetchPost); isError, isLoading 으로 요청에 대한 상태를 알 수 있다. error은 요청에 대한 에러메시지를 나타낸다. staleTime 데이터가 만료되기 전까지의 시간, 데이터 유효기간을 stale Time이라고 한다. stale data는 만료된 데이터 React Query는 데이터 fetching을 도와주는 라이브러리이다. 다시 가져오는 refetch도 수행해주는데 트리거는 다음과 같다. 컴포넌트 리마운트 윈도우 포커싱 예를들어 어떤 게시판을 키고서 요리를 .. 공감수 0 댓글수 0 2022. 9. 14.
요즘 핫한 React Query React Query Fetching, caching, synchronizing and updating server state 라이브러리 React Query Star : 8.4K SWR Start : 5.6K 왜 등장했지 ? 전통적인 상태관리 라이브러리는 client 상태를 다루는데는 좋았지만 async 또는 server 상태관리에는 좋지 않았다. Server 상태는 Client와는 매우 다르기 때문이다. client에서 제어할 수 없음 비동기 요청이 필요함 나도모르게 변경될 수 있음 최신결과를 가져오지 않으면 "오래된"상태로 남아있음 이러한 특징 때문에 하나의 store에서 둘의 상태를 관리하는 것은 쉽지 않았다. 또한 아래와 같은 것들을 해결해내기위해 엄청난 리소스가 투입이 되어야했다. 캐싱 - 구.. 공감수 1 댓글수 0 2022. 9. 14.
브라우저에서 대용량 파일 다루기 - 개념편 브라우저에서 파일 다루기 목적: 2gb이상의 파일을 브라우저에서 효율적으로 다루기 위한 방법을 알아보기 해당 포스팅이 다 게재되면 할 수 있는 것 - 수십, 수백메가 또는 기가단위의 파일을 읽으며 어떤 단어가 몇번 포함되는지를 백엔드 통신없이 오로지 클라이언트에서만 수행할 수 있다. - 대용량파일을 읽는 많은 연산을 하는 동안 브라우저가 Block되지않게 해당 연산을 백그라운드에서 처리할 수 있다. 0. 들어가기 전 보면 좋을 개념들 버퍼메모리 0.1 버퍼메모리 주기억장치 주변장치 위 둘간의 사이에서 정보가 오갈 때 임시로 기억해두고 사용할 수 있는 공간 둘 간의 처리속도가 차이가 날 때 데이터 유실이 있을 수 있으므로 유실을 없애기 위해 데이터를 일시적으로 보관하는 곳 1. File File은 Blob.. 공감수 1 댓글수 0 2022. 7. 22.
한 컴퓨터에서 여러 Git 계정 사용하기 with script 이 포스팅을 통해 토큰방식이 아닌 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에.. 공감수 1 댓글수 0 2022. 7. 21.
useLayoutEffect(2) SSR 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.. 공감수 0 댓글수 0 2022. 7. 10.
Emscripten으로 C++코드 JS로 포팅하기(2) - EMSCRIPTEN_BINDINGS 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.. 공감수 0 댓글수 0 2022. 7. 10.
Emscripten으로 C++코드 JS로 포팅하기(1) Emscripten으로 C++코드 JS로 포팅하기(1) Emscripten은 C 또는 C++, LLVM을 사용하는 다른 언어로 작성된 프로젝트들을 브라우저, 노드 또는 WASM 런타임에서 사용할 수 있도록 하는 컴파일러다 C, C++ -> JS로 변환시키는 툴 0. LLVM ? Swift를 개발한 사람(크리스 래트너)이 시작한 프로젝트 오픈소스 컴파일러, 툴체인 C, C++ 등 언어를 중간번역해서 여러 아키텍쳐에서 수행될 수 있도록 하는 컴파일러 1. 이해하기 emscripten은 웹어셈블리를 생성할 수 있다.(이걸 하기위한 포스팅이기도함) 웹어셈블리는 3D, 게임 등 브라우저 런타임 성능으로는 무리가 있는 것들을 브라우저에 넣기 위한 기술이다. 웹 어셈블리는 3가지 방법으로 개발할 수 있는데, 그중 하.. 공감수 0 댓글수 0 2022. 7. 10.
Image progressive load 사이즈가 수백, 수천kb에 육박하는 이미지를 보여줄 때 적절한 처리가 필요하다. 레이아웃이 그만큼 밀릴 수도 있고 n초동안 화면에 사진이 보여지지 않다가 깜빡하고 보여지는 경우는 이슈가 될 수 있다. 이를 피할 수 있는 방법 - 간단하고 짧다 좌(직접구현), 우(next 기능) - load속도엔 차이가 거의 없다. 문제 이미지가 로드되는데 한참 걸림 그동안 흰색화면이어서 있는지 없는지 모르겠음 인터넷속도가 요새 많이 빠르지만 다 빠른게 아님. 일시적으로 느릴 수 있고, 사양이 좋지 못할 경우도 영향을 받음. 이런 디테일을 고려해야함 다양한 방법으로 해결할 수 있다. 디바이스 사이즈에 맞게 이미지 조절 이미지가 뷰포트에 위치했을 때 load하도록 하기 (lazy load) 이미지 최적화(압축) progre.. 공감수 0 댓글수 0 2022. 6. 14.
Nextjs rewrites로 proxy 설정하기 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할 수 있다. 명시.. 공감수 0 댓글수 0 2022. 5. 25.
Todo//d3.js로 간트차트만들기 공감수 0 댓글수 0 2022. 5. 9.
TypeScript-component, hook npm에 배포하기 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.. 공감수 1 댓글수 1 2022. 4. 12.
Jest - 타 테스트 무시, 절대경로설정 문제 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.. 공감수 0 댓글수 0 2022. 3. 6.
storybook error in nextjs 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 모듈을 찾을 수 없다. .. 공감수 0 댓글수 0 2022. 2. 20.
React Clone element 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.. 공감수 1 댓글수 2 2022. 2. 1.
i18n nextjs 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.. 공감수 0 댓글수 0 2022. 1. 21.
useLayoutEffect UseEffect, useLayoutEffect useEffect layout, paint를 완료한 뒤 호출된다. 함수컴포넌트 호출 -> render문 반환 -> 배치 -> 그림 -> useEffect 호출 dep arr를 줬을 때 의존 상태의 변화가 있을 때마다 호출되므로 비동기요청에 대한 결과를 보여줄 때 깜빡 거림 3번째 항목인 깜빡거림을 경험하지 않도록 useLayoutEffect hook이 추가됨 이런거.. useLayoutEffect 그리기 이전에 func를 호출 함수컴포넌트 호출 -> render문 반환 -> 배치 -> useLayoutEffect 호출 -> 그림 effect와 문법도 같은데 생명주기에서 호출되는 시점에서 그리기 전(화면에 보이는 것)이냐, 보이고 나서 호출되냐의 차이점 필요.. 공감수 0 댓글수 0 2022. 1. 19.
Storybook + styled-component 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", ".... 공감수 0 댓글수 0 2022. 1. 10.
miragejs - fake server for nextjs mirage js fake server 라이브러리 install npm i mirage example code for app 베이스서버 세팅 /// server.js import { createServer, Model } from "miragejs"; export function makeServer({ environment = "test" } = {}) { let server = createServer({ environment, models: { movie: Model, }, seeds(server) { server.create("movie", { name: "Inception", year: 2010 }); server.create("movie", { name: "Interstellar", year: 2.. 공감수 1 댓글수 0 2021. 12. 22.
Vue.js란, Angular를 가볍게 쓰고 싶어 만든 Front-end Framework Angular의 데이터 바인딩 특성 + React의 가상DOM기반 렌더링 특징을 갖음 특징 Angular와 Vue는 데이터가 양방향 바인딩되어있어 컴포넌트끼리 데이터를 공유할 수 있음 Vue는 컴포넌트 간 단방향 데이터 흐름을 따른다. MVVM패턴을 따르는 UI 라이브러리 Model - View - View Model - Model로 구조화하여 개발하는 방식 화면 요소들을 제어하는 코드와 데이터 제어 로직을 분리해 직관적, 유지보수가 편하게 할 수 있음 1. 데이터 바인딩 ? 데이터 바인딩은 화면에 보이는 데이터와 브라우저 메모리(js파일 내의 객체같은 값)을 일치시키는 것을 말한다. 1.1. 양방향 데이터 바인딩 화면에서 데이터.. 공감수 0 댓글수 0 2021. 10. 21.
LightHouse LightHouse 과제를 수행하며 해결해나간 항목들을 정리해둔 것 웹 페이지 품질 개선할 수 있는 자동화도구 Chrome의 개발자도구 탭에서 사용가능 npm으로 설치해서 사용가능 Lighthouse에서 측정하는 지표는 실제 사용자의 사이트 경험을 이해하고 개선하는데에 중요하다. Lighthouse으로 미리 측정하여 확인하면 이런 해프닝을 방지할 수 있다. 다음은 Lighthouse에서 측정해주는 UX를 높이는데에 필요한 지표들을 알아보자. 성능측정 지표 Lighthouse는 Mertics(척도)로 다음 6가지를 측정한다. 이 성능값들은 절대적인 수치가 아니다. 컴퓨터의 퍼포먼스나 익스텐션들로 인한 네트워크 요청들, 바이러스 소프트웨어 등등에 의해 영향을 미칠 수 있다. 각 지표는 가중치를 매겨 전체 점.. 공감수 1 댓글수 0 2021. 10. 4.
백준 2470 G5 두용액 (투포인터) 문제출처 생각 0에 가까운 두 수의 합을 구해 각 수를 구하는 문제 주어진 리스트를 오름차순으로 정렬한 다음 양 끝에서 투포인터로 계산한다. 0에 가까운 값을 찾는 것이므로 두 수의 합을 절대값으로 변환하여 최소값을 찾는다. 코드 import sys N = int(input()) min_val = sys.maxsize lst = list(map(int, input().split())) lst.sort() start = 0 end = len(lst) - 1 al = 0 san = 0 while start < end: part_sum = lst[start] + lst[end] if abs(part_sum) < min_val: al = lst[start] san = lst[end] min_val = abs(p.. 공감수 0 댓글수 0 2021. 9. 26.
백준 1806 부분합 G4 문제출처 생각 전형적인 투포인터 문제라고 한다. 투포인터란 N개의 리스트를 순회할 두개의 포인터위치를 기록하며 처리하는 알고리즘이다. 정렬되어있는 문제는 보통 이진탐색으로 답을 구하지만 투포인터로도 적용할 수 있다. 핵심은 다음과 같다. start, end의 포인터를 첫 시작점으로 잡아놓고 찾아야하는 기준점(부분합)을 계속 더해나간다. 만약 기준보다 더해진 값이 작다면 end를 오른쪽으로 이동시킨다. 기준보다 커지면 반복문을 탈출하고 찾아야하는 기준에 부합하는지 확인한다. 그리고 start를 오른쪽으로 한칸 옮기며 반복을 이어나간다. 시간복잡도는 start는 0 ~ N까지 순회하기에 O(N)이고 end도 마찬가지로 0 ~ N까지 돌기에 O(N)이다. 결론은 O(N)의 시간복잡도를 갖는다. 문제에서 부합하.. 공감수 0 댓글수 0 2021. 9. 26.
프로그래머스 행렬테두리 (구현) lv2 문제출처 생각 처음에 완전 복잡하게 생각했다. 상하좌우로 나누어서 각각 시작점, 끝점을 구해서 상, 하는 n크기로, 좌, 우는 m크기로 쪼개고 바뀔 2차원 배열의 전체를 갈아끼우는 방식으로 접근했는데 너무 복잡해지고 코드도 난해해졌다. 한칸씩 밀고 내리기만 하면 되므로 좌상단의 값을 기억해두었다가 왼쪽 열을 위로올리고 아랫 행을 왼쪽으로 당기고 우측 열을 아래로 내리고 마지막으로 최상단 행을 오른쪽으로 미는 식으로 구현하면 해결할 수 있었다. 코드 const makeMatrix = (rows, columns) => { let matrix = [] for (let i = 0; i < rows; i++){ matrix.push([]); } let num = 1; for (let i = 0; i < rows .. 공감수 0 댓글수 0 2021. 9. 24.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.