NextJs
-
Cookie Ex2NextJs 2023. 1. 13. 20:46
Cookie Ex1; Cookie Ex2 예제 import type { NextApiRequest, NextApiResponse } from 'next' export default function Handler1( req: NextApiRequest, res: NextApiResponse ) { let qr1 = req.query; let cookie_ori = req.headers.cookie let cookie_new1 = res.getHeaders(); res.setHeader("Set-Cookie", ["tk1a=111n", "tk2a=222n", "path=/;"]); //withCredentials;"); let cookie_new2 = res.getHeaders(); res.setHeader..
-
Nextjs Css 적용 기초 수준 ExNextJs 2023. 1. 11. 11:53
개요 Nextjs는 global css와 module css방식을 사용한다. Css(style) 파일 적용하기 아래는 간단하게 global css에 적용해보는 예제 _app.tsx 'pages/_app.tsx'파일에 있는 내용 확인 import '../styles/globals.css' 기본적으로 'globals.css'를 불러 쓰는 코드가 이미 들어 있다. 추가 수정 없이 그대로 두면 된다. globals.css 'styles/globals.css'파일 내용 편집 기본적으로 'globals.css'에 예제로 보여주는 내용들이 있다. 참고하고, 필요 없으면 모두 지우고 아래의 테스트 내용을 넣는다. .MyList1 li { float: left; } class이름이 MyList1인 list의 li에 정렬..
-
Css(style) 파일 적용하기(Global, Module)NextJs 2023. 1. 10. 16:44
Nextjs Css 적용 기초 수준 Ex Nextjs는 global css와 module css방식을 사용한다. global은 전체에 영향을 주는 범위이고, module은 부분적 영역에 영향을 주는 범위 차이가 있다. Global적용 '/pages/_app.tsx'파일에서만 적용가능. import '../styles/globals.css' import '../styles/globals.css' import type { AppProps } from 'next/app' export default function App({ Component, pageProps }: AppProps) { return } Module적용 'style/Home.module.css'파일 처럼, 파일 확장자를 'Xxx.module.c..
-
UseEffect Ex3NextJs 2023. 1. 10. 09:48
Nextjs useEffect 외부 값 읽어와서 적용시(useState변경으로 인한) 갱신되어 다시 실행되는 문제를 해결할 수 있다. Ex import useSWR from 'swr' import Axios from 'axios' import { useEffect, useState } from 'react'; function AppDrawback() { let [data=[], setData] = useState(null); const url = "http://localhost:3001/api/forexdatas1?json=1"; console.log("load url: " + url); //문제점: browser에서 작동중에 반복적 조회되는 현상. // setData로 state가 변경 -> 갱신 ->..
-
UseEffect Ex2NextJs 2023. 1. 10. 09:42
'Nextjs useEffect'에서 AppRouter, AppState설명 참고 import Router, { useRouter } from "next/router"; import { useEffect, useState } from "react"; const AppRouter: React.FC = () => { //function App2() { let router1 = useRouter(); useEffect(()=>{ console.log("UseEffectV1 main call"); return ()=> { console.log("UseEffectV1 return call"); } }); let data1 = "aaa"; useEffect(()=>{ console.log("UseEffectV2 m..
-
UseEffect Ex1NextJs 2023. 1. 10. 09:36
Nextjs useEffect webbrowser연결 후 호출되는 시기. window, document 등에 접근 가능. function App2() { useEffect(()=>{ console.log("UseEffectV1 main call window.document:" + window.document.nodeName); return ()=> { console.log("UseEffectV1 return call href:" + window.location.href); } }); let data1 = "aaa"; useEffect(()=>{ console.log("UseEffectV2 main call d: " + data1); return ()=> { console.log("UseEffectV2 r..
-
Cookie Ex1NextJs 2023. 1. 8. 20:10
Cookie Ex1; Cookie Ex2 예제 파일 '/api/cookie1.ts' import type { NextApiRequest, NextApiResponse } from 'next' function Handler1( req: NextApiRequest, res: NextApiResponse ) { console.log("api cookie1a: " + req.headers.cookie); console.log("api cookie1b: " + req.cookies["test_token1"]); res.setHeader("Set-Cookie", "test_token1=asdfasdf2; path=/;"); //withCredentials;"); console.log("api cookie2: " +..