프로그래밍 공부하기

성능이슈를 맞닥드렸을 때 어떤 생각을 갖고 해결해나가야하는가에 관한 내용이다. 성능개선을 어떻게 시작하고 무엇을 고려해야할지 큰 그림을 어떻게 그려야할지 감을 잡게 해주는 강연이었다. 1. 성능 분석가의 관심사 서버 성능 분석가: 서버가 얼마나 많은 요청을 처리할 수 있는가(Transition Per Seconds) 사용자 입력에 얼마나 빠르게 반응할 수 있는가(Loading An Interaction) 초기 로딩 속도: 얼마나 초기 페이지를 빠르게 볼 수 있는가 인터렉션 속도: 애니메이션의 매끄러운 동작, 사용자 입력 시 버벅거림의 정도 2. 성능 개선 과정 1) 대상 선정하기 성능 개선을 했을 때 사용자의 만족도가 가장 올라갈 화면을 찾아 개선하는 것이 가장 효율적이다. 따라서 서비스에서 사용자가 가..

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

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

새로운 CSS 스펙에 대해 소개하는 영상이다. 최소 1년 전 영상임을 감안하자. 1. scroll-snap 기존 스크롤은 정밀도가 부족해서 스크롤 휠을 내렸을 때 애매한 위치에 멈춰있는 경우가 있고, 스크롤 위치에 따라 애니메이션이 보이도록 구현한 경우 사용자가 애니메이션을 못 볼수도 있었다. scroll-snap은 사용자가 스크롤조작을 마쳤을 때 어느 위치에 스크롤이 위치할지 오프셋이 조절 가능하다. 이를 이용하면 JavaScript 없이 캐러셀 UI를 만들 수 있다. 2. focus:within 기존 드랍다운메뉴는 마우스를 hover하면 하위메뉴가 펼쳐지지만 키보드(focus)로는 조작이 되지 않았다. 부모요소가 포커스를 잡고있을 때 하위메뉴를 보여주기 위해선 부모메뉴에서 이동하는 포커스 흐름을 잃고..

요즘엔 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는 현실에서 물건을 담고 이동시키는..

HeapSort란 최대 힙 트리나 최소 힙 트리를 만들어 정렬하는 방법이다. 최대 힙은 루트가 트리의 값들 중 가장 큰 값을 갖고, 최소 힙은 루트가 가장 작은 값을 갖는다. 위의 트리는 [0, 2, 1, 5, 3, 4, 8] 이라는 배열과 동일하다. 1. 요소를 추가할 때 새로운 요소가 추가되면 우선 가장 트리의 가장 마지막으로 넣어진다. 그 후 부모노드와 비교해서 작으면 부모와 위치를 교환하고, 이를 반복해나간다. 노드의 자식은 2개까지 가질 수 있다. 따라서 n번째 노드의 부모는 Math.floor((n-1) / 2) 와 동일하다. 예를 들어 배열 인덱스가 0부터 시작하고 값이 [0, 1, 2]일 때 최상위 노드는 0이며, 자식으로 1과 2를 갖는다. 0 = f(1) = f(2) 를 만족시켜야 하므..

팀원이 새롭게 서버를 배포하다가 502에러가 뜨고, 로드밸런서 리스너의 상태도 UnHealthy인 것을 발견했다. 502 에러는 왜 발생하는 것일까.. 문서를 찾아보니 503 때와는 달리 원인이 엄청 다양하다. 혼란스러우니 502 코드가 애초에 무엇을 의미하는지 알아보았다. 서버로부터 유효하지 않은 대답을 받은 것이 502라고 한다. 다른 글도 더 살펴보니 내가 만든 Node.js 서버가 응답을 잘못주면 502 에러가 날 수 있다고 한다. 그런데 생각해보면 나는 Node.js 서버에 GET / 에 대한 응답을 주지 않았다. 그래서 응답이 잘못된거라 생각하고 502 에러를 띄우는건가? 하는 느낌이 왔다. 로드밸런서 설정을 더 뒤져보니 서버의 / 경로에 대한 요청으로 HealthCheck를 하고 있었다! /..

땅땅마켓에서 경매하기 새로고침을 해야 최신 데이터가 갱신되는 웹 서비스 보단 실시간으로 갱신되는 모습이 보이는 웹 서비스가 보기에 재미있고, 편하다. 웹에서 실시간 통신을 어떻게 구현할 수 있을까? 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 생성자..