redux 오픈소스 코드를 뜯어서 createStore 직접 구현해보기
2023. 1. 16. 23:02
TIL/트러블슈팅
프리온보딩 과제 - createStore 최소 구현체 만들기 공식문서를 참고해서 createStore를 직접 구현하는 과제를 주셨다. GitHub - reduxjs/redux: Predictable state container for JavaScript apps Predictable state container for JavaScript apps. Contribute to reduxjs/redux development by creating an account on GitHub. github.com Redux를 썼을 때도 RTK로 사용해서 createStore에 무엇이 전달되어야하는지 공식문서를 참고했다. createStore | Redux API > createStore: creating a core R..
공식문서를 통한 비로그인 접근 제어하기
2023. 1. 14. 22:12
TIL/트러블슈팅
요약 example/auth에 있는 내용을 참고하여 구현했습니다. https://github.dev/remix-run/react-router Setting up your web editor eyJ3b3JrYmVuY2hUeXBlIjoiZWRpdG9yIiwid29ya2JlbmNoQ29uZmlnIjp7InZzY29kZVZlcnNpb25JbmZvIjp7InN0YWJsZSI6eyJjb21taXQiOiI5N2RlYzE3MmQzMjU2ZjhjYTRiZmIyMTQzZjNmNzZiNTAzY2EwNTM0IiwicHJvZHVjdFZlcnNpb24iOiIxLjc0LjMifSwiaW5zaWRlciI6eyJjb21ta github.dev 기존의 코드 useEffect를 활용하여 로컬스토리지 토큰을 검사했다, 이때 발생한 문제점이..
typescript interface property 변환하기, react-query mutate 파라미터 오류 해결, common 컴포넌트로 분리하기
2023. 1. 12. 22:51
TIL/트러블슈팅
typescript interface property를 optional로 변경하기 기존에 있던 form에서 에러 객체의 타입입니다. 어떤 input인지 예상할 수 있었기 때문에 따로 타입을 만들어 선언하면서 사용했습니다. 하지만 이렇게 사용을 해보니 form의 값을 저장하고 있는 value와 error에 새로운 키가 추가되었을 때 직접 type 선언한 부분을 찾아가 추가해줘야한다는 단점이 있었고 form을 사용하는 객체가 많아질수록 코드의 양이 늘어나게 되었습니다. export type ErrorProps = { email?: string; password?: string; error?: string; }; 따라서 초기값에 따라 optional한 객체 타입을 만들어주는 유틸리티 타입이 필요했고 아래와 같..
typescript interface property를 optional property로 바꾸기
2023. 1. 12. 18:12
TIL/트러블슈팅
요약 export type ChangeTypeOfKeys = { [key in keyof T]?: T[key]; }; ChangeTypeOfKeys interface의 property 값들을 optionl로 바꾸기 form의 value로 들어가는 객체의 값으로 error 객체를 만들고 싶었다. 따로 타입을 선언하는 것보단 유틸적으로 기존의 타입을 변환시키면 좋을거같아 찾아보니 스택오버플로우에서 찾을 수 있었다. 유틸리티를 고민해보면 정말 많은 방식이 있는거같다.. 찾기가 조금 어려울 뿐?
typescript 제네릭으로 리팩토링 & 변수,타입 수정
2023. 1. 11. 23:18
TIL/트러블슈팅
Typescript 제네릭 실제 사용하기 커스텀 훅으로 만든 기존에 있던 useForm이다. 훅을 사용하는 두 가지 폼이 있는데 login과 todo를 생성, 수정할때 사용했다. 따라서 들어오는 타입도 TodoType, LoginType을 따로 만들어 union type으로 생성했는데 이렇게 사용하게 되니 계속 as로 Type Assertion(타입 단언) 시켜줘야하는 문제가 발생했다. 뿐만 아니라 자동완성기능도 사용하지 못했고 나중에 새로운 데이터 타입으로 사용할 때는 새로운 타입으로 useForm 자체에 추가해줘야하는 번거로움까지 발생했다. 이런 부분이 명백히 문제라고 생각했고 이번에 프리온보딩을 들으면서 적절히 추상화되지 않았다가 정답인거 같아 타입스크립트에 대해 조금 더 찾아보았다. import ..
크롬 익스텐션 보일러 플레이트 및 웹팩 설정과 css 에러 수정
2023. 1. 9. 22:36
TIL/트러블슈팅
크롬 익스텐션 개발 및 웹팩 설정 현재 진행하는 개인프로젝트에서 크롬 익스텐션을 개발해보고자 여러 아티클을 참고하였습니다. 북마크 비스무리하게 만드는 거라 최대한 유사하게 검색해서 진행해봤고 참고할만한 자료들을 많이 읽어봤는데 주로 js로 진행되었고 하나하나 다 배워가면서 진행하면 좋았겠지만 간단한 기능을 개발하기때문에 막히는 부분이 있으면 그때그때 찾아보자라는 생각으로 진행하였습니다. 크롬 익스텐션에서 데이터를 어떻게 다룰 것인가? (피트스탑과제 – 크롬 익스텐션 개발기) | 우 {{item.name}} 안녕하세요, 우아한형제들에서 웹프론트엔드 개발을 담당하고 있는 배민셀프서비스팀의 남현우입니다. 피트스탑 기간에 정환님, 미라님, 민희님과 함께 팀 생산성을 높이기 위해 만 techblog.woowaha..
컴파일러 작동방식을 통한 JS 호이스팅이 발생하는 이유
2022. 11. 22. 21:43
TIL/트러블슈팅
개요 사실 호이스팅의 개념은 정리한지 꽤 지났다. 하지만 이전에 한번 정리해본 내용을 토대로 남에게 설명해보니 질문을 받고 혼자 정리하면서 왜 이렇게 동작하는가 생각되는 것들이 많아서 조금 더 상세하게 적어서 작성해서 조금 더 좋은 자료로 발표하기 위해 딥하게 들어가보았다 개념을 크게 몰라도 상관없지만 그래도 조금 더 확장해서 다루기 위함이니 한 번쯤은 다시 보고 오면 이해가 쉬울거라 생각된다. 호이스팅이란? 개요 요즘 호이스팅에 관한 문제는 크게 없다. 왜냐하면 EsLint같은 곳들의 옵션 속에서 자동적으로 에러를 뿜어내서 변수를 항상 최상단에 선언할 수 있도록 만드는 하나의 장치가 마련되어있기 choiblog.tistory.com 그럼 어떤 부분이 많이 헷갈렸을까? 당연히 변수를 끌어 올리는건 아니다..
[Nest] 53431 ERROR [ExceptionsHandler] () is not a function
2022. 11. 16. 19:23
TIL/트러블슈팅
말 그대로 기본 함수가 정의되지 않아서 생긴 문제였다. 함수를 찾아 올라가보니 export default로 반환된게 아니라 export로만 반환되어 문제가 발생했다 import ogs from 'open-graph-scraper'; import * as ogs from 'open-graph-scraper'; TypeError: (0 , dayjs_1.default) is not a function This is my logger.ts file that error happens there: import logger from "pino"; import dayjs from "dayjs"; const log = logger({ prettyPrint: true, base: { pid: false, ... stac..
Suspense를 잘못 사용하여 배운 페이지가 깜빡이는 문제
2022. 10. 29. 10:39
TIL/트러블슈팅
요약 팀프로젝트로 React를 활용해 기술블로그를 개발하던 중 페이지 이동시 페이지가 깜빡이며 SPA처럼 동작하지 않는다는 것을 확인하였습니다. 처음 개발을 하면서는 해당 문제에 대해 중요하게 생각하진 않았는데 이후 코드 리뷰를 받으며 실제 동작을 테스트해보니 SPA의 기능에 문제가 있다는 것을 인지하였습니다 이후 동작을 나눠보고 어떤 것이 문제를 일으키는지 테스트를 해보았고 그 중에서 SWR에서 문제가 발생한다는 것을 확인하였습니다. 원인을 찾고자 공식문서를 보며 코드를 다시 작성해보았고 다시 작성한 코드는 문제가 없다는 것을 확인 후 원래 코드와 비교하며 해결하였습니다. 문제는 suspense 속성을 줬기 때문이라는 것을 확인하였고 suspense는 데이터가 올 때까지 보여주는 로딩 상태를 정의하는 ..
Next.js static 페이지 업데이트가 되지않았던 이유와 해결 경험
2022. 10. 26. 22:31
TIL/트러블슈팅
요약 SSG페이지로 만든 뒤 업데이트하기 위해 revalidate를 아무리 짧게줘도 1시간 뒤에 이미지가 만료되는 현상이 발견됐다. 알고보니 revalidate 시간 동안은 이미 만들어진 static page를 전송해주고 revalidate 시간을 넘어 새로운 요청이 들어와야 새 정적 페이지를 만들어준다. 예를 들면 처음 빌드하고 페이지를 방문한 뒤 revalidate를 1분으로 짧게줘도 그 사이에 다른 누군가가 방문하지 않았고 1년이 지났다면 1년 뒤 처음 접속한 유저는 내가 아무리 블로그 글을 갱신했더라도 1년전 봤던 페이지와 같다는 것이다. 그리고 NextJS는 그제서야 revalidate 시간을 확인하고 새로 빌드해주게 된다. 아무래도 잦은 빌드시 성능적으로 비효율적이기 때문에 그런거같다. 두 가..