프로그래밍 공부하기

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. 웹팩의 도입배경 1) 모듈 //변수 num이 포함된 a.js //변수 num이 포함된 b.js 웹 개발을 하다보면 CSS, JS 등 다양한 종류의 리소스 파일들을 여러 개 생성하게 된다. 만약 하나의 html 파일에서 2개의 JS파일이 필요하다 생각해보자. 이 경우 script 태그를 2개 사용하면 된다. 그런데 위와 같이 불러온 JS파일 두 개가 모두 같은 이름의 변수를 사용한다 생각해보자. console.log에 찍히는 num은 어떤 JS파일의 num이 될까? script태그는 위와 같이 코드의 예상치 못한 충돌을 발생시킬 수 있다. //a.js const num = 1; export default num; //b.js const num = 2; export default num; 이러한 충돌문..

multer는 form-data를 다루기 위한 node.js 미들웨어이다. multer로 서버에 파일 업로드를 구현해보자. const multer = require('multer'); const path = require('path'); const upload = multer({ storage: multer.diskStorage({ destination(req, file, cb) { cb(null, 'uploads/'); }, filename(req, file, cb) { const ext = path.extname(file.originalname); cb(null, path.basename(file.originalname, ext) + Date.now() + ext); }, }), limits: { f..

2020년도 전 세계의 프론트엔드 개발자 4500명을 대상으로한 설문에 의하면 3년 안에 사라질 것 같은 솔루션 1위로 Redux가 뽑혔다. 조사에 의하면 이미 상태 관리를 위해 React Context API 및 Hooks를 사용하는 비율이 Redux를 추월하였다. 앞으로 React의 상태관리는 Context API로 대체되는 것일까? 이러한 상황에서 2020년 5월 FaceBook에서 Recoil이라는 상태관리 솔루션을 발표하였다. Recoil을 한 번 사용해보자. 내가 Recoil로 만들 것은 버튼을 누르면 카운트가 증가하거나 감소 혹은 0으로 리셋되는 간단한 카운터이다. 1. 초기 세팅 import React from 'react'; import { RecoilRoot } from 'recoil'..

웹 로딩 속도는 고객 경험에 매우 중요한 요소이다. KissMetrics 연구에 의하면 47%의 소비자는 웹 페이지가 2초 이내에 로드되기를 기대하며 3초가 되면 40%의 소비자가 웹 페이지를 이탈한다고 한다. 기사에 의하면 웹 로딩 속도 1초가 빨라지면 아마존 판매량이 1%증가 한다고 한다. 개발자가 웹 성능을 높이는 방법은 무엇일까? 우선 웹 성능 결정요소는 크게 로딩 성능과 렌더링 성능으로 나뉜다. 로딩 성능은 필요한 리소스를 불러오는 것이고 렌더링 성능은 불러온 리소스를 화면에 보여주는 것이다. 이 글에선 로딩 성능을 최적화하는 Code Split을 해보려 한다. 1. 페이지 분석 최근 프로젝트인 땅땅마켓의 Search페이지에서 개발자 도구의 퍼포먼스 탭을 이용하여 분석해보았다. 그 결과 지금 당..

데스크탑 뿐만 아니라 모바일, 태블릿 등의 기기가 보편화 되면서 사람들은 웹 사이트를 각 기기에 따라 보기 편한 형태로 제공하는 반응형 웹의 필요성을 느끼게 되었다. 1. 적응형 웹과 반응형 웹 모바일 환경에서 네이버에 접속하면 주소가 m.naver이다. 네이버 홈화면은 적응형 웹이다. 적응형 웹이란 클라이언트의 기기 정보를 미리 받아 조건 별로 다른 리소스를 보여주는 것이다. 즉, 데스크탑, 모바일, 태블릿 기기마다 별도의 템플릿과 리소스를 작성하는 것이다. 다소 번거롭지만 구축 해놓으면 해당 기기에 맞는 콘텐츠만 다운로드 받으므로 반응형 웹에 비해 로드 속도가 빠르다. 반응형 웹은 기기의 조건에 상관없이 같은 리소스를 보여주되 CSS를 이용하여 브라우저 크기에 따라 레이아웃이 달라지는 형태이다. 예를..

요즘엔 AWS 등 클라우드 환경에 배포를 많이 하지만, 온프레미스 환경(자체적으로 보유한 전산실)을 사용하는 경우도 있다. 이번엔 배포를 로컬의 라즈베리파이에 하고 포트포워딩과 DDNS를 이용해보자 1. 포트포워딩 포트포워딩을 사용하면 다른 사람이 내 ip:포트 로 접속하였을 때 공유기에 물려있는 PC들 중 웹서버가 있는 라즈베리파이로 자동 접속하게 설정하게 만들 수 있다. 즉, 포트포워딩이란 컴퓨터에서 특정 통신 포트를 개방하여 통신이 되도록 하는 것이며, 방화벽의 특정 포트를 내부의 내부망의 특정 호스트의 특정 포트로 연결하는 것이다. 1) 공유기 설정페이지 접속 우리 집은 KT이므로 KT공유기 설정 페이지인 http://172.30.1.254/로 접속한다. 이 때 로그인을 해야하는데 따로 설정하지 ..

백엔드를 공부하다보면 Docker라는 말을 한 번쯤은 들어보았을 것이다. Node.js의 2016년 설문조사에 의하면 응답자 중 45%가 컨테이너 기술을 Node.js와 함께 사용한다고 답했다. 웹 분야 뿐만 아니라 IoT 개발자 중 58%가 Node.js와 Docker를 함께 사용한다고 답했다. 즉, Node.js와 Docker는 함께 사용하기에 좋은 조합이라 말할 수 있다.(이는 MSA와 관련이 크다.) 1. Container & Image Docker란 Container를 사용하여 응용프로그램을 더 쉽게 만들고, 배포하고, 실행할 수 있도록 설계된 도구이다. Docker를 이해하기 위해선 Container와 Image라는 개념을 알고 있어야 한다. Container는 현실에서 물건을 담고 이동시키는..

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

React에서 상태관리를 하기 위한 대표적인 라이브러리는 Redux이다. 리덕스는 위와 같이 Store, Dispatch, Reducer, Action으로 되어있어 하나의 상태를 저장하는 리덕스도 4개의 파일이 나오게되며 기존 리덕스에 하나의 액션을 추가하려면 3개의 파일을 수정해야한다. 이 것이 불편하다고 생각했던 사람들은 구조가 아닌 기능을 기준으로 파일을 분리하기로 하였다. 이 것이 Ducks 패턴이다. 1. 규칙 Ducks 패턴은 하나의 상태에 필요한 액션 타입, 액션생성자 함수, 리듀서를 한 파일에 저장한다. 따라서 하나의 액션이 추가되면 하나의 파일이 추가될 뿐이다. 구체적인 규칙은 다음과 같다. 반드시 reducer란 이름의 함수를 export default 한다. 반드시 action 생성자..