본문 바로가기

자바스크립트

(13)
[번역] CORS에 대한 가이드 https://www.devsecurely.com/blog/2024/06/cors-the-ultimate-guide?ref=dailydev CORS: the ultimate guide | DevsecurelyA simple and concrete guide on the world of CORS. It explain what it is, how it works, and how to set it up to protect your website.www.devsecurely.com Devsecurely님의 24.06.03일자 포스트입니다  순진한 고양이 사진을 보여주는 웹사이트를 방문한다고 상상해 보세요. 하지만 이 귀여운 고양이 사진 뒤에는 이 웹사이트의 초능력이 숨겨져 있습니다. 누군가 이 웹사이트를 방문하..
[Algorithm] 5. 이진 탐색(Binary Search) 알고리즘 흔히 for 문을 이용해 배열의 처음부터 끝까지 탐색하는 선형탐색은 O(n) 이라는 시간복잡도로 효율성이 떨어집니다.이를 보완하는 탐색 알고리즘으로 대체되는 이분탐색 (Binary Search, 이진 탐색이라고도 합니다 )은 O(log N) 의시간 복잡도를 가지고 있습니다.   주어진 범위의 절반씩 삭제하며 윈도우를 조절하며 찾아가는 기법으로주어진 배열은 순서대로 정렬이 되있어야 사용할 수 있는 알고리즘입니다. 32를 찾는 순서는 아래와 같이 절반의 범위를 줄여가며 진행됩니다   /** * 정렬된 배열에서 특정 요소의 인덱스를 찾는 이진 탐색 함수 * @param {Array} arr - 검색할 정렬된 배열 * @param {*} elem - 찾고자 하는 요소 * @returns {number} - 요소..
[Next.js] svgr/webpack과 vitest를 사용한 SVG 테스트 ( vitest 에서 svg 경로를 못 읽는 이슈 ) 왜 이러는 지 한참을 삽질하다 이렇게 직접 tsx안에 적어주니  통과를 합니다...???? 이 때 깨달았습니다.@svgr/webpack 사용하면 vitest 에서 svg 경로 오류가 생기는구나 하고.... 아예 랜더링에서 막히고 있습니다... 랜더링을 못하니 아예 해당 Hear 컴포넌트 전체를 테스트 할 수가 없어졌는데요모킹으로 넘겨서 테스트 랜터링을 넘겨야겠다고 판단했습니다.  1. vite-plugin-svgr 설치npm install vite-plugin-svgr --save-dev  2. vitest.config.ts 에 vite-plugin-svg 추가// vitest.config.tsimport { defineConfig } from 'vitest/config'import react from ..
[TypeScript] TypeScript 초보자를 위한 tsconfig.json 가이드 타입스크립트를 초기화 하려면 글로벌 인스톨을 먼저 합니다.타입스크립트는 개발 단계에서만 사용하고 컴파일 시에는 자바스크립트로 변환되므로devDependencies 에 인스톨 해주면 됩니다. npm i -D typescript ts 파일을 js 파일로 컴파일 하기 위해선 터미널에 'tsc 파일명' 을 입력하면 js 파일로 변환이 됩니다.하지만 매번 코드를 수정, 작성하고 터미널에서는 tsc 명령어를 입력하기에는 너무 번거롭습니다. 그래서 tsconfig.json 을 생성하여 저장될 때마다 자동 컴파일이 되도록 설정을 하는 것입니다. 그 후 타입스크립트의 기본 설정을 위한 tsconfig.json 생성을 위해아래 명령어를 프로젝트 루트 터미널에 입력합니다.tsc --init 그럼 기본 설정에 관한 속성 및 ..
[javascript] 객체와 배열 간의 변환 Object.fromEntries() / Object.entries() export default function Page() { async function createInvoice(formData) { 'use server' const rawFormData = { customerId: formData.get('customerId'), amount: formData.get('amount'), status: formData.get('status'), } // 데이터 변조 // 캐시 재검증 } return ...} Next js 에서 필드가 많은 폼을 작업할 때는 Object.fromEntries() 혹은 Object.entries() 메서드를 사용하면 좀 더 수월하게 작업할 수 있습니다. Object.fromEn..
[Next.js] next 기초 1. App 라우팅   동적 라우팅 폴더명 기입방식 [folder]필수 파라미터입니다하나의 세그먼트만 매칭됩니다블로그 포스트, 제품 상세 페이지에 적합합니다[ ...folder ]최소 하나의 세그먼트가 필요합니다여러 세그먼트를 포함할 수 있습니다계층적 카테고리 구조에 적합합니다/shop/clothes (O)  /shop/clothes/shirts (O)[ [ ...folder ] ]선택적 모든 것을 포함하는 라우트선택적 필터나 검색 파라미터가 있는 페이지에 적합합니다   이렇게 대괄호 표기를 하면 /blog/post-1  /blog/post-2  /blog/post-3 이렇게 동적으로 라우팅이 가능해진다.그리고 [folder] 안의 page.js 에서export default function BlogPo..
[javascript] 문자열을 배열로 변환하는 방법들 코테나 실무에서 문자열을 배열로 변환하여 로직을 작성해야하는 경우가 종종 있습니다그럴 때 사용하는 방법은 아래 3가지 중 편한 방법을 선택하시면 됩니다 1. split() 사용 const str = "hello";const arr1 = str.split(''); // ['h', 'e', 'l', 'l', 'o']const str = "hello"; const arr1 = str.split(''); // ['h', 'e', 'l', 'l', 'o'] 2. spread 연산자 사용 const arr2 = [...str]; // ['h', 'e', 'l', 'l', 'o']3. Array.from() 사용 const arr3 = Array.from(str); // ['h', 'e', 'l', 'l', 'o']
[javascript] FormData form 태그 안의 복수의 input 창 입력값을 한번에 추출하기 1. FormData 란? FormData는 HTML 폼의 데이터를 쉽게 구성하고 전송할 수 있게 해주는 웹 API입니다.  2. 장점 파일 업로드를 포함한 폼 데이터를 쉽게 처리멀티파트/폼데이터 형식으로 자동 인코딩체크박스나 다중 선택과 같은 복수 값 처리가 용이 예시코드 Email Password Confirm Password First Name Last Name ..