혜원의 개발노트

해결책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..

- 그래프란 상호 연관된 사물이나 사람, 개념 또는 데이터를 다이어그램으로 표현할 수 있는 훌륭한 방법이다 그래프 이론 어휘 - 그래프는 상호 연관 관계에 놓여있는 객체 집합을 표현할 때 널리 사용한다. - 데이터 포인트객체와 이들 사이의 관계를 그래프라고 생각하면된다. (데이터포인트란 데이터 집합내의 개별적인 요소로 구분지을수있는 것) - 해당 다이어그램은 6개의 데이터포인트로 구성되어있다. 각 점은 node 또는 vertex라고 부른다. - 노드사이의 연결선은 edge라고 한다. 그래프를 방정식으로 표현하면 G = (V, E)이다. G는 그래프, V는 노드의 집합이다. vertices = {1,2,3,4,5,6} E 는 edge의 집합이다. edges = {{1,2},{1,5},{2,3},{2,5},..

[전자책] 웹 앱 API 개발을 위한 GraphQL 혁신적인 데이터 페치 기술이 된 GraphQL에 관한 실용적인 안내서로서 자바스크립트로 GraphQL 서비스를 구현하는 방법을 다룬다. 웹 서비스 아키텍처를 자체적으로 구성할 수 있는 GraphQL의 장점과 www.aladin.co.kr 🚨 해당 영역에 쓴 코멘트는 개인적인 의견입니다. - 클라이언트의 종류는 예전보다 다양해졌는데, 데이터 전송속도는 아직 해결해야할 과제이다. Graphql이란? - API를 만들때 사용할 수 있는 쿼리언어이다. - 쿼리에 대한 데이터를 받을 수 있는 런타임 - graphql 쿼리는 실제로 필요한 데이터만 받도록 작성할 수 있다. 이건 근데 서버쪽에서도 데이터를 넘겨줄수있는 구조를 만들어야하는걸로 알고있다. graphql..

프론트업계에서 유명하신분인 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)}..

오랜만에 글을쓰는군요~~ 오늘은 프론트엔드 이력서&포폴 작성시 고려할 점들에 대해 적어보겠습니다 최근에 프론트엔드팀원을 뽑기위해 구인공고를 올렸는데 생각보다 많은 분들이 지원을 해주셨다. 프론트엔드 신입을 뽑는다고 올렸기도했고 요즘 부트캠프나 코딩학원이 많아져서 지원자가 많은듯하다. 그래서 지원서류를 보면서 느낀점들을 적어보려고한다. 참고로 나는 인사관련 업무를 담당하는사람도 아니라 나의 관점이 정답?인지는 모르겠으나, 이력서&포폴을 읽으면서 신경써야할 부분들을 정리해보면 좋을것같아 몇 자 적어보겠습니다요~~ 지원자분들의 이력서를 보면서 셀프반성 되는 부분도 엄청 많앗음ㅋ크ㅜ 난 아직 한참 멀었다ㅠㅜㅠ 이건 100% 저의 개인적인 의견이므로 그냥 참고용으로만 봐주시면 됩니다~ 글고 같이 일할 팀원을 뽑는..

또잉 이건무슨에러지...? 우선 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는 ..

앱을 출시하려면 app dashboard에서 하단의 메뉴중 Submit to App Directory에 들어가면되는데, 앱 심사 제출시 필요한 데이터들을 확인할 수 있다. landing page, privacy policy page 등 준비할것들이 많았다. 필요한 데이터들을 다 채워넣고 5번 단계로 넘어가면 마지막으로 누락된 사항들을 확인해주는데, 나는 아래와 같은 에러가 떴다. public 배포시 socket mode를 사용하면 안되는데, 나는 socket mode를 켜놓은 상태로 제출을해서 에러가 뜬거였음 그래서 에러 메시지에 있는대로 HTTP Request URLs를 사용하는 방식으로 변경해야한다. 이것때문에 삽질을 좀 했는데, 방법은 엄청 간단했다. @slack/bolt-getting starte..

이제 앱 배포를 준비해보자! 다른 워크스페이스에서 내가 만든 앱을 설치하려면 oauth과정을 처리해야한다. 사실 난 이 단계에서 엄청 막혔었다 공식문서를 읽어도 flow는 나오는데, 실제로 구현을 할땐 많이 막혔었당...ㅜㅠ 공식문서에서는 아래와 같은 flow로 구현을 하면된다고한다! 구현하기전에 공식문서에서 정리한 내용을 읽어보고하면 좋다 필요한것 1. @slack/bolt기반으로 작성한 코드 2. https로 시작하는 redirect url > 만약 local에서 테스트를 해보는거라면 ngrok으로 하면된다. 아래에 설명이 있음 3. app dashboard에 Redirect url 적어주기 local에서 테스트해보는경우 만약 local에서 테스트하는데 https 주소가 필요한경우가 있다면 ngrok..

슬랙 앱을 만들땐, view만 구성하는것이아니라, 슬랙이라는 수단을 통해 실제 사용자와 데이터를 주고받는것이 목적일것이다. 그래서 서버와 slack app에서 정보를 주고받을수있는 수단이 있는데, 그 종류는 event, action, method, command, shortcut등이 있다. 이 이벤트들을 설정하기전에 사전적으로 정해야할것이 있는데, 0. Socket Mode 앱을 나의 workspace에서만 쓸거라면 소켓모드를 on하면 된다. 하지만 앱을 실제로 app directory에 올려서 public하게 쓰고싶다면 socket mode를 끄고 http 요청을 통해서 슬랙앱-서버가 통신하도록 해야한다. socket mode를 끄고 작업하는것은 여기를 참고하시라 socket mode켠 상태에서 작업하..