글모음

PrivateRouter [ 에러 ] [Error] Error: [PrivateRoute] is not a component. All component children of must be a or -> ' 내부에 있는 모든 컴포넌트들은 또는 여야 한다.' 컴포넌트를 로 변경하라는 소리 ReactRouter V5와 V6에서 PrivateRoute 설정 방법이 달라져서 생기는 에러. PrivateRoute 컴포넌트와 Route 설정을 새 방법으로 다시 해줘야한다. React Router의 현재 버전에서는 App.js에서 Route 설정부터, PrivateRoute 컴포넌트 생성부터 다 달라졌다. 1. PrivateRoute 컴포넌트 생성 인증된 사용자만 액세..

PrivateRouter 리액트에서 웹 애플리케이션을 개발할 때, 인증된 사용자만 특정 경로에 접근할 수 있도록 제한하려면 어떻게 해야 할까? React Router의 'PrivateRoute' 컴포넌트를 이용하여 인증이 필요한 경로에 대한 접근을 제한하는 법을 정리하고 이전 버전(v5)과 현재 버전(v6)의 'PrivateRoute' 컴포넌트를 비교해 보자 [ PrivateRoute란? ] PrivateRoute는 사용자가 인증(로그인)이 되어 있을 때에만 특정 페이지에 접근할 수 있게 하는 기능을 제공한다. 인증(로그인)되지 않은 사용자가 내 정보 페이지나 대시보드 페이지와 같은 페이지에 PrivateRoute로 설정된 페이지로 접근하려 하면, 지정된 페이지로(Home이나 Login) 리다이렉트 돼서..

bcrypt, crypto 회원가입 / 로그인 / 비밀번호 찾기 서비스를 개발하는 중에 bcrypt와 crypto 모듈이 있다는 걸 알게 되었다. 두 모듈 모두 언뜻보면 비슷한 암호화 관련 라이브러리이지만, 각각의 용도와 특징이 달라서 정리하려고 한다. [ bcrypt ] bcrypt는 Blowfish(블로피시) 암호를 기반을 둔 암호화 해시 함수이다. 주로 비밀번호와 같은 민감한 정보를 암호화할 때 사용되고, 입력값을 고정된 길이의 출력값으로 변환해 준다. 이때, 입력값에 약간의 변화가 생겨도 출력값이 전혀 다르게 나오는 특징이 있어서 회원가입시 토큰 비교에도 사용된다. 입력값을 여러 번 반복해서 암호화하기 때문에 보안성이 매우 높다는 장점이 있지만, 안전한 암호화를 위해 암호화 속도가 느리다는 단점이..

bcrypt VS bcryptjs 회원가입과 로그인 페이지를 만들면서 클라이언트 측에서 백앤드로 비밀번호를 보내는 과정에서 비밀번호를 그냥 보내지 않고 암호화해서 보내야 하는데, 암호화 라이브러리를 찾아보다가 bcypt와 bcyptjs에 대해 알게 되었다. 둘 다 이름도 비슷하고, 쓰는 방법도 비슷해서 이번 기회에 정리해보려고 한다. [ bcrypt ] C++로 작성된 네이티브 모듈이라 속도가 빠름 서버에서 사용 시 이점이 있지만, 적절한 방식으로 설치 및 사용을 해야 함 bcryptjs보다 더 많은 알고리즘 옵션을 제공 [ bcryptjs ] JavaScript로 작성된 모듈 네이티브 모듈보다 느리지만, Node.js 및 브라우저 모두에서 사용 가능 (그래도 성능 저하는 그렇게 크지는 않다고 한다.) ..

현재 React drop-zone과 Canvas API로 이미지를 받아오는 페이지를 작업중이다. React drop-zone으로 이미지 파일을 받고, Canvas를 통해 사용자가 이미지를 수정하도록 작동하려고 하는데 생각처럼 돌아가지 않았다. [ Canvas를 다루는 중에 생긴 문제점들 ] 1. 빈 Canvas 생성 : Canvas 위에서 drawing을 하고 난 뒤에, 이미지를 다시 첨부해도 Canvas 위에 이미지가 제대로 올라가지 않음 2. 마우스 커서가 맞지 않음 : Canvas의 크기를 변경시에 Canvas 위에서 마우스 커서보다 더 위에 drawing이 됨 3. Canvas의 이미지 비율이 깨짐 [ 1. 빈 캔버스 생성 ] - globalCompositeOperation 속성 빈 캔버스가 계속..

코딩할 때 시맨틱 태그들이 헷갈려서 정리해 봤다. [ Sementic tag ] HTML의 시맨틱 태그란 HTML 태그들 중에서 콘텐츠의 의미를 명확하게 표현하기 위해 사용하는 태그들이다. HTML 문서의 구조를 정의하기 위해 사용되며, 그냥 단순하게 태그들을 이용했을 때보다 더 명확한 의미를 가진다. : 웹 페이지의 상단 부분 : 웹 페이지의 내비게이션 메뉴 : 웹 페이지의 주요 콘텐츠 : 웹 페이지에서 상호작용을 할 수 있는 콘텐츠의 조각 : 웹 페이지의 콘텐츠를 구분할 수 있는 섹션 : 웹 페이지의 주요 콘텐츠와 관련이 적은 콘텐츠를 : 웹 페이지의 하단 부분 (주로 연락처 같은 정보들을 footer로 만든다) ~: 웹 페이지의 제목을 나타낼 수 있는 태그. 은 제목의 중요도가 가장 높고, 은 제목..

4주 차 Sorting & Dynamic Programming Trie def solution(departments, budget): departments = sorted(departments) cur_budget, cnt = 0, 0 for department in departments: if cur_budget + department def solution(A,B): A = sorted(A) B = sorted(B) ans = 0 for n1, n2 in zip(A, B[::-1]): ans += (n1 * n2) return ans from functools import cmp_to_key def solution(numbers): nums = list..

3주 차 Searching 1) backtracking 사용 def find_primes(n): a = [False,False] + [True] * (n -1) primes=[] for i in range(2, n + 1): if a[i]: primes.append(i) for j in range(2 * i, n + 1, i): a[j] = False return primes def solution(n): primes = find_primes(n) cnt = 0 def count_sum(total_sum, level, res, num_cnt): nonlocal cnt if total_sum > n: return if level == len(primes): return if nu..

2주 차 Stack, Hash def solution(coordinates): X_set = set() Y_set = set() for coordinate in coordinates: X, Y = coordinate if X not in X_set : X_set.add(X) else: X_set.remove(X) if Y not in Y_set : Y_set.add(Y) else: Y_set.remove(Y) return list(X_set) + list(Y_set) 짝이 되지 않는 좌표가 나머지 한 점이다. 그런 좌표들을 합쳐서 return 해주면 되는 간단한 문제다. def solution(max_weight, specs, names): spec_in..