전체 글

1. Vite를 사용해야 하는 이유브라우저에서 ESM(ES Modules)을 지원하기 전까지, JavaScript 모듈화를 네이티브 레벨에서 진행할 수 없었다.그래서 소스 모듈을 브라우저에서 실행할 수 있는 파일로 크롤링, 처리 및 연결하는 "번들링(Bundling)" 이라는 방법을 사용해야 했다.하지만 처리해야하는 JavaScript 모듈의 개수가 증가하면서 성능 병목 현상이나 서버를 가동하는데 오랜 시간을 기다려야 하는 등 문제가 발생했다.vite는 애플리케이션 모듈을 dependencies와 source code 두 가지 카테고리로 나누어 개선했다. Dependencies개발 시 그 내용이 바뀌지 않을 일반적인 JavaScript 소스 코드이다.보통 애플리케이션에서 사용하는 라이브러리나 패키지를 의..

프로젝트를 진행하면서 계속 변경할 예정 프로젝트 생성(Vite)npm create vite@latest를 실행(Vite 사용하기 위해서는 node.js 설치 필요)프로젝트 이름 설정프레임워크 설정(Vanilla, Vue, React 등)variant 설정(Typescript를 선택할 것인지)cd 프로젝트 이름npm installnpm run dev위와 같이 진행하면 http://localhost:5173/ 주소로 React에 Vite 빌드 도구를 활용한 페이지를 확인할 수 있다. 궁금증이전에는 CRA(create-react-app)을 통해 프로젝트를 생성했었는데, Vite를 사용하는 이유는 뭘까?CRA는 JavaScript로 구성된 Webpack(웹팩)을 사용하는데 속도가 느린 편이다. 코드의 양이 많아..

콘텐츠 보안 정책(Content Security Policy)신뢰할 수 있는 웹 페이지 컨텍스트에서 악의적인 콘텐츠 실행으로 크로스 사이트 스크립팅(XSS), 클릭 재킹 및 기타 코드 삽입 공격을 방지하기 위해 도입된 컴퓨터 보안 계층이다.웹에서 사용하는 컨텐츠(이미지, 스크립트 등)에 대한 규칙으로 생각하면 될 것 같다.CSP의 경우 웹 사이트가 직접 룰을 적용해서 사용하게 된다. CSP 대표 헤더Content-Security-Policy : W3C에서 지정한 표준 헤더(주로 사용함)X-Content-Security-Policy : Firefox/IE 구형 브라우저에서 사용되는 헤더X-WebKit-CSP : Chrome 기반의 구형 브라우저에서 사용되는 헤더  설정 방법1. 태그를 이용한 방법페이지별..

문제 코드import sysinput = sys.stdin.readlinen, m = map(int, input().split())answer = []a_list = list(map(int, input().split()))b_list = list(map(int, input().split()))a_idx, b_idx = 0, 0for _ in range(n + m): if a_idx == n and b_idx != m: for i in b_list[b_idx:]: answer.append(i) break elif a_idx != n and b_idx == m: for i in a_list[a_idx:]: answer.a..

문제코드import sysinput = sys.stdin.readlinen, x = map(int, input().split())arr = list(map(int, input().split()))init_data = sum(arr[0:0 + x])visitor = [init_data]for i in range(1, n - x + 1): visitor.append(visitor[i-1] - arr[i - 1] + arr[i + x - 1])if max(visitor) == 0: print("SAD")else: print(max(visitor), visitor.count(max(visitor)), sep="\n") `슬라이딩 윈도우` 알고리즘은 고정 범위를 탐색할 때 효율적임한 칸을 전진하면..

문제코드import sysfrom collections import dequeinput = sys.stdin.readlinedef bfs(): count = 1 while deq: y, x = deq.popleft() for i in range(4): ny = y + dy[i] nx = x + dx[i] if 0  그림이 없는 경우 0을 두 번 출력해야하는데 1번만 출력해서 시간을 날렸다.뭔가 더 줄일 수 있는 코드가 있을 것 같다.다음에는 더 깔끔하고 보기 쉽게 풀자.. 문제도 잘 읽자..

크래프톤 정글 키워드 복습하기(3) 해쉬 테이블(Hash Table)해시 함수(Hash Function)을 사용해 변환한 값을 색인(index)으로 삼아 키(key)와 데이터(value)를 저장하는 자료구조해시 함수(Hash Function)란?- 임의의 길이의 값을 고정된 크기의 값으로 변환하는 단방향 함수- 해시값으로 변환하면 원래의 값을 찾아내는 역변환 불가해시 함수 종류- MD5 : 초기에는 많이 사용되었지만, 충돌 공격에 취약하다는 단점이 있습니다.- SHA-1 : MD5보다 안전하지만, 역시 충돌 공격에 대한 우려가 제기되었습니다.- SHA-256, SHA-512 : 현재 가장 널리 사용되는 안전한 해시 함수입니다.- SHA-3 : SHA-2의 후속 버전으로, 더욱 안전한 구조를 가지고 있습니..