프로그래밍 공부하기

재선언 재할당 Scope var 가능 가능 Function let 불가능 가능 Block const 불가능 불가능 Block JS를 사용할 때 var, let, const의 차이를 구분하여 사용하고 있는가? 막연하게 var는 예전 방식이니까 쓰지 말아야지 라는 생각을 갖고있진 않는가? 오늘은 var, let, const의 차이에 대한 이야기를 해보겠다. 이 포스팅을 요약하면 위의 표와 같다. 1. 선언과 할당 var a = 'str'; var a = 0; //OK let b = 'str'; let b = 0 //Error! 재선언이라는 것은 변수를 다시 선언한다는 의미이다. 위 코드처럼 var는 같은 이름의 변수를 여러번 선언할 수 있다. 그러나 let, const는 단 한번만 선언 가능하며 재 선언시 ..

블로킹과 논블로킹, 동기와 비동기 각각에 대해서 무엇인지는 설명할 수 있어도 블록킹과 동기가 무엇이 다른지에 대해 설명하기는 상당히 어렵다. 이들에 대해 정리해보고 차이점이 무엇인지 찾아보자. 1. Block / Non-Block const B = () => { console.log("나는 B야"); } const A = () => { B(); console.log("나는 A야"); } 2개 이상의 작업이 있을 때 한 작업이 다른 작업이 종료될 때까지 본인의 작업을 진행할 수 있는가에 대한 개념이다. 보통 직접 제어할 수 없는 I/O, 멀티스레드 동기화 등에 적용되는 개념이다. Block/Non-Block은 제어권의 이동이라는 개념으로 설명하기도 한다. 제어권이라는 것은 함수를 실행할 수 있는지를 의미한..

1. 함수형 프로그래밍 함수형 프로그래밍은 순수함수의 조합으로 프로그램을 작성하는 방식이다. 함수형 프로그래밍을 이해하기 위해서는 불변데이터, 순수함수, 1급객체라는 개념에 대한 이해가 필요하다. 1-1. 불변성(Immutable) 한 번 정해진 값은 바뀌지 않는다는 의미로, 객체 데이터를 다룰 경우 원본 데이터를 변경하지 않고 데이터의 복사본을 만들어 데이터를 처리하는 방식이다. 1-2. 순수함수 let cnt = 0; const pureFn = (a, b) => { //순수함수 return a + b; } const notPureFn = (a, b) => { //순수함수가 아님 return a + b + cnt; } 동일한 인자를 주면 동일한 결과를 리턴하며, 외부의 상태에 영향을 미치지 않는 함수이..

1. Dependency class A { constructor() { this.attr1 = 'a'; } } class B { constructor() { this.a1 = new A(); console.log(a1); } } 의존성(Dependency)란 두 모듈간의 연결을 의미한다. 위 코드의 B 클래스는 A 클래스를 포함하고 있다. 즉, B를 만들기 위해서는 A가 필요하다. 이 때 B는 A에 의존한다고 말한다. MyHome은 Cat 인스턴스를 생성하고 있으므로 MyHome은 Cat에 의존적인 클래스이다. 이 때 Cat 클래스 생성자에 파라미터가 추가되면 MyHome의 코드도 변경되어야 한다. MyHome과 Cat간에는 의존성이 있기 때문이다. 또한 MyHome에서 Cat 외의 다른 동물을 키우려면..

땅땅마켓에서 경매하기 새로고침을 해야 최신 데이터가 갱신되는 웹 서비스 보단 실시간으로 갱신되는 모습이 보이는 웹 서비스가 보기에 재미있고, 편하다. 웹에서 실시간 통신을 어떻게 구현할 수 있을까? 1. 실시간 통신을 위한 방법 HTTP 통신은 기본적으로 클라이언트의 하나의 요청에 서버가 한 번 응답하면 연결이 종료되는 비연결/단방향 특성이 있다. 이러한 환경 위에서 실시간 통신을 하기 위해 Polling, Streaming, Websocket이라는 방법이 존재한다. 먼저 Polling과 Streaming을 알아보자. 1) Polling 정기적으로 HTTP 요청을 전송하고 응답을 받는 방식이다. 따라서 데이터 변동이 없을 때도 불필요한 요청이 발생한다. 2) Streaming 서버와 클라이언트간 연결을 ..

나는 노래방가는 것을 좋아한다. 하지만 막상 노래방에 가면 어떤 노래를 불러야할지 고민하다 인기차트에 있는 노래만 부르고 오게 된다. 그런데 이 인기차트도 변동이 크지 않기 때문에 결국 노래방에 갈 때마다 같은 노래만 부르고오기 일쑤이다. 이러한 고민에서 나만의 노래번호 리스트를 만드는 프로젝트를 생각해냈고, 이 의견이 받아들여져서 퍼스트 프로젝트로 내 아이디어를 구현해보게 되었다. 이 프로젝트에서 핵심은 노래방 업체의 노래번호를 가져오는 것이다. 노래방 업체가 API를 제공해주면 좋겠지만, 그렇지 않기 때문에 노래방 업체가 제공하는 노래검색 결과를 스크래핑하여 이를 제공하는 스크랩 서버를 따로 만들기로 하였다. 1. URL 노래방 업체에서 노래제목을 검색한 결과는 위와 같다. 여기서 주목할 점은 URL..

TypeScript는 좀 더 엄격한 JavaScript 코드를 만들기 위한 언어이다. 좀 더 엄격한 규칙을 가진 TypeScript 코드를 컴파일 하면 JavaScript 코드가 생성된다는 의미이다. 먼저 TypeScript를 작성하기위한 세팅을 진행해보자. 1. Install TypeScript npm install typescript --save-dev yarn add typescript --dev 먼저 npm 혹은 yarn으로 typescript를 설치한다. { "compilerOptions": { "module": "commonjs", "target": "ES2015", "sourceMap": true, "outDir": "dist" }, "include": [ "index.ts" ], "excl..

이전에 만든 GraphQL 서버로의 요청은 ApolloClient를 통해 가능하다. apollo공식문서 와 강의를 참고하여 간단한 클라이언트를 구현해보자. 1. 세팅 npx create-react-app tour-client 먼저 React 프로젝트를 생성한다. npm install @apollo/client graphql @apollo/client와 graphql을 설치한다. 사실 몇 개월 전만 해도 apollo-boost를 사용했었는데 공식문서에 의하면 지원하지 않는 몇 가지 고급 기능이 있으므로 ApolloClient를 사용하라는 문구를 볼 수 있다. 또한 @apollo/react-hooks, react-apollo도 @apollo/client에 통합되었다고 한다. 2. Client 생성 impor..

기존 REST API를 GraphQL로 감싸는 방법은 다음과 같다. 이를 실습을 통해 직접 알아보자. 기존 REST API의 정보를 기반으로 스키마를 만든다. 기존 REST API에 정보를 요청하고 이를 반환하는 함수를 만든다. GraphQL의 리졸버에 2에서 만든 함수를 연결한다. 1. 스키마 작성 기존 API를 기반으로 스키마를 작성하여야한다. 나는 Tour API의 searchKeyword 에서 검색 부분을 GraphQL로 감싸보기로 하였다. searchKeyword의 응답메시지는 다음과 같다. Tour API의 응답 메시지는 위와 같다. 이 항목들을 모두 포함한 데이터가 GraphQL의 응답이 될 것이다. 원래라면 위 항목을 모두 스키마로 표현해야하지만 나의 경우 연습을 위한 것이므로 몇 가지 항..

나는 지금까지 JavaScript를 쓰면서 외부로 모듈을 내보낼 때 module.exports를 사용해왔다. 그런데 GraphQL 유튜브 영상 시청, React 실습을 수행하면서 다른 방식으로 모듈을 export하는 것을 알게되었다. 이를 계기로 이전에 써왔던 ES5 방식과 ES6 방식의 차이를 비교해보려고 한다. 1. ES5 1) module.exports ES5는 기본적으로 CommonJS module System을 사용한다. 따라서 ES5의 모듈 import/export 방식은 CommonJS의 방식과 동일하다. ES5에서 모듈을 export하는 첫 번째 방식은 module.exports에 export 하고 싶은 하나의 모듈을 참조시키는 것이다. import 시에는 require를 사용하여 모듈을 ..