sy의 코딩 개발일지

간단한 웹앱 번들링 src에 js,html,css 파일을 넣는다. 1.현재 디렉토리에 npm 설치 npm init -y 설치후 package.json 파일이 생성된다. 2. webpack 설치 npm install -D webpack webpack-cli Node.js 프로젝트에서 webpack과 webpack-cli를 개발 의존성(dependency)으로 설치하는 것을 의미 3. webpack.config.js 파일 만들기 const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'app.bundle.js', path: path.resolve(__dirname, 'dist'), }, } 4.j..

튜토리얼1 디렉토리생성 npm init-y index.js under.js 웹팩설치 npm install -D webpack webpack-cli 번들링하기 npx webpack 개념 enrty 경로 파일에서 필요한 모든 것을 webpack이 모아서 번들링한다. 번들링의 결과물이 output 경로로 산출 튜토리얼2 loader는 JavaScript, JSON이 아닌 파일을 불러오는 역할 튜토리얼3 플러그인은 번들링 과정 중에 개발자가 원하는 다양한 작업을 할 수 있도록 도와준다. html-webpack-plugin은 번들링 과정 중 html 파일을 자신이 원하는 형태로 가공하여 번들에 포함

번들링 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음 번들링의 필요성 웹 페이지에서 필요로 하는 모든 리소스(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 = ..