Javascript41 Nextjs1 api 요청이 2번 가는 문제 (strictMode 사용 X) Nextjs의 컴포넌트는 기본적으로 server component이고 'use client'를 사용하더라도 서버에서 정적인 HTML을 생성한 후에 클라이언트에서 hydration을 시켜준다. 따라서 특수한 처리를 해주지 않는다면 request 요청이 서버에서 한번 브라우저에서 한번 2번 가는 상황이 생길 수 있고 이 사실을 모르고 개발하다가 2번의 api요청에 의한 문제가 발생한다면 문제의 원인을 찾는것이 상당히 골치아파질 수 있다. 나의 경우는 oAuth의 로그인 로직 바꾸다가 이러한 문제가 생겼는데 oAuth과정에서 카카오로 부터 code를 받아서 이것을 이용해서 server에서 access Token을 발급받게 되는데 이 code는 일회용 코드기 때문에 동일한 코드로 api 요청이 2번가면 2번째.. 2024. 3. 7. [React] 'rafce' 에서 import React from 'react' 비활성 rafce, rfc 등을 하면 snippet으로 매우 간편하게 react 컴포넌트를 생성할 수 있다. 그런데 좀 귀찮은 점은 import React from 'react'을 항상 상단에 추가해준다는 점이다. React는 17버전부터 import React from 'react'를 상단에 쓰는 것이 의무가 아니다. 따라서 불필요한 import를 하지 않기 위해 따로 지우는 경우가 많은데 굳이 지우지 않고 설정으로 import를 하지 않게 하는 방법이 존재한다. 1. 먼저 extension 탭에서 ES7+ React/Redux/React-Native snippets을 선택 2. 톱니바퀴 눌러서 Extension Settings 클릭 3. 맨위에 Import React On Top을 체크해제 이제 자동완성 s.. 2024. 2. 7. [React] Import 순서의 중요성 오늘 Import 순서가 잘못되어서 기상천외한 에러가 생겼다. index.ts:16 Uncaught ReferenceError: Cannot access 'channelReducer' before initialization 터미널에선 아무런 에러가 안뜨는데 앱을 실행하면 에러가 나서 문제를 찾기도 참 어려웠다. 여기서 문제가 무엇인지 알겠는가? 7번째 줄 Request 가 문제였다. 문제는 Request Redux의 store보다 먼저 나온다는데 있다. 브라우저에서 뜨는 에러 내용을 보자 ChannelReducer를 초기화하기 이전에 접근 할 수 없다는 에러이다. 해결하고 나서 보니 너무 당연한 해보이지만 이 당시는 import 순서로 문제가 생길 수 있다는 생각을 하지 못했기 때문에 해결에 정말 애를 .. 2024. 1. 11. [React] VSC 태그 자동완성 Emmet 설정 html 에서 아래와 같이 Emmet -> Preferences에 Edit in settings.json 클릭 3. "emmet.includeLanguages": { "javascript": "javascriptreact" }, 이것을 아래 json 안에 추가해준다. 끝 2023. 12. 7. 이전 1 2 3 4 ··· 11 다음
