전체 글
-
TIL-2024.04.20 - Canvas - 002 - Canvas 그리기> Frontend/Canvas 2024. 4. 21. 23:16
질문: 1. Canvas에서 그리기를 어떻게 구현할 수 있어 ? Canvas 엘리먼트 생성하기: - Canvas 엘리먼트를 생성하고 JavaScript를 사용하여 그래픽을 그리는 방법 > canvas 엘리먼트를 생성하고, id 속성을 통해 이 엘리먼트를 JavaScript에서 식별 Context(컨텍스트)와 그리기 명령: - Canvas는 그리기 명령을 처리하기 위해 2D 그래픽 컨텍스트를 제공 JavaScript로 Canvas 컨텍스트 const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); 그리기 명령 사용 // 사각형 그리기 ctx.fillStyle = 'red'; // 색상 설정 ctx.fillR..
-
TIL-2024.04.19 - Canvas - 001 - Canvas 기초> Frontend/Canvas 2024. 4. 20. 19:02
질문: 1. Canvas가 무엇이야 ? Canvas: 정의: - JavaScript와 HTML을 사용하여 그래픽을 그릴 수 있는 HTML 요소. - Canvas는 그림을 그리고 그림을 조작하는 기능을 제공하며, Web App 에서 동적인 그래픽 및 애니메이션을 생성 가능한 도구 예제: 예제 결과: 실제 사용 예시: ... 생략 ... ... 생략 ... const fnDrawImageOnCanvas = img => { const ctx = imgCanvas.value.getContext("2d"); const image = new Image(); image.src = img?.fileUrl; // URL of the image image.onload = () => { ctx.drawImage(image,..
-
TIL-2024.04.18 - Basic - Origin & Site (보험)> 기초/백그라운드 2024. 4. 18. 23:18
질문: Same-Origin , Cross-Origin & Same-Site, Cross-Site 이 뭐고, 차이가 어떻게 돼 ? Same-Origin (동일 출처) 정의: - Same-Origin은 두 리소스(페이지 또는 스크립트 등)의 출처(Origin)가 동일한 경우. - Origin는 프로토콜(예: http, https), 호스트(도메인), 포트 번호가 전부 동일. 예시: https://example.com/page1 와 https://example.com/page2 http://subdomain.example.com 와 http://subdomain.example.com https://example.com:8080 와 https://example.com:8080 Cross-Origin (다른 출..
-
TIL-2024.04.17 - Basic - JWT - 1.5 - Token, XSS & CSRF (Refresh Token & Access Token 저장 위치)> 기초/백그라운드 2024. 4. 17. 19:02
질문: 1. 브라우저에서 변수는 어디다가 저장할 수 있나요 ? 2. 이와같은 저장소 중에서, Refresh Token 과 Access Token 은 어디다가 저장을 해야될까? 3. 왜 이렇게 저장을 해야되나요? 1. 브라우저의 변수 저장소: 1. Cookie 2. LocalStorage & Session Storage 3. Memory 1) Cookie - 사이트가 사용자의 컴퓨터에 저장하는 작은 데이터 조각 - 서버로 요청을 할때마다 해당 서버에 해당되는 쿠키를 보냄 - JS로 접근 가능 (데이터를 저장하고 데이터를 검색할 수 있다는 것을 의미) 2) Local & Session Storage - 브라우저의 클라이언트 측 저장 공간 - JS로 접근 가능 (데이터를 저장하고 데이터를 검색할 수 있다는 것..
-
TIL-2024.04.16 - Basic - JWT (JSON Web Token)> 기초/백그라운드 2024. 4. 16. 18:29
질문: JWT 가 뭐야 ? JWT가 어떤 구성을 가지고, 어떻게 작동해 ?? 사용하는 이유가 어떻게 되 ? JWT (JSON WEB TOKEN) 정의 - 웹 애플리케이션에서 사용자 인증 및 권한 부여를 위한 토큰 기반 인증 시스템 JWT 구성 - JWT는 세 부분으로 구성: Header, Payload, Signature 1. Header - 토큰의 유형과 사용하는 암호화 알고리즘을 지정 { "alg": "HS256", "typ": "JWT" } 2. Payload - 실제로 전송할 데이터를 포함. - 클레임(claim)이라고도 불리며, 토큰에 담길 정보의 조각들을 의미 - 클레임은 세 가지 유형으로 나뉩니다: 1. Registered Claims: 토큰에 대한 정보를 제공하는 표준 클레임으로 발급자(i..
-
TIL-2024.04.15 - 코테연습 - 추천 제품(2).programmers> 기초/코테 연습 2024. 4. 15. 18:24
코드: // URL > const solution = (products, purchased) => { /* * How To Solve (HTS) * 1. 전체 products에서, 구매한 적이있는 purchased 를 빼서, unpurchased 찾기 * 2. purchased에서 추천 목록 찾기 * 3. unpurchased에서 purchased 맞는거 찾기 * */ const productsMap = new Map(); let bought = []; let unpurchased = []; let unpurchasedProperty = []; for (let i = 0; i < products.length; i++) { const product = products[i].split(" "); let pr..
-
TIL-2024.04.14 - TIPS - Map() sort 방법 (value 먼저 key 다음)> 기초/도와줘요! 2024. 4. 14. 22:12
요구 사항: 1. { 'b' => 2, 'a' => 1, 'c' => 3, 'd' => 2 } 와 같이 뒤죽박죽 되어있는 Map을 정렬해주는데,value가 다른 경우 value를 우선 정렬value가 같은 경우는 key의 알파벳 순서대로 정렬 목표:{ 'a' => 1, 'd' => 2, 'b' => 2, 'c' => 3 } 와 같은 형태 관련 코드: let myMap = new Map();myMap.set("b", 2);myMap.set("a", 1);myMap.set("c", 3);myMap.set("d", 2); // Adding another entry with the same value// Convert Map to array of [key, value] pairslet mapEntries..
-
TIL-2024.04.13 - 코테연습 - 재택근무인원찾기(2).programmers> 기초/코테 연습 2024. 4. 14. 21:01
URL: Programmers Lv.2 푼 코드: const solution = (num_teams, remote_tasks, office_tasks, employees) => { let officeTeamMap = new Map(); let tempMap = new Map() let resultTeam = []; for (let i = 0; i < employees.length; i++) { let employee = employees[i]; let split = employee.split(" "); let isWork = false; let teamNo = split[0]; for (let j = 1; j < split.length; j++) { if(office_tasks.includes(split..