프론트엔드 7

타입스크립트 개발 환경 구성하기

설치해야할 것들nodejs, npm  npm install -g typescript tsc main.ts tsc main.ts -w tsconfig.json을 루트 경로에 생성한다.{ "compilerOptions": { "rootDir": "./src", //src 폴더 안에서 루트파일 "outDir": "./build/js" // 어디로 컴파일되서 들어가게 할건지 }} { "compilerOptions": { "rootDir":"./src", "outDir":"./build/js", "target":"ES6" //ES6 문법으로 컴파일링 }}기타 다른 컴파일 옵션들 💬{ "compilerOptions": { "rootDir":"./src", "outDi..

Webpack의 기본 원리

Command Line Interface (CLI) : 터미널에서 입력하는 여러 명령어 더보기npm init -y🔻더보기npm i -D webpack webpack-cli webpack-dev-server@nextwebpack - 번들러가 동작하기 위한 핵심적인 패키지webpack-cli - 터미널에서 입력하는 모든 명령어 (CLI) webpack-dev-server -        dev 명령을 통해서 개발서버를 오픈할 때 조금 더 개발에 특화되어서         페이지를 바로바로 새로고침 해 줄 수 있게 하는 구조로 만들기 위한 패키지🔻package.json mode 라는 옵션을 추가해서 개발모드인지 제품모드인지 구별   ❗️ parcel bundler는 구성 옵션이 따로 필요없이 기본 적인 내용..

JavaScript 상속. 확장

상속 (확장)class Vehicle { constructor(name, wheel) { this.name = name this.wheel = wheel }}const myVehicle = new Vehicle('운송수단', 2)console.log(myVehicle)//extends 확장자class Bicycle extends Vehicle { constructor(name, wheel) { // super() // super가 있는 자리에서 Vehicle 함수가 실행된다 super(name, wheel) }}const myBicycle = new Bicycle('삼천리',2)const daughtersBicycle = new Bicycle('세발', 3)console..

Node.js 개념

Node.jsnvm은 node.js 매니저라고 생각하면 된다.google에 nvm 검색 후 Git 링크로 접속 > installing and updating 에 공유된 코드 중 첫번째 'curl -o- https://~' 로 시작되는 코드 복사해서 터미널에서 설치vs code 의 터미널에서nvm ls : nvm list 확인nvm install 12.14.1 : 12.14.1 버전 확인nvm use 12.14.1 : 12.14.1 버전 사용node --version : node 버전 확인nvm uninstall 12.21.1 : 12.21.1 버전 삭제nvm --help : 설명서npm은 node.js의 패키지 매니저 (node.js 설치하면 자동 설치)vs code 의 터미널에서npm init -y :..

JavaScript 조건문

조건문 (If statement)const a = random()if(a ===0) { console.log('a is 0')} else if (a ===2) { console.log('a is 2')} else { console.log('rest...')} 조건문 (Switch)If의 조건이 특정한 값으로 딱 떨어질 때는 switch문으로 직관적인 코딩이 가능하다.하나의 케이스 다음에는 break로 막아줘야 한다.마지막 default(else 개념)에는 break 불필요 switch (a) { case 0: console.log('a is 0') break case 2: console.log('a is 2') break case 4: console.log('a is..

JavaScript 연산자

산술 연산자 (arighmetic operator)console.log(1 + 2) // 더하기console.log(3 * 4) // 곱하기console.log(10 / 2) // 나누기console.log(7 % 5) // 나머지 할당 연산자 (assignment operator)const a = 2let b = 2// b = b + 1b += 1console.log(b) //3 비교 연산자(comparision operator)const c = 1const d = 1console.log(c === d) // truefunction isEqual(x, y) { return x === y}console.log(isEqual(1, 1));console.log(isEqual(2, '2'));const e ..

Node.js를 사용하여 Error: Cannot find module '<module name>' 오류 해결 방법

Git 레파지토리에서 clone이 아닌 zip 파일을 다운로드 받아서vs code 에서 npm install 하려고 했더니 생겼던 오류  node의 버전은 잘 나오는데 npm의 버전을 확인하니 동일한 오류가 나온다.  버전 확인 명령을 실행할 때도 동일한 오류가 발생한다면, npm 또는 Node.js 설치에 문제가 있을 가능성이 높다.이 경우, Node.js와 npm을 완전히 제거한 후 다시 설치하는 것이 도움이 될 수 있다.  그래서 제거하기 위해 작성한 명령어nvm uninstall 12.14.1 ⬇️ 하지만 이래도 현재 활성화된 Node.js 버전을 제거하려고 할 때 발생하는 오류가 나온다.이 문제를 해결하기 위해 다른 버전을 설치하고 활성화한 다음 현재 활성화된 버전을 제거해야 한다. 문제해결 단..