분류 전체보기521 [ GraphQL ] Schema type 중 리스트와 Non-null 타입에 대해 알아보자 📍 Schema type 중 리스트와 Non-null 타입에 대해 알아보자 graphQL로 API 요청을 할 때 쿼리에 다양한 타입을 넣을 수 있다. 스칼라 타입들이 기본으로 제공되는 것은 다들 알고 있을 것이다. /** * 1. Int: 부호가 있는 32비트 정수. * 2. Float: 부호가 있는 부동소수점 값. * 3. String: UTF-8 문자열 * 4. Boolean: true | false * 5. ID: 캐시의 키로써 자주 사용되는 고유 식별자를 나타낸다. ID타입은 String과 같은 방법으로 직렬화되지만, ID로 정의하는 것은 사람이 읽을 수 있도록 하는 의도가 아닌것을 의미한다. */ 하지만, 이번 작업에서 API 요청 시 단순 스칼라 타입이 아니라 리스트 타입으로 요청하는 경우도 .. 2022. 11. 1. [ 자바스크립트(JavaScript) ] window.history.pushState와 history.replaceState을 알아보자 📍 window.history.pushState와 history.replaceState을 알아보자 history.pushState()는 브라우저의 세션 기록 스택에 새롭게 추가한다. 문법은 다음과 같은데, (pushState(state, unused, url?)) state는 사용자가 새로운 페이지로 이동할 때마다 popstate 이벤트가 발생한다. unused는 역사적 이유로 존재하며, 생략할 수 없다. 추후에 변경 예정이므로 당분간 빈 문자열('')을 사용하자. url을 사용하면 해당 URL로 이동하지 않지만, 나중에 사용자가 브라우저를 재 시작하면 해당 URL 로드를 시도할 수 있다. 반환 값은 undefined이다. 포인트는 URL값은 현재 URL과 동일한 출처(same origin)여야 하는데,.. 2022. 10. 26. [ Next.js ] next/router 사용시 무한 렌더링 이슈 해결하기 📍 next/router 사용 시 무한 렌더링 이슈 해결하기 Next.js로 특정 페이지에 접속하면 무한 새로고침 되는 이슈를 발견했다. 이슈를 트래킹해보니 원인은 next/router - Router.replace 때문이었는데, 클라이언트 사이드에서 Router.replace를 사용한 이유는 필터에 조건을 넣고 검색 버튼을 클릭하면 해당 필터 값을 쿼리에 추가하여 다른 사람에게 링크를 공유할 때 필터를 두 번 조작하지 않도록 하기 위함이었다. 그래서 Router.replace와 state를 잃지 않고 pathname과 query 값을 업데이트 할 수 있는 옵션인 shallow Routing: true를 추가했으나 무한 렌더링(새로고침) 되는 이슈가 생겼다. 왜 이런 현상이 발생하는지 알아보기 위해 구글.. 2022. 10. 25. [ 스토리북(StoryBook) ] Object(...) is not a function 에러가 뜰 때 📍 Object(...) is not a function 에러가 뜰 때 스토리북에 샘플 데이터를 추가하고 npm run dev명령어를 실행하니까 다음처럼 Object(...) is not a function 에러가 뜨는 현상을 마주했다. 원인은 간단했는데, @storybook/addon-knobs 패키지에서 import한 props 문자열 타입을 string으로 사용했기 때문이다. 패키지를 뒤져보니 typescript에서 사용하는 string 타입은 @storybook/addon-knobs 패키지에서 text 타입으로 사용하고 있었다.(export declare function text(name: string, value: string, groupId?: string): string;) 문자형은 당연히 .. 2022. 10. 17. [ Next.js ] Rewrites와 Redirects 알아보기 📍 Rewrites와 Redirects 알아보기 로컬에서 Next.js로 작업할 때 한 개 프로젝트가 아니라 두 개 프로젝트를 동시에 실행해야 하는 경우가 종종 있다. 예를 들면 로그인을 담당하는 A프로젝트(port: 3001)에서 본인인증을 담당하는 B프로젝트(port: 3000)를 실행하는 경우가 그런 경우다. 이럴 때 A에서 B프로젝트로 넘어가려면 http://localhost:3000/verifications를 작성하고 다시 B에서 A프로젝트로 넘어올 때는 http://localhost:3001/auth-web을 작성하고 AWS를 통해 배포 할 때는 path만 남겨두고, 로컬에서 테스트 할 때는 다시 호스트와 포트를 붙이고.. 이렇게 수동적이고 번거로운 작업을 지속하다간 다른 작업을 하지 못할 것.. 2022. 10. 11. 이전 1 ··· 5 6 7 8 9 10 11 ··· 105 다음
