1. 자료구조? 메모리를 효율적으로 사용하며 빠르고 안정적으로 데이터를 처리하는 것이 궁극적인 목표로 상황에 따라 유용하게 사용될 수 있도록 특정 구조를 이루고 있다. 특정 상황에서는 빠르게 작동하지만 반대로 특정 상황에서 느리게 작동할 수 있기 때문에 상황에 맞는 자료구조를 고를 수 있는 능력이 필요하다. 자료구조의 종류는 다음과 같이 있다. 선형 구조 한 원소 뒤에 하나의 원소 만이 존재하는 형태로 자료들이 선형으로 나열되어 있는 구조를 가진다. 선형 구조에 해당되는 자료구조는 배열, 연결 리스트, 스택, 큐 등이 있다. 비선형 구조 원소 간 다대다 관계를 가지는 구조로 계층적 구조나 망형 구조를 표현하기에 적절하다. 비선형 구조에 해당되는 자료구조는 트리와 그래프 등이 있다. 2. 알고리즘? 특정 ..

0. 사건의 발단 평화로운 어느날.... cra(create-react-app)이 아닌 webpack으로 만든 프로젝트에서 react-router-dom을 사용하니 이동한 페이지에서 새로고침을 했을 때 404 에러가 나타났다... 1. 문제 이유 브라우저가 React 서버에게 "/경로"에 GET을 보내지만 실제 서버에서는 "/경로"에 대한 정보가 없기 때문이다. 이런 오류를 connect-history-api-fallback 현상이라고 한다. SPA는 보통 웹 브라우저에서 액세스할 수 있는 하나의 색인 파일(index.html)만 사용한다. 그래서 특정 경로에서 새로고침 등을 했을 경우 서버가 해당 파일을 찾을 수 없어 발생한 문제이다. 2. 해결 방법 historyApiFallback: true 추가하..

TypeScript는 타입을 선언할 때 변수명 옆에 :타입을 붙여주면 된다. let age:number = 30; let isAdult:boolean = true; let car:string = "BMW" number, boolean, string을 통해서 기본적인 유형의 타입을 선언할 수 있다. let a:number[] = [1,2,3]; let a2:Array = [1,2,3]; let week1:string[] = ['mon','tru','wed']; let week2:Array = ['mon','tru','wed']; 배열을 선언하는 방법은 2가지가 있는데, 하나는 타입[]으로 선언하는 방식과 Array 으로 선언하는 방식이 있다. 만약 문자열 배열에 숫자, 숫자 배열에 문자 같이 다른 타입을 ..

JavaScript를 사용하면서 우리는 많은 함수를 만들 것이다. function add (num1, num2) { console.log(num1 + num2); } add(); - NaN add(1); - NaN add(1,2); - 3 add(3,4,5); - 7 add("hello","world"); - "helloworld" add()만 호출할 경우 undefined + undefined 가 되기 때문에 NaN이 출력되며, add(1) 경우엔 1 + undefined 이기 때문에 NaN, add(3,4,5)와 add("hello", "world")는 만든 용도와 다르게 사용되고 있다. 즉, add(1,2) 외엔 모두 원하던 결과 혹은 잘못된 사용방법으로 사용되고 있다. 하지만 JavaScript는..

1. Polyfill? 자바스크립트의 최신 기능을 모두 사용하면서 오래된 브라우저를 지원하려면 Babel로 코드 문법을 변환함과 동시에 Polyfill도 사용해야 한다. Polyfill은 런타임에 기능을 주입하는 것을 말한다. 런타임에 기능이 존재하는지 검사해서 기능이 없는 경우 주입한다. Babel을 사용하면 최신 자바스크립트 표준에 추가된 모든 기능을 사용할 수 있다고 생각하겠지만 Polyfill에 대한 설정은 별도로 해야 한다. 예를 들어 ES8에 추가된 String.padStart 메서드는 폴리필을 통해서 추가할 수 있다. if (!String.prototype.padStart) { String.prototype.padStart = func; } func는 padStart 폴리필 함수이다. 2. ..

0. 들어가면서 https://bum-developer.tistory.com/entry/React-Babel [React] Babel 0. Babel? Babel은 입력과 출력이 모두 자바스크립트 코드인 컴파일러이다. 일반적인 컴파일러는 고수준의 언어를 저수준의 언어로 변환하는 것과 다른 점이 있다. 초기엔 ES6 코드만 ES5 코드로 변환 bum-developer.tistory.com 정리 이후 내용을 다루고 있다. 해당 내용의 이해가 어려운 경우 먼저 읽기를 추천한다. 1. 확장성과 유연성을 고려한 Babel 설정 방법 Babel 설정에 사용할 수 있는 다양한 속성 중에 extends, env, overrides 속성을 알아보자 extends 속성을 이용하면 다른 설정 파일을 가져와 확장할 수 있고,..

0. Babel? Babel은 입력과 출력이 모두 자바스크립트 코드인 컴파일러이다. 일반적인 컴파일러는 고수준의 언어를 저수준의 언어로 변환하는 것과 다른 점이 있다. 초기엔 ES6 코드만 ES5 코드로 변환해주지만, 현재는 리액트의 JSX, 타입 스크립트와 같은 정적 타입 언어, 코드 압축 등의 단계에 있는 문법도 변환해준다. Babel을 실행하는 방법은 4가지가 있다. @babel/cli로 실행하기 웹팩에서 babel-loader로 실행하기 @babel/core를 직접 실행하기 @babel/register로 실행하기 이번엔 @babel/register를 제외하고 적용하는 방법을 알아본다. 1. 준비단계 패키지 설치 npm install @babel/core @babel/cli @babel/plugin..

0. 준비물 블랙 러시안은 보드카, 깔루아, 얼음만 있으면 만들 수 있는 아주 간단한 칵테일이다. 1. 제작 얼음에 보드카 2oz (60ml) 를 넣어준다. 깔루아 1oz(30ml)를 넣어주면 끝! 2. 시음 후기 간단한 재료로 만들었지만 달달한 첫맛과 목이 타는듯한 알콜 도수로 생각보다 맛있는 칵테일이였다. 깔루아 덕분에 달콤한 커피맛이 나지만 보드카 비율이 더 높기 때문에 도수는 약 30도 정도 한다고 한다