본문 바로가기

전체 글142

[webpack] package.json package-lock.json 차이 package.json package.json 역할 애플리케이션이 필요로하는 패키지 목록 나열 다른 개발자와 같은 빌드환경 구성. (의존성이 달라 발생하는 문제 예방) package.json은 크게 2가지로 나눠집니다. 프로젝트 정보 name, version 등 패키지 정보 어플리케이션 내부에 직접 포함되는 모듈 (dependencies) 개발 과정에 필요한 모듈(devDependencies) 어플리케이션 내부에 직접 포함되는 모듈 (dependencies) 애플리케이션 내부에 직접 포함되는 모듈 정보를 담습니다. 의존성을 규정하는 것은 패키지 이름과 해당 패키지의 범위를 지정한 객체를 통해 이뤄집니다. "dependencies": { "@chakra-ui/react": "^1.7.4", "@emotio.. 2022. 2. 14.
typescript 제네릭 제네릭 정적 타입언어들의 경우 함수 또는 클래스 정의 시점에 매개변수나 반환값의 타입을 선언해야합니다. Typescript 또한 정적 타입언어이기 때문에 함수 또는 클래스를 정의하는 시점에 매개변수나 반환값의 타입을 선언해야합니다. 그러나 이를 정의하는 시점에 타입선언이 어려운 경우가 있습니다. 단일 타입이 아닌 다양한 타입에서 작동하는 컴포넌트를 작성할 때 사용자는 제네릭을 통해 여러 타입의 컴포넌트나 자신만의 타입을 사용할 수 있습니다. 제네릭 사용 identity 함수를 구현해서 제네릭을 사용해 봤습니다. identity함수는 인수로 뭐가 오든 그대로 반환하는 echo 명령 같은 함수입니다. function identity(arg: any): any{ return arg; } any 타입을 쓰면 a.. 2022. 1. 8.
javascript promise 프로미스 프로그램이 간단하고, 이런 코드들이 한 줄 한 줄 실행 되면 크게 어렵지 않겠지만, 자바스크립트에서 함수를 호출했는데 함수가 끝나기 전에도 프로그램이 계속 진행되어야 하는 상황이 많습니다. 이런 상황에서 비동기처리를 위해 하나의 패턴으로 콜백함수를 사용합니다. 😞 하지만 전통적인 콜백 패턴은 콜백 헬로 인해 가독성을 떨어트리고 중간에 발생한 에러처리가 곤란하거나, 여러개의 비동기처리를 한번에 하기도 힘듭니다. 이럴때 프로미스를 이용해서 비동기적인 상황에서 코드를 좀 더 명확하게 표현하고 실행할 수 있습니다. 콜백 헬이 뭐길래 콜백 헬이 나타나게 된 이유로는 비동기 처리모델의 특성 때문입니다. 비동기 처리 모델은 실행이 끝나는 것을 기다리지 않고 바로 다음 task를 실행합니다. 따라서 비동기 함수 내에서.. 2022. 1. 8.
[Typescript] 클래스, 추상클래스, 인터페이스, 그리고 차이 클래스 타입스크립트 클래스 타입 스크립트의 클래스도 ES6의 클래스와 상당히 유사합니다. 클래스도 사실 함수이고 기존 프로토타입 기반 패턴의 syntatic sugar일 뿐입니다. 하지만 몇가지 Typescirpt만의 확장 기능이 있습니다. 정의 타입 스크립트에서는 클래스 몸체에 클래스 프로퍼티를 사전 선언해야합니다. class 클래스 이름 { [private | protected | public] property name[?]: property type[...] } 클래스 선언문의 기본 형태입니다. class Person { name: string; constructor(name: string) { this.name = name; } walk() { console.log(`${this.name} is .. 2021. 12. 9.
[React] 클래스형 컴포넌트 LifeCycle 정리 생명주기 메서드 모든 컴포넌트는 다양한 종류의 생명주기 메소드를 가집니다. 그리고 이 메소드를 오버라이딩하여 특정 시점에 코드가 실행되도록 설정할 수 있습니다. import React from 'react'; import ReactDOM from 'react-dom'; import reportWebVitals from './reportWebVitals'; class Test extends React.Component{ constructor(props) { super(props); this.state = { name: 'jiwon', date: new Date() } } componentDidMount() { this.timerID = setInterval(() => this.tick(), 1000); /.. 2021. 12. 9.
TypeScript union타입, any타입, unknown 타입 let name1 :string = 'kim' let age :number = 25; let friend :null = null; //undefined, null 타입도 있음. let male :boolean = true; 변수에 타입지정이 가능하다는 것은 타입이 실수로 변경되는 것을 방지할 수 있는것을 의미한다. let arr : number[] = [123,456]; Array도 type을 지정하여 사용한다. 위 배열의 요소는 number만 올 수 있다. 유니온타입 Union Type let member : number | string = 'kim'; 유니온타입은 타입 2개 이상을 합쳐 새로운 타입을 만든다. member 변수에는 string, number 두가지 타입이 올 수 있다. 배열과 오브젝트.. 2021. 10. 25.
TypeScript 설치와 타입지정 설치 nodejs설치 VScode 터미널 오픈후 npm install -g typescript .ts 확장자인 파일하나를 생성한다. index.ts 생성 tsconfig.json 생성 //tsconfig.json { "compilerOptions": { "target" : "es5", "module" : "commonjs", } } 이 파일에 대해서는 나중에 알아볼 것이다. TypeScript 의 Type //index.ts let name1 = "kim"; ts파일은 브라우저가 읽을 수 없다. ts파일을 js파일로 변환해야사용할 수 있음. //index.ts let name2 :string = "park"; name2 = 123 타입스크립트는 변수에 type지정을 할 수 있다. name2라는 변수에는 .. 2021. 10. 24.
[백준 / 2164 / node.js] 카드 2 javascript 처음에는 그냥 class로 queue를 구현해서 동작시키려고 했다. let fs = require('fs'); let input = fs.readFileSync('/dev/stdin').toString().trim().split('\n'); const n = parseInt(input.shift()) class Queue { constructor(num){ this.arr = []; } enqueue(num){ this.arr.push(num); } drop(){ this.arr.shift(); } move(){ this.enqueue(this.arr.shift()) } length(){ return this.arr.length; } ans(){ return this.arr.shift(); } } con.. 2021. 9. 22.
Webpack이 뭔데!!(6) template engine을 webpack과 함께 사용해보기 Webpack이 바라보는 Module js sass hbs jpg, png hbs는 handlebars 의 약자로 이 확장자는 템플릿 엔진인handlebars가 사용하는 template 파일을 말합니다. 문서 내에 특정 데이터를 노출시켜야 할 때 직접 DOM을 파싱하고 데이터가 들어갈 공간을 찾아서 넣어주는 작업을 반복해야합니다. 이런 일을 많이해야할 때 템플릿 엔진을 사용합니다. 템플릿 엔진은 Model Template View 로 나눠져있습니다. Model은 문서에 노출시킬 데이터를 뜻하고 , Template 은 일반적인 문서와 비슷한데 모델이 갖고 있는 데이터가 어디에 어떻게 표현될 지 문서내에 작성이 되어있습니다. Model과 Temp.. 2021. 9. 14.
[프로그래머스/javascript] 짝지어제거하기 js 효율성검사 2번때문에 당황 했던 문제. 문제 자체는 어렵지않다. 배열을 하나 생성해주고 s를 쭉 순회하면서 배열에 담아준다. 그러면서 생성한 배열의 마지막 값과 현재 순회중인 s의 요소 값이 같으면 배열의 마지막 값을 pop해주고 다르면 현재값을 push해준다. function solution(s) { let tmp =[] let arr = [...s]; if(s.length % 2!==0) return 0 for(let cur of s){ if(tmp[tmp.length-1] === cur){ tmp.pop() }else{ tmp.push(cur) } } return !tmp.length ? 1 : 0; } 그리고 만약에 그 배열이 비어있으면 1을 리턴 하나라도 남아있으면 0을 리턴해주면된다. 여기서 .. 2021. 9. 1.
[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. - options has an unknown property 'inline'. These properties are valid: object { allowedHosts?, bonjour?, client?, compre.. [webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. - options has an unknown property 'inline'. These properties are valid: object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, onAfterSetupMiddleware?, onBeforeSetupMiddlewar.. 2021. 8. 29.
[백준 / 1929 / nodejs] 소수구하기 javascript 소수 구하기 문제는 에라토스테네스의 체를 쓰거나 범위의 제곱근까지만 비교해서 찾는 방식이 대부분인 것 같아서 둘 다 해봤다. 1. 2~ 제곱근까지 나눠보기 let fs = require('fs'); let input = fs.readFileSync('/dev/stdin').toString().trim().split('\n'); const isPrime = (num) => { if(num === 1) return false; for(var i=2; iparseInt(e)); for(var i=n; iparseInt(e)); const arr = Array.from(Array(m+1).keys()) for(let i=2; i 2021. 8. 24.

티스토리툴바