im_agination.log

JQuery

Thu, 08 May 2025 16:12:45 GMT

jQuery는 DOM을 더 쉽게 조작할 수 있도록 도와주는 도구

DOM 이란

Document Object Model HTML 문서를 트리 구조로 표현한 객체 모델 브라우저는 HTML을 파싱해서 태그마다 객체로 만들어서 내부적으로 트리 구조로 관리한다. 만약 아래와 같은 HTML이 있다.

 Hello

브라우저는 이것을 아래의 트리구조로 이해한다.

document
└── html
    └── body
        └── div (id="box")
            └── "Hello"

우리가 코드로 이것을 건드릴 수 있게 해주는 것이 DOM이다.

잉 리액트도 DOM인가 뭔가 아니냐?

리액트는 가상 DOM(virtual DOM)을 사용한다. 가상 DOM은 실제 DOM을 복제한 가벼운 자바스크립트 객체 트리이다. React, Vue같은 친구들은 가상 DOM을 사용해서 최소한의 변경만 실제 DOM에 적용해 빠르게 렌더링한다. (리액트로 예시를 들자면 JSX로 가상 DOM을 만들고 렌더링을 하면 새로운 가상 DOM 트리가 생성된다 그러고 나서 이전 가상 DOM과 새 가상 DOM을 비교해서 차이점을 찾아 필요한 부분만 실제 DOM에 반영시키는 방식으로 효율적으로 빠르게 업데이트를 한다.)

사실 일반 DOM은 무겁고 느리다.. 변경할 때마다 렌더링이 발생하고 브라우저가 복잡한 작업을 수행하기 때문이다.

그럼에도 JQuery 쓰는 이유

다양한 브라우저에서 동작
쉬운 API를 통해 HTML 문서 탐색과 조작 가능
이벤트 처리, 애니메이션, Ajax 등을 훨씬 더 간단하게 만듦
함수에 별도의 이름을 붙이면 같은 기능이 필요할 때마다 해당 함수를 실행가능 (재사용성)
😀

만약 js만 써서 DOM을 건드리려면 이렇게 길게 써야한다.

document.getElementById("myDiv").style.display = "none";

하지만 jQuery를 쓰면

$("#myDiv").hide();

이렇게 더 간단하다.

사용법

다운로드 링크

compressed를 다운받는다. compressed는 jquery-1.11.min.js 이런식으로 min이 적혀있다.
프로젝트에 지정한다. 나는 걍 귀찮아서 libs 폴더에 넣었다.
HTML 파일 또는 아래 코드를 포함시킨다.
사실 인터넷을 사용가능한 환경이면 CDN 쓰면된다. 이 또한 HTML 파일 또는 아래에 포함시키면 된다.


## 기본 문법
``` js
$(선택자).동작();

예제

백문이 불여일견 예제를 보고 배워보자

(1) 문서 준비 완료 시 실행

  $(document).ready(function() {
  // 문서가 준비되면 실행될 코드
});

예... 콜백함수입니다...

(2) 요소 선택해서 텍스트 바꾸기

$("#myDiv").text("새로운 텍스트");
$(".myClass").html("굵은 글씨");

(3) 클릭 이벤트

$("#btn").click(function() {
  alert("버튼이 클릭되었습니다!");
});

(4) 스타일 변경

$("p").css("color", "red");

(5) 숨기기 / 보이기

$("#box").hide();     // 숨김
$("#box").show();     // 보임
$("#box").toggle();   // 토글

(6) Ajax 요청

$.get("data.json", function(data) {
  console.log(data);
});

$.post("submit.php", { name: "홍길동" }, function(response) {
  alert("서버 응답: " + response);
});

(7) 전체 코드 예시



  
    
    나의 첫 웹페이지
    
    
  
  
    Hello, world!
    1
    2
    3

결론

jQuery는 프론트 꾸미기를 비교적 쉽게 해주는 자바스크립트 라이브러리랄까..?

다음편

[백준] 2110 - 공유기 설치(python)

Fri, 07 Mar 2025 19:45:55 GMT

문제 링크

C개의 공유기를 N개의 집에 적당히 설치해서, 가장 인접한 두 공유기 사이의 거리를 최대로 해야한다.

예시를 들자면 1,2,4,8,9에 3개의 공유기를 설치하려면 1,4,9 혹은 1,4,8에 위치해야 공유기 사이의 거리를 최대로 할 수 있다. 처음에 바보도 아니고 이 말을 이해를 못했는데...

만약 공유기 사이의 최소 거리를 3이라고 지정했다. 두 공유기 사이의 거리를 가장 최대로 하고 싶다면 1부터 시작해야한다. 공유기는 1개 설치됐다. 2에 설치하게 된다면 공유기 사이의 거리가 1이다. 그래서 안된다. 4에 설치하게 된다면 공유기 사이의 거리가 3이다. 가능하다. 공유기는 2개 설치됐다. 이제 4에서 다음 공유기 사이의 거리를 구해야한다. 8에 설치하게 된다면 공유기 사이의 거리가 4가 된다. 공유기는 3개 설치됐다. 혹은, 9에 설치하게 된다면 공유기 사이의 거리가 5가 된다. 그렇기에 9도 가능하다. 그래서 1,4,9 혹은 1,4,8에 위치가 가능한 것이다.

하지만 공유기 사이의 최소 거리를 5라고 지정했다. 이 또한 가장 최대로 구하고 싶기에 1부터 시작해야한다. 공유기는 1개 설치됐다. 2에 설치하게 된다면 공유기 사이 거리는 1이다. 안된다. 4에 설치하면 거리가 3이다. 안된다. 8에 설치하면 거리가 7이다. 가능하다. 공유기는 2개 설치됐다. 이제 8에서 다음 공유기 사이의 거리를 구해야한다. 9에 설치하게 된다면 8과 9간의 공유기 사이의 거리가 겨우 1이다. 그렇기에 안된다. 공유기가 총 2개가 설치됐기 때문에 최소 거리가 5일 수 없다.

즉, 이 문제는 공유기 간의 최소거리를 최대화 하는 것이 목표다.

조건에서 집의 좌표를 나타내는 xi (0 ≤ xi ≤ 1,000,000,000) 라고 써져있어서 이분탐색 그 중에서도 파라매트릭 서치를 사용해야 한다는 것을 캐치했다.

start는 두 사이의 거리가 1인 것이 최소 값이니까 1로 지정 end는 정렬한 좌표값의 가장 큰 값과 작은 값을 뺀 것이 최대 거리이기 때문에 그렇게 지정했다.

그 외는 기본 틀에서 문제 해결 완료!

import sys

input = sys.stdin.readline

n, c = map(int,input().split())
l = []
for i in range(n):
    l.append(int(input()))

l.sort()

start = 1
end = l[-1] - l[0]
answer = 0
while start <= end:
    mid = (start + end) // 2
    total = 1
    tmp = l[0]
    for i in l[1:]:
        if i - tmp >= mid:
            tmp = i
            total += 1
    if total < c:
        end = mid - 1
    else:
        answer = mid
        start = mid + 1

print(answer)

Jenkins 비밀번호 잊어먹었을 때

Thu, 09 Jan 2025 09:29:27 GMT

세상에 마상에 방금 바꾼 Jenkins 비번 까먹음

일단 Jenkins가 올라간 환경에 접속을 하자

sudo vi /var/lib/jenkins/config.xml

useSecurity를 true에서 false로 바꿔주자 못찾겠다면 esc - :/useSecurity 하면 쉽게 찾을 수 있다.

sudo systemctl restart jenkins

그런 다음에 재시작을 하자. 로그인 없이 접속이 가능하다.

Jenkins 관리로 들어간다. 다양한 옵션들 중에 Security - Security로 들어간다. Authentication의 None 상태인 Security Realm을 Jenkins' own user database로 바꾼다. 다시 Jenkins 관리로 가면 Users가 생긴 것을 볼 수 있다. 전에 만들어둔 admin 계정이 있는 것을 확인할 수 있다. admin을 클릭해서 Security로 가면 password를 바꿀 수 있다.

sudo vi /var/lib/jenkins/config.xml

다시 jenkins config 파일을 true라고 설정하고 재시작하면 끝날 거 같지만...

어째서인지 로그인 없이 접속할 수 있다. 귀찮겠지만 Security에 접속해서 Authentication에 있는 Authentication에서 Logged-in users can do anything으로 바꿔주도록 하자. 그럼 끝!

ERROR: Ansible could not initialize the preferred locale: unsupported locale setting

Thu, 02 Jan 2025 08:05:00 GMT

환경 rocky-linux-8

ansible를 설치를 한 뒤 버전을 불러올 수가 없었다. 이것은 Ansible이 “.UTF-8”로 끝나는 locale을 찾을 수 없음을 의미한다. locale을 확인한 다음에 LC_ALL 변수를 UTF-8로 끝나는 locale 중 하나로 export 하면 된다.

locale -a
export LC_ALL=C.UTF-8

다시 버전 확인하면 잘 되는 것을 볼 수 있다.

출처

https://fabianlee.org/2023/08/21/ansible-resolving-could-not-initialize-the-preferred-locale-unsupported-locale-setting/

[NCP] 웹서버 구축하기

Tue, 03 Dec 2024 10:35:06 GMT

환경 MacOS 15.0.1

VPC 생성

나는 10.0.n.n으로 ip 주소 범위를 구성하고자 한다.

subnet 생성

private

Internet Gateway 전용 여부에 N이라고 해야한다.

public

Internet Gateway 전용 여부에 Y이라고 해야한다.

server

서버 이미지 선택

rocky8을 사용하기로 한다.

서버 설정

vpc는 당연히 아까 생성했던 vpc에 넣는다.
subnet의 경우 아까 private랑 public을 생성했는데 이번에는 ssh연결을 위해 public으로 생성하고자 한다.
실습용으로 하고자 하면 시간 요금제 써야한다. 안그럼 요금폭탄...
서버는 당연히 1개
서버 이름은 hostnamectl 없이도 host name을 바꿀 수 있게 해준다.
네트워크 인터페이스도 서브넷에 맞게 설정
공인 ip는 여기서 안해도 vpc/public ip에서 따로 할당 가능하다.
스크립트 설정의 경우 server/init Script에서 생성가능하다. 설명은 따로 밑에서 나는 여기에서 따로 넣어줬다.
스토리지 설정
그냥 디폴트인채로 다음
인증키 설정
인증키가 없다면 새로운 인증키 생성하면 된다. 이거 나중에 서버 root 비번 보려면 인증키이름.pem파일이 반드시 필요하다. 그러니 잘 저장해야한다.
네트워크 접근 설정

이거는 AWS로 치면 보안 그룹이다.

생성 완료!

ACG

서버 그룹으로의 네트워크 접근을 제어 및 관리한다. 서버 그룹을 보안 정책을 일괄 관리할 수 있고 보안 규칙을 재사용성이 높기에 편하다! 나는 디폴트 acg를 사용했는데 이번에 아파치 웹서버를 사용할 계획이라 새로운 규칙을 만들어보고자 한다.

ACG 생성

생성한 뒤 수정하고 싶은 acg 수정 체크 후 클릭 ncp는 aws와 다르게 디폴트 규칙이 없다. 일단 outbound부터 수정!

outbound

1-65535 이렇게 하면 전체로 범위 지정 가능하다.

inbound

80번은 http, 22번은 ssh연결을 위해 icmp는 ping을 보내기 위해 사용했다.
server에서 수정하기

변경하고 싶은 server 클릭후 ACG 수정 클릭 한 뒤 원하는 ACG로 수정해주면 된다.

Init Script

server/Init Script 서버를 처음 생성할 때 자동으로 사용하는 초기화 스크립트를 작성할 수 있다.

#!/bin/bash
timedatectl set-timezone Asia/Seoul
sudo dnf install -y httpd
systemctl enable --now httpd
echo "web01
" > /var/www/html/index.html

간단한 웹서버 관련 쉘스크립트를 넣어줬다.

터미널에서 연결

그간 윈도우로 주로 사용했고 mobaX를 써왔는데 맥은 터미널에서도 연결가능하다고 한다. 나는 iterm2에서 진행했고 원래있는 터미널에서도 당연히 가능하다. NCP에서는 root를 디폴트로 사용한다. 마치 aws에서의 ec2-user랄까...

ssh root@publicIp입력
ex) ssh root@0.0.0.0

뭐 연결할거냐 yes or no 물어보는데 당연히 yes!

그럼 이제 비밀번호가 뭐지...?

서버 비밀번호 찾기

관리자 비밀번호 확인에서 아까 위에서 만든 pem키를 넣으면 된다.

나와있는 비밀번호 써서 연결하면 끝

완성

public ip 주소를 입력하고 나면 아까 쉘스크립트에 넣은대로 잘 나오는 것을 볼 수 있다.

[Spring Security] 로그인 필터 구현 중 username 제대로 못 받아오는 이슈

Tue, 22 Oct 2024 17:01:45 GMT

공부중인 영상 요즘? 이 영상 참고해서 JWT로그인을 구현해보고 있다. 코드 상황은 이랬다.

UserInfo

public class UserInfo {
 @Id
 @GeneratedValue(strategy = GenerationType.IDENTITY)
 @Column(name="user_id")
 private int userId;

 private String password;
 private String nickname;

 private String role;

LoginFilter.class

 @Override
 public Authentication attemptAuthentication(HttpServletRequest request, HttpServletResponse response) throws AuthenticationException{

     String nickname = obtainUsername(request);
     String password = obtainPassword(request);

     System.out.println(nickname);
     UsernamePasswordAuthenticationToken authToken = new UsernamePasswordAuthenticationToken(nickname,password,null);

     return authenticationManager.authenticate(authToken);
 }

그런데......일단 잘 받아오나 확인하려는데 외않되?

스프링 시큐리티는 username, password변수 기반으로 작동해서 나처럼 다른 값을 넣으면 원하는 대로 작동이 안된다는 것이다.

나는 위에 Userinfo에서도 보듯이 nickname을 username이랍시고 사용하고 있었다.

UsernamePasswordAuthenticationFilter 에서 제공해주는 setUsernameParameter 함수를 활용하면 된다.

    @Override
    public Authentication attemptAuthentication(HttpServletRequest request, HttpServletResponse response) throws AuthenticationException{

        setUsernameParameter("nickname"); // 이거 추가하면 됨!!
        String nickname = obtainUsername(request);
        String password = obtainPassword(request);

        System.out.println(nickname);
        UsernamePasswordAuthenticationToken authToken = new UsernamePasswordAuthenticationToken(nickname,password,null);

        return authenticationManager.authenticate(authToken);
    }

시큐리티는 참 많은 기능을 제공해주는데... 너무 제공해줘서 더 어렵게 느껴지는 거 같기도.

출처) 영상 댓글 및 spring security docs

[프로그래머스] 공원

Wed, 02 Oct 2024 05:31:58 GMT

[PCCE 기출문제] 10번 / 공원

구현 + 완전탐색으로 풀었다.

def solution(mats, park):
    answer = -1
    h = len(park)
    w = len(park[0])
    for i in range(h):
        for j in range(w):
            if park[i][j] != "-1": # 애초에 깔 수 없는 곳에선 시작할 이유가 없다.
                continue
            answer = max(mats_sol(mats,park, i, j),answer)


    return answer

def mats_sol(mats, park, i, j):
    h = len(park)
    w = len(park[0])
    ans = -1
    for s in mats: # 각 매트의 사이즈별 확인
        flag = False # 밑에서 보면 알겠지만 y에서 안된다면 이 돗자리는 그냥 안되는거다.
        for x in range(s):
            for y in range(s):
                ni = x + i
                nj = y + j
                if ni < 0 or ni >= h or nj <0 or nj >= w: # 공원 밖으로 안벗어나게
                    flag = True
                    continue
                if park[ni][nj] != "-1": # 누가 이미 깔아서 돗자리를 깔 수 없다.
                    flag = True
                    continue
        if flag: # 이 사이즈 돗자리 안된다.
            continue # x축 반복문 벗어나기
        ans = max(ans, s) # 만약에 이 돗자리가 된다면 이것중 가장 큰걸로 지정
    return ans

일단 공원에서 -1이 아닌 곳에서 각 사이즈의 돗자리를 깔 수 있는지 완전탐색으로 확인했다. 그리고 이 좌표에서 각각의 돗자리를 까는 것이 가능한지 함수에 넣어서 확인했다.

이 문제에서 핵심은 각각의 돗자리가 가능한지 완탐할 때 사용하는 flag 사용인 거 같다. 한 좌표라도 불가능해지면 이 돗자리는 그냥 깔 수 없다. 이걸 구현하기 위해 필요한 것은 flag이다.

처음에 맞게 구현한 거 같았는데, 아무리 고쳐도 답이 안나와서 봤더니 scope이슈였다. flag쓸 때는 항상 scope 생각!!

1090 - 체커

Sat, 10 Aug 2024 20:47:06 GMT

풀이 참고 - 2주만에 통과하는 알고리즘 코딩테스트 (2024년)

코테에서 다 물먹은 나... 코테에서 다 떨어질 것만 같아서(맞긴하다.) 서류를 쓸 의지도 안생길 지경 심기일전해서 강의를 들을려고 하는데...

코테를 보고, 준비하면서 참 완탐과 구현이 중요하다고 생각한다. 왜냐면 내가 최근 연달아 본 3개의 코테에서 모두 다 완탐 + 구현에서 뭔가 한두개씩 삐끗, 혹은 풀이를 너무 오래 붙잡고 있어서 터졌기 때문이다.

여하튼 강의를 들으면서 풀이를 생각하기도 어려웠고, 내가 항상 사고하면서 생각하지 못하는 부분을 후벼파는 문제라 따로 정리하고자 한다.

문제 설명

https://www.acmicpc.net/problem/1090

(x,y)인 n개의 체커가 주어져 있고, 체커를 움직여서 특정 한 칸에 k개의 체커를 모이도록 해야한다. (k는 1 ~ n) 이다.

첫번째 방식(틀림)

내가 처음에 생각한 방법은 x의 값들과 y의 값들의 평균을 구해가지고 각각의 x,y를 이동시킨 값을 구하는 방식이였다.

만약 위의 예시인 경우에는 x는 3, y도 3이 나온다. 좌표평면을 그려보면 정답이다. 나와있는 예제들도 다 잘된다. 하지만 반례가 있으니...

이렇게 되면 x는 3, y는 52가 나와버린다. 2개의 체커가 모이도록 하는데 고작 2만([3,2],[3,4]) 이동하면 되는데, 이렇게 되면 y가 50은 넘게 이동해야한다.

두번째 방식(틀림)

이렇게 생각하게 된 것은

x,y좌표가 각각 1,000,000보다 작거나 같은 수이다.
음... x,y좌표 전부 다 완탐을 돌리진 못하겠담

그러면 x,y 각각의 최대값과 최소값만 돌려볼까? 라는 아이디어에서 시작했다.

# 메모리 초과나는 풀이
import sys
n = int(input())
xl = []
yl = []
for _ in range(n):
 x,y = map(int,input().split())
 xl.append(x)
 yl.append(y)
dis = [] # 각 좌표에 대한 거리의 차가 들어있는 변수
xn = max(xl) - min(xl) + 1
yn = max(yl) - min(yl) + 1
for i in range(min(xl),max(xl)+1):
 for j in range(min(yl), max(yl) + 1):
     dis.append([0]*n)
a = 0
for i in range(xn):
 for j in range(yn):
     for k in range(n):
         dis[a][k] = abs(xl[k] - (min(xl) + i)) + abs(yl[k] - (min(yl) + j))
     a += 1 # dis에 담기위해...
ans = [999999999] * n

for k in range(n): for j in dis: jl = sorted(j) if ans[k] > sum(jl[:k+1]): ans[k] = sum(jl[:k+1]) print(*ans)

이 코드는 전형적인 나의 고질병인 무식한 완탐 + 엄청 긴 리스트 남발형 풀이인데 메모리 초과가 떴다.

```python
# 시간초과
import math
n = int(input())
xl = []
yl = []
for _ in range(n):
    x, y = map(int, input().split())
    xl.append(x)
    yl.append(y)

ans = [math.inf] * n

for i in range(min(xl), max(xl) + 1):
    for j in range(min(yl), max(yl) + 1):
        current_distances = []
        for k in range(n):
            distance = abs(xl[k] - i) + abs(yl[k] - j)
            current_distances.append(distance)
        current_distances.sort()
        for k in range(n):
            ans[k] = min(ans[k], sum(current_distances[:k + 1]))

print(*ans)

역시나... 시간초과가 뜬다. 생각해보면 최악의 경우가 x,y 각각 100000개씩 가능하니 당연히 시간초과가...ㅠ

세번째 방식(맞음)

강의를 들으며 계속 궁금한 풀이가 있었는데 '우리의 집 중에 한 곳만 구하면 된다' 이거 였다. 아까는 x와 y의 최소, 최대 사이의 값을 다 구해보는 것이였는데, 이제는 아예 x,y의 좌표가 있는 값들에 대한 최소값만 확인하겠다는 거다. 각 좌표에 대한 값들만 확인해도 각 좌표에 대한 거리 비용만큼은 최소값이 나온다.

1차원으로 생각해보면 중간에 9를 넣으나 a에서 시작하나 b에서 시작하나 6인 것은 매한가지이다. 이걸 2차원으로 확장시켜 생각해보면 역시나... 그냥 그 좌표에서 시작해도 된다는 것을 알 수 있다. 이거 뭐 말로 표현을 못하겠다..ㅠ 좌표평면을 그려봐야 그나마 이해가 된다.

import math
n = int(input())
xl = []
yl = []
arr = []
ans = [math.inf]*n
for _ in range(n):
    x,y = map(int,input().split())
    arr.append([x,y])
    xl.append(x)
    yl.append(y)
l = []
for x in xl:
    for y in yl:
        dis = []
        for nx, ny in arr:
            dis.append(abs(nx - x) + abs(ny-y))
        dis.sort()

        for i in range(len(dis)):
            d = sum(dis[:i+1])
            if ans[i] > d:
                ans[i] = d
print(*ans)

각각의 거리에 대해 연산을 다 하고 나서 또 다시 최소 값을 구하는 것이 아니라 각각의 거리에 대해 연산을 하면서 최소값을 구할 수 있다.

참고로 문제를 풀다보면 각 좌표에 대한 최소값만 구하면 되는거 아닌가 싶을 수 있는데 바로 밑의 예시를 보면 아니라는 것을 알게된다. 3,3가 적합한데도 좌표끼리만 최소 값을 비교하기 때문이다.

JWT(Json Web Token)

Mon, 17 Jun 2024 13:38:58 GMT

세션 기반 인증 vs 토큰 기반 인증

세션 기반 인증

서버의 세션 기능과 클라이언트의 쿠키를 활용하여 사용자 인증을 하는 방법이다. 주로 서버 사이드 랜더링 방식으로 처리되는 웹서비스에서 많이 사용된다.

그렇다 보니 클라이언트로부터 요청을 받으면 클라이언트 상태를 계속 유지해놓고 사용한다. (Stateful) 이는 사용자가 증가함에 따라 메모리의 성능 문제를 일으킬 수 있고 -> Redis로 메모리 관리 가능 쿠키는 단일 도메인, 서브 도메인에서만 작동하여 여러 도메인에서 사용한다면 따로 관리를 해야한다.

토큰 기반 인증

Rest 아키텍처에서 많이 사용된다. JWT가 있다. 사용자가 로그인을 요청하면 그 사용자가 맞는지 확인하고 토큰을 준다. 서버는 따로 토큰을 가지고 있지 않는다. 즉, 상태를 유지 하지 않는다.(Stateless)

JWT

JSON Web Token JSON 객체를 사용하여 정보를 안전하게 전송하기 위한 개방형 표준이라고 한다.

JWT를 언제 사용할까?

인증(Authentication) 사용자가 로그인할 때 서버에서 생성하여 클라이언트에 전달 클라이언트는 이후의 요청에 JWT를 포함시켜 서버에 인증한다. 서버는 JWT를 검증하여 사용자를 인증

인증 (Authentication) 인증은 사용자가 자신이 누구인지 확인하는 과정입니다. 즉, 사용자가 주장하는 신원이 실제로 그 사람인지 확인하는 절차 인가 (Authorization) 인가(권한 부여)는 인증된 사용자가 특정 자원이나 기능에 접근할 수 있는 권한을 가지고 있는지 확인하는 과정. 즉, 사용자가 무엇을 할 수 있는지 결정하는 절차.

정보 교환(Information Exchange) JWT는 서명이 포함되어 있어 정보의 무결성을 보장 그렇기에 양 측으로 정보를 교환하는데 사용할 수 있다.

JWT의 구성 요소

JWT는 세 부분으로 구성되어 있다. 각 부분은 점(.)으로 구분된다.

헤더(Header): 토큰의 유형과 해싱 알고리즘을 지정한다.
페이로드(Payload): 클레임(claim)을 포함하여 실제 정보가 들어 있는 부분이다.
서명(Signature): 토큰의 무결성을 검증하기 위해 사용한다.

예시

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
.
eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyLCJhZG1pbiI6dHJ1ZX0
.
F-cvL2RcfQhUtCavIM7q7zYE8drmj2LJk0JRkrS6He4

jwt디버거 여기서 위의 jwt를 돌려보면 밑에서 설명하는 값이 나온다.

각 구성 요소의 설명

헤더(Header)
```
{
"alg": "HS256",
"typ": "JWT"
}
```

alg: 사용할 서명(비밀 키) 알고리즘 (예: SHA256)
typ: 토큰의 타입(JWT)

페이로드(Payload)

{
"sub": "1234567890",
"name": "John Doe",
"iat": 1516239022,
"admin": true
}

sub: 토큰의 주체(Subject)
name: 사용자 이름
iat: 토큰 발행 시간(Issued At)

페이로드는 여러 개의 클레임을 포함할 수 있다.

클레임은 등록된 클레임(Registered Claims), 공개 클레임(Public Claims), 비공개 클레임(Private Claims)으로 나눌 수 있다.

서명(Signature)
```
HMACSHA256(
base64UrlEncode(header) + "." + base64UrlEncode(payload),
secret
)
```
서명은 헤더와 페이로드를 인코딩한 후 비밀 키를 사용하여 생성한다. 토큰을 무결성을 검증하는데 사용

JWT는 어떻게 작동하는가

사용자 인증 사용자가 로그인할 때, 서버는 사용자의 자격 증명을 확인한다 (예: 아이디과 비번)
JWT생성 서버는 사용자가 인증에서 성공하면 JWT를 생성한다. 이 토큰에는 사용자 정보를 포함한 페이로드와 함께 헤더,서명이 포함된다.
JWT전달 서버는 생성된 JWT를 클라이언트에 전달한다. 클라이언트는 이 JWT를 로컬 스토리지나 쿠키에 저장한다.
요청 시 JWT첨부 클라이언트는 이후의 모든 요청에 JWT를 포함시켜 서버에 보낸다. 보통 이 토큰은 HTTP헤더의 Bearer스키마를 사용한Authorization필드에 포함된다.
```
Authorization: Bearer 
```
서버에서 JWT검증 서버는 클라이언트로부터 받은 JWT를 검증한다. 서명 확인, 유효성 검사, 사용자 정보확인과 같은 과정을 거친다.
요청 처리 서버가 JWT가 유효하다고 판단하면 요청한 데이터에 접근할 수 있도록 허용한다.

JWT 단점

토큰 크기: JWT는 기본적으로 크기가 커질 수 있어, 헤더의 크기가 증가할 수 있다. -> 네트워크 부하 일어날지도
무효화 어려움: Stateless로 서버에서 임의 삭제 불가
토큰 자체에 정보 저장해서 보안 취약

출처

https://jwt.io/introduction

https://inpa.tistory.com/entry/WEB-📚-JWTjson-web-token-란-💯-정리

https://velog.io/@jun7867/세선-기반-인증과-토큰-기반-인증JWT-차이점

HTTP와 Cookie와 Session

Mon, 17 Jun 2024 12:10:18 GMT

요즈음 JWT로 로그인 기능을 구현하고 있다. JWT에 대해서 쓰려고 하는데, 먼저 쿠키와 세션에 대해서 설명하고 들어가면 좋을 거 같아서 작성한다.

Http 프로토콜

HyperText Transfer Protocal

웹 브라우저와 웹 서버 간에 데이터를 주고받기 위한 프로토콜
클라이언트-서버 모델을 기반
HTML 문서, 이미지, 비디오 등 리소스를 전송하는데 사용
HTTP는 TCP/IP 프로토콜 위에서 작동하고 포트는 보통 80을 사용

HTTP의 주요 특징

비연결성 (connectionless) 비연결성은 클라이언트가 서버와 한 번 연결을 맺은 뒤, 클라이언트의 요청에 대해서 서버가 응답하면 맺은 연결을 끊어 버린다. = 각 요청 간에 상태를 유지하지 않는다.

즉, 서버는 각 요청을 독립적으로 처리한다.

장점: 연결을 계속 유지하지 않아서 리소스가 줄어든다.
단점: 동일한 클라이언트가 요청해도 매번 새로게 해야해서 오버헤드가 발생한다.
KeepAlive을 사용해서 해소할 수 있지만 메모리 많이 먹는다.

무상태성 (stateless) 비연결성으로 인해 서버는 클라이언트에 대한 상태나 정보가 없고 그렇기 때문에 클라이언트의 상태를 모른다.

클라이언트의 상태를 모르기 때문에 로그인하면 그것에 대한 인증을 매번 새로게 받아야한다.

이를 보완하기 위해 상태를 저장할 수 있는 쿠키와 세션을 사용하는 것이다.

쿠키(Cookie)

쿠키는 클라이언트의 브라우저에 저장되는 작은 데이터 조각이다.

쿠키의 주요 특징

클라이언트 사이드 저장 쿠키는 key-value형식으로 구성된 string으로 클라이언트의 브라우저에 저장된다.
데이터 저장
유효 기간 쿠키는 유효 기간을 설정할 수 있다. 브라우저마다 정책이 다르다. 사파리의 경우 7일(왤케 짧냐?), 크롬의 경우 변경하면 최대 400일 정도
보안 쿠키는 사실 보안성이 세션에 비해 약하다. 그렇기 때문에 로그인 인증과 같은 보안성이 필요한 곳에는 권장되지 않는다. HttpOnly와 Secure속성을 사용하여 https 연결에만 쿠키가 전송되도록 보안을 강화할 수 있다고는 한다.

세션(Session)

세션은 서버 측에서 관리되는 상태 정보다.

세션의 주요 특징

서버 사이드 저장 세션 정보는 서버에 저장된다. 클라이언트를 식별하기 위해서 세션 ID가 사용된다.
단기 저장 보안을 위해 일반적으로 특정 기간 동안(브라우저 활성) 활성화되며, 사용자가 일정 시간 동안 활동이 없으면(브라우저 종료) 만료됨
데이터 저장
보안 세션은 당연히 서버에 저장되기 때문에 쿠키에 비해 비교적 보안이 높다. 세션 ID가 털리면 그딴거 없다. 그러기 위해서 https를 사용해서 전송될 때 보안을 강화해야 한다.

세션과 쿠키의 차이점

구분	쿠키 (Cookie)	세션 (Session)
저장 위치	클라이언트 측 브라우저에 저장	서버 측에 저장
유효 기간	설정된 유효 기간 동안 유지	일반적으로 브라우저 세션 동안 유지, 일정 시간 동안 활동이 없으면 만료
데이터 저장	작은 데이터 조각, 텍스트 형식(Text)	다양한 형태의 데이터 저장 가능(Object)
보안	민감한 정보 저장 시 보안 위험 있음	서버 측에 저장되어 상대적으로 보안이 높음
사용 예	사용자 언어 설정, 자동 로그인 정보, 광고 트래킹 정보	로그인 상태 유지, 장바구니 정보, 사용자 프로필 정보
전송 방식	HTTP 요청 시 자동으로 서버에 전송	세션 ID를 쿠키나 URL 파라미터를 통해 전달
용량 제한	일반적으로 4KB 이하	서버 메모리에 저장, 용량 제한 없음

참고

https://victorydntmd.tistory.com/286 https://hstory0208.tistory.com/entry https://hstory0208.tistory.com/entry

맥북 m3 MySQL 8.4.0 start가 안된다.

Sun, 16 Jun 2024 14:52:14 GMT

난 그저 latest를 설치하려 한건데...

맥북 선배 면진이가 mySQL은 직접 다운받아서 설치하라고 했던가..? 그랬었다. 윈도우에서도 mySQl은 설치 한 번 잘못하면 피곤해지기 때문에 그냥 터미널 말고 직접 설치를 하기로 했다.

그냥 comminity server 들어가서 바로 나오는 걸로 설치했다.

제대로 실행하고 잘 되나 했더니 계속 서버 실행이 안됐다.

버전에 관한 이슈였다.

https://discussions.apple.com/thread/254871250?sortBy=best 여기서 보니까 나만 그런건 아닌듯

8.3을 설치하라는 댓글에 8.3을 설치하니 실행은 잘됐다.

그런데 workbench에서 실행하니 버전이 안맞는다고 한다.

찾아보니까 MySQL Workbench는 주로 MySQL 서버의 특정 버전(5.6, 5.7, 8.0)에 최적화되어 있고, MySQL 8.3.0과 같은 비표준 또는 미지원 버전과의 호환성은 보장되지 않는다고 한다.

그래서 그냥 8.0.36을 설치했다. 아주 잘 돌아간다.

workbench에서 잘 되는 것을 볼 수 있다.

세 줄 요약

mySQL 8.4.0은 문제가 있는지 서버 실행이 안된다.
8.x 버전 말고 공식 릴리즈인 8.0.x 버전을 설치하도록 하자.
workbench는 공식 릴리즈버전에서 호환이 된다.

참고

https://konkukcodekat.tistory.com/25

What did I do after buying a MacBook?

Wed, 12 Jun 2024 08:01:03 GMT

학교에서 받은 띵크패드T470을 18년도부터 사용해 왔는데요... 성능 이슈로 인해 면접을 못볼뻔한 사건으로 드디어 새 노트북을 장만했습니다.

님들은 나처럼 이러지 말고 적당한 때 노트북 잘 바꾸십시오.

사건에 대해 말씀드리고 원하는 모델을 찾아본 끝에 맥북 프로를 부모님께서 질러주셨습니다.

당연히 안보시겠지만 블로그에도 감사한 마음 전합니다.

사담이 매우 길었는데 나중을 위한 맥북 설정들에 대해 정리해보려고 합니다.

사양 맥북 프로 M3pro 램 18GB

Homebrew

macOS용 패키지 관리자 맥의 apt인가보다. https://m-ur-phy.tistory.com/entry/맥북-Homebrew-홈브류-설치하기

Iterm2

면진이가 꼭 설치하라구 했다. m3프로는 그냥 막하면 또 안된다. 밑의 블로그 참고함 이게 최고임👍 https://kdohyeon.tistory.com/122

Pycharm

다들 파이썬은 vscode로 하지만 난 파이참이 좋아... 애플 실리콘 버전으로 다운! https://www.jetbrains.com/ko-kr/pycharm/download/?section=mac

VSCode

프론트는 이걸로 하는 편 https://code.visualstudio.com/Download

Java

자바 17를 쓰는 중 https://velog.io/@may_yun/Mac-M1-Java-17-%EC%84%A4%EC%B9%98

IntelliJ

얘도 애플 실리콘으로 다운 https://www.jetbrains.com/ko-kr/idea/download/?section=mac

MySQL

https://velog.io/@im_agination/%EB%A7%A5%EB%B6%81-m3-MySQL-8.4.0%EA%B0%80-%EC%8B%A4%ED%96%89%EC%9D%B4-%EC%95%88%EB%90%9C%EB%8B%A4 하면서 문제가 생겼어서 따로 정리했다. +) 이유는 바로 환경변수를 설정안해서였다. https://developer-hm.tistory.com/90

~~-> 이것도 안되는 바람에... 그냥 homebrew로 설치함 https://programmerjoon.tistory.com/23 https://dschloe.github.io/sql/2024/04/mysql_delete_reinstall/~~ 이건 완전 삭제법 https://github.com/rangyu/TIL/blob/master/mysql/MySQL-%EC%99%84%EC%A0%84-%EC%82%AD%EC%A0%9C%ED%95%98%EA%B3%A0-%EC%9E%AC%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0-(MacOS).md

저에게 큰 도움 주신 블로거분들께도 감사의 인사를 전하며

여기서 더 뭐 해야지?

C, 도커, SQL은 차후 사용할 때 적도록...!

[FE] HTML input 태그 꾸미기

Sat, 18 May 2024 20:57:15 GMT

환경 React JavaScript Shadcn/ui -> 없어도됨 Tailwind -> 이것도 없어도됨

보통 html 태그를 활용한 파일 업로드의 경우 이렇게 되어있다. 이건 브라우저마다 다르다는데 파일 업로드 폼에 대해서는 별도로 수정을 할 수 없다고 한다.

브라우저별로 각기 다르다.

내가 원한 것은:

파일 5개 이하로 업로드 가능할 것
업로드 할 파일이 없는 경우와 있는 경우를 나누어 보여줄 것
있는 경우에 파일의 개수를 보여줄 것
업로드 한 파일명을 볼 수 있고, 그 파일을 개별로 지울 수 있을 것

function CreatePostModal() {
  const [files, setFiles] = useState([]);
  const handleFileChange = (e) => {
    const selectedFiles = Array.from(e.target.files);
    if (selectedFiles.length + files.length > 5) {
      // 기존 파일과 새 파일의 합이 5개를 초과하면 경고
      alert("최대 5개의 파일만 업로드할 수 있습니다.");
      return;
    }
    setFiles((prevFiles) => [...prevFiles, ...selectedFiles]); // 기존 파일과 새 파일을 합칩니다.
  };
  const handleRemoveFile = (index) => {
    // 특정 인덱스의 파일을 제거합니다.
    setFiles((prevFiles) => prevFiles.filter((_, i) => i !== index));
  };
// 생략
return(

              
                
                  File
                
                
                  

                  {files.length === 0 ? (
                    파일을 추가하려면 여기를 클릭하세요.
                  ) : (
                    {files.length}개의 파일이 있습니다.
                  )}
                
                
                
                  {files.map((file, index) => (
                    
                      {file.name}{" "}
                      
                    
                  ))}
                
              
)

[React] 페이지네이션의 맛

Fri, 17 May 2024 00:47:41 GMT

환경 React JavaScript shadcn/ui tailwind css

Vue가 아닌 React로 돌아왔다.

페이지네이션만 세 번이나 주저리거렸다.

왜일까하니

CRUD수준에서 어려운 부분을 꼽으라면

수정 (프론트 구현이 비교적 어려움)
페이지네이션 (백엔드도 직접 구현하면 생각 좀 해야함 + 프론트 또한...) 이기 때문이다.

✨필요한 것

나의 멋진 백엔드 코드

✨내가 원했던 것

5개의 페이지만 띄워줄 것
5페이지 이상이면 6~10페이지 띄워줄 것
prev누르면 -5페이지, next누르면 +5페이지

✨참고할 것

https://ui.shadcn.com/docs/components/pagination

✨설치

npx shadcn-ui@latest add pagination

✨넘어오는 데이터

{
    "items": [
        {
            "id": 1,
            "title": "1",
            "content": "1",
            "author": "1",
            "password": "1",
            "comments": [],
            "date": "2024-05-16 22:13:38.212614"
        }
    ],
    ... 생략
    ,
    "total": 17,
    "page": 2,
    "size": 15,
    "pages": 2
}

total: 총 게시글의 개수 page: 현재 페이지 pages: 총 페이지 size: 한 번에 보여줄 페이지

✨코드

import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination";
... 생략

function post(){
    const [posts, setPosts] = useState([]);
  const [currentPage, setCurrentPage] = useState(1); // 현재 페이지 상태 추가
  const [totalPages, setTotalPages] = useState(0);
  const [pageRangeStart, setPageRangeStart] = useState(1);
}
  const updatePageRange = (newCurrentPage) => {
    const newStartPage = Math.floor((newCurrentPage - 1) / 5) * 5 + 1;
    if (newStartPage !== pageRangeStart) {
      setPageRangeStart(newStartPage);
    }
  };
  useEffect(() => {
    fetchPosts();
  }, []); // 컴포넌트 마운트 시 첫 페이지의 게시물을 가져옵니다.

  const fetchPosts = async (page = 1) => {
    const response = await axios.get(
      `http://localhost:8000/post/posts?page=${page}`
    );
    setPosts(response.data.items);
    setCurrentPage(page); // 페이지를 성공적으로 불러온 후 현재 페이지 상태 업데이트
    setTotalPages(response.data.pages);
    updatePageRange(page); // 페이지 업데이트 함수에 현재 페이지 전달
  };

return(
        ... 게시판 목록관련 ...
        
        
          
            
               fetchPosts(Math.max(currentPage - 5, 1))}
                disabled={currentPage - 5 < 1}
                style={{ cursor: "pointer" }}
              />
            
            {[...Array(5)].map((_, index) => {
              const pageNumber = pageRangeStart + index;
              return pageNumber <= totalPages ? (
                
                   fetchPosts(pageNumber)}
                    style={{
                      backgroundColor:
                        pageNumber === currentPage ? "#fff" : "#fff", // 이 부분 바꾸면 색바뀜
                      color: pageNumber === currentPage ? "#fff" : "#fff", // 여기도
                      cursor: "pointer",
                    }}
                  >
                    {pageNumber}
                  
                
              ) : null;
            })}
            
              
                  fetchPosts(Math.min(currentPage + 5, totalPages))
                }
                disabled={currentPage + 5 > totalPages}
                style={{ cursor: "pointer"}}
              />
            
          
        
      
... 생략

);

✨결과

+) 게시글 잘 넘어감..

[FastAPI] Pagination with fastapi-pagination

Tue, 14 May 2024 02:03:27 GMT

환경 Python 3.11 fastapi 0.110.2 fastapi-pagination 0.12.24 MongoDB

이전에 스프링부트에서 Pageable을 사용하여 myBatis와 함께 간단하게 페이지네이션 하는 법에 대해서 알아보았다.

어쩌다보니 fastAPI를 사용하게 되었는데 Django... 이제 못쓰겠음😒

이번에는 FastAPI에서 간단하게 사용하는 방법에 대해서 정리하려고 한다.

스프링부트에서보다 훨씬 쉽다.

이미 MVC가 구현 다 되었다는 전제하에 시작한다.

✨설치하기

pip install fastapi-pagination

✨main.py

from fastapi import FastAPI
from fastapi_pagination import add_pagination

app = FastAPI()
add_pagination(app)

✨controller.py

from fastapi import Depends
from fastapi_pagination import Page, Params, paginate

@post_router.get("/posts", response_model=Page[Post])
async def get_posts(params: Params = Depends()):
    params.size = 5
    return paginate(list(get_post_from_db()),params)

보내고 싶은 요소들을 list로 묶어 보내야 하고, 하나당 사이즈를 조절하고 싶으면 Param의 size에 대해서 크기를 지정해 주면 된다. 디폴트는 50이다.

더 알아보고 싶다면 Params 클래스와 Page 클래스에 대해 더 알아보면 될 것이다.

✨service.py (변경사항 없음)

def get_post_from_db():
    posts = db.posts.find()
    return posts

✨models.py (변경사항 없음)

그냥 우리가 아는 model이다👀

✨어떻게 뜨는가

http://localhost:8000/post/posts?page=2

{
    "items": [
        {
            "id": 6,
            "title": "새 포스트 제목22",
            "content": "여기에 내용을322 입력하세요.",
            "nickname": "작성자 이름",
            "password": "1234",
            "comments": [],
            "date": "2024-05-13T22:52:08.062000"
        }
    ],
    "total": 6,
    "page": 2,
    "size": 5,
    "pages": 2
}

2 페이지에 대해서 찾아봤고, 잘 찾아진다.

✨참고자료

레퍼런스 참고자료

[IntelliJ] 프로젝트 처음 불러올 때 바보 짓 방지

Thu, 28 Mar 2024 05:44:20 GMT

1번 경우

왜...왜 내 ServerApplication.java는 컵인가.. 그리고 gradle은 왜 안잡히는가..

정상상황..

1) 님이 프로젝트 여는 폴더를 잘못지정한거 보통 더 상위폴더를 지정해서 생김. 그레이들이 안잡힌다. 위치 잘 잡으면 그레이들도 자동으로 잡힘.

2) 폴더도 제대로 잡았는데 안되는 경우가 왕왕있음. 보통 resources안넣었을 때라던지.. 뭔가 모종의 사유가 있을 때 그러는데 그럴 때는 보통 gradle은 잡혀있다. 이러고 나면 보통 생김.

그래도 안된다면 물어보던가 다시 받던가 해야하지 않을까

2번 경우

항상 private 수준에서 또 localhost정도로만 작업을 하니 간과하곤 했는데 properties같은 거 public으로 했다가 git에 올라간다면... 거기에 중요한 key가 있었다면... 그게 aws와 관련된 무언가라면...

이번에 협업을 하면서 당연히 gitignore안에 application.properties를 넣었다.

그걸 보고 당황한 나... resources가 어디갔지라고 질문하다...

네 당연히 직접 만들어서 팀원들과 합의한 properties를 넣어야하구요?

밑에처럼 폴더 넣어서 하면 된다.

보통 gradle이 잡혔으면 잘됨.

main 폴더 우클릭

디렉토리 클릭

끝

Springboot 3에서 Swagger 생성법

Thu, 28 Mar 2024 05:01:04 GMT

환경 자바 17 스프링부트 3.2.3

예전에는 spring fox를 사용했던 거 같은데 3버전으로 되면서 spring doc을 쓰는게 맞다고 한다.

build.gradle

implementation 'org.springdoc:springdoc-openapi-starter-webmvc-ui:2.2.0'

application.properties

springdoc.packages-to-scan= com.demo.project (패키지명)
springdoc.default-consumes-media-type= application/json;charset=UTF-8
springdoc.default-produces-media-type= application/json;charset=UTF-8
springdoc.swagger-ui.path= /swagger-ui.html
springdoc.swagger-ui.disable-swagger-default-url= true
springdoc.swagger-ui.display-request-duration= true
springdoc.swagger-ui.operations-sorter=alpha

SwaggerConfig.java

import io.swagger.v3.oas.models.Components;
import io.swagger.v3.oas.models.OpenAPI;
import io.swagger.v3.oas.models.info.Info;
import io.swagger.v3.oas.models.security.SecurityRequirement;
import io.swagger.v3.oas.models.security.SecurityScheme;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration
public class SwaggerConfig {


    @Bean
    public OpenAPI openAPI() {
        Info info = new Info()
                .version("v1.0.1")
                .title("Hello")
                .description("안녕하세요?");

        String jwt = "JWT";
        SecurityRequirement securityRequirement = new SecurityRequirement().addList(jwt);
        Components components = new Components().addSecuritySchemes(jwt, new SecurityScheme()
                .name(jwt)
                .type(SecurityScheme.Type.HTTP)
                .scheme("bearer")
                .bearerFormat("JWT")
        );

        return new OpenAPI()
                .info(info)
                .addSecurityItem(securityRequirement)
                .components(components);
    }
}

로그인을 넣어서 accessToken을 넣어서 해야하니까 security 부분도 넣게 되었다.

설명 작성하기

@Tag(name ="Itemlist API", description = "아이템 리스트에 대한 API")
@RestController
@RequiredArgsConstructor
@RequestMapping("/api/journeys/{journey_id}/itemlist")
public class ItemlistController {
    private final ItemService itemService;
    @Operation(summary = "한 여정에 대한 아이템 리스트 다 불러오기", description = "특정 여정에 대한 모든 아이템을 가져오는 API입니다.")
    @Parameter(name = "journey_id", description = "조회할 여정의 ID")
    @GetMapping
    public ResponseEntity readItemlist(@PathVariable("journey_id") int journeyId) {
        try {
            List itemList = itemService.readItemlist(journeyId);
            if (itemList.isEmpty()) {
                Message message = new Message("404", "아이템 목록이 비어 있습니다.");
                return new ResponseEntity<>(message, HttpStatus.NOT_FOUND);
            } else {
                Message message = new Message("200", "아이템 목록을 가져오기 성공", itemList);
                return new ResponseEntity<>(message, HttpStatus.OK);
            }
        } catch (Exception e) {
            Message message = new Message("500", "아이템 목록 읽기 서버 오류로 인해 아이템 목록을 가져올 수 없습니다.");
            return new ResponseEntity<>(message, HttpStatus.INTERNAL_SERVER_ERROR);
        }
    }

@ Tag, @Operation과 @Parameter

끝

http://localhost:8080/swagger-ui/index.html server.servlet.context-path에 경로 넣었으면 (예: /api) http://localhost:8080/api/swagger-ui/index.html 이런식으로 하면 됨!

Cypress

Fri, 16 Feb 2024 08:20:08 GMT

아니 버튼이 안보여

npm : 10.2.4 node : 20.11.0

E2E 테스트 코드와 실행 결과를 가져오라고 해서 검색해보니 Cypress라는게 있다고 한다. Selenium과 고민했는데, Cypress를 써도 지금 프로젝트 수준에선 다 할 수 있을 거 같아서 적용했다.

그런데... 이거 왜이렇게 버튼이 안보일까 처음에 애먹었다.

Cypress 다운받기

Cypress는 사용하는 방법이 두가지인데 npm이나 실행파일을 인스톨하는 방법이다. 나는 그냥 인스톨해서 사용하기로 했다.

cypress 실행 파일을 누르면 지금 나는 몇 개를 해봐서 이렇게 뜨는데 Add project를 하면 된다.

나는 E2E 테스트를 할 것이라 E2E를 클릭

컨티뉴

나는 크롬으로 해서 E2E 테스팅을 시작했다.

누르면 이렇게 브라우저가 실행되고 두가지 선택지가 생기는데 Scaffold의 경우 예시를 볼 수 있고 Create new spec을 누르면 바로 프로젝트에 반영 가능한 예시 하나만 있다.

그저 create

이러면 예시가 하나 나온다.

설정 해야하는 것이 하나 있는데 setting-project settings으로 들어간다

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  reporter: "cypress-mochawesome-reporter",
  video: false,
  reporterOptions: {
    charts: true,
    reportPageTitle: "Cypress Inline Reporter",
    embeddedScreenshots: true,
    inlineAssets: true, //Adds the asserts inline
  },

  e2e: {
    experimentalStudio: true,
    setupNodeEvents(on, config) {
      require("cypress-mochawesome-reporter/plugin")(on);
    },
  },
});

나는 나중에 테스트도 할거라서 이렇게 넣었다.

다시 spec 있는 곳으로 가면 저렇게 위 사진처럼 커서를 올리면 Add New Test가 있는데 이제 여기서 본격적으로 테스트 코드를 만들면 된다.

이렇게 만들면 된다.

만약 Add New Test가 안된다면 experimentalStudio: true, 이걸 추가했는지 확인 할 것!

만약 만들어진 테스트 코드가 맘에 안든다면

그냥 나는 Open in IDE에서 그 부분 지운다. 그럼 잘됨.

이렇게 되면 테스트코드는 다 만든거다.

다음 편은 이제 프로젝트에서 직접 테스트하기 편인데... 왜인지 작동을 안한다.

도커 설치 맛 좀 볼래?

Thu, 01 Feb 2024 05:04:55 GMT

졸업해도 어려움ㅠ

버전 윈도우 10

대충 과정을 말해주면

wsl2 설치
도커 설치
wsl2 설치

linux용 window 하위 시스템 사용

powershell을 관리자 권한으로 열고 밑의 명령어 입력

dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart

버전 확인

내가 하려는 수동 설치 기준 밑의 기준은 만족해야한다고 한다.

x64 시스템의 경우: 버전 1903 이상, 빌드 18362.1049 이상.
ARM64 시스템의 경우: 버전 2004 이상, 빌드 19041 이상

버전 확인하고 싶다면 아래 명령어 입력한다.

winver

virtual machine 사용

powershell 관리자 권한으로 열어서 확인

dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart

linux 커널 업데이트 패키지 다운

링크에서 다운 x64

ARM64

wsl 2를 기본 버전으로 설정

powershell 관리자 모드로 열고 밑의 명령어 입력

wsl --set-default-version 2

선택한 linux 배포 설치

내가 뭐 이미지 파일 가져와서 해도된다지만... 너무 힘들어 필요한 버전 넣기 나는 20.04 필요해서 설치

설치가 됐다면 열고나서 실행하면 사용자 설정하고 실행된다.

만약 18.04로 바꾸고 싶다면?

wsl --set-version Ubuntu-18.04

배포판을 다운로드 했다면 -> 배포판 다운로드 한 경우

이거 참고하는게 빠를듯 나도 사실 안해봐서 모름..

도커

도커 설치

도커 다운 자 이건 윈도우고~ 저건 맥북 m 시리즈야~

나는 도커 허브도 이용해볼 생각이라 로그인 했다.

configuration에 있는 Install Required Windows components for WSL2 Add shortcut to desktop은 다 체크✅

그러면 설치가 되는데 아니 1시간을 해도 안되는거다. 그래서 껐다 켰더니 잘됨ㅋ 우왕굿ㅎㅎ

도커 설정

Setting - General Use the WSL 2 based engine 체크✅
Setting - Resources - WSL INTEGRATION 사용할 우분투 버전 ON

끝

난 이미지 파일 넣을게 있어서 넣었고 잘된다.

잘되나 보고싶은데? cmd 실행 뒤

wsl -l -v

보통 설치한 우분투버전이랑 도커랑 도커 데스크탑데이터 이렇게 뜨면 잘 되는 거임

설치는 잘 된거같은데... 왜인지 잘 안된다면 그냥 재부팅 하라고 말해줬습니다?

출처

Pageable, MyBatis를 통한 페이지네이션

Mon, 29 Jan 2024 18:53:35 GMT

from django.core.paginator import Paginator

한 줄이면 될 걸 온갖 난리를 쳐야하는 Springboot

버전 정보 Java: 17 spring boot: 3.2.2 mybatis springboot-starter: 3.0.3 mySQL

JPA의 시대, myBatis 깎는 나는 너무나 괴롭다. 자료가 너무 없다.

눈물겨운 여러가지 시도들

직접 구현하기 (귀찮아) -> pageHelper (뭔가 좀 그래) -> 직접 구현하기 2트 (이게 맞냐?) -> Pageable (성공이요)

페이지네이션은 자주 쓸 거 같아서 나를 위해 정리해서 저장할거다.

그냥 mapper.xml -> mapper.java -> service -> controller로 간다고 생각하면 된다.

dependency

spring-data-commons 여기서 gradle이던 maven이던 찾아서 넣기 나는 스프링도 최근 버전이고 해서 그냥 가장 최근 버전 넣는다.

mapper.xml

<-- 리스트 나열 -->
    
<-- 개수 -->

mapper.java

@Mapper
public interface RoomMapper {
    List> list (Map paramMap);
    int countRooms();
  }

service

RoomService (인터페이스)

import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;

public interface RoomService {
    List getRoomList();
    Page> list (Map paramMap, Pageable page);

RoomServiceImpl.java

...
    @Override
    public Page> list(Map paramMap, Pageable page) {
        paramMap.put("offset",page.getOffset());
        paramMap.put("pageSize",page.getPageSize());
        List> contents = roomMapper.list(paramMap);
        int count = roomMapper.countRooms();
        return new PageImpl<>(contents,page,count);
    }
   ...

Controller.java

    @GetMapping
    @ResponseBody
    public ResponseEntity list(@RequestParam Map paramMap, @PageableDefault(value = 10) Pageable page){
        Map resultMap = new HashMap();

        Page> result = roomService.list(paramMap,page);
        resultMap.put("pages", result);
        resultMap.put("size", page.getPageSize());

            return ResponseEntity.ok()
                    .body(resultMap);
    }

@PageableDefault(value=10) 이게 딱봐도 한 페이지당 max 개수

Postman에서는 잘뜰까?

http://localhost:8080/room?page=1

딸깍

{
    "pages": {
        "content": [
        (생략)
        ],
        "pageable": {
            "pageNumber": 1,
            "pageSize": 2,
            "sort": {
                "empty": true,
                "sorted": false,
                "unsorted": true
            },
            "offset": 2,
            "unpaged": false,
            "paged": true
        },
        "last": false,
        "totalPages": 6,
        "totalElements": 11,
        "size": 2,
        "number": 1,
        "sort": {
            "empty": true,
            "sorted": false,
            "unsorted": true
        },
        "first": false,
        "numberOfElements": 2,
        "empty": false
    },
    "size": 2
}

(대충 잘뜬다는 글)

나의 은인이자 출처

[다음편] 지옥의 Vue.js 페이지네이션편 은 없고 어쩌다보니 React로 하게 되었습니다.