개발19 Deep Link란 무엇일까? react native를 사용해서 프로젝트를 만들때 deep link라는것을 본적이있다.link와 비슷한 동작을 하는데, 왜 deep link라고 하는거지..?라는 궁금증이 들어서 한번 공부해서 정리해보자딥링크에 대한 정의를 먼저 보자특정 페이지에 직접적으로 도달할 수 있는 링크링크란 모든 형식의 자료를 연결하고 가리킬 수 있는 참조고리이다.(모바일)딥링크란?앱에서 링크에 해당하는 컨텐츠로 이동시킬수 있는것. 즉, 앱과 앱간의 이동을 의미채팅으로 링크를 받아서 특정 앱의 화면으로 이동시키기광고에서 버튼을 눌러서 광고 컨텐츠에 맞는 화면으로 이동시키기푸시를 눌렀을때 푸시내용에 맞는 화면으로 이동시키기스킴 딥링크(URI Scheme)초기에 사용된 딥링크 구현 방식이다.URI Scheme는 아래와 같은 패턴으.. 2024. 8. 18. 저의 훼이보릿 라이브러리 zod에 대해 정리해보겠어요(+ 실제 사용 예시) 2023 하반기에 zod를 정말 유용하게 사용했다zod는 데이터의 스키마를 작성하기쉽게 도와주는 라이브러리이다 zod말고 yup이나 formik등의 라이브러리도 있는데, 왜 하필 zod냐?zod만이 가지는 장점이 있기때문에 아래의 사용예시를 보고 매력을 느낀다면 한번 써보시는것을 추천한다zod GitHub - colinhacks/zod: TypeScript-first schema validation with static type inferenceTypeScript-first schema validation with static type inference - colinhacks/zodgithub.com zod 사용방법zod를 사용해서 원시타입/객체/배열 등 다양한 타입의 스키마 작성이 가능하다.그리고 pa.. 2024. 8. 4. [GIT] 실무에서 자주쓰는 Git 명령어 정리 개발자들은 업무를 할때 대부분 git을 사용해서 코드관리를 할것이다. 작업을 하다보면 브랜치를 나눠서 커밋을 작업하는경우가 많을것이고, 커밋의 양도 많아질것인데 브랜치를 위 이미지처럼 master, hotfix, release 등 여러개로 나눠서 관리하는 팀에서는 커밋관리가 단순하지는 않을거라고 생각한다.develop에는 올라가도되지만 master나 release에는 올리지말아야할 커밋이 있을거고,여러 커밋들중 하나만 콕 집어내서 처리해줘야하는 경우도 많았는데, 그럴때마다 git 명령어를 다양하게 사용해서 처리하고있다. 그래서 내가 실무에서 자주쓰는 git 명령어를 정리해보려고 한다.git cherry-pick 커밋 복사하기- 브랜치에 쌓여있는 특정 커밋을 콕 찝어서 빼올수있다.- 커밋을 복사한다고 생각.. 2024. 7. 26. Error 객체를 JSON.stringify에 넣으면 빈객체가 출력되는건에 대하여 해결책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.. 2024. 4. 27. 10분만에 npm cli 명령어로 자기소개하기 프론트업계에서 유명하신분인 jbee님의 깃헙을 들어가보면 아래의 명령어만 적혀있다. 이 명령어를 터미널에 쳐보니 깃헙링크, 블로그링크가 나왔다. 넘 신기...! 그래서 나도 나를 소개할수있는 cli 명령어를 만들어보려고한다! npx dohye1 요즘 넘 바빠서 개인공부를 거의 못했는데, 이번주는 여유가 생겨서 후딱 만들어볼거임!! 방법을 정리하면서 만들어보겠다 1. 참고자료를 찾아보기 사실 나는 리액트 프로젝트 보일러 플레이트를 설치할때도 npx create-react-app ~ 이런식으로 명령어를 입력했었는데, 그냥 별생각없이 터미널에 따라쳤었을뿐 막상 만들려고하니 어떤 키워드로 구글링해야할지 감이 잘 안잡혔다..ㅠㅜ 그래도 npx 명령어만들기, how to make npx command 뭐 이런식으로.. 2023. 9. 28. [ERROR] type '{}' is not assignable to type 'reactnode'. 위 에러가 발생한 프로젝트에서 사용하는 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)}.. 2023. 4. 1. [Next.JS] Prop `id` did not match. Server: "react-select-16-live-region" Client: "react-select-3-live-region" 또잉 이건무슨에러지...? 우선 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는 .. 2023. 2. 26. [JavaScript] JavaScript Meta-framework란? 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.. 2023. 1. 2. [Chromatic] Pass --allow-console-errors to succeed this command regardless of runtime build errors. 우리 팀에서는 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.. 2022. 11. 23. 이전 1 2 3 다음
