JWT와 Access Token, Refresh Token, RTR 방식 정리 1. 쿠키, 세션 방식 기존의 사용자 인증 방식은 쿠키와 세션 방식으로 이루어졌다. 쿠키 방식은 Key, Value로 이루어진 구조로 만료시간, 도메인, 경로 등의 정보를 사용자의 로컬 하드에 저장하였다. 그러나 이는 개인 정보를 저장하는 것이기에 보안에 취약했으며, 용량 제한 때문에 많은 정보를 담을 수가 없었다. 이러한 문제를 해결하고자 사용자 정보를 서버 측에서 저장하고 관리하기 위해 세션 방식이 도입되었다. 세션 ID에는 중요한 정보가 담겨 있지 않지만, 세션 ID 자체를 탈취당하면 타인이 사용자인 척 위장할 수 있는 문제점이 있다. 또한, 사용자가 많아지면 서버에 트래픽 부하가 생기므로 성능이 저하되기도 한다. 이러한..
[Java] 프로그래머스 : 프로세스 https://school.programmers.co.kr/learn/courses/30/lessons/42587 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 접근 2번째 테스트 케이스를 보면 가장 처음 인덱스에 있는 값이 5번째로 실행되는 것을 확인할 수 있다. 9다음 1이 다음 우선순위가 되도록 하기 위해서 가장 먼저 떠올린 것은, priorities를 내림차순 정렬한 배열을 하나 더 만드는 것이었다. 큐에는 priorities 원본 배열 값을 전부 집어 넣고, 내림차순된 배열의 값과 큐의 특정 값이 일치하는 경..
[Java] 프로그래머스 : 튜플 https://school.programmers.co.kr/learn/courses/30/lessons/64065 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 접근 두 케이스가 어떻게 [2, 1, 3, 4]로 같은 값이 나오게 구현할 것인지 알아내는 것이 어려웠던 문제였다. 집합은 원소의 순서가 바뀌어도 상관없다는 문제의 조건 때문에 두 케이스는 같은 결과가 나올 수 있었다. 만약 두번째 케이스를 각 집합의 길이를 기준으로 오름차순 정렬하면 아래와 같다. {{2},{2,1},{1,2,3},{1,2,4,3}} 반복문으로 ..
[Java] 프로그래머스 : 의상 https://school.programmers.co.kr/learn/courses/30/lessons/42578 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 접근 HashMap으로 정리한다고 가정하면, 예제 1은 다음과 같이 정리된다. headgear : ["yellow_hat", "green-turban"] eyewear : ["blue-sunglasses"] 문제 조건에 의해 의상은 종류별로 1개씩만 입을 수 있고, 특정 종류의 옷을 입지 않는 것도 가능하다. 그러나 최소 한 개의 의상은 입어야 한다. headge..
[Java] 프로그래머스 : n^2 배열 자르기 https://school.programmers.co.kr/learn/courses/30/lessons/87390 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 접근 n = 4일 때의 배열은 다음과 같다. 잘 보면 행의 위치나 열의 위치 중에 더 큰 값으로 값이 결정되는 것을 확인할 수 있다. 빨간색 구간은 행과 열이 3으로 같은 구간이다. 파란색 구간의 경우 행 또는 열 한쪽이 더 큰 값을 가지므로 더 큰 값으로 할당되었다. answer라는 배열이 일차원 배열을 요구하므로, 반복문을 left부터 right..
[Next.js] MSW API moking 방법 정리(csr, ssr) MSW Mocking의 원리에 대해서는 아래 링크를 참고하시는 것이 좋을 것 같습니다. https://tech.kakao.com/2021/09/29/mocking-fe/ Mocking으로 생산성까지 챙기는 FE 개발 안녕하세요, 카카오엔터프라이즈 검색플랫폼프론트파트의 Lawrence.net입니다. 프론트엔드 개발 업무의 효율성을 높이기 위한 방법의 하나로 고민해 본 Mocking에 대해 설명하고 이를 적용했던 사례 tech.kakao.com next.js에서 mocking을 진행하려고 한다면, csr에서 msw를 사용할 것인지, ssr에서 msw를 사용할 것인지에 따라 코드를 다르게 작성해주어야 합니다. 먼저 MSW 패키지를 설치합..
[Java] 프로그래머스 : 괄호 회전하기 https://school.programmers.co.kr/learn/courses/30/lessons/76502 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 접근 괄호 열고 닫는 스택 관련 문제는 다 비슷한 방식으로 풀리기 때문에 걱정이 없었으나, 이번에는 주어진 문자열을 회전하는 방법이 잘 떠오르지 않았습니다. 올바른 괄호 문자열 검증 방법 여는 괄호가 나올 경우 push 닫는 괄호가 나올 경우 스택이 비어있으면 break, 닫는 괄호가 나올 경우 스택 맨 위의 값이 짝이 맞는 여는 괄호일 경우 pop 마지..
[Java] 프로그래머스 : 귤 고르기 https://school.programmers.co.kr/learn/courses/30/lessons/138476 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 주어진 배열을 빈도수를 기준으로 내림차순 한다음, k만큼 귤을 담으면서 귤이 총 몇 종류가 담기게 되는지 계산하면 되는 문제. import java.util.*; class Solution { public int solution(int k, int[] tangerine) { int answer = 0; HashMap map = new HashMap(); f..
Clerk OrganizationSwitcher 컴포넌트 렌더링 안 되는 문제 해결법 next.js와 Clerk을 활용해서 로그인 인증 관련 테스트를 하는 도중에 OrganizationSwitcher 컴포넌트가 렌더링 되지 않는 문제를 발견했습니다. import { SignedIn, SignOutButton, OrganizationSwitcher } from '@clerk/nextjs' import Image from 'next/image' import Link from 'next/link' import { dark } from '@clerk/themes' function Topbar() { return ( Threads ) } export default Topbar 로그인이 되어 있는데도 해당 컴포넌트..
[vscode] 커서 커스터마이징, mac처럼 타이핑, 커서, 스크롤 부드럽게 만드는 법, 커서 화면 고정시키기 vscode의 커서를 커스터마이징 하면 윈도우에서도 mac처럼 vscode 에디터에 부드러운 효과를 적용할 수 있습니다. 설정 탭에서 상단 우측에 있는 설정 열기 버튼을 클릭하여 setting.json 파일을 엽니다. 아래 코드를 적용하면 위의 이미지와 같은 효과를 적용할 수 있지만, 커스터 마이징을 위해 하나씩 살펴보겠습니다. "workbench.colorCustomizations": { // 에디터 커서 색상 "editorCursor.foreground": "#ffff00", // 터미널 커서 색상 "terminalCursor.foreground": "#ffff00" }, "editor.c..
[Next.js] Error: ENOENT: no such file or directory 에러 해결 next.js 프로젝트를 실행하다가 종종 아래와 같은 에러가 나타났습니다. [Error: ENOENT: no such file or directory, open 'C:\next-study\.next\BUILD_ID'] { errno: -4058, code: 'ENOENT', syscall: 'open', path: 'C:\\next-study\\.next\\BUILD_ID' } 해결법 1 프로젝트 빌드가 아직 안된 상태에서 실행하는 경우에 발생하는 에러입니다. npm run build npm run start .next 디렉터리에 필요한 파일을 먼저 빌드를 통해 생성한 후 서버를 작동하면 잘 되었습니다...
[Java] 프로그래머스 : 예상 대진표 https://school.programmers.co.kr/learn/courses/30/lessons/12985 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 접근 토너먼트가 진행될 때마다 변하게 되는 순서에 포커스를 두어야 하는 문제입니다. 첫번째 케이스를 예시로 들면, 1~8번까지의 참가자는 다음과 같이 순서를 부여받게 됩니다. 4번 참가자와 7번 참가자가 몇 번째에 만나는지 알기 위해서는 각각의 숫자를 반복문을 돌리면서 새로 부여될 번호로 바꾸고, 두 숫자가 같아질 때까지 몇 번이나 순회를 하였는지를 구하면..
