대학생 (10) 썸네일형 리스트형 JWT 토큰 자동 갱신: 안전한 인증 시스템 구축하기 (React) JWT 토큰 기반 인증의 중요성 및 클라이언트 사이드에서의 관리 올해 대학교 구성원 및 외부 인원들과 함께 팀 활동으로 규모가 그리 크지 않은 시장을 타겟팅하는 새로운 플랫폼 구축을 진행하는 프로젝트를 진행하고 있다. 해당 프로젝트를 진행하며 웹의 클라이언트 사이드를 위주로 맡고 있고, 백엔드의 서브 개발자로 참여하고 있다. 이 프로젝트에서 마찬가지로 사용자 인증 및 로그인 관련 로직은 JWT 토큰 기반 인증 방식을 사용하게 되었고, 그 과정 속 발생한 두가지 문제에 대해 다뤄보려고 한다. (이번 글에서는 JWT(JSON Web Token)에 대한 개념을 정리하기보단 다루면서 생겼던 이슈에 대한 해결 방법을 위주로 다뤄보려고 한다.) 문제정의 만료된 JWT 토큰으로 인한 사용자 경험 저하 문제 JWT 토.. 순환 참조 문제 / Go언어(Golang) 게임서버 순환 참조의 개념 순환 참조란 두 모듈이 서로를 직접 또는 간접적으로 참조할 때 발생한다. 이는 컴파일 타임에 해결되지 않으면 런타임 에러로 이어지며, Go에서는 패키지 간 잘못된 의존성 구조로 인해 이런 문제가 발생한다. ( Go에서는 컴파일 타임에 아래와 같은 import cycle not allowed 와 같은 컴파일 에러를 반환하여 알려주긴 한다) 순환 참조가 야기하는 문제점 컴파일 에러 : 컴파일 에러가 난다면 그나마 다행이지 않을까 싶다 단위 테스트가 어렵고 비용이 증가 : 의존적인 모듈들이 함께 테스트 되어야하기 때문에 단위적인 테스트가 어렵고 비용이 증가한다 가독성이 저하되고 유지보수의 어려움 증가 문제 상황 및 배경 Go언어를 이용해 한글을 타이핑하여 스킬 사용 및 공격 등을 진행하는 게.. [Spring] Spring과 JPA를 사용해보기 - 학식 취향분석 프로그램 (1) haksik-personalized 스프링 부트를 이용하여, 사용자 취향에 맞는 학식 메뉴를 추천해주는 간단한 프로그램을 구성해보았다. 이 프로젝트는 이전에 React와 코사인 유사도 알고리즘을 사용하여 만들었던 음식점 추천 시스템을 스프링 부트와 비슷하게 재구성하였다. 현재는 취향 분석의 여러개의 값이 존재하지 않아 평가된 메뉴 점수의 평균값만으로 취향을 분석하여 추천한다. 학식 메뉴를 제공하고, 사용자가 각 메뉴를 "좋아요", "보통이에요", "싫어요"로 평가할 수 있다. 사용자가 평가를 진행하면 각 메뉴에 대한 점수가 데이터베이스에 저장되고, 이후에 사용자에게 새로운 메뉴를 추천할 때 이 점수를 활용하게 되어있다. (repository: https://github.com/WinterLimited/h.. [TypeScript] TypeScript 처음 사용해보기 (2) (React.js) Foodie-finder 취향분석을 통한 음식점 추천 - React와 코사인 유사도 알고리즘을 활용한 애플리케이션 TypeScript를 통해 localStorage에서 간단한 작업을 해봤는데, 그것을 포스팅하기에는 너무 간략하다고 생각되어 최근에 심심풀이로 떠올랐던 아이디어를 구현하여 만든 것을 이어 포스팅하게 되었다. 그리고, 그것은 바로 개인 맞춤형 음식점 추천 시스템이다. (repository: https://github.com/WinterLimited/foodie-finder) GitHub - WinterLimited/foodie-finder Contribute to WinterLimited/foodie-finder development by creating an account on GitHub... [BOJ 10799번/LowerBound(Binary Search)] 쇠막대기 (Java) 문제 링크 https://www.acmicpc.net/problem/10799 10799번: 쇠막대기 여러 개의 쇠막대기를 레이저로 절단하려고 한다. 효율적인 작업을 위해서 쇠막대기를 아래에서 위로 겹쳐 놓고, 레이저를 위에서 수직으로 발사하여 쇠막대기들을 자른다. 쇠막대기와 레이저 www.acmicpc.net 백준 10799번 문제는 주어진 문자열에서 쇠막대기와 레이저의 배치를 나타내고, 몇 개의 조각으로 쇠막대기가 잘려지는지를 구하는 문제이다. 풀이 방법 1) 처음에 구상했던 방법 - 배열을 이용해 쇠막대기 사이 위치의 인덱스들을 모두 돌며 레이저의 개수를 확인하여 쇠막대기의 잘린 조각 개수 세기 스택을 이용한 레이저 및 쇠막대기의 위치 확인 - 여는 괄호 '('를 만나면 스택에 추가한다. - 닫는 .. [BOJ 5397번/Stack, LinkedList] 키로거 (Java) 문제 링크 https://www.acmicpc.net/problem/5397 5397번: 키로거 첫째 줄에 테스트 케이스의 개수가 주어진다. 각 테스트 케이스는 한줄로 이루어져 있고, 강산이가 입력한 순서대로 길이가 L인 문자열이 주어진다. (1 ≤ L ≤ 1,000,000) 강산이가 백스페이스를 입 www.acmicpc.net 백준 5397번 키로거는 실제로 키보드로 입력된 문자열을 기록하여, 키를 누르거나 뗄 때마다 키 입력 상태가 바뀌는 상황에서 입력된 문자열을 출력하는 문제이다. 풀이방법 1) Stack을 이용한 방법 - Stack을 통한 문제해결 동작 방식 문자열 입력 받기 및 Stack 선언(leftStack, rightStack) 입력 받은 문자열을 String으로 저장합니다. 커서를 기준으.. [BOJ 3272번/HashMap] 두 수의 합 (Java) 문제 링크 https://www.acmicpc.net/problem/3273 3273번: 두 수의 합 n개의 서로 다른 양의 정수 a1, a2, ..., an으로 이루어진 수열이 있다. ai의 값은 1보다 크거나 같고, 1000000보다 작거나 같은 자연수이다. 자연수 x가 주어졌을 때, ai + aj = x (1 ≤ i < j ≤ n)을 만족하는 www.acmicpc.net 백준 3273번 문제는 수열과 합 문제로, 길이가 n인 수열과 정수 x가 주어졌을 때, 수열에서 두 원소를 선택하여 그 합이 x가 되는 경우의 수를 구하는 문제이다. 풀이방법 1) 투 포인터(Two Pointers)를 이용한 방법 - 투 포인터 알고리즘을 통한 문제해결 동작 방식 시작점(start)과 끝점(end)을 첫 번째 원소의.. CODEF를 이용한 API 일괄처리 시스템을 만들다 생긴 문제들 (OAUTH 2.0 인증, 간편인증) 최근 CODEF API를 이용해 여러 개의 금융정보와 관련된 API를 일괄적으로 받아 관리하는 웹페이지를 만드는 작업을 진행하였습니다. 요청 API 리스트 [고용산재] - 근로자고용정보현황조회 - 보수총액신고서 [국세청] - 신고서 법인세 과세표준 및 세액신고서 - 종합소득세, 농어촌특별세, 주민세 과세표준확정신고 및 납부계산서 - 신고서 표준대차대조표 - 신고서 표준손익계산서 - 신고서 법인세 과세표준 및 세액조정신고서 - 신고서 세액공제명세서 - 신고서 사업소득명세서 - 신고서 공제감면세액 및 추가납부세액합계표(갑) - 증명발급 사업자등록 증명 이렇게 총 11개의 API를 카카오를 이용한 간편 인증을 통해 회원정보를 등록해 관리할 수 있도록 하는 애플리케이션인데 나는 카카오계정 간편 인증 연동과 AP.. [TypeScript] html에서 TypeScript 처음 사용해보기 (1) (TypeScript란?) 저번 Google의 Maps API를 사용해보는 과정에서 기본적으로 API를 TypeScript으로 제공해주는 것을 알았다. JavaScript랑 굉장히 비슷한 이름이어서 확인해보니.. 뭔가 조금 다른 것 같기도 하고..... 어쨌든 저번에 간단하게 사용해봤던 구글 지도는 기존에 사용하던 JavaScript를 이용해 만들게 되었는데, 뭔가 문득 궁금했다. '아니 TypeScript가 무슨 언어길래. 사용자가 얼마나 많기에 Google의 Maps API를 제공해주는 예제 코드를 보여주는데 가장 먼저 보여주는 거지?' 그래서 우연히 개발자 친구랑 얘기를 하다 TypeScript에 대해 묻게 되었고, 나름 친절(?)하게 답변받았다. TypeScript는 기존 JavaScript에서 정적 타입이 지원된 언어로 .. Google Map API을 다루다 생긴 문제들(geolocation, CORS에러) 전역 후 일단 개인적인 공부도하고~ 알바도하고~ 다 해보는 와중.. 고등학생 때부터 종종했었던 외주를 다시 시작하며 다시 웹사이트를 만들게되었다. 간단한 웹 개발을 도와드리는 외주를 맡게 되었다. 그 과정에서 "Map API"의 사용을 돕게 되었는데,, 1) 첫번째 이슈 - 어떤 종류의 Map API를 사용해야할까 ? 구글 Maps API, 카카오맵 API, 네이버지도 API와 같은 여러 API가 존재했는데, API를 이용해 주변 음식점들에 대한 검색과 정보들을 가져와야 했기에 구글 Maps API는 제외하고, 카카오맵 API를 원하셔서 카카오맵 API로 도와드리게되었다. 카카오맵은 도메인을 입력하여 해당 도메인에서만 사용할 수 있는 특정 Key값을 받아서 사용해야하기 때문에, 일단 간단하게 페이지를 만.. 이전 1 다음
