프론트엔드 개발

웹팩을 공부하면서, 공식 홈페이지에서 Core Concepts부분을 번역하였습니다. webpack Core Concepts: Entry Output Loaders Plugins Mode Browser Compatibility Entry Webpack이 내부 *dependency graph 구축을 시작하기 위해 사용해야 하는 모듈을 나타냅니다. Webpack은 entry(진입점)이 (직간접적으로) 의존하는 다른 모듈과 라이브러리를 알아낼 것입니다. 기본적으로 값은 ./src/index.js이지만 Webpack 구성에서 항목 속성을 설정하여 다른(또는 2개 이상의 entry)을 지정할 수 있습니다. 예시, webpack.config.js module.exports = { entry: './path/to/my..

React를 사용할 때, CRA로 부르면 너무 잘 구성되어있는 webpack에 대한 이해가 부족하였는데 직접 바닐라 js에서 환경을 구축해보고, 웹팩에서 사용되는 용어를 정리하고자 작성하였습니다. webpack이란? 최신 JavaScript 애플리케이션을 구축하고 있다면 "webpack"이라는 용어를 들어본 적이 있을 것입니다. Webpack은 JavaScript 응용 프로그램을 위한 정적 모듈 번들러입니다. 응용 프로그램에서 모든 코드를 가져와 웹 브라우저에서 사용할 수 있도록 합니다. Webpack은 앱에서 코드가 어떻게 사용되는지에 따라 코드를 분리하며, 이러한 모듈식 책임 분류를 통해 코드를 훨씬 쉽게 관리, 디버그, 확인 및 테스트할 수 있습니다. 모듈 번들러란? 웹 애플리케이션을 구성하는 자원..

Jest 공식 홈페이지를 보고, 번역하면서 작성하였습니다 Jest 라이브러리 설치 1) yarn을 이용 yarn add --dev jest 2) npm을 이용 npm install --save-dev jest 테스트 파일 생성 파일 위치 : 테스트할 파일이 있는 폴더 내 폴더 이름 : __test__ 파일 이름 : 파일 이름.test.js 또는 파일 이름.spec.js 테스트 코드 작성 두 개의 숫자를 더하는 가상 함수에 대한 테스트를 작성하는 것으로 시작해 보겠습니다. 먼저 sum.js 파일을 만듭니다. sum.js function sum(a, b) { return a + b; } module.exports = sum; sum.test.js const sum = require('./sum'); test..

전 글 에서는 TDD를 알아보게 되었는데, 테스팅 라이브러리 중 요즘 핫하고, 나중에 react와 typescript에서도 적용할 수 있는 Jest에 대해서 알아보겠습니다. 이번 시간은 간단하게 알아보고, 다음에는 실습을 직접 해보겠습니다! Jest란 Jest는 단순성에 중점을 둔 페이스북에서 만든 자바스크립트 JavaScript 테스팅 프레임워크입니다. Babel, TypeScript, Node, React, Angular, Vue 등을 사용하는 프로젝트에서 작동합니다! Jest 특징 zero config Jest는 대부분의 JavaScript 프로젝트에서 구성 없이 즉시 사용할 수 있도록 하는 것을 목표로 합니다. snapshots 큰 물체를 쉽게 추적하는 테스트를 만드십시오. 스냅숏은 테스트와 함께..

과제를 준비하면서 TDD 처음 접해보았는데 TDD란 무엇이고, 어떻게 적용하면 될지 공부해야 할 필요성을 느꼈습니다. TDD란, TDD(Test-Driven-Development) '테스트 주도 개발' 소프트웨어 개발 방법론 중의 하나로, 반복 테스트를 이용한 소프트웨어 방법론으로, 작은 단위의 테스트 케이스를 작성하고 이를 통과하는 코드를 추가하는 단계를 반복하여 구현합니다. TDD 의 3가지 절차 RED - 실패하는 테스트 생성. - 실패하는 테스트 케이스를 만들 때는 프로젝트의 전체 기능에 대하여 처음부터 모든 테스트 케이스를 작성하는 것이 아니라, 지금 가장 먼저 구현할 기능 하나씩 테스트 케이스를 작성합니다. GREEN - 테스트에 통과하는 코드 작성 - 우리가 작성하는 실패하는 테스트 케이스를..

모듈이란? 여러 기능들에 관한 코드가 모여있는 하나의 파일 모듈화는, 거대한 문제를 작은 조각의 문제로 나누어 다루기 쉽도록 하는 과정 모듈화를 통해 얻는 장점으로는, 파일들간에 중복적으로 발생할 수 있는 이름 충돌 방지 서로 간의 코드를 분리함으로써 모듈성 높여준다. 모듈간의 재사용성을 높여준다. 모듈화를 하지 않았을 때 발생하는 점 아래 예시에서는 html에서 module1.js 파일과 module2.js 파일을 만들어서 예시를 해보겠습니다. index.html module 1 function callMyName () { console.log("taenami"); } module 2 callMyName("taenami"); // taenami 위에서 module1.js 파일에서 callMyName 함..

지난 시간에 var, let, const를 비교하면서 공부를 하였는데, 이번 시간에는 TDZ란 무엇이고, 추가적으로 공부를 하기 위해서 작성하였습니다 1. TDZ란? TDZ란 변수가 선언되고 초기화되기의 범위를 TDZ(Temporal Dead Zone)에 있다고 합니다. var, let, const를 보면서 TDZ에 대해 배워보겠습니다. 2. var와 let, const 비교 1) var console.log(myName); // undefined var myName = "taenami"; var는 선언하기 전에 사용할 수 있습니다. 위와 같이 선언한 myName이라는 변수는 error가 발생하는 대신, undefined가 나오는데, var로 선언된 변수는 *호이스팅 되기 때문입니다. 2) let, co..

JavaScript에서 함수를 정의하는 방법에는 함수 선언식과 함수 표현식이 있습니다. 함수 선언식과 함수표현식이란? 함수 선언식 (function declartion) 함수명이 정의되어 있고, 별도의 할당 명령이 없는 것 function sum(a,b) { return a + b; } 함수 표현식 (function Expression) 정의한 function을 별도의 변수에 할당하는 것 const sum = function(a,b) { return a + b; } 함수 선언식과 함수 표현식의 차이 주요 차이점은, 호이스팅에서 차이가 발생합니다. 함수 선언식은 함수 전체를 호이스팅 합니다. 정의된 범위의 맨 위로 호이스팅되서 함수 선언 전에 함수를 사용할 수 있다는 것입니다. 함수 표현식은 별도의 변수에..