개발 알다가도 모르겠네요

데이터베이스, 스토리지, 애플리케이션 등의 IT 리소스를 온디맨드로 인터넷을 통해 제공, 사용한 만큼만 비용을 지불하는 것. 특징 주문형 셸프 서비스 - 사용자 스스로 개별 관리 광범위한 네트워크 접속 리소스 공유 신속한 확장성 - scale up / down 측정 가능한 서비스 - 종량제 클라우드 서비스 모델 IaaS (Infrastructure as a Service) 사업자는 사용자에게 pay-as-you-go access 제공 storage, networking, servers, ... PaaS (Platform as a Service) 사업자는 cloud-based enverinment + infrastructure 제공 사용자는 application 개발 Java, PHP, Ruby 등의 프로..

App의 state에 선택한 언어 추가 App 컴포넌트의 Suggestion 컴포넌트 생성하는 쪽에 선언해둔 onSelect 코드에 selectedLanguages를 자신의 state에 추가해보자. //App.js import { fetchLanguages } from "./api.js"; import SearchInput from "./SearchInput.js"; import Suggestion from "./Suggestion.js"; export default function App({ $target }) { this.state = { fetchedLanguages: [], selectedLanguages: [], }; this.setState = (nextState) => { this.state..

화살표 방향키 입력으로 seleectedIndex 변경 키보드 이벤트를 통해, selectedIndex 값을 바꿀 수 있도록 해보자. //Suggestion.js export default function Suggestion({ $target, initialState }) { this.$element = document.createElement("div"); this.$element.className = "Suggestion"; $target.appendChild(this.$element); this.state = { selectedIndex: 0, items: initialState.items, }; this.setState = (nextState) => { this.state = { ...this.s..

컴포넌트 구조 App 컴포넌트가 세 컴포넌트를 제어하는 형태이다. SelectedLanguages, SearchInput, Suggestion 각각의 컴포넌트는 서로 의존성을 띄지 않는 형태로 작성해야 재사용이 가능하다. App 컴포넌트 작성 // App.js export default function App({ $target }) { this.state = { fetchedLanguages: [], selectedLanguages: [], }; this.setState = (nextState) => { //TODO: 구현해야함 }; } 그 후, App 컴포넌트를 생성하는 index.js를 선언, index.html에서 불러오게 한다. // index.js import App from "./App.js"..

특정 패턴과 일치하는 문자열을 검색, 추출, 치환할 수 있는 기능 정규 표현식 생성 정규 표현식 리터럴과 RegExp 생성자 함수를 사용하는 방법 2가지가 존재 일반적으로 정규 표현식 리터럴을 사용한다. 정규 표현식 리터럴은 패턴과 플래그로 구성 RegExp 메서드 RegExp.prototype.exec 메서드 인수로 전달받은 문자열에 대해 정규 표현식의 패턴을 검색하여 매칭 결과를 배열로 반환 매칭 결과가 없는 경우 null 반환 g 플래그를 지정해도 첫 번째 매칭 결과만 반환하므로 주의 필요 const target = "Is this all there is?"; const regExp = /is/; console.log(regExp.exec(target)); // [ 'is', index: 5, in..

ES6 이후 에는 함수를 사용 목적에 따라 명확히 세 가지 종류로 구분 ES6 함수의 구분 constructor prototype super arguments 일반 함수 O O X O 메서드 X X O O 화살표 함수 X X X X 메서드 ES6 이후 , 메서드는 메서드 축약 표현으로 정의된 함수만을 의미 const obj = { x: 1, // foo는 ES6 기준, 메서드다. foo() { return this.x; }, // bar는 ES6 기준, 메서드가 아니다. bar: function () { return this.x; }, }; console.log(obj.foo()); // 1 console.log(obj.bar()); // 1 ES6 메서드 는 인스턴스를 생성할 수 없는 non-const..

TS2532: Object is possibly 'undefined'. 또는 변수를 함수에 넘기고자 할 때 function validateToken(token: string) { return token; } const token = 'kjadj' as string | undefined; validateToken(token); 아래와 같은 Typescript 에러 메시지가 발생한 적이 있을 것이다. TS2322: Type 'string | undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'. 이러한 에러가 발생하는 이유는 typescript가 예상하고 있는 특정한 type이 아닌, ..

암묵적 전역 다음은 use strict 모드를 반영하지 않았을 경우, 우리가 아는 일반적인 자바스크립트 작동 방식. → 암묵적 전역 현상 이는, 개발자의 의도와는 상관없는 다양한 오류를 발생시키는 원인이 될 가능성이 큼. 따라서, 반드시 ES6 에 도입된 const, let 키워드를 사용하여 변수를 선언한 다음 사용하는 것이 일반적 function foo() { x = 10; } foo(); console.log(x); // 10 /* - foo 함수가 실행 - foo 함수 내부에서 x를 선언한 것은 없기 때문에, 스코프 체인에 의해 변수 x를 검색한다. - 전역 스코프까지와 왔지만, x는 존재하지 않는다. -> 자바스크립트 엔진은 암묵적으로 전역 객체에 x 프로퍼티를 동적 생성한다. - 생성된 전역 객..

this 는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-referencing variable) this 를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있음. this 는 자바스크립트 엔진에 의해 암묵적으로 생성. [ 💡 this 바인딩 ] + 바인딩(binding) : 식별자와 값을 연결하는 과정 + this 바인딩 : this와 this가 가리킬 객체를 바인딩하는 것 객체 리터럴의 메서드 내부에서 this는 메서드를 호출한 객체. // 객체 리터럴 const circle = { radius: 5, getDiameter() { // 여기서 this 는 메서드를 호출한 객체 return 2 * this.radius; }, };..