記錄

00 TypeScript -자바스크립트는 동적 타입 언어 또는 느슨한 타입의 언어라는 태생적 한계를 지님 -자바스크립트의 태생적 문제를 극복하고자 AltJS(자바스크립트의 대체 언어)가 등장, TypeScript 역시 이 중 하나 -마이크로소프트에서 구현한 자바스크립트(ES5)의 Superset(상위확장) -단순히 설명하면 타입 구문이 있는 JavaScript -정적 타이핑을 지원하며 ES6(ECMAScript 2015)의 클래스, 모듈 등과 ES7의 Decorator 등을 지원 -기존의 자바스크립트(ES5) 문법을 그대로 사용할 수 있으며, 별도의 트랜스파일러(Transpiler)를 사용하지 않아도 ES6의 새로운 기능을 기존의 자바스크립트 엔진(브라우저 또는 Node.js)에서 실행할 수 있음 01 ..

This 자바스크립트에서 this는 상당히 어려운 개념인데, 다른 언어와 다른 동작 방식을 가지고 있기 때문이다. 또한 엄격 모드와 비엄격 모드에서도 일부 차이가 있어 이걸 가리킬 줄 알았는데 그게 아니네? 하는 상황이 발생할 수 있다. this 값은 런타임에 결정된다. 즉, this의 값은 컨텍스트에 따라 달라지기 때문에 동일한 함수라도 다른 객체에서 호출했다면 'this’가 참조하는 값이 달라진다. let user = { name: "John" }; let admin = { name: "Admin" }; function sayHi() { alert( this.name ); } // 별개의 객체에서 동일한 함수를 사용함 user.f = sayHi; admin.f = sayHi; // 'this'는 '점..

React 공식문서: https://ko.reactjs.org/docs/state-and-lifecycle.html https://ko.reactjs.org/docs/faq-state.html State state는 영어로 상태를 의미하는 단어로, 리액트에서는 React component의 상태, 더 정확히는 component의 변경 가능한 데이터를 의미한다. props와 마찬가지로 App component 렌더링에 영향을 주는 JavaScript 객체로, 개발자가 직접 정의해서 사용한다. 불변성 immutable state는 불변성(immutable), 변하지 않는 성질을 가지고 있다. 이는 프로그래밍에서는 메모리 영역의 값을 직접적으로 변경하지 않는다는 것을 의미한다. 불변성을 지키지 않고 메모리 영..

문제 링크: https://school.programmers.co.kr/learn/courses/30/lessons/140107 난이도: Lv.2 문제 설명 좌표평면을 좋아하는 진수는 x축과 y축이 직교하는 2차원 좌표평면에 점을 찍으면서 놀고 있습니다. 진수는 두 양의 정수 k, d가 주어질 때 다음과 같이 점을 찍으려 합니다. 원점(0, 0)으로부터 x축 방향으로 a*k(a = 0, 1, 2, 3 ...), y축 방향으로 b*k(b = 0, 1, 2, 3 ...)만큼 떨어진 위치에 점을 찍습니다. 원점과 거리가 d를 넘는 위치에는 점을 찍지 않습니다. 예를 들어, k가 2, d가 4인 경우에는 (0, 0), (0, 2), (0, 4), (2, 0), (2, 2), (4, 0) 위치에 점을 찍어 총 6..

문제 링크: https://school.programmers.co.kr/learn/courses/30/lessons/138476 난이도: Lv.2 문제 설명 경화는 과수원에서 귤을 수확했습니다. 경화는 수확한 귤 중 'k'개를 골라 상자 하나에 담아 판매하려고 합니다. 그런데 수확한 귤의 크기가 일정하지 않아 보기에 좋지 않다고 생각한 경화는 귤을 크기별로 분류했을 때 서로 다른 종류의 수를 최소화하고 싶습니다. 예를 들어, 경화가 수확한 귤 8개의 크기가 [1, 3, 2, 5, 4, 5, 2, 3] 이라고 합시다. 경화가 귤 6개를 판매하고 싶다면, 크기가 1, 4인 귤을 제외한 여섯 개의 귤을 상자에 담으면, 귤의 크기의 종류가 2, 3, 5로 총 3가지가 되며 이때가 서로 다른 종류가 최소일 때입니..

문제 링크: https://school.programmers.co.kr/learn/courses/30/lessons/138477 난이도: Lv.1 문제 설명 "명예의 전당"이라는 TV 프로그램에서는 매일 1명의 가수가 노래를 부르고, 시청자들의 문자 투표수로 가수에게 점수를 부여합니다. 매일 출연한 가수의 점수가 지금까지 출연 가수들의 점수 중 상위 k번째 이내이면 해당 가수의 점수를 명예의 전당이라는 목록에 올려 기념합니다. 즉 프로그램 시작 이후 초기에 k일까지는 모든 출연 가수의 점수가 명예의 전당에 오르게 됩니다. k일 다음부터는 출연 가수의 점수가 기존의 명예의 전당 목록의 k번째 순위의 가수 점수보다 더 높으면, 출연 가수의 점수가 명예의 전당에 오르게 되고 기존의 k번째 순위의 점수는 명예의..

* React 공식 문서 : https://ko.reactjs.org/docs/components-and-props.html 00 Components 컴포넌트(Component)는 리액트를 구성하는 가장 작은 단위로, 이 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다. 작은 컴포넌트들이 모여서 하나의 컴포넌트 구성하고, 이 컴포넌트들이 모여 하나의 페이지 구성하는 구조로, 코드 유지 보수 시 필요한 컴포넌트만 확인하면 되기 때문에 개발시간 및 유지 보수 비용이 감소한다. 컴포넌트는 데이터(props, 속성)를 입력받아 View(state)상태에 따라 DOM node를 출력한다. 컴포넌트의 이름은 반드시 대문자로 시작해야 하며, 'props' 라..

00. Intl API 란 Intl 객체는 각 언어에 맞는 문자비교, 숫자, 시간, 날짜비교를 제공하는, ECMAScript 국제화 API를 위한 이름공간이다. 여러 가지 언어로 서비스를 할 수 있도록(국제화, internalization) 웹페이지 상에 사용된 문구와 데이터를 언어나 지역별로 다른 형식으로 보여줄 수 있게 해준다. 외부 라이브러리를 사용하지 않고도 자바스크립트에서 제공하는 Intl API를 사용해 다국어 지원을 하는 서비스에서 데이터를 하나 하나 번역하지 않고도 언어 처리를 할 수 있어 유용하게 사용할 수 있다. 기본적인 사용 방법 기본 형태에 locales 매개변수를 추가해 적절한 언어를 제공할 수 있다. navigator.language 를 이용해 사용자가 설정한 언어 자동으로 읽어..