sy의 코딩 개발일지

컴퓨터 구조 SW(하드웨어 위에서 제어 , 작업을 수행하는 프로그램)+HW(전자회로 및 기계장치로 입출력 장치 , 중앙처리장치(CPU) , 기억장치 입력 장치 컴퓨터가 처리할 수 있는 형태로 데이터와 명령을 받아들이는 물리적인 장치 출력장치 처리된 데이터를 사람이 이해할 수 있는 형태로 출력하는 물리적인 장치를 의미 중앙처리장치 CPU의 내부 구성은 크게 산술/논리 연산 장치(ALU)와 제어 장치, 레지스터(데이터를 일시적으로 저장하는 장소)로 구성 저장 장치 데이터나 프로그램을 보관하기 위한 일차 기억 장치인 주 기억 장치(Memory)와 주 기억 장치를 보조하기 위한 디스크와 씨디 같은 보조 기억 장치가 존재 주 기억장치(RAM , ROM) 레지스터 용량이 작아 주로 정보를 저장해두었다가 읽어들이는 ..

custom hook을 이용하여 useEffect 로직 분리하기 hook.js import { useEffect, useState } from "react"; const useFetchData = (fetchUrl) => { const [data, setData] = useState(); useEffect(() => { fetch(fetchUrl, { headers: { "Content-Type": "application/json", Accept: "application/json" } }) .then((response) => { return response.json(); }) .then((myJson) => { setData(myJson); }) .catch((error) => { console.log(..

React에는 Virtual DOM이라고 하는 가상의 DOM 객체가 있다. Real DOM의 가벼운 사본과 같다. Real DOM (DOM) DOM은 Document Object Model의 약자 DOM은 브라우저가 HTML 문서를 조작할 수 있도록 트리 구조화한 객체 모델 querySelector, addEventListener와 같은 DOM API를 통해 문서의 요소들을 조작 브라우저 렌더링 과정에서 브라우저는 렌더링 과정에서 DOM 트리와 CSSOM 트리를 토대로 Render 트리를 생성하고 각 요소가 배치될 공간을 계산(Layout)한 뒤 이를 화면에 그려낸다. 이때 DOM이 변경되면 DOM트리를 재건축하게 되는데 레이아웃 재연산을 수행하는 리플로우, 그리고 이를 화면에 그려내는 Repaint 과..

function orderOfPresentation(N, K) { // 조의 개수 N, 발표 순서 K const factorial = (n) => { if (n el === false).length; // 사용하지 않은 수의 경우의 수를 카운트한다. const formerCnt = validCnt * factorial(N - i - 1); // order에 추가 order = order + formerCnt; } return order; 인덱스 0에는 아무 데이터나 넣어놓고, 실제 조의 번호를 사용할 때는 인덱스 1부터 사용하는 방법을 사용하고, 인덱스 0은 더미 데이터로 사용 ex ) 3, [2,3,1] IsUsed [ false , false , false ,false] candidate = [ fa..

간단한 웹앱 번들링 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..