프로그래밍 공부하기

최근 React를 실습하였는데 블로그에 따라 npm으로 설치하는 사람도 있고 npx로 설치하는 사람도 있었다. 두 명령어가 무엇이 다른지 알아보기 위해 검색하던 중 좋은 블로그 글을 발견하여 해당 내용을 실습하고 정리해본다. 1. JavaScript npm과 npx를 알아보기에 앞서 JavaScript에 대해 알아보자. JavaScript 엔진, JavaScript 런타임, Node.js는 다음과 같이 정의할 수 있다. JavaScript Engine : 자바스크립트 코드를 실행하는 프로그램/인터프리터 ex. V8 JavaScript Runtime : 자바스크립트 코드로 만든 프로그램을 실행할 수 있는 환경 ex. 크롬 브라우저(V8), Node.js(V8) -Chrome 런타임은 V8엔진과 DOM AP..

1. API 다운로드 링크에서 Poke API를 찾아 Poke API의 Repo로 이동한 후 자신의 깃 저장소로 Pork 한다. 깃 저장소를 내 로컬로 클론한 후 Visual Code로 연다. npm install package.json이 있는 위치에서 npm install로 필요한 Dependency를 설치한다. "scripts": { ... "start": "node --experimental-json-modules src/index.js", }, "type": "module" package.json에서 scripts의 start 항목을 위와 같이 변경하고 type 항목을 추가하고 값을 "module" 로 준다. 이를 지정하지 않으면 자동으로 CommonJS로 실행되어 ES6 문법(import 등)을..

1. 공용 GraphQL API GraphQL 데이터 Query 요청을 실습하기 위해 공용 GraphQL API를 사용해보자. 공용 GraphQL API는 github.com/APIs-guru/graphql-apis에서 찾아볼 수 있다. 나의 경우 포켓몬고 정보를 기반으로 만든 PokeAPI를 사용하였다. GraphQL은 Playground나 GraphiQL 같은 내장 UI를 제공하며 우측 Docs 혹은 Schema 탭에서 API 문서처럼 데이터 형식에 대한 설명을 자동으로 제공한다. 따라서 처음 보는 API일지라도 Docs 탭의 설명을 보며 원하는 데이터를 요청할 수 있다. 2. Query 기본 PokeAPI의 Docs 탭을 보고 위와 같이 그림으로 나타낼 수 있다. 먼저 root 노드인 query는 ..

웹에서 데이터를 요청하고 처리하는 가장 대표적인 방식은 REST이다. RESTful 아키텍처란 데이터 처리를 크게 GET, PUT, POST, DELETE로 나누고(Method) 사용자가 어떤 데이터(URL)에 어떤 처리(Method)를 원하는지 요청하여 서버가 이를 제공하는 방식이다. 사용자가 요청할 때마다 필요한 정보를 제공하므로 쿠키, 세션에 정보를 저장할 필요가 없다. 최근 데이터 처리량이 증가하면서 REST 방식을 대체할 수 있는 Graph QL이라는 방식이 대두되고 있다. 1. REST와 GraphQL 최근 컴퓨터 뿐만 아니라 모바일, 모든 사물에서 웹에 접근 가능해 지면서 서버에는 점점 많은 데이터 요청이 들어오게 되었다. 이 때 REST 방식의 경우 데이터 요청방식과 응답방식이 정해져 있기..

1. Callback 코드는 기본적으로 순차적으로 실행된다. 그런데웹 서버로 보낸 요청에 대한 응답을 처리하는 코드를 작성해야할 경우 서버로 부터 응답이 언제 올지 알 수 없어 코드를 작성할 때 어려움이 생긴다. 이러한 상황에서 사용할 수 있는 것이 콜백함수이다. 콜백함수란 어떤 함수의 인자로 전달되는 또다른 함수이다. 콜백함수를 사용하면 위와 종료 타이밍을 맞추기 어려운 함수가 실행 된 다음에 콜백 함수가 실행되도록 실행 순서를 조정할 수 있다. const getDataFromFile = function (filePath, callback) { fs.readFile(filePath, 'utf-8', (err, data) => { if (err) { callback(err, null); } else { ..

정규표현식 또는 정규식이란 문자열에 나타나는 특정 문자조합과 대응시키기 위해 사용되는 패턴이다. 예를 들어 회원가입 웹페이지에서 사용자가 입력한 비밀번호, 전화번호 등이 형식과 일치하는지 등을 파악할 때 사용할 수 있다. 1. 정규식의 구성 JavaScript의 정규식은 위와같은 구성으로 되어있다. 정규식 리터럴(슬래쉬"/"로 감싸는 패턴) 안에는 사용할 정규식이 들어가 있고, 정규식 리터럴 바깥 끝에 플래그를 덧붙여 주는 형식이다. 플래그의 경우 6가지 종류가 있으나 보통 전역 검색을 의미하는 g를 많이 사용한다. 2. 정규식의 사용방법 let str1 = "ihl: 010-123-4567"; str1.match(/\d+/g); // ["010", "123", "4567"] let str2 = '010..

VS에서 JavaScript를 웹브라우저를 사용하지 않고 디버깅하기 위해선 디버깅 시 발생하는 .vscode > launch.json파일을 다음과 같이 변경하면 된다. { "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "vanila js debugging", "program": "${workspaceFolder}/test.js" } ] } 그 후 중단점을 걸고 좌측의 벌레모양이 있는 아이콘을 클릭하면 Chrome 개발자도구처럼 값들을 확인할 수 있다.

상속을 구현하는 방법은 prototype을 이용하기, Class를 이용하기 2가지이다. 사실 Class를 사용한 상속과 prototype을 사용한 상속은 동일하다. prototype의 복잡한 과정을 Class라는 키워드를 통해 간단하게 구현할 수 있다는 점만이 다른 것이다. 1. Prototype function Animal(name, sound){ this.name = name; this.sound = sound; } Animal.prototype.cry = function(){ console.log(this.sound); } const Pigeon = function(name){ //Animal(name, '구구') //3. this 전달 Animal.call(this, name, '구구') } //..

인스턴스란 클래스 등을 이용하여 만들어진 구체적인 실체이다. 클래스가 설계도라면 인스턴스는 설계도를 이용하여 만들어진 실제 제품이라고 볼 수 있다. 그렇다면 객체는 인스턴스일까? 객체는 소프트웨어 세계에 구현할 대상으로 소프트웨어 관점에서는 개념적인 것(Concept)이다. 따라서 클래스로 만들어진 구체적인 실체를 인스턴스라고 부르는 것이 더 정확한 표현이다. 하지만 개념적으로 인스턴스는 객체에 포함되므로 클래스로 만들어진 구체적인 실체를 객체라 부르는 것도 틀린 말이 아니다. JavaScript에서 인스턴스를 만드는 방법은 Class 외에 4가지 방법이나 존재한다. 1. Functional const Plant = function(height){ const someInstance = {}; someIn..

JavaScript는 기본적으로 Class라는 개념이 없다.(ES2015부터 추가되었으나 문법적 양념일 뿐 JavaScript여전히 프로토타입 기반의 언어으로 클래스 기반으로 바뀌었다는것은 아니다.) 그 대신 프로토타입을사용하여 상속을 구현하고 있다. 이 때 프로토타입은 prototype이라는 property인 prototype object와 자신을 만들어낸 객체의 원형을 가리키는 __proto__이라는 숨은 링크라는 2가지 의미를 갖고있다. 1. 함수의 객체선언: this vs prototype 함수를 선언하면 함수에 생성자 자격이 부여되어 new 키워드를 사용하여 해당 함수의 형식을 사용하는 객체를 만들 수 있다. 그 예시는 다음과 같다. function Circle(radius){ this.radi..