그림 못그림

import java.util.*;
import java.io.*;


public class Main {
    static int nodeNum;
    static int[] distance;
    public static void main(String[] args) throws IOException{
        BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
        StringTokenizer st = new StringTokenizer(br.readLine());
        nodeNum = Integer.parseInt(st.nextToken());
        int n = Integer.parseInt(st.nextToken());

        int startNode = Integer.parseInt(br.readLine());

        PriorityQueue<Node> q = new PriorityQueue<>();
        ArrayList<ArrayList<Node>> edge = new ArrayList<>();
        boolean[] visited = new boolean [nodeNum+1];
        distance = new int[nodeNum+1];

        for(int i = 1; i <= nodeNum; i++)
            distance[i] = Integer.MAX_VALUE;
        for(int i = 0; i <= nodeNum; i++)
            edge.add(new ArrayList<>());

        for(int i = 0; i < n; i++){
            st = new StringTokenizer(br.readLine());
            int w = Integer.parseInt(st.nextToken());
            int d = Integer.parseInt(st.nextToken());
            int v = Integer.parseInt(st.nextToken());
            edge.get(w).add(new Node(d, v));
        }
        q.add(new Node(startNode, 0));
        distance[startNode] = 0;
        Dijkstra(edge, distance, visited, q);
        for(int i = 1; i <= nodeNum; i++){
            if(!visited[i])
                System.out.println("INF");
            else
                System.out.println(distance[i]);
        }
    }

static void Dijkstra(ArrayList<ArrayList<Node>> edge, int[]distance, boolean[] visited, PriorityQueue<Node> q){

        while(!q.isEmpty()){        
            int node = q.poll().vertex;
            if(!visited[node]){
                visited[node] = true;
                for(int j = 1; j <= edge.get(node).size(); j++){
                    if(distance[node] + edge.get(node).get(j-1).value < distance[edge.get(node).get(j-1).vertex])
                        distance[edge.get(node).get(j-1).vertex] = distance[node] + edge.get(node).get(j-1).value;
                    q.add(new Node(edge.get(node).get(j-1).vertex, distance[edge.get(node).get(j-1).vertex]));
                }
            }
        }
    }
    
}

class Node implements Comparable<Node> {
    int vertex;
    int value;

    public Node(int d, int v) {
        this.vertex = d;
        this.value = v;
    }

    @Override
    public int compareTo(Node p) {
        return this.value - p.value;
    }
}

#include <stdio.h>

int main(){

    int a;
    scanf("%d", &a);

    int n = 2;

    for(int i = 1; i < a; i++)
        n *= 2;

    int y, x;
    scanf("%d", &y);
    scanf("%d", &x);

    int answer = 0;
    while(n >= 1){
        if (y >= n/2 && x >= n/2)
            answer += n*n - (n/2)*(n/2);
        else if (y >= n/2 && x < n/2)
            answer += n*n - 2*(n/2)*(n/2);
        else if (y < n/2 && x >= n/2)
            answer += n*n - 3*(n/2)*(n/2);
        else if (y < n/2 && x < n/2)
            answer += n*n - 4*(n/2)*(n/2);
        if (n == 1)
            break;
        y = y % (n/2);
        x = x % (n/2);
        n /= 2;
    }
    printf("%d", answer - 1);


}

이전글 : https://sumjo.tistory.com/6

ORM(Object-Relational Mapping)

우리가 일반 적으로 알고 있는 애플리케이션 Class와 RDB(Relational DataBase)의 테이블을 매핑(연결)한다는 뜻이며, 기술적으로는 어플리케이션의 객체를 RDB 테이블에 자동으로 영속화 해주는 것이라고 보면된다.

라고 한다.

간단히 말하자면 객체(클래스)와 데이터베이스를 맵핑시켜준다는 뜻이다. 예시를 들어보겠다.

데이터베이스를 맵핑시켜주기 위해서는 데이터 베이스 칼럼과 대응되는 Entity 객체가 필요하다.

@Entity(name="user")
@Table(name="user")
public class UserEntity {
        @Id
        private String email;
        private String password;
        private String nickname;
        private String telNumber;
        private String address;
        private String addressDetail;
        private String profileImage;
        private boolean agreedPersonal;
    }

user table과 대응되는 Entity 객체의 일부이다.

데이터베이스의 칼럼을 다 가지고 있는 객체이다. 즉 한 테이블에 대응되는 객체인 셈이다.

변수명을 바탕으로 대응시키는데, telNumber -> tel_number로 변환돼서 대응이 되기 때문에 데이터베이스 칼럼명을 옳바르게 작성해야 한다.

JPA

기본적으로 ORM 표준 명세이다.

JPA는 라이브러리가 아니고 관계형 데이터베이스의 사용 방식을 정의한 인터페이스 모음이다.

때문에 실제로 구현한 구현체가 필요하고 Spring에서 Hibernate가 JPA구현체의 표준처럼 사용된다.

Hibernate

JPA가 인터페이스, Hibernate가 인터페이스를 구현한 Class 의 관계라고 볼 수 있겠다.

위에 말했듯이 JPA구현체의 표준처럼 사용되고 있다.

Spring Data Jpa

공식 문서에 따르면 JPA 기반 API를 더 사용하기 쉽게 만들어주는 기술이라고 나와있다.

즉 Spring Data JPA 또한 인터페이스 이고, JPA 사용을 더 쉽게 한번 더 감싸 준 것이다. Repository를 제공하여 데이터베이스 접근을 편하게 만들어준다.

예시를 보자.

데이터베이스 접근 순서도이다.

Spring Data JPA 에서 제공하는 Repository를 통해 CRUD메소드를 호출하면

메소드를 구현한 Hibernate가 데이터베이스와 통신한다.

JDBC는 DB CONNECTION과 같은 기본적인 API를 제공하는 인터페이스다.

리액트에는 상태(state) 라는 개념이 있다.

상태에 대해서는 나중에 다룰 예정인데,

일단은 state는 컴포넌트 내부에서 변경되는 값을 다루는 객체이자, 변화하면 리랜더링 되고 컴포넌트에 반영되는 변수 정도로 이해해두자.

리액트는 state 값을 추적하고 있다. state의 변화를 감지해서 리랜더링을 진행한다.

추후에 서술하겠지만, 그냥 state 를 변경한다고 해서 변화를 감지하는 것이 아니고, setState함수를 통해 주소값이 변경돼야 상태가 변한 것으로 인지한다. 나중에 상태 관련해서 글 쓸 예정

그리고 한 컴포넌트가 아니라 전역적으로 관리해야 하는 상태를 위해 위해 상태 관리 라이브러리를 사용한다.

useContext()도 있지만 불필요한 리랜더링을 야기할 수 있다.

이러한 상태 관리를 위해 여러가지 라이브러리가 있는데, Redux, Recoil 등이 유명한 것으로 안다.

내가 써볼 라이브러리는 Zustand 이다.

사용은 어렵지 않다.

npm install zustand

받아준다 늘 그렇듯이.

참고 : https://github.com/pmndrs/zustand

zustand 예시 및 설명이 잘 돼있다.

ts 사용 예시이다.

import { User } from "types/interface";
import { create } from "zustand";

interface LoginUserStore {
	loginUser: User | null;
	setLoginUser: (loginUser: User) => void;
	resetLoginUser: () => void;
};

const useLoginUserStore = create<LoginUserStore>((set) => ({
	loginUser: null,
	setLoginUser: (loginUser) => set(state => ({...state, loginUser })),
	resetLoginUser: () => set(state => ({...state, loginUser: null})),
}));

export default useLoginUserStore;

creat 를 통해 store 를 만들어 준다.

내부적으로 set 함수를 통해 상태를 변경해준다.

state를{...state}로 넣어준 이유는

요약하자면

리액트와 똑같이 state는 불변으로 유지해야 한다.

즉 초기에 할당한 값 자체를 바꾸면 안되고, 변경을 위해서 항상 새로운 할당을 진행한다.

immutable 유지를 위해 전개 연산자를 통해 state를 복사해준 뒤 상태를 변경한다.

하지만 밑에까지 보면 상태를 병합해주기 때문에 skip할 수 있다는 것도 쓰여있는데, 자세히는 모르겠다.

import { useLoginUserStore } from 'stores'

const  { setLoginUser, resetLoginUser } = useLoginUserStore();

const { loginUser } = useLoginUserStore();

이렇게 import 해온 뒤

다른 파일에서 loginUser의 상태를 참조하거나,

set함수를 통해 상태를 변경할 수 있다.

과거의 웹사이트는 페이지가 바뀔때마다 새로운 페이지를 로드해야 했다.

직관적으로 생각해봐도 사용자 경험을 저하시킬 수 밖에 없다.

싱글 페이지 애플리케이션(spa)는 이를 개선하기 위해 만들어졌다.

전체 페이지를 갱신하는 것이 아니라 필요한 부분만 랜더링하여 갱신해준다.

라우터는 사용자가 입력한 URL에 따라 필요한 데이터를 보여주는 역할을 한다.

근데, 앞서 말했듯이 경로마다 새로운 페이지를 가져오는 것이 사용자 경험을 저하시킨다면,

싱글 페이지 애플리케이션의 특성을 살려서, 모든 요소를 랜더링으로 바꾸면 라우터를 쓸 필요도 없지 않나?

맞는 말이지만, 그러면 URL이 하나이기 새로고침 하면 초기 페이지로 이동하고, 뒤로가기도 사용하기 힘들다.

때문에 (프로젝트 관리와 유지를 위해서라도) 경로를 나누어 웹페이지를 구성할 필요가 있다.

그리고 이를 라우팅 이라고 한다. 

덧붙이자면 우리가 사용할 라우터 또한 사실 페이지 경로에 따라 필요한 컴포넌트만 랜더링 해서 보여주는 것이다.

리액트는 기본적으로 html파일이 하나만 있는 SPA 라이브러리이고 내장된 route 기능이 없다.

그래서 라우팅을 위해서는 다른 라이브러리가 필요한데, react-router-DOM 라이브러리를 사용해볼것이다.

 npm install react-router-dom

react-router-dom 을 설치해준다.

먼저 최상단을 <BrowserRouter> 태그로 감싸주어야 한다.

index.tsx

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

App.tsx

import { Route, Routes } from 'react-router-dom';

return (
    <Routes>
      <Route element={<Container />}>
        <Route path={MAIN_PATH()} element={<Main />} / >
        <Route path={AUTH_PATH()} element={<Authentication />} / >
        <Route path={SEARCH_PATH(':searchWord')} element={<Search />} / >
        <Route path={USER_PATH(':userEmail')} element={<UserP />} / >
        <Route path={BOARD_PATH()}>
          <Route path={BOARD_WRITE_PATH()} element={<BoardWrite/>}/>
          <Route path={BOARD_DETAIL_PATH(':boardNumber')} element={<BoardDetail/>}/>
          <Route path={BOARD_UPDATE_PATH('boardNumber')} element={<BoardUpdate/>} />
        </Route> 
      <Route path="*" element={<h1>Not Found</h1>} />
      </Route>
    </Routes>
  );
}

<Routes> 태그는 모든 <Route>의 상위 경로에 존재해야 한다.

<Route> 태그의 인자

path에는 경로를 전달하고 element로는 경로에 따라 랜더링 해줄 엘리멘트(화면)을 전달한다.

경로를 변수로 바꿔놓은 상태라 알아보기 힘들 수 있는데,

예시를 들자면

MAIN_PATH = http://localhost:3000/

BOARD_PATH() = http://localhost:3000/board

BOARD_WRITE_PATH(:boardNumber) = http://localhost:3000/:boardNumber <- 쿼리스트링

이런식으로 경로에 따른 화면을 랜더링 해준다.

Outlet

Outlet 태그는 부모 엘리먼트에서 사용해 자식 엘리먼트를 랜더링 하고 싶을 때 사용한다.

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>

      {/* This element will render either <DashboardMessages> when the URL is
          "/messages", <DashboardTasks> at "/tasks", or null if it is "/"
      */}
      <Outlet />
    </div>
  );
}

function App() {
  return (
    <Routes>
      <Route path="/" element={<Dashboard />}>
        <Route
          path="messages"
          element={<DashboardMessages />}
        />
        <Route path="tasks" element={<DashboardTasks />} />
      </Route>
    </Routes>
  );
}

App에 DashboardMessages와 DashboardTasks를 <Route path="/" element={<Dashboard>} 로 감싸고 있는 것을 볼 수있다.

Dashboard를 보면 div태그 안에 <Outlet /> 을 확인할 수 있다.

해당 요소는 URL이 "/messages"일 때 <DashboardMessages>를 렌더링하고, "/tasks"일 때는 <DashboardTasks>를 렌더링합니다. 만약 URL이 "/"일 경우에는 null을 렌더링합니다.

설명처럼, Outlet 태그 자리에 자식 엘리먼트가 랜더링이 된다고 알아두면 될 듯 하다. 이를 활용해서 Header와 Footer를 랜더링 할 것이다.

간단한 원리

깊게 공부한 건 아니지만 뇌피셜을 곁들인 원리를 써보자면

1. BrowserRouter는 HistoryAPI를 사용해서 사용자가 방문한 모든 경로를 객체로 만들어 하위 <Routes>에 전달한다.

2. HistoryAPI는 stack구조이기 때문에 경로가 바뀌면 stack의 최상단이 변경되면서 <Routes>가 참조하던 객체도 새로운 

것으로 변경된다.

3. 이로 인해 Routes 컴포넌트가 리랜더링 되고 하위 라우팅 관련 컴포넌트들도 리랜더링 된다.

함수형 컴포넌트는 레퍼런스가 없기 때문에 ref를 사용할 수 없다.

때문에 함수형 컴포넌트에 ref를 통해 데이터를 전달하려면 forwardRef() 를 사용해야 한다.

const InputBox = forwardRef<HTMLInputElement, Props>((props: Props, ref) => {

	//         state:properties 			//
	const { label, type, value,  placeholder, error, icon, message} = props;
	const { onChange , onButtonClick, onKeyDown} = props;

	//  event handler: 키 이벤트 처리 함수 			//
	const onKeyDownHandler = (event: KeyboardEvent<HTMLInputElement>) => {
		if(!onKeyDown) return;
		onKeyDown(event);
	}

	//       render: Input Box 컴포넌트 			//
	return (
		<div className='inputbox'>
			<div className='inputbox-label'>{label}</div>
			<div className={error ? 'inputbox-container-error' : 'inputbox-container'}>
				<input  ref={ref} type = {type} className='input' placeholder={placeholder} value={value} onChange={onChange} onKeyDown={onKeyDownHandler}/>
				{onButtonClick !== undefined && (
				<div className='icon-button' onClick={onButtonClick}>
					{icon !== undefined && (
					<div className={`icon ${icon}`}></div>
					)}
				</div>
				)}
			</div>
			{message !== undefined && <div className='inputbox-message'>{message}</div>}
		</div>
	)
})

export default InputBox

위와 같이 forwardRef를 통해 인자로 props와 함께 ref를 받아서 처리할 수 있다.

props의 각 변수와 함수를 input 요소에 맵핑 시켜준다.

onKeyDownHandler를 통해 keyEvent 처리 함수도 만들어준다.

//				event handler: 이메일 인풋 키 다운 이벤트 처리				//
const onEmailKeyDownHandler = (event: KeyboardEvent<HTMLInputElement>) => {
	if (event.key !== 'Enter') return;
	if (!passwordRef.current) return;
	passwordRef.current.focus();
}

//				event handler: 패스워드 키 다운 이벤트 처리				//
const onPassworKeyDownHandler = (event: KeyboardEvent<HTMLInputElement>) => {
	if (event.key !== 'Enter') return;
	onSignInButtonClickHandler();
}



return (

..
..

</div>
	<InputBox ref={emailRef} label = '이메일주소' type = 'text' placeholder='이메일 주소를 입력해주세요.' error={error} value={email} onChange={onEmailChangeHandler} onKeyDown={onEmailKeyDownHandler}/>
	<InputBox ref={passwordRef} label = '패스워드' type = {passwordType} placeholder='비밀번호를 입력해주세요.' error={error} value={password} onChange={onPasswordChangeHandler} icon={passwordButtonIcon} onButtonClick={onPasswordButtonClickHandler} onKeyDown={onPassworKeyDownHandler}/>
</div>
)

로그인 카드 컴포넌트의 일부이다.

InputBox에 props와 함께 ref를 전달하고 이메일 입력에서 keyDown(Enter)이벤트 발생 시 비밀번호 입력창으로 포커스를 옮겨주고

비밀번호 입력후 다시 Enter를 누를 시 로그인 버튼 클릭 이벤트 함수를 호출해서 로그인 동작이 일어난다.