본문 바로가기

전체 글

(254)
React)나이스아이디 with react(typescript), node.js (nice id) 최근 프로젝트에 나이스아이디를 적용시킬 기회가 생겼다. 많은 기업들이 나이스아이디를 적용시켰고 코드 또한 인터넷에 널렸다고 생각했지만 막상 찾아보니 나이스아이디에서 제공하는 node.js등의 모듈의 언어들 밖에 없었다. 자바스크립트 코드는 모두 node.js의 서버사이드 렌더링 밖에 없었고 node.js는 만진지 오래되었기에 타 블로그의 내용을 참조했다. (해피쿠 님의 블로그를 참조했습니다.) 우선 node.js의 코드부터 살펴보자 기본셋팅 우선 기본적인 node.js의 express를 설정한다 $ mkdir node-server $ npm init # webserver $ npm i express # CORS 정책 설정(cross-domain) $ npm i cors # cmd 실행 $ npm i ch..
파이썬)치즈 https://www.acmicpc.net/problem/2636 2636번: 치즈 아래 과 같이 정사각형 칸들로 이루어진 사각형 모양의 판이 있고, 그 위에 얇은 치즈(회색으로 표시된 부분)가 놓여 있다. 판의 가장자리(에서 네모 칸에 X친 부분)에는 치즈가 놓 www.acmicpc.net from collections import deque n, m = map(int, input().split()) arr = [] for i in range(n): a = list(map(int, input().split())) arr.append(a) dx = [1, -1, 0, 0] dy = [0, 0, -1, 1] time = 0 ans = [] def bfs(): q = deque() cnt = 0 q.appe..
TS)타입스크립트 v5.1 타입스크립트 5.1이 나온지 꽤 된 시점이다. 여태 타입스크립트를 사용하지 않고 있다가 올해 3월 처음 타입스크립트를 회사 프로젝트에 적용하며 쭉 사용해왔었다. 그러면서 타입스크립트 공식문서를 몇 번 방문하게 되었고 이번 업데이트 버전인 5.1버전에 대해 읽고 글을 쓰게 되었다. 이 글은 타입스크립트 공식문서의 글을 번역한 글입니다. undefined 반환 함수에 대한 더 쉬운 암시적 변환 자바스크립트에서는 함수의 return값을 정해주지 않는다면 undefined값을 반환합니다. function foo() { // no return } const x = foo(); console.log(x); // undefined 그러나 이전 버전의 Typescript에서는 return 문이 전혀 없을 수 있는 유일..
JS)User-Agent의 작동 방식 및 사용방법 이 포스팅은 DeviceAtlas의 글을 해석한 글입니다. 들어가기 앞서 User-Agetn는 웹 아키텍처의 중심 부분이며 콘텐츠 협상에서 중요한 역할을 합니다. 이는 기능이나 컨텍스트에 따라 다른 클라이언트 또는 '에이전트'로 다르게 요청하는 사용자를 처리할 수 있는 기능을 구축하려는 명시적인 의도로 만들어졌습니다. User-Agetn란 UA(User-Agent)는 문서, 이미지 또는 웹 페이지와 같은 자산에 대해 웹 서버에 요청하는 '에이전트' 또는 프로그램을 식별하는 영숫자 문자열입니다. 웹 아키텍처의 표준 부분이며 HTTP 헤더의 모든 웹 요청에 의해 전달됩니다. User-Agent문자열은 요청하는 장치에서 실행중인 소프트웨어 및 하드웨어에 대한 매우 구체적인 정보를 제공하기 때문에 매우 유용합니..
자바스크립트) 함수 내 d내장함수와 프로토타입 아무런 생각없이 사용하던 Array.sort(), length 등등의 함수들. 최근에 궁금증이 하나 생겨났다. 자바스크립트를 처음 공부할 때 분명 봤었던 것이지만, 시간이 지나 잊어버리고 다시 공부하며 다시 한 번 더 정리하려 한다. 아무런 생각없이 사용하던 Array.sort(), length등등의 함수들은 어떻게 사용되는 것일까. 예를들어 다음과 같은 배열이 있다고 해보자. const arr = [5,4,3,2,1] 이 함수를 정렬하기 위해선 여러 방법이 있다. 시간복잡도를 생각해 선택 정렬, 버블정렬, 퀵 정렬 등을 선택할 수 있겠지만 보통은 array.sort()로 정렬을 시행한다. arr.sort(); console.log(arr); //[1, 2, 3, 4, 5] 참으로 간단하지 않은가. 단지..
파이선)꼬인 전깃줄 https://www.acmicpc.net/problem/1365 1365번: 꼬인 전깃줄 첫 줄에 전봇대의 개수 N(1 ≤ N ≤ 100,000)이 주어지고, 이어서 N보다 작거나 같은 자연수가 N개 주어진다. i번째 줄에 입력되는 자연수는 길 왼쪽에 i번째 전봇대와 연결된 길 오른편의 전봇대가 www.acmicpc.net from bisect import bisect_left n = int(input()) arr = list(map(int, input().split(" "))) dp = [arr[0]] for i in range(1, len(arr)): if dp[-1] < arr[i]: dp.append(arr[i]) else: idx = bisect_left(dp, arr[i]) dp[idx] =..
파이썬) 연구소 https://www.acmicpc.net/problem/14502 14502번: 연구소 인체에 치명적인 바이러스를 연구하던 연구소에서 바이러스가 유출되었다. 다행히 바이러스는 아직 퍼지지 않았고, 바이러스의 확산을 막기 위해서 연구소에 벽을 세우려고 한다. 연구소는 크 www.acmicpc.net 즉 주어진 2차원 배열에서 벽(1) 세개를 새워, 0이 가장 많을 때의 개수를 구하는 문제이다 나는 이 문제를 백준-알고리즘 분류 - bfs에서 봤을 땐 어떤 방식으로 풀어야할지 감이 잡히지 않았지만 브루트포스 유형에서 감을 잡게 되었다. 풀이법 브루트포스 알고리즘인 만큼 벽을 세울 수 있는 경우의 수를 모두 구하여 0의 개수를 새면 된다. 경우의 수를 구하는 만큼 combinations를 이용했다. from..
자바스크립트) forEach와 비동기 최근 코드를 작성하는 중에 한번에 여러개의 비동기 작업을 처리해야 할 일이 생겼다. 단순히 async awiat을 사용해 다음과 같이 구현할 수 있지만, const data = await fetch("/api"); const data2 = await fetch("/api"); const data3 = await fetch("/api"); const data4 = await fetch("/api"); 특정 변수를 배열에 담고 그 배열을 주소값 또는 파라미터로 넣어 api를 여러번 호출해야 하는 상황이었다. const number_arr = [1, 2, 3, 4, 5]; const data = await fetch(`/api/${number_arr[0]}`); const data2 = await fetch(..
파이썬)예산 https://www.acmicpc.net/problem/2512 2512번: 예산 첫째 줄에는 지방의 수를 의미하는 정수 N이 주어진다. N은 3 이상 10,000 이하이다. 다음 줄에는 각 지방의 예산요청을 표현하는 N개의 정수가 빈칸을 사이에 두고 주어진다. 이 값들은 모두 1 이상 www.acmicpc.net n = int(input()) arr = list(map(int, input().split())) money = int(input()) start = 0 end = max(arr) max_log = 0 if sum(arr)
자바스크립트) 객체의 복사 이 글은 아래 링크 https://web.dev/structured-clone/ Deep-copying in JavaScript using structuredClone For the longest time, you had to resort to workarounds and libraries to create a deep copy of a JavaScript value. The Platform now ships with structuredClone(), a built-in function for deep-copying. web.dev 를 보고 의역한 글입니다 최근 객체를 복사할 일이 생겨 이에 대해 알아보는 시간을 가져보았습니다. 자바스크립트에서 객체를 복사하는 방법은 몇가지가 존재합니다 얕은 복사본 개체..
프로그래머스) 대충 만든 자판 https://school.programmers.co.kr/learn/courses/30/lessons/160586?language=python3 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr def solution(keymap, targets): answer = [] obj = {} for i in range(len(keymap)): for j in range(len(keymap[i])): if keymap[i][j] not in obj: obj[keymap[i][j]] = j else: if obj[keymap[i][j]] > j: obj[keymap..
프로그래머스) 달리기 경주 https://school.programmers.co.kr/learn/courses/30/lessons/178871 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr def solution(players, callings): answer = [] dic = {} for i in range(len(players)): dic[players[i]] = i for i in range(len(callings)): idx = dic[callings[i]] temp = dic[callings[i]] dic[callings[i]] = dic[players[idx - 1]]..
React) 구글 로그인 - @react-oauth/google npm install jwt-decode 최근 구글 로그인을 적용할 순간이 와서 여지없이 reat-google-login 라이브러리를 적용하려했다. 그러나 3월을 마지막으로 더이상 지원을 하지 않는다 해서 다른 방법을 찾아야 했다. 공식문서를 보며 하나하나 코드를 적용하면 되겠지만, 나는 무척 귀찮았다. 그래서 구글링을 했고 대부분의 react-google-login 대신 @react-oauth/google라이브러리를 찾았다. 구글에 널려있는 react-google-login 라이브러리 설명 블로그 와는 다르게 @react-oauth/google라이브러리는 이를 다룬 블로그가 거의 없었기에 직접 포스팅하기로 생각했다. 우선 설치해야 할 라이브러리리는 두개다. npm i @react-oauth/google..
프로그래머스) 공원 산책 https://school.programmers.co.kr/learn/courses/30/lessons/172928 def solution(park, routes): answer = [0,0] for i in range(len(park)): idx = park[i].find('S') if idx != -1: answer[0] = i answer[1] = idx break for i in range(len(routes)): direction, count = routes[i].split(' ') Wall = False count = int(count) position = answer[:] Wall = False for j in range(count): if direction == 'N': if (0
프로그래머스)바탕화면 정리 https://school.programmers.co.kr/learn/courses/30/lessons/161990 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr def solution(wallpaper): answer = [] top = 99 left = 99 bottom = -1 right = -1 for i in range(len(wallpaper)): for j in range(len(wallpaper[i])): if wallpaper[i][j] == '#': if top > i: top = i if left > j: left = j if bott..