전체 글
-
도커와 VM의 차이를 통한 컨테이너 이해Cloud/Docker 2021. 4. 14. 00:14
본 글은 "따라하며 배우는 도커와 CI환경" 강좌를 토대로 작성되었습니다. 가상화 기술 나오기 전 한대의 서버를 하나의 용도로만 사용 남는 서버 공간 그대로 방치 하나의 서버에 하나의 운영체제, 하나의 프로그램만을 운영 안정적이지만 비효율적 하이퍼 바이저 기반의 가상화 출현 논리적으로 공간을 분할하여 VM이라는 독립적인 가상 환경의 서버 이용 가능 하이퍼 바이저는 호스트 컴퓨터에서 다수의 게스트 OS를 동시에 실행할 수 있게 하는 소프트웨어이자, 하드웨어를 가상화하면서 하드웨어와 각각의 VM을 모니터링하는 중간 관리자다. 하이퍼 바이저 종류 native 하이퍼 바이저가 하드웨어를 직접 제어하여 자원을 효율적으로 사용 가능. 별도의 호스트 OS가 없어 오버헤드가 적다. 여러 하드웨어 드라이버를 세팅해야 하..
-
Docker 기본Cloud/Docker 2021. 4. 7. 14:39
본 글은 "따라하며 배우는 도커와 CI환경" 강좌를 토대로 작성되었습니다. 도커를 쓰는 이유? → 어떠한 프로그램을 다운 받는 과정을 굉장히 간단하게 만들기 위해서다. 도커 없이 프로그램을 다운 받을 때, 먼저 installer를 다운 받고 installer 실행 후 프로그램 설치가 완료된다. 하지만 인스톨러를 실행하는 가운데 에러가 발생하기도 한다. 갖고 있는 서버와 패키지 버전, 운영체제(맥, 리눅스, 리눅스 안에서도 우분투나 centos 등등)에 영향을 많이 받기 때문이다. 이러한 문제를 해결하기 위해 설치 과정이 복잡해지는데 이를 단순하게 만드는 것이 도커다. 1. 도커 없이 Redis 설치하기 컴퓨터에 wget이 설치되어 있지 않아 첫 줄부터 에러가 발생한다. 2. 도커로 Redis 설치하기 바..
-
가로 스크롤 만들기Node.js/프론트엔드 2021. 4. 1. 12:15
white-space: nowrap 과 overflow: auto 를 사용하여 가로 스크롤을 만들 수 있다. white-space 는 엘리먼트가 공백 문자를 처리하는 법을 지정하는 속성인데, white-space: nowrap 은 연속 공백을 하나로 합친다. 즉 줄 바꿈이 엘리먼트에서만 일어난다. 위처럼 줄 바꿈이 일어난 엘리먼트의 공백을 아래처럼 없애준다. 반면 overflow 는 엘리먼트의 컨텐츠가 너무 커서 block formatting context 에 딱 맞지 않을 때 사용하는 속성이다. 데스크탑 브라우저의 경우 컨텐츠가 넘칠 때 overflow: auto로 아래처럼 스크롤바를 노출할 수 있다. 컨텐츠 양에 따라 스크롤바를 추가할지 안 할지를 자동으로 정한다. 코드 예시 .html Mark Jo..
-
호이스팅(Hoisting)JavaScript 2021. 3. 28. 01:18
호이스팅이란? console.log(x); // undefined var x; 이 코드에서 1번째 줄은 아직 변수가 선언되지 않았기 때문에 오류가 발생할 것 같지만, 실제로는 undefined가 출력된다. 변수 선언이 프로그램 첫머리 또는 함수의 첫머리로 끌어올려지기 때문이다. 이를 변수 선언 끌어올림, 즉 호이스팅이라고 한다. console.log(x); // undefined var x = 127; console.log(x); // 127 단, 위처럼 선언과 동시에 대입하는 코드(var x = 127)에서 대입부(x = 127)는 끌어올리지 않는다. 함수 선언도 끌어올려진다! test(127); // 127 function test(x) { console.log(x); } 위 코드처럼 함수 호출문이 ..
-
-
[ESLint] eslint.workingDirectories 옵션Node.js/프론트엔드 2020. 12. 27. 11:04
한 프로젝트 안에 폴더가 여러 개 있고 각각의 폴더가 서로 다른 구성 파일(e.g. eslintrc, .eslintignore)을 가지고 있으면, current working directory를 지정해주는 것이 중요하다. eslint.workingDirectories 옵션을 사용하여 current working directory를 지정할 수 있다. [{ "mode": "location" }] : ESLint가 workspace 폴더 위치 또는 파일 위치(workspace 폴더가 열려 있지 않을 때)를 사용하게 한다. 디폴트 설정. [{ "mode": "auto" }] : package.json, .eslintignore 그리고 .eslintrc* 파일이 위치한 폴더를 working directory로 지..
-
프론트엔드 개발 환경의 이해 - NPMNode.js/프론트엔드 2020. 12. 1. 10:14
본 글은 "프론트엔드 개발환경의 이해와 실습(webpack, babel, eslint..)" 강좌를 토대로 작성되었습니다. jeonghwan-kim.github.io/series/2019/12/09/frontend-dev-env-npm.html 프론트엔드 개발에 Node.js가 필요한 이유? 1. 최신 JS 스펙으로 개발할 수 있다. JS 스펙은 빠르게 발전하는 반면에 브라우저의 지원 속도는 항상 뒤쳐진다. 따라서 Webpack, Babel, NPM 같은 Node.js로 만들어진 도구를 사용하여 자동화된 프론트엔드 개발 환경을 갖출 필요가 있다. TypeScript, SASS 같은 고수준 프로그래밍 언어를 사용할 때도 전용 트랜스파일러가 필요한데, 이것 역시 Node.js 환경이 뒷받침되어야 한다. 2...
-
[JavaScript] 배열의 요소를 객체의 key로 사용하는 방법.JavaScript 2020. 7. 15. 13:32
첫번째 입력에서는 key가 공백으로 구분되어 입력되고, 두번째에는 그 key의 value가 공백으로 구분되어 주어진다. 두 입력을 각각 key, value로 가지는 객체를 만들려면 다음과 같은 방법들이 있다. https://stackoverflow.com/questions/54789406/convert-array-to-object-keys Convert array to object keys What's the best way to convert an array, to an object with those array values as keys, empty strings serve as the values of the new object. ['a','b','c'] to: { a: '', b: '', c: '..