반응형

이전글 정보 ↓

https://myhappyman.tistory.com/302
 

서버 설정이 끝났으니 뷰를 작성하고 rest api를 통해 요청을 진행한다.
* 전부 클라이언트(react) 부분에 대한 설정이므로 모든 경로는 'client/~' 으로 시작한다.
 

🗂️ 작업 디렉토리 구조

 

⚙️ 추가 설치

추가할 라이브러리부터 설치한다.

$ cd client
$ npm install recoil
  • recoil: 전역 state 관리
     

🚀 React 설정 및 개발

전역 state 처리용

 

📄/src/atom.ts

import { atom } from "recoil";

export const loginInfo = atom({
    key: "loginInfo",
    default: "",
});

 

📄/src/index.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { RecoilRoot } from "recoil";

const root = ReactDOM.createRoot(
    document.getElementById("root") as HTMLElement
);
root.render(
    <React.StrictMode>
        <RecoilRoot>
            <App />
        </RecoilRoot>
    </React.StrictMode>
);

recoil 적용
 

📄/src/App.tsx

import React from "react";
import { useRecoilValue } from "recoil";
import { loginInfo } from "./atom";
import Login from "./components/login/login";
import MyPage from "./components/login/mypage";

function App() {
    const loginUser = useRecoilValue(loginInfo);
    return (
        <div className="App">{loginUser !== "" ? <MyPage /> : <Login />}</div>
    );
}

export default App;

loginInfo정보에 따라 로그인 페이지, 마이페이지 컴포넌트 설정
아직 MyPage에 대한 작성이 없으므로 작성을 시작한다.
 

🪄 마이페이지 작성

📄/src/components/login/mypage.tsx

import { useRecoilState } from "recoil";
import { loginInfo } from "../../atom";
import { useEffect, useState } from "react";

export default function MyPage() {
    const [loginUser, setLoginUser] = useRecoilState(loginInfo);
    const [userEmail, setUserEmail] = useState("");

    const logout = () => {
        fetch("/login/logout")
            .then((res) => res.json())
            .then((res) => {
                console.log(res);
                setLoginUser("");
            });
    };

    useEffect(() => {
        fetch("/login/getUserInfo")
            .then((res) => res.json())
            .then((res) => {
                const { user_email } = res.data;
                setUserEmail(user_email);
            });
    }, []);
    return (
        <div>
            <h2>My Page!</h2>
            <div>
                <label htmlFor="">접속한 아이디</label>
                <div>{loginUser}</div>
            </div>
            <div>
                <label htmlFor="">이메일</label>
                <div>{userEmail}</div>
            </div>
            <div>
                <button onClick={logout}>로그아웃</button>
            </div>
        </div>
    );
}

 

🔑 로그인 페이지 구현

📄/src/components/login/login.tsx

import { useState, useEffect } from "react";
import { useSetRecoilState } from "recoil";
import { loginInfo } from "../../atom";

export default function Login() {
    const [userId, setUserId] = useState("");
    const [userPw, setUserPw] = useState("");
    const setLoginInfo = useSetRecoilState(loginInfo);

    const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
        if (e.target.name === "userId") {
            setUserId(e.target.value);
        } else if (e.target.name === "userPw") {
            setUserPw(e.target.value);
        }
    };

    const goLogin = () => {
        const data = {
            userId: userId,
            userPw: userPw,
        };
        fetch("/login/login", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                Accept: "application / json",
            },
            body: JSON.stringify(data),
        })
            .then((res) => res.json())
            .then((data) => {
                const { msg } = data;
                if (msg === "success") {
                    setLoginInfo(userId);
                }
            })
            .catch((err) => console.log(err));
    };

    useEffect(() => {
        fetch("/login/getUserInfo")
            .then((res) => res.json())
            .then((res) => {
                const { msg, data } = res;
                if (msg === "success" && data?.user_id) {
                    setLoginInfo(data?.user_id);
                }
            });
    }, [setLoginInfo]);

    return (
        <div>
            <h2>Login Test</h2>
            <div>
                <label htmlFor="">아이디</label>
                <input
                    type="text"
                    name="userId"
                    value={userId}
                    onChange={handleInput}
                />
            </div>
            <div>
                <label htmlFor="">비밀번호</label>
                <input
                    type="password"
                    name="userPw"
                    value={userPw}
                    onChange={handleInput}
                />
            </div>
            <div>
                <button type="button" onClick={goLogin}>로그인</button>
            </div>
        </div>
    );
}
반응형
반응형

이전글 정보 ↓

https://myhappyman.tistory.com/301


이번 글에선 NodeJS가 로그인, 로그아웃에 대한 세션 처리를 동작 할 수 있도록 서버에 관한 설정을 한다.

2가지 파일 작성(/api/login.js, db/mysql_pool.js)

 

🗂️ Mysql Pool moduel 작성(DB 연결)

📄/db/mysql_pool.js

const mysql = require("mysql2/promise");

// require("dotenv").config(); // -> 환경변수 사용시 추가

const config = {
    host: process.env.host,
    user: process.env.user,
    password: process.env.password,
    database: process.env.database,
};

//mysql connection pool 생성
let pool = mysql.createPool(config);

/**
 * 1. 생성한 커넥션 풀을 통해 비동기로 쿼리를 던짐
 * 2. 응답이 오면 리소스 제거
 * 3. 조회된 결과값 리턴
 * @param {*} query
 * @returns array || boolean
 */
async function getConnection(query) {
    try {
        const connect = await pool.getConnection(async (conn) => conn);
        try {
            const [rows] = await connect.query(query);
            connect.release();
            return rows;
        } catch (err) {
            console.log("Error", err);
            connect.release();
            return false;
        }
    } catch (err) {
        console.log("DB Error");
        return false;
    }
}

module.exports = getConnection;

config부분에 각자 환경에 맞는 mysql정보를 넣는다.
 

환경변수를 사용하는경우

환경변수로 config를 채우는 경우 dotenv를 설치하고 아래 메소드를 mysql_pool.js에 추가합니다.

$ npm install dotenv

require("dotenv").config();
 

동작 구성

  • mysql2의 promise를 활용하여 커넥션 풀을 생성
  • getConnection 메소드에 쿼리를 던져서 비동기로 결과값을 받는다.
  • release()를 통해 pool을 반납한다.

 

📥 Api통신 모듈 작성

login에 관한 동작을 처리할 모듈을 작성한다.

시작하기전 필요한 모듈을 설치한다.

$ npm install express-session memorystore body-parser
  • express-session: express에서 제공하는 세션 관리 매니저
  • memorystore: 세션을 메모리에 저장하기 위해 같이 사용
  • body-parser: body로 전달받은 request데이터를 json으로 처리하기 위해 사용
     

📄/api/login.js

const getConnection = require("../db/mysql_pool");

exports.findOneUser = (userId) => {
    const sql = `select * from shin_games_user_table
    where user_id="${userId}"`;
    return getConnection(sql);
};

exports.findLoginUser = (userId, userPw) => {
    const sql = `select * from shin_games_user_table
    where user_id="${userId}" and user_pw="${userPw}"`;
    return getConnection(sql);
};

exports.Login = (req, res) => {
    const { userId, userPw } = req.body;
    this.findLoginUser(userId, userPw).then((result) => {
        if (result === false) {
            res.json({ msg: "fail" });
        } else {
            if (result.length > 0) {
                req.session.userId = result[0].user_id;
                res.json({ msg: "success" });
            } else {
                res.json({ msg: "fail" });
            }
        }
    });
};

exports.Logout = (req, res) => {
    let code = 200;
    if (req.session.userId) {
        req.session.destroy();
        res.json({ msg: "success", code });
    } else {
        res.json({ msg: "fail", msg: "권한이 없습니다.", code });
    }
};

exports.getUserInfo = (req, res) => {
    if (req.session.userId) {
        this.findOneUser(req.session.userId).then((result) => {
            if (!result) {
                res.json({ msg: "fail", code: 200 });
            } else {
                res.json({
                    data: result[0],
                    msg: "success",
                    code: 200,
                });
            }
        });
    } else {
        res.json({ msg: "fail" });
    }
};

api 모듈 작성이 완료되면 연결한다.

 

🔧 서버 모듈 적용하기

설치한 라이브러리 적용과 설정, 모듈을 적용한다.
 

📄index.js

const express = require("express");
const session = require("express-session");
const MemoryStore = require("memorystore")(session);
const bodyParser = require("body-parser");

const app = express();
const port = process.env.PORT || 3001;

app.listen(port, function () {
    console.log(`server running on ${port}`);
});

const sessionTime = 1000 * 60 * 30; // 30분
const sessionObj = {
    secret: "shin",
    resave: false,
    saveUninitialized: true,
    store: new MemoryStore({ checkPeriod: sessionTime }),
    cookie: {
        maxAge: sessionTime,
    },
};
app.use(session(sessionObj));
app.use(bodyParser.json());

// rest api callback module
const LoginApi = require("./api/login");

// 로그인 체크용
app.use("/login/login", LoginApi.Login);
// 로그아웃
app.use("/login/logout", LoginApi.Logout);
// 유저정보 조회
app.use("/login/getUserInfo", LoginApi.getUserInfo);

세션에 대한 설정처리와 rest api시 받은 데이터의 파싱을 위해 body-parser를 적용했다.
이후 각 rest api별 동작해야 할 모듈을 적용으로 서버에 대한 설정을 마친다.
이제 클라이언트단 작성을 하면 된다.

반응형
반응형

 

리액트를 학습하고 로그인, 로그아웃, 회원가입 페이지를 다뤄본 적이 없어서 경험을 해볼 겸 학습을 시작하였다.

먼저 리액트에선 프론트를 담당하고 db와 연결 및 데이터 검증을 해줄 서버 구성이 필요했다.

기존에 해보던 Java로 해도 괜찮지만 NodeJS를 적용해보면 간편하고 쉬울 것 같아서 시작하게 되었다.(새PC에 자바가 없어서 세팅하기가 귀찮다는 그런 이유도 있다...)

 

🚀 목표

  • 리액트로 로그인 페이지 구현
  • 로그아웃 처리
  • 회원가입 기능
  • 노드JS에서 REST API 처리
  • DB연결 및 쿼리 작성
  • 세션 처리

💡 생각해 볼 것

로그인 처리 후 인증 방식에 크게 SessionJWT가 있다.

아직 JWT를 경험하지 못해서 학습할 겸 적용해봐도 좋지만 노드JS도 다뤄본적이 없는데 너무 헤멜것 같아서 먼저 이번 목표를 수행하고 다음 과제로 수행 해 볼 예정이다. 고로 클래식한 Session처리로 한다.

 

🔧 설치할 모듈

  • express: nodeJS에서 서버를 구성하기 위한 라이브러리
  • nodemon: node기반에서 변경사항이 발생하면 자동으로 재시작해주는 라이브러리
  • cocurrently: 명령어를 동시에 실행시켜준다.(node, react동시 실행용)
  • react & typescript: 리액트(ts.ver) 설치
  • http-proxy-middleware: 프록시 설정을 위해 필요한 라이브러리(react -> node로 fetch때 사용예정)
  • mysql2: mysql접속을 위해 설치(설정 문제 때문에 2로 설치하였다.)

 

⚙️ 환경 설정

서버 구성하기(NodeJS )

먼저 서버로 작업할 디렉토리를 하나 파고 아래의 명령을 수행한다.

$ npm init -y
$ npm install express nodemon concurrently mysql2

이것만으로 가볍게 웹서버를 구성할 수 있다.
서버로 사용할 index페이지를 생성한다.

 

📄index.js

const express = require('express');
const app = express();
const port = process.env.PORT || 3001;

app.listen(port, function () {
  console.log(`server running on ${port}`);
});

nodemon 설정을 위해 package.json을 수정한다.
 

📄package.json

"scripts": {
  "start": "nodemon index.js"
}

프론트 생성(리액트 ts.ver)

$ npx create-react-app client --template typescript

리액트(client)에서 프록시 설정을 위해 아래 명령어로 라이브러리를 설치한다.

$ cd client
$ npm install http-proxy-middleware

설치가 끝나면 setupProxy파일을 생성하고 아래와 같이 입력한다.
 

📄/client/src/setupProxy.js

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    createProxyMiddleware("/login/**", {
      target: "http://localhost:3001",
      changeOrigin: true,
    })
  );
};

 

개발 실행 환경 구성하기

package.json을 손봐야 vscode하나를 켜놓고 서버와 리액트를 동시에 실행하여 편하게 개발할 수 있다.

scripts부분을 아래와 같이 추가한다. (리액트쪽 package.json이 아님!!)
 

📄package.json

"scripts": {
  "start": "nodemon index.js",
  "dev": "concurrently \"npm run dev:server\" \"npm run dev:client\"",
  "dev:server": "npm start",
  "dev:client": "cd client && npm start"
}

앞으로 개발시 npm run dev를 통해 개발 테스트를 할 수 있다.
 

🔥 임시 작성 테스트 결과

리액트 설정

📄/client/src/login/login.tsx

import { useEffect, useState } from "react";

export default function Login() {
    const [userId, setUserId] = useState("");
    const [userPw, setUserPw] = useState("");

    const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
        if (e.target.name === "userId") {
            setUserId(e.target.value);
        } else if (e.target.name === "userPw") {
            setUserPw(e.target.value);
        }
    };

    const goLogin = () => {
        console.log("click!");
    };

    useEffect(() => {
        fetch("/login/test")
            .then((res) => res.json())
            .then((data) => console.log(data));
    }, []);

    return (
        <div>
            <h2>Login Test</h2>
            <div>
                <label htmlFor="">아이디</label>
                <input
                    type="text"
                    name="userId"
                    value={userId}
                    onChange={handleInput}
                />
            </div>
            <div>
                <label htmlFor="">비밀번호</label>
                <input
                    type="password"
                    name="userPw"
                    value={userPw}
                    onChange={handleInput}
                />
            </div>
            <div>
                <button type="button" onClick={goLogin}>
                    로그인
                </button>
            </div>
        </div>
    );
}

 

📄src/App.tsx

import React from "react";
import Login from "./components/login/login";

function App() {
    return (
        <div>
            <Login />
        </div>
    );
}

export default App;

 

서버 설정

📄index.js

const express = require("express");
const app = express();
const port = process.env.PORT || 3001;

app.listen(port, function () {
    console.log(`server running on ${port}`);
});

app.use("/login/test", function (req, res) {
    res.json({ test: "success" });
});

 

테스트 캡처

login/test로 부터 응답을 받아서 클라이언트쪽에서 콘솔 로그에 결과값이 잘 찍히고 있다.

반응형
반응형

개발의 기능이 어느정도 완성되거나 버그를 수정하거나 그날 올릴 소스가 존재한다면 많은 분들이 Git을 통해 관리를 하고 있을텐데, Git의 GUI도구(Sourcetree, fork, gitkraken 등등)를 사용해서 올리는 분들이 있을텐데, 저같은 경우엔 아직 gui가 필요한 수준도 아니고 가볍게 작업할 땐, VS Code에서 열심히 개발을 끝내고 터미널 창을 열어서 밀어넣는 작업을 하고 있습니다.

 

하지만 터미널에서 기존에 가볍게 작성하던 커밋 메시지를 저만의 커밋컨벤션의 규칙을 지키면서 넣다보니 실수도 많아지고 잘못된 개행처리나 사용시 불편함이 너무 많았습니다. 이런 문제를 해결하기 위해 git, vscode에 각각 약간의 설정을 하여 해결하였습니다.

 

Git설정

$ git config --global core.editor "code --wait"

해당 설정을 하게 되면 기존에 `git commit -m "커밋 메시지를 작성합니다!!! blah blah~"`

커밋 명령과 메시지를 동시 입력했지만  `git commit`만 쳐주면 새로운 창이 열리고 커밋 메시지를 적을 수 있게 해줍니다.

 

파란색부분에 commit message의 header와 개행을 입력하고 body부분을 양식에 맞게 작성하시고 저장 후 끄시면 됩니다.

 

 

VS Code설정

위 설정으로 vs code에서 메시지 작성은 쉬워졌지만 여전히 메시지 길이에 대한 문제가 있습니다.

많은분들이 따르고 있는 50/72규칙입니다.

제목은 50자, 바디는 한 줄당 72자에 대한 규칙인데, 매번 작성시 이걸 하나하나 세는것도 고역일 수 밖에 없습니다.

이것을 VS Code에서 언어별로 설정을 할 수 있는데 규칙을 추가함으로써 해결이 가능합니다.

 

1. File - Preferences - settings

 

2. setting.json열기

우측 상단에 Open Settings를 통해 JSON파일로 열 수 있습니다.

 

3. 길이 설정 제한하기

"[git-commit]": {
    "editor.rulers": [50,72],
    "editor.wordWrap": "off"
},

 

4. 설정 확인해보기

설정을 하게 되면 vs code 에디터 내에 2개의 라인이 생깁니다.

50, 72길이에 대한 제한인데, 문제는 한글에서는 제대로 처리가 되지 않는 문제가 존재합니다.

찾아보니 이런 경우를 위한 네이버에서 배포한 폰트 D2 Coding font가 존재하는데, 이것으로 해결이 가능하며 저같은 경우엔 폰트 적용까진 하지 않았습니다.

첫 줄의 경우 너무 길어 지면 빨간색으로 제한 표시 제한까지도 해주는걸 볼 수 있습니다.

 

적용 후기

요즘 플러그인들이 워낙 좋은것이 많기에 이렇게 커스텀해서 사용하는 것 보단 괜찮은 플러그인 하나 설치하는게 정신건강에 이로울수도 있을 것 같습니다! 

 

반응형
반응형

undefined

변수나 인수를 선언하고 초기값을 할당하지 않은 상태의 값이다.

즉, 자료형이 없는 상태를 말한다.

 

null

변수를 선언하고 빈 값을 할당했다고 지정한 상태를 말한다.

자료형은 object가 나온다.

 

typeof null; //'object'
typeof undefined; //'undefined'

typeof를 찍어봐도 이런 차이가 있지만 null의 경우  object가 나와서 타입을 체크하는 경우 아래와 같은 문제가 발생할 수 있다.

 

typeof []; //'object'
typeof null; //'object'

배열을 체크하고 싶을 때, 배열도 object로 구분된다.

배열인지 체크를 하고 있지만 null인 경우에도 체크가 되기 때문에 소스에 문제가 생길 수 있다.

 

배열은 아래처럼 체크한다.

Array.isArray([]); //true
Array.isArray(null); //false

 

반응형
반응형

push하기 전 commit 수정하기

 

push 하기전에 commit을 잘못한 경우라면 아래 명령어를 통해 수정할 수 있다.

git commit --amend

 해당 명령어를 입력하면 최근에 입력했던 commit 메시지가 출력되고 에디터 수정 모드를 통해 변경하면 된다.

 

 

commit후 push까지 해버린 경우 수정하기

이미 push까지 해버린 경우라면 조금 위험할 수 있지만 아래와 같이 처리할 수 있다.

 

1. 수정할 커밋 정보 찾기

먼저 rebase를 통해 몇번째 커밋을 수정할 것인지 입력한다.

git rebase HEAD~1 -i

 제일 최근의 push한 커밋 메시지를 수정한다면 HEAD~1이고 2번째라면 ~2, 3, 4 차례대로 숫자가 올라가면 된다.

rebase로 수정할 커밋의 번호를 입력한다.

 

2. pick 텍스트를 reword로 변경하고 저장하기

reabse를 실행하면 아래와 같은 출력창이 발생하는데, pickreword로 수정(i로 입력모드)하고 저장(wq!)해준다.

노란색부분은 커밋의 첫번째 줄이 보인다.
pick을 reword로 변경하고 저장한다!

빨간색으로 처리한 pick부분만 reword로 변경하고 저장하면 아래와 같이 새로 입력할 수 있는 창이 나온다.

 

 

3. 커밋 메시지가 나오면 수정하기

이런식으로 최근에 입력한 전체 커밋 메시지가 보이는데, 여기서 잘 못 입력한 부분을 수정(i로 입력모드에 들어간다.)하고 저장(wq!)한다.

 

4. push --force처리로 덮어쓰기

다음 아래 명령어로 다시 push처리를 하면 수정된 commit message로 반영된다.

git push --force

 

5. 결과

추가된 메시지가 잘보인다. 

반응형
반응형

Git은 협업도구이지만 주로 프로젝트를 혼자하다보니 협업에 어울리게 제대로 사용하지 못하고 있다는걸 알게되었다.

열심히 commit을 해주고 있었지만, 스스로가 나중에 찾아보더라도 각각 올려진 메시지의 내용을 파악하기 힘들다는 문제점도 자각하게 되고 해당 방식을 고치고자 찾아보니 커밋컨벤션이라는 방식이 있었다.

 

메시지의 구조

제목(title)
\n(개행)
본문(body) > 생략가능
\n(개행)
꼬리말(footer) > 생략가능

위의 형태의 구조로 사용한다.

 

 

커밋의 종류

Type Description Example
chore 기타 작업 chore: 빌드시 자동 설정 옵션 추가
design css 관련 UI 디자인 작업 design: 회원가입 양식 디자인 추가
docs
주석 작업, 문서 추가 관련 docs: 검증 api 관련 docs추가
feat 새로운 기능을 추가 feat: 회원 가입 기능 추가
fix  버그 수정 fix: 비밀번호 유효성 검사 오류 수정
refactor 프로덕트 리팩토링 refactor: userJoin 메소드를 유효성부분과 분기처리
remove 디렉토리, 파일을 삭제하는 경우 remove: 유효성 test모듈 삭제
rename 디렉토리, 파일명만 수정, 경로 변경 등 rename: Join디렉토리에 관련 소스 정리
test 테스트 관련 작업 test: 회원가입 테스트 추가

 

 

작성 규칙

타입 종류들과 성격을 파악했으니 사용법을 알아보겠습니다.

  • 제목은 50자 이내로 작성
  • 본문은 한 줄당 72자 이내로 작성
  • 제목과 본문 사이는 개행 한줄을 넣어서 분리
  • 문장에 끝에 마침표(.)를 사용하지 않음
  • 문장은 명사로 끝냄

 

 

작성 팁

제목

  • 간결하고 요약하여 작성한다.
  • 마침표나 특수기호는 사용하지 않는다.
  • 과거시제를 사용하지 않는다.

 

본문

  • 최대한 상세하게 작성한다.
  • 본문 작성시 변경 내용에 대한 것보단 왜 변경되었는지, 무엇을 바꾸었는지 초첨을 둔다.

 

 

Github 적용 예시

처음 적용하다보니 개행 실수가 있어서 git commit --amend로 내용을 수정해주었다.

상세 내용을 펼치기전에는 제목만 보이며 상세 내용을 펼치면 body부분이 보인다.

(캡처에도 개행하나가 제대로 안들어가있네요... 적응하도록 노력해야겠습니다.) 

반응형
반응형

화면 이동시 next의 Link컴포넌트를 사용하거나 useRouter hook을 사용할 수 있습니다.

이 둘은 사용법이 매우 비슷한데 아래와 같이 사용할 수 있습니다.

 

페이지 전환처리

- Link

import Link from "next/link";

export default function Home(){
    return <Link href="/about">이동</Link>;
}

Link를 사용하게 되면 화면 전환시 쉽게 처리가 가능합니다. 

 

- useRouter

import { useRouter } from "next/router";

export default function Home({results}:IHome){
    const router = useRouter();
    const onClick = (url:string) => {
        router.push(url);
    }
    return (
        <div className="container">
        	<h1>useRouter 예시</h1>
            <div onClick={() => onClick("/about")}>이동</div>
        </div>
    );
}

부득이하게 함수를 통해 페이지 이동을 처리해야 한다면 useRouter의 push메소드를 사용하여 전환 처리를 할 수 있습니다.

 

화면 전환시 사용할 수 있는 useRouter hook과 Link컴포넌트는 비슷한 옵션을 가지고 사용법도 비슷합니다.

아래서 옵션과 사용법을 알아보겠습니다.

 

Link props

<Link href={`/movies/${id}`}>

href :
필수 props입니다.

String | Object형식의 데이터를 받습니다.

String의 경우 문자열로 이동 처리할 경로를 작성합니다.

Object를 받는 경우 pathname, query의 속성을 사용할 수 있습니다.

<Link
    href={{
        pathname: '/about',
        query: { name: 'test' },
    }}
>
    About us
</Link>
  • pathname: 이동할 경로입니다.
  • query: 추가로 전달할 값을 작성할 수 있습니다.
    위의 예제의 경우 /about?name=test 의 형태로 화면 전환이 이루어집니다.

 

 

as?: 선택 props로 사용하게 되면 url정보를 마스킹처리할 가짜 url로 작성시켜 줍니다.

<Link 
	href={{ pathname: '/about/[id]', query: { title: "공지사항입니다." } }} 
	as="/about/[id]"
>Profile</Link>

"/about/123456&title=공지사항입니다."

위의 url로 변경될 때, 해당 정보를 마스킹하고, "/about/123456"으로 처리하면서 동일한 효과를 줄 수 있다.

 

useRouter.push options

import { useRouter } from 'next/router';
function ActiveLink({ children, href }) {
	const router = useRouter();
	router.push(url, as, options);
}

push에는 url 필수값과 as, options라는 선택 파라미터를 받습니다.

 

url:

필수 파라미터입니다.

String | Object를 받으며 String은 화면 전환 url을 입력합니다.

Object에는 Link와 사용법이 비슷합니다.

{
    pathname: '/about/detail',
    query: {
        page: 1,
        title: '제목입니다.',
    }
 }
  • pathname: 이동할 경로
  • query: 전환시 넘겨줄 파라미터 정보입니다.

 

as?:

선택값입니다.

사용하게 되면 사용자의 url을 마스킹 처리할 수 있습니다.

router.push({
    pathname: `/movies/${id}`,
    query: {
        title
    }
}, `/movies/${id}`);

"/movies/1234?title='제목입니다'"

-> 

"/movies/1234"로 마스킹처리하여 동일한 기능을 수행합니다.

 

 

options?:

선택값입니다. (Object)

scroll: (boolean: default @true)탐색 후 페이지 맨 위로 스크롤 제어 옵션입니다.

shallow getStaticProps: (boolean: default @false)재실행 없이 현재 페이의 경로를 업데이트합니다.

locale: (String) 새로운 페이지에 로케일을 표시합니다.

 

 

반응형