BeomBeomJoJo

VS Code 에서 JavaScript 실행하기

범범조조 — Fri, 19 May 2023 21:05:23 +0900

개요

VS Code 를 이용하여 JavaScript 실행하는 방법에 대해서 알아봅니다.
여러가지 방법이 있지만, 매우 간편한 방법중 하나인 Code Runner 를 이용하여 사용하는 방법에 대해서 정리 진행합니다.

1. Code Runner Extension 설치

VS Code 에서 아주 쉽게 JavaScript 를 실행하려면, Code Runner Extenstion 설치를 진행하면 됩니다.

2. 테스트 진행할 JavaScript 파일 생성

설치를 완료 하였다면, 테스트 진행할 자바스크립트 파일 하나를 생성합니다.
그리고 아래와 같이 테스트 진행할 자바스크립트 코드를 입력합니다.
저 같은 경우에는 hello.js 프로젝트 파일 생성 후 아래의 코드를 작성하였습니다.
그리고, Ctrl + Alt + N 키를 동시에 누르면 자바스크립트 파일이 실행되어 콘솔에 값이 출력되는 것을 확인할 수 있습니다.
JavaScript 말고도 TypeScript, C, C++ 등의 다양한 언어들도 사용할 수 있으니까 간단히 코딩이 필요하신 분들은 Code Runner 사용하시면 될 듯 합니다.

const closure = () => {
    const name = "test";
    const displayName = () => {
        console.log(name);
    };
    displayName();
};

closure();

[react] react 에서 배열 데이터 삭제하기

범범조조 — Thu, 20 Apr 2023 20:28:49 +0900

참고

https://dev.to/collegewap/how-to-delete-an-item-from-the-state-array-in-react-kl

개요

react 에서 Button 컴포넌트 하나를 추가 후, 해당 버튼을 클릭하면 데이터가 하나씩 삭제되어 화면에 출력되는 코드를 작성해 봅니다.

리액트 프로젝트 생성

먼저 리팩트 프로젝트를 생성합니다.

npx create-react-app myapp

위 명령어를 통해 프로젝트 생성을 할 수 있습니다.

App.js 코드 작성

위에서 CRA 로 리액트 프로젝트가 성공적으로 생성되었다면, 기본으로 App.js 파일이 생성됩니다.
해당 코드를 아래와 같이 작성해 줍니다.

import { useState } from "react";

function App() {
    const array = [
        { id: 1, name: "  Apple" },
        { id: 2, name: "  Orange" },
        { id: 3, name: "  Banana" },
        { id: 4, name: "  Grapes" },
        { id: 5, name: "  Apple" },
        { id: 6, name: "  Orange" },
        { id: 7, name: "  Banana" },
        { id: 8, name: "  Grapes" },
    ];
    const [fruits, setFruits] = useState(array);
    const deleteById = (id) => {
        setFruits((oldValues) => {
            return oldValues.filter((fruit) => fruit.id !== id);
        });
    };
    return (
        <div className="App">
            <ul>
                {fruits.map((fruit) => {
                    return (
                        <li key={fruit.id}>
                            <span>{fruit.name}</span>
                            <button onClick={() => deleteById(fruit.id)}>Delete</button>
                        </li>
                    );
                })}
            </ul>
        </div>
    );
}

export default App;

위 코드를 간단히 설명을 하자면, Button 컴포넌트 하나를 추가하였습니다.
array 변수에는 과일 정보를 담고 있습니다.
각각의 과일 객체에는 id 정보와 과일 name 속성을 가지고 있습니다.
deleteById 함수에서는 삭제 대상의 객체의 id 값을 매개변수로 받아서 해당 id 값을 제외한 나머지의 데이터를 filter 하여 return 하도록 하였습니다.
return 된 값을 최종적으로 setFruits state 함수가 처리하여 데이터가 재 랜더링되면서 데이터가 삭제되는 것을 확인하실 수 있습니다.

출력 결과

[react] Button 클릭 시, 데이터 추가하기

범범조조 — Thu, 20 Apr 2023 20:27:58 +0900

개요

react 에서 Button 컴포넌트 하나를 추가 후, 해당 버튼을 클릭하면 데이터가 하나씩 추가되어 화면에 출력되는 코드를 작성해 봅니다.

리액트 프로젝트 생성

먼저 리팩트 프로젝트를 생성합니다.

npx create-react-app myapp

위 명령어를 통해 프로젝트 생성을 할 수 있습니다.

App.js 코드 작성

위에서 CRA 로 리액트 프로젝트가 성공적으로 생성되었다면, 기본으로 App.js 파일이 생성됩니다.
해당 코드를 아래와 같이 작성해 줍니다.

import "./App.css";
import { useState } from "react";

function App() {
    const array = [
        { id: 1, name: "Alice" },
        { id: 2, name: "BoBo" },
        { id: 3, name: "BiBi" },
    ];
    const [names, setNames] = useState(array);
    const handleClick = () => {
        const newItem = { id: 4, name: "BeomBeomJoJo" };
        setNames((current) => [...current, newItem]);
    };
    return (
        <div>
            <div>
                <button onClick={handleClick}>Push to state array</button>
            </div>

            {names.map((element, index) => {
                return (
                    <div key={index}>
                        <h2>
                            {element.id} / {element.name}
                        </h2>
                    </div>
                );
            })}
        </div>
    );
}

export default App;

위 코드를 간단히 설명을 하자면, Button 컴포넌트 하나를 추가하였습니다.
array 변수에는 기본으로 Alice, BoBo, BiBi 3개의 아이템이 들어 있습니다.
handleClick 함수를 통해, Button 클릭 이벤트가 발생할 때 마다 BeomBeomJoJo 의 이름을 가진 사람이 추가되도록 합니다.
map 을 통해 추가되는 학생들을 전부 출력해 줍니다.

출력 결과

[React] react-query 정리

범범조조 — Mon, 3 Apr 2023 20:40:55 +0900

참고

해당 내용은 (https://kyounghwan01.github.io/blog/React/react-query/basic/#%E1%84%89%E1%85%A1%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%92%E1%85%A1%E1%84%80%E1%85%B5) 사이트 보고 공부한 내용을 정리한 곳입니다.
보다 자세한 내용은 https://kyounghwan01.github.io/blog/React/react-query/basic/#%E1%84%89%E1%85%A1%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%92%E1%85%A1%E1%84%80%E1%85%B5 여기를 참고해 주세요~!

react-query api 모음

reat-query 에서 사용하는 api 들을 하나씩 정리 진행합니다.

useQuery

데이터를 get 하기 위한 api입니다. post, update는 useMutation을 사용합니다.
첫번째 파라미터로 unique Key가 들어가고, 두번째 파라미터로 비동기 함수(api호출 함수)가 들어갑니다.
첫번째 파라미터로 설정한 unique Key는 다른 컴포넌트에서도 해당 키를 사용하면 호출 가능합니다. unique Key는 string과 배열을 받습니다. 배열로 넘기면 0번 값은 string값으로 다른 컴포넌트에서 부를 값이 들어가고 두번째 값을 넣으면 query 함수 내부에 파라미터로 해당 값이 전달됩니다.
return 값은 api의 성공, 실패여부, api return 값을 포함한 객체입니다.
useQuery는 비동기로 작동합니다. 즉, 한 컴포넌트에 여러개의 useQuery가 있다면 하나가 끝나고 다음 useQuery가 실행되는 것이 아닌 두개의 useQuery가 동시에 실행됩니다. 여러개의 비동기 query가 있다면 useQuery보다는 밑에 설명해 드릴 useQueries를 권유드립니다.

useQuery 사용 예제 코드입니다.
우선, 저는 json-server 를 이용하여 가짜 서버에 json 형식으로 테이블 하나를 생성 및 데이터 추가를 해주었습니다.

{
    "posts": [
        {
            "id": "37f251ea-93ef-49bb-9642-f4b5c2ab3f51",
            "title": "BeomBeomJoJo",
            "body": "Body Content"
        }
    ]
}

여기서 fetch api 를 이용하여 해당 데이터를 조회하는 함수를 추가해 주었습니다.

export async function fetchPosts() {
    const response = await fetch("http://localhost:3000/posts");
    return response.json();
}

위 코드는 http://localhost:3000/posts 서버에 데이터를 요청하여 해당 데이터를 가져와 json 형식으로 return 해주는 함수입니다.
이제 위 내용을 토대로, 처음 프로젝트가 시작할 때 서버의 데이터를 모두 조회하는 로직을 react-query 의 useQuery api 를 사용하여 구현해 보았습니다.

import { useQuery } from "@tanstack/react-query";
import { useParams } from "react-router-dom";
import { fetchPost } from "../api/posts";
import { useNavigate } from "react-router-dom";

export default function Post() {
    const navigate = useNavigate();
    const { id } = useParams();
    const {
        isLoading,
        isError,
        data: post,
        error,
    } = useQuery({
        queryKey: ["posts", id],
        queryFn: () => fetchPost(id),
        refetchOnWindowFocus: false, // react-query는 사용자가 사용하는 윈도우가 다른 곳을 갔다가 다시 화면으로 돌아오면 이 함수를 재실행합니다. 그 재실행 여부 옵션 입니다.
        retry: 0, //실패시 재호출 몇 번 진행하지에 대한 여부
        onSuccess: (post) => {
            // 성공시 호출
            console.log(post);
        },
        onError: (e) => {
            // 실패시 호출 (401, 404 같은 error가 아니라 정말 api 호출이 실패한 경우만 호출됩니다.)
            // 강제로 에러 발생시키려면 api단에서 throw Error 날립니다.
            console.log(e.message);
        },
    });

    if (isLoading) return "loading...";
    if (isError) return `Error: ${error.message}`;

    return (
        <div>
            <button
                onClick={() => {
                    navigate("/");
                }}
            >
                back to list posts
            </button>
            <h1>{post.title}</h1>
            <p>{post.author}</p>
        </div>
    );
}

아래와 같이 json-server 의 데이터를 가져와서 출력해 주는 것을 볼 수 있습니다.

useQueries

useQuery 를 비동기로 여러 개 실행할 경우, 다음 코드와 같이 귀찮은 경우들이 발생하게 됩니다.
아래 코드를 보게 되면, 세 함수 모두 비동기로 실행합니다.
하지만, 세 변수를 개발자가 다 기억을 해야함과 동시에 세 변수에 대한 로딩, 성공, 실패처리를 모두 한다는 번거로운 작업이 생깁니다.

const usersQuery = useQuery("users", fetchUsers);
const teamsQuery = useQuery("teams", fetchTeams);
const projectsQuery = useQuery("projects", fetchProjects);

이때 promise.all처럼 useQuery를 하나로 묶을 수 있는데, 그것이 useQueries입니다. promise.all과 마찬가지로 하나의 배열에 각 쿼리에 대한 상태 값이 객체로 들어옵니다.

// 아래 예시는 롤 룬과, 스펠을 받아오는 예시입니다.
const result = useQueries([
    {
        queryKey: ["getRune", riot.version],
        queryFn: () => api.getRunInfo(riot.version),
    },
    {
        queryKey: ["getSpell", riot.version],
        queryFn: () => api.getSpellInfo(riot.version),
    },
]);

useEffect(() => {
    console.log(result); // [{rune 정보, data: [], isSucces: true ...}, {spell 정보, data: [], isSucces: true ...}]
    const loadingFinishAll = result.some((result) => result.isLoading);
    console.log(loadingFinishAll); // loadingFinishAll이 false이면 최종 완료
}, [result]);

useMutation

값을 바꿀 때 사용하는 API 입니다.
return 값은 useQUery 와 동일하고, 예시 코드를 통해 어떻게 사용 되는지 보여 드리도록 하겠습니다.

import PostForm from "../components/PostForm";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useParams } from "react-router-dom";
import { fetchPost, updatePost } from "../api/posts";
import { useNavigate } from "react-router-dom";

export default function EditPost() {
    const queryClient = useQueryClient();
    const navigate = useNavigate();
    const { id } = useParams();
    const {
        isLoading,
        isError,
        data: post,
        error,
    } = useQuery({
        queryKey: ["posts", id],
        queryFn: () => fetchPost(id),
    });
    const updatePostMutation = useMutation({
        mutationFn: updatePost,
        onSuccess: () => {
            // react-query 장점으로, 데이터 update 후에 get 함수를 간단히 재실행 할 수 있습니다.
            // mutation 함수가 성공했다면, unique key 로 맵핑된 get 함수를 invalidateQueries 에 넣어주면 됩니다.
            queryClient.invalidateQueries({ queryKey: ["posts"] });
            navigate("/");
        },
    });

    if (isLoading) return "loading...";
    if (isError) return `Error: ${error.message}`;

    const handleSubmit = (updatePost) => {
        updatePostMutation.mutate({ id, ...updatePost });
    };

    return (
        <div>
            <PostForm onSubmit={handleSubmit} initialValue={post} />
        </div>
    );
}

위에서 보면, useMutation 을 이용하여 데이터를 Update 하는 것을 확인하실 수 있습니다.
여기서 중요한 부분은, invalidateQueries 함수 입니다.
이 함수를 통해 mutation 함수가 성공 했다면, unique key 로 맵핑된 get 함수를 다시 재실행 시켜줘서, 업데이트 된 내용이 바로 재렌더링 되어 반영되게 할 수 있습니다.
이처럼, 데이터 변경 작업 혹은 추가 작업은 useMutation 함수를 이용하면 됩니다.

[Web 팁] JSON-SERVER 사용법

범범조조 — Thu, 30 Mar 2023 21:18:48 +0900

참고

JSON-SERVER 개요

프론트엔트 개발을 할 떄 서버단의 데이터를 가져와서 테스트를 진행해야 하는 경우가 있습니다.
하지만, 백엔드쪽 개발이 미완성이라면..데이터를 가져와서 테스트를 진행할 수가 없습니다..
하지만, JSON-SERVER 를 이용하면 실무에서 사용하는 실 데이터와 최대한 비슷한 느낌으로 가짜 API 서버를 만들어서 테스트를 진행할 수있습니다.
즉, JSON-SERVER 를 이용하여 연습용 서버를 쉽게 구성하여 백엔드쪽이 완성되지 않더라도 프론트엔드 개발에는 문제 없이 개발을 진행할 수 있습니다.

참고로, JSON-SERVER 는 프로덕션에서 사용하기 위해 만들어진 것이 아닙니다. 떄문에 JSON-SERVER 를 이용하여 실제 프로젝트를 개발하면 안됩니다.

JSON-SERVER 사용법

그럼 이제 JSON-SERVER 사용하는 방법에 대해서 알아 보도록 하겠습니다.

JSON-SERVER 설치

먼저 JSON-SERVER 설치를 진행합니다.

npm install -g json-server

위 명령어를 통해 json-server 설치를 진행합니다.

db.json 파일 생성

json-server 설치가 완료 되었으면, db.json 파일 하나를 생성합니다.
db.json 파일은 루트 디렉터리에서 생성을 해주고, 여기서 db.json 파일은 데이터베이스 역할을 합니다.

{
    "todos": [
        {
            "id": 1,
            "content": "HTML",
            "completed": true
        },
        {
            "id": 2,
            "content": "CSS",
            "completed": false
        },
        {
            "id": 3,
            "content": "Javascript",
            "completed": true
        }
    ],
    "users": [
        {
            "id": 1,
            "name": "Lee",
            "role": "developer"
        },
        {
            "id": 2,
            "name": "Kim",
            "role": "designer"
        }
    ]
}

db.json 파일의 내용은 위와 같이 테스트 데이터 하나 작성 진행합니다.
테스트 내용은 얼마든지 변경되도 무방합니다.

json-server 실행

이제 json-server 를 사용하기 위한 사전 준비는 모두 마쳤습니다.
json-server 를 실행해서, 실제로 URL 주소에서 json 데이터가 보이는지 확인해 보겠습니다.
json-server 를 실행하는 명령어는 다음과 같습니다.

json-server --watch db.json

위 명령어를 실행해서 정상 실행이 되면, 아래와 같이 로그가 출력되는 것을 확인할 수 있습니다.

PS C:\Users\bh.cho\OneDrive\바탕 화면\jsonserver> json-server --watch db.json

  \{^_^}/ hi!

  Loading db.json
  Done

  Resources
  http://localhost:3000/todos
  http://localhost:3000/users

  Home
  http://localhost:3000

  Type s + enter at any time to create a snapshot of the database
  Watching...

앞서, db.json 파일에 todos, users 2개의 데이터를 추가 하였습니다.
쉽게 생각해, todos, users 2개의 테이블이 생성되었고 그 내용을 http://localhost:3000/todos, http://localhost:3000/users URL 주소로 생성되는 것입니다.
그럼 실제로, 해당 주소로 가서 json 데이터가 정상적으로 나오는지 확인해 보겠습니다.
URL 주소 접속 결과, 아래와 같이 데이터 조회가 정상적으로 되는 것을 확인할 수 있습니다.

JSON-SERVER 포트 변경하는 방법

json-server 의 기본 포트는 3000번 입니다.
만약 포트를 변경하려면, port 옵션을 추가해주면 됩니다.

json-server --watch db.json --port 5000

위와 같이 매변 명령어를 통해 입력하는 것은 번거롭습니다.
때문에, package.json 파일의 scripts 를 다음과 같이 수정하여 json-server 를 실행해주면 됩니다.

{
  "name": "json-server-exam",
  "version": "1.0.0",
  "scripts": {
    "start": "json-server --watch db.json"
  },
  "devDependencies": {
    "json-server": "^0.15.0"
  }
}

npm start

[React] react-query 사용하기

범범조조 — Thu, 30 Mar 2023 20:17:44 +0900

참고

https://kyounghwan01.github.io/blog/React/react-query/basic/#%E1%84%89%E1%85%A1%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%92%E1%85%A1%E1%84%82%E1%85%B3%E1%86%AB-%E1%84%8B%E1%85%B5%E1%84%8B%E1%85%B2

개요

Vite 을 통해 테스트 진행할 리액트 프로젝트 하나를 생성합니다.
생성된 프로젝트에 react-query 를 다운받고, CRUD 기능을 통해 react-query 사용 방법에 대해서 익힙니다.

사용 기술

react-query 테스트 프로젝트를 개발하기 위해, 사전에 필요한 라이브러리 정보는 다음과 같습니다.
- vite
- react-query
- react-query-devtools
- json-server
- uuid
테스트 프로젝트에서 사용될 라이브러리 목록은 위와 같습니다.
각 라이브러리는 프로젝트 진행해 나가면서, 필요할 때 마다 설치 진행하겠습니다.

Vite 설치

저는 Vite 를 사용해서 프로젝트를 진행해 나가려고 합니다.
Vite 는 빠르고 간결한 모던 웹 프로젝트 개발 경험에 맞춰 탄생항 빌드 도구입니다.
자세한 내용은 https://vitejs-kr.github.io/guide/ 해당 사이트에서 확인하시면 됩니다.
앞서 생성한 리액트 프로젝트에서 Vite 를 설치 해줍니다.
Vite 설치하는 방법은 아래와 같습니다.

npm create vite@latest ./

위 명령어를 통해 Vite를 설치 합니다.
정상적으로 설치가 되었다면, 아래와 같이 프로젝트가 생성된 것을 확인할 수 있습니다.

다음으로, npm install 명령을 통해 package.json 파일의 의존이 되어있는 패키지들을 설치 진행해줍니다.

npm install

여기까지 모두 완료 하였다면, 이제 정상적으로 실행 되는지 확인을 위해서 Vite 를 실행합니다.
Vite 를 실행하는 명령어는 다음과 같습니다.

npm run dev

npm run dev 명령을 실행하게 되면, 아래와 같이 로그가 출력됩니다.


  VITE v4.2.1  ready in 1015 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

위에서 http://localhost:5173 주소가 보이는데, 여기로 접속 합니다.
문제 없이 설치가 되었다면, 아래와 같이 Vite + React 화면이 나오는 것을 확인할 수 있습니다.

불필요한 파일 삭제

다음으로, 프로젝트 개발에 앞서 필요없는 파일 3가지를 우선 삭제 하도록 하겠습니다.
삭제 진행할 파일 목록은 다음과 같습니다.
- assets
- App.css
- index.css
앞서 Vite 를 통해 생성했던 프로젝트에서 위 3가지 파일을 삭제합니다.

위와 같이 삭제를 완료 하였다면, 남은 파일 목록은 아래와 같습니다.

Router 구성

앞에서 불필요한 파일을 삭제 하였다면, 이제 라우터를 구성합니다.
먼저, 라우터를 구성하기 위해 필요한 패키지인 react-router-dom 패키지를 설치 합니다.
설치 명령어는 아래와 같습니다.

npm i react-router-dom

설치가 완료 되었다면, main.jsx 에 BrowserRouter 를 추가해 줍니다.

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")).render(
    <React.StrictMode>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </React.StrictMode>
);

위와 같이 BrowserRouter 를 추가해 주었습니다.

App.jsx 에 페이지 라우터 구성

React-Query 테스트를 위해, 총 3개의 페이지를 구성합니다.
아직 페이지를 생성하지는 않았지만, 아래와 같이 PostLists, Post, EditPost 3개의 페이지 Router 를 구성해 줍니다.

import { useState } from "react";

function App() {
    return (
        <div className="App">
            <h1>Awesome blog</h1>
            <Routes>
                <Route path="/" element={<PostLists />} />
                <Route path="/post/:id" element={<Post />} />
                <Route path="/post/:id/edit" element={<EditPost />} />
            </Routes>
        </div>
    );
}

export default App;

위에서 PostLists, Post, EditPost 페이지는 하나씩 구현해 나갈 예정입니다.

react-query 설치

App.jsx 에 Router 구성이 완료 되었다면, 페이지와 컴포넌트를 추가하기에 앞서 react-query 를 먼저 설치를 진행합니다.
react query 의 공식 사이트는 https://tanstack.com/query/v3/ 해당 링크를 통해 확인하실 수 있습니다.
react-query 설치하는 명령어는 아래와 같습니다.

npm i @tanstack/react-query

react-qeury 를 추가 완료 하였다면, react-query 전용 devtools 도 설치해줍니디다.

npm i @tanstack/react-query-devtools

위와 같이 설치가 모두 완료 되었다면, react-query 를 사용할 준비는 모두 마쳤습니다.
react-query, react-query devtools 를 사용하려면, main.jsx 에 관련 속성을 추가해 주어야 합니다.

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";

// create a client
const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById("root")).render(
    <React.StrictMode>
        <BrowserRouter>
            <QueryClientProvider client={queryClient}>
                <App />
                <ReactQueryDevtools initialIsOpen={false} />
            </QueryClientProvider>
        </BrowserRouter>
    </React.StrictMode>
);

json-server 설치 및 구성

react-query 를 사용하기에 앞서, client 에서 서버쪽으로 데이터를 요청해서 조회해야 할 서버 쪽 데이터가 필요합니다.
하지만, 서버를 구성하기에는 워낙 시간적 비용이 많이 들기 떄문에 원활한 테스트를 위해 json-server 를 이용하여 가짜 서버 역학을 하려고 합니다.
json-server 설치는 다음 명령어를 통해 가능합니다.

npm install -g json-server

설치가 완료 되었으면, 프로젝트 root 경로에 db.json 파일을 하나 생성해 줍니다.
그리고 아래와 같이 테스트 데이터를 json 형식으로 추가합니다.

{
    "posts": [
        {
            "id": "1",
            "title": "title",
            "body": "body"
        }
    ]
}

우선 posts 이름을 가진 데이터 Array 가 있고, 여기에는 1개의 item 을 가지고 있는 형태의 json 데이터를 하나 생성하였습니다.
그리고 json-server 를 실행시켜 주면 됩니다.
json-server 실행 시켜주는 명령어는 아래와 같습니다.

json-server --watch db.json

위 명령어를 통해, json-server 를 실행시킬 수 있습니다.
정상적으로 실행 되었다면, 아래와 같이 로그가 출력됩니다.

\{^_^}/ hi!

  Loading db.json
  Done

  Resources
  http://localhost:3000/posts

  Home
  http://localhost:3000

  Type s + enter at any time to create a snapshot of the database
  Watching...

CRUD API 서비스 추가

다음으로 react-query 를 이용하여 서버의 데이터를 CRUD 하기 위한 api 파일 하나를 생성합니다.
src/api/posts.jsx 경로에 posts.jsx 파일을 하나 생성 후, 서버의 데이터를 요청하는 로직을 추가해 줍니다.
여기서 저는 fetch API 를 사용하였습니다.

export async function fetchPosts() {
    const response = await fetch("http://localhost:3000/posts");
    return response.json();
}

export async function fetchPost(id) {
    const response = await fetch(`http://localhost:3000/posts/${id}`);
    return response.json();
}

export async function createPost(newPost) {
    const response = await fetch(`http://localhost:3000/posts`, {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify(newPost),
    });
    return response.json();
}

export async function updatePost(updatedPost) {
    const response = await fetch(`http://localhost:3000/posts/${updatedPost.id}`, {
        method: "PUT",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify(updatedPost),
    });
    return response.json();
}

export async function deletePost(id) {
    const response = await fetch(`http://localhost:3000/posts/${id}`, {
        method: "DELETE",
    });
    return response.json();
}

위에서 작성한 함수들을 바로 뒤에서 만들 페이지 및 컴포넌트에서 사용할 예정입니다.

페이지 및 컴포넌트 추가

앞서, react-query 와 react-query devtools 설정을 완료 하였습니다.
또한, App.jsx 에 3개의 페이지 전환을 위한 라우터 구성도 완료하였습니다.
이제 앞서 추가했던, PostLists, Post, EditPost 3개의 페이지 및 관련 컴포넌트들을 추가하도록 하겠습니다.

Post 페이지 생성

src/pages/Post.jsx 경로로 해서 Post 페이지를 추가하였습니다.
Post.jsx 코드는 다음과 같습니다.

import { useQuery } from "@tanstack/react-query";
import { useParams } from "react-router-dom";
import { fetchPost } from "../api/posts";
import { useNavigate } from "react-router-dom";

export default function Post() {
    const navigate = useNavigate();
    const { id } = useParams();
    const {
        isLoading,
        isError,
        data: post,
        error,
    } = useQuery({
        queryKey: ["posts", id],
        queryFn: () => fetchPost(id),
    });

    if (isLoading) return "loading...";
    if (isError) return `Error: ${error.message}`;

    return (
        <div>
            <button
                onClick={() => {
                    navigate("/");
                }}
            >
                back to list posts
            </button>
            <h1>{post.title}</h1>
            <p>{post.author}</p>
        </div>
    );
}

Post.jsx 페이지 코드를 보시면, useQuery 를 이용하여 데이터를 불러오는 것을 확인하실 수 있습니다.
useQuery 는 데이터를 get 하기 위한 api 입니다.
post, update, delete 는 useMutation 을 사용합니다.
첫 번째 파라미터로 unique key 가 들어가고, 두 번째 파라미터로 비동기 함수(api 호출 함수) 가 들어갑니다. (두 번째 파라미터는 promise 가 들어가야 합니다.)
첫 번째 파라미터로 설정한 unique Key 는 다른 컴포넌트에서도 해당 키를 사용하면 호출 가능합니다. unique key 는 string 배열을 받습니다. 배열로 넘기면 0번 값은 string 값으로 다른 컴포넌트에서 부를 값이 들어가고 두 번째 값을 넣으면 query 함수 내부에 파리미터로 해당 값이 전달됩니다.
return 값은 api의 성공, 실패여부, api return 값을 포함한 객체입니다.
useQuery는 비동기로 작동합니다. 즉, 한 컴포넌트에 여러개의 useQuery가 있다면 하나가 끝나고 다음 useQuery가 실행되는 것이 아닌 두개의 useQuery가 동시에 실행됩니다. 여러개의 비동기 query가 있다면 useQuery보다는 밑에 설명해 드릴 useQueries를 권유드립니다.
enabled를 사용하면 useQuery를 동기적으로 사용 가능합니다.

PostList 페이지 생성

src/pages/PostList.jsx 경로로 해서 PostList 페이지를 추가하였습니다.
PostList.jsx 코드는 다음과 같습니다.

import AddPost from "../components/AddPost";
import { QueryClient, useQueryClient, useMutation, useQuery } from "@tanstack/react-query";
import { deletePost, fetchPosts } from "../api/posts";
import { useNavigate } from "react-router-dom";
import { useEffect, useMemo, useState } from "react";

export default function PostLists() {
    const queryClient = useQueryClient();
    const navigate = useNavigate();
    const {
        isLoading,
        isError,
        data: posts,
        error,
    } = useQuery({
        queryKey: ["posts"],
        queryFn: fetchPosts,
    });

    const deletePostMutation = useMutation({
        mutationFn: deletePost,
        onSuccess: () => {
            queryClient.invalidateQueries({ queryKey: ["posts"] });
        },
    });

    const handleDelete = (id) => {
        deletePostMutation.mutate(id);
    };

    if (isLoading) return "loading...";
    if (isError) return `Error: ${error.message}`;

    return (
        <div>
            <AddPost />
            {posts.map((post) => (
                <div key={post.id} style={{ background: "#777" }}>
                    <h4 style={{ cursor: "pointer" }} onClick={() => navigate(`/post/${post.id}`)}>
                        {post.title}
                    </h4>
                    <button onClick={() => navigate(`/post/${post.id}/edit`)}>Edit</button>
                    <button onClick={() => handleDelete(post.id)}>Delete</button>
                </div>
            ))}
        </div>
    );
}

EditPost 페이지 생성

src/pages/EditPost.jsx 경로로 해서 EditPost 페이지를 추가하였습니다.
EditPost.jsx 코드는 다음과 같습니다.

import PostForm from "../components/PostForm";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useParams } from "react-router-dom";
import { fetchPost, updatePost } from "../api/posts";
import { useNavigate } from "react-router-dom";

export default function EditPost() {
    const queryClient = useQueryClient();
    const navigate = useNavigate();
    const { id } = useParams();
    const {
        isLoading,
        isError,
        data: post,
        error,
    } = useQuery({
        queryKey: ["posts", id],
        queryFn: () => fetchPost(id),
    });
    const updatePostMutation = useMutation({
        mutationFn: updatePost,
        onSuccess: () => {
            queryClient.invalidateQueries({ queryKey: ["posts"] });
            navigate("/");
        },
    });

    if (isLoading) return "loading...";
    if (isError) return `Error: ${error.message}`;

    const handleSubmit = (updatePost) => {
        updatePostMutation.mutate({ id, ...updatePost });
    };

    return (
        <div>
            <PostForm onSubmit={handleSubmit} initialValue={post} />
        </div>
    );
}

AddPost.jsx 컴포넌트 생성

앞서 페이지에서 사용하는 공통 컴포넌트 중 하나인 AddPost.jsx 컴포넌트 코드입니다.

import { useMutation, useQueryClient } from "@tanstack/react-query";
import { createPost } from "../api/posts";
import PostForm from "./PostForm";
import { v4 as uuidv4 } from "uuid";

export default function AddPost() {
    const queryClient = useQueryClient();

    const createPostMutation = useMutation({
        mutationFn: createPost,
        onSuccess: () => {
            queryClient.invalidateQueries({ queryKey: ["posts"] });
            console.log("success bro!");
        },
    });

    const handleAddPost = (post) => {
        createPostMutation.mutate({
            id: uuidv4(),
            ...post,
        });
    };

    return (
        <div>
            <h2>Add new post</h2>
            <PostForm onSubmit={handleAddPost} initialValue={{}} />
        </div>
    );
}

위 코드에서 핵심은 useMutation react-query 에서 제공해주는 hook 을 이용하여 데이터를 추가해주고 있는 부분입니다.
useMutation 을 값을 바꿀때 사용하는 api 입니다.
앞서, src/api/posts.jsx API 에서 만든 createPost 함수를 mutationFn 에 넣어 주었습니다.

PostForm.jsx 컴포넌트 생성

앞서 페이지에서 사용하는 공통 컴포넌트 중 하나인 PostForm.jsx 컴포넌트 코드입니다.

import { useState } from "react";

export default function PostForm({ onSubmit, initialValue }) {
    const [post, setPost] = useState({
        title: initialValue.title || "",
        body: initialValue.body || "",
    });

    const handleChangeInput = (e) => {
        setPost({
            ...post,
            [e.target.name]: e.target.value,
        });
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        onSubmit(post);
        setPost({
            title: "",
            body: "",
        });
    };

    const renderField = (label) => (
        <div>
            <label>{label}</label>
            <input onChange={handleChangeInput} type="text" name={label.toLowerCase()} value={post[label.toLowerCase()]} />
        </div>
    );

    return (
        <form onSubmit={handleSubmit}>
            {renderField("Title")}
            {renderField("Body")}
            <button type="submit">Submit</button>
        </form>
    );
}

전체 프로젝트 구조

이제 코드는 모두 작성 완료 하였습니다.
완성된 프로젝트의 폴더 구조는 아래와 같습니다.

실행 결과

[React] React Query 란?

범범조조 — Thu, 30 Mar 2023 20:13:45 +0900

참고

React-Query 개요

React-Query 는 리액트 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 보다 쉽게 다룰 수 있도록 도와주는 라이브러리 입니다.
클라이언트 상태와 서버 상태를 명확히 구분하기 위해 만들어 졌습니다.
React-Query 에서는 기존 상태 관리 라이브러리인 redux, mobX 가 클라이언트 상태 작업에 적합하지만, 비동기 또는 서버 상태 작업에는 그다지 좋지는 않다고 언급 했습니다.
클라이언트 상태와 서버 상태는 완전히 다른 개념이며, 클라이언트 상태는 각각의 input 값으로 예를 들 수 있고, 서버 상태는 데이터 베이스에 저장되어 있는 데이터로 예를 들 수 있습니다.
Axios나 Fetch API와 같은 데이터 fetching 라이브러리와 원활하게 작동하도록 설계되어 있습니다.

React-Query 기능

React-Query 기능은 다음과 같습니다.
- 캐싱
- 동일한 데이터에 대한 중복 요청을 단일 요청으로 통합
- 백그라운드에서 오래된 데이터 업데이트
- 데이터가 얼마나 오래 되었는지 확인 가능
- 데이터 업데이트 빠르게 반영
- 페이지네이션 및 데이터 지연 로드와 같은 성능 최적화
- 서버 상태의 메모리 및 가비지 수집 관리
- 구조 공유를 사용하여 쿼리 결과를 메모화

캐싱이란? 데이터를 임시로 저장하여 다음에 필요할 때 빠르게 가져올 수 있도록 하는 기법을 얘기 합니다. 데이터를 요청할 때 마다 API 에 요청하지 않고, 만약 이전에 저장해둔 데이터의 이력이 존재하면 해당 데이터를 사용할 수 있어서 응답 속도가 빠르다는 장점이 있습니다. React-Query 는 캐싱 기능을 제공하여 외부 API로부터 가져온 데이터를 캐싱하고 이를 재사용할 수 있다는 장점이 존재합니다.

React-Query 장단점

React-Query 가 주장하는 장단점은 다음과 같습니다.
- server-state (DB 데이터)를 프론트엔드에서 실시간 동기화해주는걸 도와준다고 합니다.
- 하지만 ajax 요청을 몇 초마다 계속 날려서 가져오는 방식이라 좀 비효율적일 수도 있습니다.
- 실시간 서버에서 데이터를 자주 보내려면 웹소켓이나 Server-sent events 같은 가벼운 방식들도 있습니다.
- 그래서 React-Query는 ajax 관련 기능개발 편하게 할 수 있는데 더 의의가 있습니다.

타 라이브러리

React-Query 말고도 RTK Query 라는 라이브러리도 있습니다.
Redux Toolkit 설치한 경우 RTK Query 라는 것도 기본적으로 사용이 가능합니다.
하지만 RTK Query 는 React-Query 와 차이점이 있어서 해당 부분은 다음에 다시 정리 진행해 보도록 하겠습니다.

[gRPC] C# gRPC Server/Client 생성하기

범범조조 — Tue, 21 Mar 2023 00:59:13 +0900

목적

C# 으로 gRPC 통신을 구현합니다.
Server/Client 두 서비스 모두 C# 으로 작성합니다.
그럼 C# 으로 간단한 gRPC 서비스를 만들어 보도록 하겠습니다.

개발 환경

개발 환경은 다음과 같습니다.
- OS : Windows 11
- .NET Version : .NET 6
- IDE : Visual Studio 2022

gRPC Server 구현

그럼 먼저 gRPC C# Server 를 구현하는 방법에 대해서 알려 드리도록 하겠습니다.
Visual Studio 2022 를 실행한 후, ASP.NET Core gRPC 서비스 프로젝트를 생성합니다.
gRPC 서비스를 생성하게 되면, 기본으로 Protos 폴더가 생깁니다.
Default 로 greet.proto 라고 해서 프로토콜 버퍼가 생깁니다.
저는 greet.proto 파일을 사용하지 않고, 직접 간단한 Customer 프로토콜 버퍼를 생성해 해당 파일로 gRPC 통신을 해보려고 합니다.

customers.proto 파일 생성

gRPC 서버/클라이언트 프로그램을 작성하기에 앞서, 예제로 사용하기 위한 customers.proto 파일을 작성합니다.
서비스의 이름은 Customer 이고, 현재 원격 메서드로 GetCustomerInfo 메서드가 정의되어 있습니다.
그럼 이제 해당 프로토콜 버퍼를 통해 통신하는 서버/클라이언트 프로그램을 만들어 보도록 하겠습니다.

syntax = "proto3";

option csharp_namespace = "gRPCTest.Protos";

service Customer{
   rpc GetCustomerInfo(CustomerLookupModel) returns (CustomerModel);
}

message CustomerLookupModel{
   int32 userId = 1;
}

message CustomerModel{
   string firstName = 1;
   string lastName = 2;
   string emailAddress = 3;
   bool isAlive = 4;
   int32 age = 5;
}

프로토콜 버퍼 제너레이터 하기

서버/클라이언트 프로그램을 작성하기에 앞서, 앞에서 만들었던 customers.proto 파일을 컴파일 하여, C# 소스코드로 제너레이터 해야합니다.
제너레이터 하는 방법은 customers.proto -> 마우스 우 클릭 하여 속성 페이지에 접근합니다.
그리고 Build Action 은 Protobuf Compiler, gRPC Stub Classes 는 Server Only 로 설정하여 다시 재 빌드를 해주면 제너레이터가 된 것입니다.

CustomerService 작성

다음으로 CustomerService 클래스를 생성한 후, 코드를 작성합니다.
해당 코드에서는 Client 로부터 받은 메시지를 Server 에서 처리하는 로직이 들어있습니다.
아래 예제에서는, Client 로부터 받은 UserID 값에 따라 다른 사람의 이름을 Server 가 반환해 주고 있습니다.

using Ecommerce;
using Grpc.Core;
using gRPCTest.Protos;

namespace gRPCTest.Services
{
    public class CustomerService : Customer.CustomerBase
    {
        private readonly ILogger<CustomerService> _logger;
        private List<Product> products = new();

        public CustomerService(ILogger<CustomerService> logger)
        {
            _logger = logger;
        }

        public override Task<CustomerModel> GetCustomerInfo(CustomerLookupModel request, ServerCallContext context)
        {
            CustomerModel output = new();

            if(request.UserId == 1)
            {
                output.FirstName = "Jamie";
                output.LastName = "Smith";
            }
            else if(request.UserId == 2)
            {
                output.FirstName = "Jane";
                output.LastName = "Doe";
            }
            else
            {
                output.FirstName = "Greg";
                output.LastName = "Thomas";
            }

            return Task.FromResult(output);
        }
    }
}

파이프라인 추가

이제 마지막으로 Program.cs 에서 app.MapGrpcService<CustomerServices>(); 코드를 추가하여 CustomerServices 의 파이프라인을 추가합니다.
이제 Server 쪽 준비는 모두 완료 되었습니다.

using gRPCTest.Services;

var builder = WebApplication.CreateBuilder(args);

// Additional configuration is required to successfully run gRPC on macOS.
// For instructions on how to configure Kestrel and gRPC clients on macOS, visit https://go.microsoft.com/fwlink/?linkid=2099682

// Add services to the container.
builder.Services.AddGrpc();

var app = builder.Build();

// Configure the HTTP request pipeline.
app.MapGrpcService<CustomerService>();
app.MapGet("/", () => "Communication with gRPC endpoints must be made through a gRPC client. To learn how to create a client, visit: https://go.microsoft.com/fwlink/?linkid=2086909");

app.Run();

gRPC client 콘솔 프로젝트 생성 및 proto 파일 추가

앞서, gRPC Server 프로그램 로직을 모두 작성 완료 하였습니다.
다음은 Client 프로그램을 만들 차례입니다.
콘솔 프로젝트 하나를 생성한 후, 앞서 Server 에서 사용하였던 customer.proto 파일을 그대로 복사 붙여넣기 해 줍니다.

syntax = "proto3";

option csharp_namespace = "gRPCTest.Protos";

service Customer{
   rpc GetCustomerInfo(CustomerLookupModel) returns (CustomerModel);
}

message CustomerLookupModel{
   int32 userId = 1;
}

message CustomerModel{
   string firstName = 1;
   string lastName = 2;
   string emailAddress = 3;
   bool isAlive = 4;
   int32 age = 5;
}

NuGet Package 설치

Client 프로그램에서 gRPC 서비스를 사용하려면 총 3개의 gRPC 관련 NuGet Package를 설치해야 합니다.
- Google.Protobuf
- Grpc.Net.Client
- Grpc.Tools
위 3개의 NuGet Package를 미리 설치해 주시기 바랍니다.

client C# 프로젝트에서 GrpcService 속성 변경

다음으로 생성했던 gRPCClient.csproj 파일에 가서 <Protobuf..> 로 시작하는 속성에서 GrpcService 속성을 Server -> Client 로 변경해 줍니다.

프로토콜 버퍼 제너레이터 하기

서버와 마찬가지로, Client 에서 추가했던 customers.proto 파일을 C# 코드로 작성되게 끔 제너레이터 작업을 진행해야 합니다.
- 제너레이터 하는 방법은 customers.proto -> 마우스 우 클릭 하여 속성 페이지에 접근합니다.
그리고 Build Action 은 Protobuf Compiler, gRPC Stub Classes 는 Client Only 로 설정하여 다시 재 빌드를 해주면 제너레이터가 된 것입니다.

Client 통신 코드 작성

Program.cs 에 Server 에게 request 를 보내고, 다시 Server 가 반환한 객체를 출력하는 것까지 소스코드를 작성해 보도록 하겠습니다.

using Grpc.Net.Client;
using gRPCTest.Protos;

var channel = GrpcChannel.ForAddress("https://localhost:7223");
var customerClient = new Customer.CustomerClient(channel);

var clientRequested = new CustomerLookupModel { UserId = 3 };

var customer = await customerClient.GetCustomerInfoAsync(clientRequested);

Console.WriteLine($"{customer.FirstName} {customer.LastName}");

Console.ReadLine();

실행 방법

실행 방법은 Server 가 우선 실행되어 있어야 합니다.
그리고 나서, Client 프로그램을 실행하면 됩니다.

실행 결과

실행 결과, Client 가 Server 로 전송하는 UserId 값에 따라 그에 맞는 User 이름이 반환되어 출력되는 것을 확인할 수 있습니다.

Greg Thomas

[PostgreSQL] PostgreSQL 에서 JSONB 사용한 CRUD

범범조조 — Mon, 20 Mar 2023 00:56:41 +0900

참조

참고 사이트

소개

요즘 데이터를 전송하는 가장 일반적인 방법은 JSON(JavaScript Object Notation) 을 사용하는 것입니다.
Postgres 9.5 이상 부터는 JSON을 저장 및 가져올 수 있을 뿐만 아니라 JSON 구조를 기반으로 작업을 수행할 수 있도록 새로운 JSONB 유형의 Column이 새롭게 도입되었습니다.

Use case

다음 User를 등록하는 간단한 애플리케이션이 있습니다.
응용프로그램을 개선하고 사용자 인터페이스(테마, 아이콘, 텍스트 크기)를 구성하는 기능을 추가한다고 가정합니다.
각 사용자는 여러 개의 구성을 가질 수 있으며 이러한 구성을 전환할 수도 있습니다.
위 내용을 토대로 작업할 JSON은 다음과 같습니다.

{
    "userid":"artur@gmail.com",
    "configurations":[
        {
            "name":"myconf",
            "theme":"light",
            "icons":"small",
            "textsize":"large"
        },
        {
            "name":"myconf2",
            "theme":"dark"
        }
    ]
}

Creating a table

JSON 구성을 저장할 테이블을 생성합니다.
저는 pgAdmin GUI 도구를 가지고 테이블을 생성하였습니다.
만약 SQL 구문을 통해 테이블을 생성하려면 다음과 같이 SQL 쿼리를 작성하면 됩니다.

CREATE TABLE USER_CONFIGURATIONS (
  ID         BIGSERIAL PRIMARY KEY,
  DATA       JSONB
);

CRUD. Create

사용자가 응용 프로그램에 등록할 때 JSON 배열로 USER_CONFIGRATIONS 테이블에 레코드를 생성한다고 가정합니다.

INSERT INTO USER_CONFIGURATIONS
(DATA)
VALUES('{"userid":"artur@gmail.com", "configurations":[]}'::jsonb);

데이터가 성공적으로 추가 되었는지 아래 SQL 문을 통해 확인합니다.

SELECT * FROM USER_CONFIGURATIONS;

테이블에 entity를 하나 더 추가해 보도록 하겠습니다.

INSERT INTO USER_CONFIGURATIONS
(DATA)
VALUES('{"userid":"ihor@gmail.com",
"configurations":[{ "name":"myconf", "theme":"light", "icons":"small", "textsize":"large" }, { "name":"myconf2", "theme":"dark" }]}'::jsonb);

데이터가 성공적으로 추가된 것을 확인할 수 있습니다.

CRUD. Read

때에 따라서 사용자 ID 별로 모든 구성을 가져 올 수 있어야 합니다.
예를 들어, ihor@gmail.com 과 관련된 모든 구성을 가져오고 싶으면 다음과 같이 SQL문을 작성하면 됩니다.

SELECT DATA -> 'configurations' AS configs
FROM USER_CONFIGURATIONS
WHERE 1 = 1
AND (DATA ->> 'userid') = 'ihor@gmail.com'

실행 결과, userid 가 ihor@gmail.com 사람의 정보가 검색되어 나오는 것을 확인할 수 있습니다.

Read 쿼리 분석

앞서 아래 쿼리문을 통해 JSONB 데이터를 검색하였습니다.
좀 더 자세히 SQL 문을 분석해 보도록 하겠습니다.

SELECT DATA -> 'configurations' AS configs
FROM USER_CONFIGURATIONS
WHERE 1 = 1
AND (DATA ->> 'userid') = 'ihor@gmail.com'

JSONB 열 유형으로 작업할 때 -> 및 ->> 와 같은 추가 기능을 사용할 수 있습니다.
둘 다 오른쪽에 지정된 이름으로 JSON 객체의 내용을 반환합니다.
이러한 함수의 차이점은 반환의 유형입니다.
-> 는 텍스트를 반환하고 ->> 는 JSONB 를 반환합니다.
이 외에도 이름으로 사용자의 구성을 찾을 수 있어야 합니다.
아래와 같이 SQL 문을 작성할 수도 있습니다.

SELECT config as congifuration
FROM USER_CONFIGURATIONS
  CROSS JOIN jsonb_array_elements(DATA -> 'configurations') config
  WHERE (DATA ->> 'userid') = 'ihor@gmail.com'
  AND (config ->> 'name') = 'myconf';

CRUD. Update

다음은 Update 구문 입니다.
artur@gmail.com 을 추가해 보도록 하겠습니다.

UPDATE USER_CONFIGURATIONS
SET DATA =
jsonb_set(DATA, '{configurations}'::text[], DATA ->'configurations' || '{"name":"firstconf", "theme":"dark", "textsize":"large"}'::jsonb)
WHERE 1 = 1
AND (DATA ->> 'userid') = 'artur@gmail.com';

데이터 조회 결과, 정상적으로 데이터가 Update 된 것을 확인할 수 있습니다.

Update 쿼리 분석

UPDATE USER_CONFIGURATIONS
SET DATA =
jsonb_set(DATA, '{configurations}'::text[], DATA ->'configurations' || '{"name":"firstconf", "theme":"dark", "textsize":"large"}'::jsonb)
WHERE 1 = 1
AND (DATA ->> 'userid') = 'artur@gmail.com';

위에서 jsonb_set(target jsonb, path text[], new_value jsonb, create_missing boolean) 함수를 사용하고 있습니다.
Data를 대상 JSONB 객체로 전달하고 'configurations' JSON 객체를 정보를 교체하려는 전달로 지정하고 '구성' JSON 객체에 대한 새 값을 정의합니다.
함수 || 는 연결 함수 입니다.
따라서 여기에서 이전 'configurations' 값을 가져와 새 값과 연결합니다.
그 후, 초기 DATA JSON에서 'configurations' 객체를 UPDATE 하고 DATA JSON을 업데이트 된 것으로 교체합니다.

CRUD. Delete

삭제 작업은 간단합니다.

DELETE FROM USER_CONFIGURATIONS
WHERE (DATA ->> 'userid') = 'ihor@gmail.com'

[C#] EF Core - Fluent API 1:N 관계

범범조조 — Sun, 19 Mar 2023 00:54:36 +0900

참조

참고 사이트

소개

일반적으로 EF Core 에는 자동으로 구성할 수 있는 충분한 규칙이 포함되어 있으므로 1:N 관계를 구성할 필요가 없습니다.
그러나 쉬운 유지 관리를 위해 Fluent API 에 모든 EF 구성을 포함하기로 결정한 경우 Fluent API를 사용하여 1:N 관계를 구성할 수 있습니다.

예제

EF Core를 사용하면 Fluent API를 사용하여 관계를 쉽게 구성할 수 있습니다.
Grade Entity가 많은 Student Entity를 포함하는 다음 Student 및 Grade 클래스를 보시면 됩니다.

public class Student
{
    public int Id { get; set; }
    public string Name { get; set; }

    public int CurrentGradeId { get; set; }
    public Grade Grade { get; set; }
}

public class Grade
{
    public int GradeId { get; set; }
    public string GradeName { get; set; }
    public string Section { get; set; }

    public ICollection<Student> Students { get; set; }
}

아래와 같이 Context 클래스에서 OnModelCreating 메서드를 재정의하여 Fluent API를 사용하여 위 Entity에 대한 1:N 관계를 구성할 수 있습니다.

using Microsoft.EntityFrameworkCore;

namespace StudentApp.Data
{
    public class SchoolContext : DbContext
    {
        protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
        {
            optionsBuilder.UseNpgsql(@"Server=localhost;Database=JoBeomHee;Port=5432;User Id=JoBeomHee;Password=1234");
        }

        protected override void OnModelCreating(ModelBuilder modelBuilder)
        {
            modelBuilder.Entity<Student>()
                .HasOne<Grade>(s => s.Grade)
                .WithMany(g => g.Students)
                .HasForeignKey(s => s.CurrentGradeId);
        }

        public DbSet<Grade> Grades { get; set; }    
        public DbSet<Student> Students { get; set; }
    }
}

위 예에서 다음 코드는 1:N 관계를 구성합니다.

modelBuilder.Entity<Student>()
            .HasOne<Grade>(s => s.Grade)
            .WithMany(g => g.Students)
            .HasForeignKey(s => s.CurrentGradeId);

이제 데이터베이스에 반영하기 위해 마이그레이션 명령인 Add-Migration 및 update-database 를 실행합니다.
마이그레이션이 정상적으로 실행 되었다면, 데이터베이스에는 아래와 같이 1:N 관계가 있는 2개의 Student, Grade 테이블이 생성된 것을 확인할 수 있습니다.

코드 관계 해석

첫째로, Student 또는 Grade 중 하나의 Entity Class로 구성을 시작해야 합니다.
따라서 modelBuilder.Entity<student>() 는 Student Entity로 시작합니다.
두 번째로, .HasOne<Grade>(s => s.Grade) 는 Student Entity에 Grade라는 Grade 유형 속성이 포함 되도록 지정합니다.
세 번째로, 관계의 다른 쪽 끝인 Grade 엔티티를 구성해야 합니다.
.WithMany(g => g.Stduents) 는 Grade Entity 클래스에 많은 Student Entity가 포함되도록 지정합니다.
여기서 WithMany는 컬렉션 탐색 속성을 유추합니다.
.HasForeignKey<int>(s => s.CurrentGradeId); 외래 키 속성 CurrentGradeId의 이름을 지정합니다.
외래키 지정은 선택사항 입니다. 종속 클래스에 외래 키 Id 속성이 있는 경우에만 사용합니다.