dev_eun

webpack을 왜 사용하는데? 여러 개의 js 파일이 있고, 그 많은 파일을 한 번에 실행한다고 하면 변수 이름이 중복될 수 있다. 변수 이름이 중복되면 마지막에 선언된 변수만 살아남고 그 전 변수는 아무 의미 없게 된다. 기존의 html에서 js를 가져오는 방식인 는 브라우저에서도 js 파일에 선언된 변수에 접근할 수 있는데, ES Module인 import, export 를 사용하면 접근할 수 없게 된다. 이러한 방법을 모듈화라고 한다. 최신 브라우저에서는 모듈화를 거의 지원한다. 모듈을 사용하려면 로 명시해주면 된다. 웹에서 사용하는 굉장히 많은 파일을 하나로 묶고 모듈을 사용하게 해주는 것이 bundler 라고 한다. bundler의 대표 주자는 webpack! bundle한 후 용량을 줄이기 ..

Node로 패스워드를 저장하기 전에! 이론을 먼저 살펴보자. 용어 설명 다이제스트 : 암호화된 메세지(결과물) avalanche 효과 : 아주 조그만 변화에도 결과물은 완전히 달라지는 효과 레인보우 공격 : 공격자가 전처리된 다이제스트를 굉장히 많이 확보한 뒤, 탈취한 다이제스트와 비교해 원본 메세지를 찾아내는 방법 레인보우 테이블 : 레인보우 공격에 사용되는 전처리된 다이제스트 테이블 salt : 단방향 해시 함수에서 다이제스트를 생성할 때 추가되는 임의의 문자열 먼저, 패스워드는 당연히 안전하게 암호화해서 저장해야 한다. 그리고 이론적으로 공격자가 무한한 컴퓨팅 능력을 갖고 있다면, 해독할 수 없는 패스워드는 없다. 하지만 공격하는 사람들은 그만한 자원을 갖고 있지 않기 때문에, 암호화 시간이 길어질..

First-class Function 함수가 변수처럼 취급된다. 변수에 할당할 수 있다. 매개변수를 전달받을 수 있다. 리턴값을 리턴할 수 있다. anonymous function 이름이 없는 함수 const print = function() { console.log('print'); }; callback function 매개변수로 함수를 전달한다. 클라이언트에게 구현을 맡기는 것과 같음 function randomQuiz(answer, printYes, printNo) { if(answer === 'love you') { printYes(); } else { printNo(); } }; const printYes = function() { console.log('Yes!'); } const printN..

var block안에 변수를 선언해도 어느곳에서나 사용할 수 있게 된다. 이제는 사용하지 말 것! let을 사용하자! hoisting var 예약어를 이용하여 변수를 선언할 경우 발생한다. 어디에 선언했는지에 상관없이 항상 제일 위로 선언을 끌어올려준다. let mutable 변수를 선언할 때 사용한다. const immutable 데이터 타입을 선언할 때 사용한다. 장점 1. security 2. thread safety : 스레드가 변수에 동시에 접근해서 변경하는 것을 방지 3. reduce human mistakes Variable types 타입이 다이나믹하게 결정된다. number Infinity : 무한대 -Infinity : -무한대 NaN : not a number BigInt 123n s..

html에서 script를 포함할 때 1. 안에 있는 경우 브라우저가 html 파싱을 할 때 blocking 된 후 js파일을 로드한다. 단점 : 만약 파일이 클 경우 웹페이지가 보이지 않을 수 있다. 2. 맨 끝에 있는 경우 파싱이 모두 끝난 후 js 파일을 로드한다. 단점 : 웹사이트가 js에 의존적일 경우(서버 데이터 받아옴, UI 꾸미기 등) fetching하기까지 오래걸릴 수 있다. 3. async js 파일을 병렬로 로드하고 blocking이 되지 않고 파싱을 계속한다. 단점 - 파싱이 끝나기도 전에 js파일이 fetching이 되면 js에서 조작해야 할 DOM 요소가 정의되지 않을 수 있다. - js를 실행할 때 파싱이 blocking이 될 수 있다. - 스크립트가 정의된 순서되로 실행되는 ..

루트 노드부터 순회 while (stack.length != 0) { let [current, parent] = stack.pop(); visited[current] = true; for (let child of nodeList[current]) { if (!visited[child]){ // 수행할 일 stack.push([child, current]); } } } 리프 노드부터 순회 while (stack.length != 0) { let [current, parent] = stack.pop(); if (visited[current]) { // 수행할 task continue; } stack.push([current, parent]); visited[current] = true; for (let ch..

코딩테스트 연습 - 모두 0으로 만들기 각 점에 가중치가 부여된 트리가 주어집니다. 당신은 다음 연산을 통하여, 이 트리의 모든 점들의 가중치를 0으로 만들고자 합니다. 임의의 연결된 두 점을 골라서 한쪽은 1 증가시키고, 다른 한 programmers.co.kr 트리이기 때문에 어떠한 노드를 골라도 루트노드가 될 수 있다. 리프 노드부터 시작해서 bottom-up으로 루트까지 올라가면 되겠다고 생각했었다. 그러려면 부모 노드가 누구인지 알아야 하는데, 그렇게 할 필요가 없었다. 자식 노드의 순서가 중요하지 않기 때문에 자식 노드의 수만 세고 있으면 되었던 것. 그래서 리프 노드부터 시작해서 자신과 각 부모 노드의 weight를 수정하는 방식으로 진행했다. 루트(0번 노드)에서 시작하는 dfs, bfs로..

열심히 블로그를 만들고 있었는데, footer가 컨텐츠의 길이에 맞춰 위로 올라오는 것이 보기 좋지 않았다. 구글링을 해보니 wrapper의 flex를 설정하는 글이 많아 시도했지만, 문제가 해결되지 않았다. Header Contents Footer * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } #wrap { text-align: center; display: flex; flex-direction: column; height: 100%; } header { width: 100%; height: 60px; background: #ddd; } main { } footer { width: 100%; height..