목록React (98)

개발 노트

next.js 언어모듈 참고

https://withbundo.blogspot.com/2017/07/http-11-http-i-accept-accept-charset.html [HTTP 프로토콜 강좌]#11 HTTP 요청 헤더 I - Accept, Accept-Charset, Accept-Encoding, Accept-Language 우리가 이전 포스팅 내용에서 봤듯이 HTTP 요청과 응답에는 다수의 HTTP 헤더 들이 존재한다. 헤더는 헤더명과 헤더값으로 구성되며, 이 둘간의 구분은 " : " 콜론을 기준으로 좌측은 헤더명, 우측 withbundo.blogspot.com https://iamsannyrai.medium.com/i18n-in-next-js-without-sub-path-or-domain-routing-2443c1a34..
React 2024. 1. 18. 18:22
npm Cannot read properties of undefined (reading 'stdin') error

npm cache clean --force C:\Users\User\AppData\Roaming\npm C:\Users\User\AppData\Roaming\npm-cache C:\Program Files (x86)\Nodejs C:\Program Files\Nodejs 위 경로들을 확인하시고 제거 후 재설치 참고 : https://www.codeit.kr/community/questions/UXVlc3Rpb246NjE4MGVlN2E1MTg2OWQzYzkyNGUzNTEy
React 2024. 1. 17. 10:07
next.js kakao map api 사용 중 cross origin error

// next.config.js const nextConfig = { reactStrictMode: true, async headers() { return [ { // matching all API routes source: "/api/:path*", headers: [ { key: "Access-Control-Allow-Credentials", value: "true" }, { key: "Access-Control-Allow-Origin", value: "*" }, { key: "Access-Control-Allow-Methods", value: "GET,OPTIONS,PATCH,DELETE,POST,PUT", }, { key: "Access-Control-Allow-Headers", value: "X..
React 2024. 1. 16. 16:03
kakaomap 연동하기

https://apis.map.kakao.com/ 카카오맵 api 페이지 오른쪽 상단의 App KEY 발급 클릭 새로만들 어플리케이션을 추가해줍니다 그럼 카카오로 부터 앱 키를 발급받을 수 있는데 root경로에 생성한 .env.local파일에 입력해줍니다 플랫폼 설정하기를 누른 뒤 Web플랫폼을 등록해줍니다 import { useEffect, useState } from 'react'; function Map() { useEffect(() => { // DOM을 이용하여 script 태그를 만들기 const mapScript = document.createElement('script'); // script.async = true 라면, 해당 스크립트가 다른 페이지와는 비동기적으로 동작함을 의미 mapSc..
React 2024. 1. 15. 11:31
NextAuth로 구글로그인 구현하기

현재 사용중인 버전 정보 "dependencies": { "next": "14.0.4", "next-auth": "^4.24.5", "react": "^18", "react-dom": "^18", }, NextAuth.js란? Node.js 기반의 오픈 소스 인증 라이브러리입니다. 다양한 인증방법을 지원하며, 다양한 소셜 로그인(Google, Naver, Kakao, Facebook, Twitter, GIthub 등) 및 인증 프로토콜(OAuth, OpenID Connect 등)을 이용하여 사용자 인증을 처리할 수 있습니다. NextAuth.js 설치하기 npm i next-auth yarn add next-auth NextAuth.js 구현하기 1. src/app/api/auth/[...nextauth..
React 2024. 1. 9. 14:32
Next.js app router 기본

Server Component 위 그림에서 Navbar나 Sidebar, Main컴포넌트는 interactive한 요소가 없으므로 Server Component가 적합합니다. 내부에 Search나 button같은 경우에는 상호작용 요소가 있으므로 Client Component가 적합합니다. 왜 Server Component를 써야하는가 Server Component 사용 시 초기 로드 속도가 향상되고 클라이언트의 js번들 사이즈는 감소합니다. 기존의 client 측의 런타임은 캐시할 수 있고 크기를 예측 가능하며 어플리케이션이 커져도 증가하지 않습니다. App router에서는 기본적으로 모든 컴포넌트가 Server Component가 Default로 사용됩니다. Client Component로 사용하고..
React 2024. 1. 4. 19:05
이전 Prev 1 ··· 3 4 5 6 7 8 9 ··· 17 Next 다음