혜원의 개발노트

해결책const testError = new Error("this is Error");JSON.stringify(testError, Object.getOwnPropertyNames(testError)) 아래 내용은 위의 해결책 코드가 어떻게 동작하는지에 대한 정리입니다.해결책만 원하신다면 위에있는코드를 참고하시면됩니당~상황try~ catch구문을 사용할때 catch의 인자로 넘어오는 error 객체를 stringify해서 다른 페이지로 전달해줘야했는데,JSON.stringify()에 error 객체를 넘겨주면 빈 객체가 출력됨 일단 console 창에서 error 객체의 출력을  테스트해봤다const testError = new Error("this is Error"); 해당 에러 객체가 있을때1. co..

프론트업계에서 유명하신분인 jbee님의 깃헙을 들어가보면 아래의 명령어만 적혀있다. 이 명령어를 터미널에 쳐보니 깃헙링크, 블로그링크가 나왔다. 넘 신기...! 그래서 나도 나를 소개할수있는 cli 명령어를 만들어보려고한다! npx dohye1 요즘 넘 바빠서 개인공부를 거의 못했는데, 이번주는 여유가 생겨서 후딱 만들어볼거임!! 방법을 정리하면서 만들어보겠다 1. 참고자료를 찾아보기 사실 나는 리액트 프로젝트 보일러 플레이트를 설치할때도 npx create-react-app ~ 이런식으로 명령어를 입력했었는데, 그냥 별생각없이 터미널에 따라쳤었을뿐 막상 만들려고하니 어떤 키워드로 구글링해야할지 감이 잘 안잡혔다..ㅠㅜ 그래도 npx 명령어만들기, how to make npx command 뭐 이런식으로..

위 에러가 발생한 프로젝트에서 사용하는 react, @types/react의 버전은 아래와 같다. "react": "^18.2.0", "@types/react": "^18.0.31", 나는 react-datepicker를 설치해야해서 react-datepicker, @types/react-datepicker 를 설치하고, 컴포넌트에서 아래처럼 사용해보니 type '{}' is not assignable to type 'reactnode' 위와 같은 에러가 났다. import DatePicker from 'react-datepicker'; setStartDate(date)} startOpen={showDatePicker} onClickOutside={() => setShowDatePicker(false)}..

또잉 이건무슨에러지...? 우선 stack trace를 읽어보면 react-select와 관련이있는듯하다! 또잉 https://weev.media/article/359 Prop `id` did not match. Server: "react-select-17-live-region" Client: "react-select-3-live-region"の原因と対処法 React Selectを実装しようとしたらコンソールでProp id did not match.とエラーが出ていました。今回はその対処法をまとめていきます。 目次1 エラー内容1.1 コード例（修 weev.media 나랑 똑같은 에러메시지로 검색을해보니 이런 글이 있다! 여기서말하는해결책은 Select컴포넌트에 id와 instanceId를 추가하라는것이다!! id는 ..

remix, next등 여러 프레임워크들에 관한 아티클이나 영상을 보면서 메타프레임워크라는 키워드를 종종 봤었다. 그래서 메타프레임워크에 대해 구글링을 하던 중 내가 찾던 답이 잘 정리되어있는 글을 발견해서 정리를 해보려고 한다. https://www.ombulabs.com/blog/javascript/what-is-a-javascript-meta-framework.html What Is a JavaScript Meta-Framework? - The Lean Software Boutique No, not that Meta What most developers call JavaScript frameworks (React, Vue, Svelte, etc) can more accurately be though..

우리 팀에서는 Storybook의 변경사항이 포함된 PR을 생성하면, Chromatic에서 UI Review를 진행하기위해 Storybook을 Chromatic에 배포를 한다. 이 작업을 자동화해놨기때문에, PR이 생성되면 github action이 자동으로 실행되어서 알아서 배포를 해준다. 그런데 한 PR을 올렸는데, chromatic에 배포하는 스크립트에서 에러가 났다. 에러가 발생한 부분을 보니 Pass --allow-console-errors to succeed this command regardless of runtime build errors. 위와같은 설명이 적혀있었다. 구글에 검색을 해봄 https://github.com/chromaui/chromatic-cli/issues/156 Capt..

타입스크립트로 짝수 또는 홀수에 대한 타입을 만들어보는 방법을 찾아보다가 기록하면 좋을것같아서 포스팅해봄 일단 처음엔 어떻게 접근해야할지 감이 잘 안와서 구글에 찾아봄 https://dev.to/tylim88/typescript-odd-number-type-1fj Typescript Odd Number Type Most people: No, you cannot create an odd number type with Typescript Meanwhile me: type... dev.to 그러다가 위 블로그를 보게되었당! Acid Coder선생님 감사합니다ㅜㅠㅜ흐릏그ㅡ 홀수 타입 type OddNumber< X extends number, Y extends unknown[] = [1], Z extends n..

Intersection Observer를 사용해서 무한 스크롤 예시를 만들어보자! Using 1. CRA with typescript 2. react-query 3. randomstring 간단하게 만들어보겠다. 먼저 react-query 사용환경 설정해주기 최상단 컴포넌트에서 QueryClientProvider로 감싸줘야한다. 나는 App.tsx에서 적용해줌 import { QueryClient, QueryClientProvider } from "react-query"; import List from "./List"; const client = new QueryClient(); function App() { return ( ); } export default App; 그리고 데이터를 생성해줄 함수를 간..

회사 프로젝트를 진행하면서 무한스크롤 구현할때 Intersection oberver를 사용해서 구현했다. 그런데 무한스크롤을 구현하는 예시를 보고 참고한거라, 정확한 동작방식에 대한 이해없이 무작정 사용했었기때문에 한번 정리를 해보고자 한다. Intersection Observer 란? 타겟 요소와 상위 요소 또는 최상위 document의 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법이다. Intersection Observer는 그들이 감시하고자하는 요소(target)가 다른요소(root)에 들어가거나 나갈때 또는 요청한 부분만큼 두 요소의 교차부분이 변경될때마다 실행될 콜백함수를 등록할 수 있게 한다. 정확히 몇 픽셀이 겹쳐졌는지는 감지할 수 없고, 몇퍼센트정도..

후우...일주일만에 React native 프로젝트를 실행시켜보니 켜지질 않고, 타이틀에 보여지는 에러메시지가 찍힌다. 일주일동안 내가 무엇을했길래 안켜지는것인가...,, 에러 메시지를 구글링해보다가 아래 방법을 찾았다! cd into YOUR_PROJECT/ios and rm -r build, then run again react-native run-ios https://stackoverflow.com/questions/43949607/no-bundle-url-present-react-native