일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- setInterval 외부 정지
- 공인IP
- setInterval 중지
- datagridview 직접입력
- 데이터테이블 데이터 넣기
- Replication
- mosquitto
- html #select #option #multiple
- DataGridView 직접 입력
- pm2
- map이 undefined가 뜰 때
- invalid data
- transfer
- 맥 어드레스
- pm2 설치
- setInterval clear
- c# datagridview 데이터 넣기
- DatePicker
- mySQL_Replication
- pm2 상태 확인
- timepicker
- 1883
- listener 1883
- pm2 시작
- allow_anonymouse
- AntDesign
- 서버동기화
- mosquitto.conf
- pm2 확인
- setInterval 정지
- Today
- Total
목록React (88)
개발 노트
현재 사용중인 버전 정보 "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..
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로 사용하고..
next.js 프로젝트 시작하기 npx create-next-app@latest yarn create next-app pnpm create next-app bunx create-next-app 원하는 조건에 맞춰서 세팅할 수 있습니다 What is your project named? my-app Would you like to use TypeScript? No / Yes Would you like to use ESLint? No / Yes Would you like to use Tailwind CSS? No / Yes Would you like to use `src/` directory? No / Yes Would you like to use App Router? (recommended) No / Yes..
세팅 후 프로젝트 시작시 파싱에러 발생 루트 경로 에 .bablerc 파일생성 // .bablerc { "presets": ["next/babel"], "plugins": [] } .eslintrc.json파일 수정 { "extends": "next/core-web-vitals" } ↓ 다음과 같이 수정 { "extends": ["next/babel","next/core-web-vitals"] } 에러가 해제된것을 확인할 수 있습니다
차트마다 chartId가 필요하다 삼항연산자를 사용해 상황별 chartId를 구분해주면 잘 나온다.
useLocation( ) Hook 중 하나이다. location 객체를 반환 pathname: 현재 주소의 경로(쿼리스트링 제외) search: 맨 앞의 ? 문자를 포함한 쿼리스트링 값 hash: 주소의 # 문자열 뒤의 값 state: 페이지로 이동할 때 임의로 넣을 수 있는 상태 값 key: location 객체의 고유값, 초기에는 default이며 페이지가 변경될 때마다 고유의 값이 생성 ex) 주소 http://localhost:3000/about/?detail=true&mode=1 const location = useLocation(); console.log(location); // 출력 // { // pathname: '/about/', // search: '?detail=true&mode=1..