sy의 코딩 개발일지

번들링 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음 번들링의 필요성 웹 페이지에서 필요로 하는 모든 리소스(HTML, CSS, JavaScript, 이미지 등)를 한 번에 요청하고 받을 수 있게 해준다. 이것은 웹 페이지의 로딩 시간을 줄이고 사용자 경험을 향상시키는 데 도움이 된다. 또한, 번들링을 통해 모듈 시스템을 구현할 수 있다. 이는 개발자가 코드를 더욱 모듈화하고, 재사용성을 높일 수 있게 해준다. 또한, 번들러를 사용하면 자바스크립트 코드를 최적화하고 압축할 수 있다. 이는 웹 페이지의 로딩 속도를 높이고, 데이터 전송량을 줄여서 사용자 경험을 향상시키는 데 도움이 된다. Webpack 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러를 의미 모듈 번들러란 HTML, CSS, J..

과제1 // 1. 브라우저 창의 너비가 800px 이상이거나, 화면이 가로 방향일 때 h1, h2의 색상이 변경되도록 구현 @media screen and (min-width: 800px ), screen and (orientation: landscape ) { .main-title, .sub-title { color:pink; } } // 2. 브라우저의 화면이 세로 방향일 때 h1, h2의 색상이 변경되도록 구현 @media not all and (orientation: landscape ) { .main-title, .sub-title { color: blue; } } // 3. 브라우저가 최소 1000px일 때, background의 색을 바꾸고, 고양이 사진들을 반응형 레이아웃을 구현 @medi..

브라우저 웹 서버에서 양방향으로 통신하며 HTML 문서 및 그림, 멀티미디어(ex. 동영상) 등의 컨텐츠를 열람할 수 있게 해주는 GUI 기반의 소프트웨어 프로그램 웹(Web)->World Wide Web 이런 브라우저상에서 제공되는 웹(Web)은 HTML 언어를 사용하여 작성된 문서 형태로 제공이 되며, 이러한 문서들을 웹 페이지(Web Page)라고 한다. 웹 페이지의 집합 => 웹 사이트 브라우저는 사용자가 선택한 자원(Resource)를 서버에 요청(Request)하고, 서버의 응답(Response)을 브라우저에 띄우는(Rendering) 방식으로 동작 브라우저 동작 방식 브라우저의 구조 사용자 인터페이스(User Interface) UI , 관련된 GUI 부분 브라우저 엔진(Browser Eng..

function connectedVertices(edges) { const graph = {}; for (let [from, to] of edges) { if (!graph[from]) graph[from] = []; if (!graph[to]) graph[to] = []; graph[from].push(to); graph[to].push(from); } const visited = {}; let count = 0; const dfs = (node) => { visited[node] = true; for (let neighbor of graph[node]) { if (!visited[neighbor]) { dfs(neighbor); } } }; //인자로 받은 node에서 시작하여 DFS 탐색을 수행하고..

function getDirections(matrix, from, to) { const queue = [from]; // 큐를 초기화하고 시작 정점을 삽입 const visited = new Array(matrix.lengt).fill(false); // 방문 여부를 저장할 배열 while (queue.length > 0) { const node = queue.shift(); // 큐에서 노드를 추출 if (node === to) return true; // 목적지에 도착하면 true 반환 visited[node] = true; // 방문한 노드는 visited 배열에 표시 for (let i = 0; i < matrix[node].length; i++) { if (matrix[node][i] && !v..

const levelOrderTraversal = (root) => { const result = []; // 결과를 저장할 배열 if (!root) return result; // 빈 트리일 경우 빈 배열 반환 const queue = [root]; // 큐를 초기화하고 루트 노드를 삽입 //queue라는 배열을 생성하고, 이진 트리의 루트 노드를 queue 배열에 넣는다. while (queue.length > 0) { const currentLevelSize = queue.length; // 현재 레벨의 크기 저장 const currentLevel = []; // 현재 레벨의 노드를 저장할 배열 for (let i = 0; i < currentLevelSize; i++) { const node = ..

class GraphWithAdjacencyMatrix { constructor() { this.matrix = []; } //이차원 배열(matrix)을 초기화 addVertex() { //버텍스를 추가합니다. const currentLength = this.matrix.length; for (let i = 0; i < currentLength; i++) { this.matrix[i].push(0); } this.matrix.push(new Array(currentLength + 1).fill(0)); //새로운 행(즉, 새로운 정점)을 만들고, 이를 matrix 배열의 끝에 추가 //새로운 정점은 다른 정점과 아직 연결되어 있지 않은 상태 //currentLength + 1 길이의 새로운 배열을 생성..

Tokens 과제 JWT 생성 및 검증을 도와주는 헬퍼 require('dotenv').config(); //dotenv 패키지를 사용하여 환경 변수를 로드 const { sign, verify } = require('jsonwebtoken'); //Node.js 서버에서 JWT(Json Web Token)을 생성하고 검증하는 기능을 구현한 모듈 module.exports = { generateToken: (user, checkedKeepLogin) => { const payload = { id: user.id, email: user.email, }; let result = { accessToken: sign(payload, process.env.ACCESS_SECRET, { expiresIn: '1d'..