전체 글 (83) 썸네일형 리스트형 자바스크립트 DeepDive 4장 변수 4.1 변수란 무엇인가? 왜 필요한가? 컴퓨터는 CPU를 사용해 연산하고, 메모리를 사용해서 데이터를 기억 컴퓨터는 1바이트 단위로 데이터를 저장하거나 읽어들임. 메모리(memory)는 데이터를 저장할 수 있는 메모리 셀(memory cell)의 집합체 메모리(memory)는 주기억장치를 의미 https://www.crucial.kr/articles/about-memory/support-what-does-computer-memory-do 컴퓨터 메모리(RAM)란 무엇이며 어떤 역할을 합니까?메모리 영역는 무엇입니까?| |Crucial Korea 컴퓨터 메모리(RAM)란 무엇이며 어떤 역할을 합니까?Crucial에서 알기 쉽게 설명하는 컴퓨터 메모리의 정의를 확인하십시오. www.crucial.kr 메모리.. webpack5 번들링 파일 줄여보기 오늘은 webpack5에서 번들링 파일을 줄여보는 방법에 대해서 공부하는 시간을 가져보겠습니다. 먼저 webpack을 이용해서 번들링 파일을 만들었다고 가정을 하고 시작하겠습니다. 이렇게 만들어진 번들링 파일의 내부 구성요소를 시각화해주는 플러그인을 통해서 어떤 모듈이 용량을 많이 차지하고 있는지를 살펴보겠습니다. webpack-bundle-analyzer라는 플러그인을 이용해서 살펴보겠습니다. yarn install webpack-bundle-analyzer 실행하게되면 다음과 같이 화면이 나타나게 됩니다. main.bundle.js 내부에는 src와 ./node_modules로 구성되어 있음을 알 수 있습니다. 여기서 살펴볼 것은 src에서 코드를 줄일 수 있는 방법이 있는지를 먼저 살펴봅니다! 즉,.. webpack 살펴보기 - (1) 정의와 사용하는 이유 안녕하세요! 오늘은 webpack 살펴보기 - (1) 정의와 사용하는 이유를 살펴보겠습니다. 웹팩(webpack)은 여러개 파일을 하나의 파일로 합쳐주는 번들러(bundler)입니다. 하나의 시작점(entry point)으로부터 의존적인 모듈을 전부 찾아내서 하나의 결과물을 만들어 냅니다. webpack webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset. webpack.js.org webpack은 현재 많은 .. Storybook - (1) 기본 설치 스토리북(Storybook)은 다양한 방식으로 사용되고 있는 UI 컴포넌트 개발 도구입니다. 스토리북(Storybook)을 구성하는 기본 단위는 스토리(Story)이며 하나의 UI 컴포넌트는 보통 하나 이상의 Story를 가지게 됩니다. 스토리북(Storybook) 설치 다음 명령어를 이용해서 스토리북(Storybook) 관련 패키지를 설치해줍니다. npx -p @storybook/cli sb init - @storybook/cli : storybook 관련 명령어 사용이 가능하도록 해주는 패키지 - sb : 스토리북 메인 패키지 패키지 설치가 완료되었으면 yarn storybook을 이용해서 실행해봅시다. 아래의 화면처럼 나오면 성공한 것입니다. - 스토리북(Storybook) 디렉토리를 열어보면 St.. 프론트엔드 webpack + typescript 설정 오늘은 간단하게 프론트엔드에서 webpack + typescript를 설정하는 간단한 방법을 살펴보기로 합시다. 프론트엔드에서 typescript는 디버깅 측면에서 정말 중요한 부분인데 단순히 자바스크립트를 사용할 경우에 변수의 타입을 확인할 방법이 없기 때문에 undefined와 같은 값이 나타나게 됩니다. 따라서 최근에는 typescript를 무조건 써야하는 경우가 발생하고, 이는 유지보수측면에서도 상당한 이점을 가져옵니다. 이러한 typescript를 설정하기 위해서는 먼저 아래의 패키지를 설치합니다. npm install --save-dev typescript ts-loader tsconfig.json이라는 파일이 반드시 필요합니다. tsconfig.json은 타입스크립트가 파일을 읽을 때 어떻게.. 프론트엔드 - webpack 설정하기 오늘은 webpack을 설정하는 방법을 알아보겠습니다. webpack은 의존 관계에 있는 자바스크립트, CSS, 이미지 등의 리소스들을 하나(또는 여러 개)의 파일로 번들링하는 모듈 번들러입니다. webpack을 사용하면 의존 모듈이 하나의 파일로 번들링되므로 별도의 모듈 로더가 필요없습니다. 간단하게 webpack을 설치해봅시다. 다음과 같이 명령어를 입력하여 webpack을 설치합니다. npm install --save-dev webpack webpack-cli 설치가 완료된 이후 package.json 파일에 webpack, webpack-cli가 설치됨을 알 수 있습니다. { "name": "frontend", "version": "1.0.0", "description": "", "main": ".. 프론트엔드 - Babel을 이해하고 적용해보자!(트랜스파일러) 오늘은 Babel을 이해하고 적용해보는 시간을 가져보겠습니다. 크롬, 사파리, 파이어폭스, 엣지 같은 에버그린 브라우저의 ES6 지원율은 약 98%로 지원하지만 아직은 IE에서는 11%밖에 지원해주지 않습니다. 따라서 IE를 포함한 구형 브라우저에서 문제없이 동작시키기 위한 개발 환경을 구축하는 것이 필요합니다. 예를 들어보자 IE 같은 구형 브라우저에서는 ES6의 화살표 함수와 ES7의 지수 연산자를 지원하지 않을 수 있습니다. [1.2.3].map(n => n **n) Babel을 사용하면 위 코드를 다음과 같이 ES5 사양으로 변환할 수 있습니다. "use strict" [1, 2, 3].map(function (n) { return Math.pow(n, n); }); 다음과 같이 명령어를 입력하여.. 프로그래머스 level2 캐시 - 2018 KAKAO BLIND RECRUITMENT 오늘은 프로그래머스 level2 문제인 캐시를 풀어보겠습니다. 문제는 다음과 같습니다. https://programmers.co.kr/learn/courses/30/lessons/17680 v.toLowerCase()); for(let i = 0; i cacheSize) { cache.shift(); } answer += 5; } // 캐시 히트일 경우 else if(cache.includes(newCities[i])) { cache.splice(cache.indexOf.. 이전 1 2 3 4 5 ··· 11 다음
