본문 바로가기

전체 글50

[AWS EC2 인스턴스 모니터링] Node Exporter, Prometheus, Grafana (1) 이번 포스팅은 사내 모니터링 서비스 구축하며 삽질하며 겪은 경험을 공유하는 포스팅입니다. AWS EC2에서 제공하는 CloudWatch 모니터링 서비스의 비용이 부담되기 때문에 Node Exporter + Prometheus + Grafana 조합으로 EC2 인스턴스의 Health Check가 가능한 시각화 대시보드를 구성합니다. > AWS Instance Terminal sudo apt-get update wget https://github.com/prometheus/prometheus/releases/download/v2.37.0/prometheus-2.37.0.linux-amd64.tar.gz wget https://github.com/prometheus/node_exporter/releases/d.. 2022. 11. 8.
[알고리즘] 개미수열 (읽고 말하기 수열) 설명 개미수열이란, 읽고 말하기 수열 개미수열 우리나라에서는 소설 '개미'에서 소개되면서 유명해졌기 때문에 "개미 수열" 이란 이름으로 알려져 있다. 1, 11, 12, 1121, 122111, 112213, .... 이 수열은 앞의 수를 연속된 같은 수의 개수로 묶어서 읽는 방식이다. 예를 들면, - 1을 1이 1개 : 11 - 11을 1이 2개 : 12 - 12를 1이 1개 2가 1개 : 1121 - 1121을 1이 2개 2가 1개 1이 1개 : 122111 - ... 성질 - 22로 시작한 수열은 22, 22, 22, ... 로 길이가 더이상 늘어나지 않는다. - 수열에서 1, 2, 3이 아닌 수는 등장하지 않는다 개미수열과 비슷한 원리를 가진 알고리즘으로는 반복 길이 부호화(Run-length e.. 2022. 10. 6.
코드분할(Code Spliting) / 동적로딩(React.Lazy, Suspense) / 에러바운더리(Error Boundary) 프로젝트가 빌드업됨에 따라 많은 로직들과 Import 라이브러리들이 증가하게 마련이고 우리는 렌더링 최적화를 고민해야하는 시점과 마주하게 된다. 백엔드에서 진행할 수 있는 API 최적화와 별게로 프론트엔드에서도 최적화 할 수 있는 만큼은 진행하는 것이 더 좋은 사용자 경험을 제공한다. 하지만 웹서비스라는 것은 사용자가 어느정도 페이지 로딩이 지연되어도 알게모르게 이해하고 넘어가는 유저들이 많다. 이 정도 기다림 쯤이야.. (본인 포함...) 하지만 그 기다림에도 한계가 분명 있기 때문에 우리들은 개선을 해야한다. 프론트엔드 성능 측정 도구로 크롬 Lighthouse를 통해 성능지표를 확인한다. SSR 방식이 아닌 서비스는 번들링 된 자바스크립트 파일의 분할을 권고한다. 리액트에서는 Lazy, Suspen.. 2022. 9. 28.
[번역] useMemo, useCallback 제대로 알기 리액트 개발을 하다보면 useMemo, useCallback 이 두 가지 훅 사용에 대한 혼란을 겪을때가 있다. 이 포스팅은 이 훅들에 대해 정확히 알아 이 혼란을 줄이기 위해 번역하였다. 썸네일 제너레이터 - Thumbnail Generator useMemo useMemo의 기능은 렌더링 사이에서 계산된 값을 기억 하는 것이다. 리액트가 하는 주된 일은 UI를 어플리케이션 상태와 동기화 하는 것이고 이를 수행하는데 사용하는 도구가 리렌더링 이다. 각 리렌더링은 상태를 기반으로 하여 주어진 순간에 어플리케이션의 UI가 어떻게 보여야 하는지에 대한 스냅샷(*) 찍는다. *스냅샷 : 사진으로 비유하자면 각 사진은 모든 상태 변수에 대해 특정 값이 주어졌을 때, 사물이 어떻게 보이는지 포착하는 것 각 리렌더링.. 2022. 9. 23.
VanilaJS로 SPA 개발해보기 (No Framework) 프레임워크 없이 순수 바닐라JS로 SPA(Single Page Application)을 개발해보자. 포스팅 된 프로젝트는 아래 깃헙(github)에서 확인하실 수 있습니다. https://github.com/awesome-sh/vanila-spa GitHub - awesome-sh/vanila-spa: Vanila JS Single Page Application (No Framework) Vanila JS Single Page Application (No Framework). Contribute to awesome-sh/vanila-spa development by creating an account on GitHub. github.com 주요 기능 SPA의 주요 특징 중 하나가 Routing 처리라고 .. 2022. 2. 15.
썸네일 생성기 (Thumbnail Generator) 블로그 등 썸네일이 필요할 때 웹에서 간단하게 썸네일을 만들 수 있도록 도와주는 웹서비스입니다. 크기, 텍스트, 배경 설정 3가지 기본적인 기능을 제공합니다. 빌드업을 통해 추가기능 업데이트 예정입니다. 기술스택 : React 17.0.x 상태관리 : Context API - 썸네일 생성기 바로가기 https://thumbnail-generator-bay.vercel.app/ Awesome Thumbnail Generator - Blog Post, Etc. thumbnail-generator-bay.vercel.app 크기 설정 텍스트 설정 크기 / 자간 / 굵기 / 색상 / 글꼴을 설정할 수 있습니다 배경 설정 단색, 그라디언트, 이미지업로드를 통해 배경을 설정할 수 있습니다 드래그 앤 드랍 텍스트 항.. 2022. 2. 8.
[Next.js] getStaticProps, getServerSideProps SG / SSR의 개념 SG : Static Generation SSR : Server Side Rendering Next는 브라우저 렌더링 시, 기본적으로 Pre-rendering(사전렌더링)을 한다 Pre-rendering이란, 각 페이지들을 사전에 미리 HTML 문서로 생성하여 가지고 있는 것이다. 이 말을 리액트와 비교해 보자면 아래와 같다. 리액트에서 CSR 방식은 번들링 된 JS 가 클라이언트 단에서 모든 렌더링을 담당했다. 하지만, Next의 Pre-rendering 시스템에서는 `빌드타임(Build Time)` 에서 해당하는 페이지 별로 각각의 HTML 문서를 미리 생성해서 가지고 있다가 서버로 해당페이지에 대한 요청이 들어올 때 알맞은 페이지를 반환해준다. No Pre-Rendering,.. 2022. 1. 19.
트리 쉐이킹 (Tree Shaking) 이란 무엇인가 트리 쉐이킹 (Tree Shaking) 사용하지 않는 코드를 제거하는 방식을 말한다. (Rollup, Webpack에서도 찾아볼 수 있다) 나무를 흔들면 죽은 잎사귀들이 떨어지는 모습에 착안해 Tree-shaking 이라고 명명하였다고 한다. 트리 쉐이킹을 적용할 지점을 찾아보자 사용하는 모듈로부터 전체를 Import 하지 않고 사용하는 기능만 {} 부분적으로 Import 한다. import utils from 'utils-lib' let count = 0; const handlePlus = (a) => { count += a }; utils.parseResult(handlePlus(5)); // '현재까지 누적된 카운트는 : (a)' 누적값 앞뒤로 스트링 메시지가 감싸져 리턴값을 돌려주는 utils.p.. 2022. 1. 12.
[React] 리액트로 만드는 파일업로더 사내에서 그동안 FTP에 직접 붙어 이미지를 업로드한 후 파일서버 URL을 직접 적어서 채용공고 등 외부공유가 필요한 이미지파일을 사용해왔다. 이미지 하나 올리고 공유하는 절차가 너무 번거로웠다. (= 이제 이미지 파일을 사내채팅방에 돌림빵하지 않아도 된다) 예전부터 이 프로세스를 간소화 할 수 있는 웹을 만들어야겠다 생각 하던중 팀내 백엔드 개발자분과 소통하여 개발하기로 결정했다. 모습은 위와 같이 이미지 선택 -> 업로드 -> 이미지 URL 응답 -> 클립보드 API 가 전부라고 할 수 있겠다. 비록 작은 프로젝트지만 사내에서 유용하게 쓰였으면 하는 바램이다. 이번에 픽한 컬러는 #766EDA , #98D8F3 Custom Components 기능적인것 보다도 UX 관점에서 조금 더 신경쓴 프로젝트였.. 2022. 1. 6.
Toy Project) FSH - Deploy 0.2 2021.12.21 - [Portfolio] - Toy Project) FSH - Deploy 0.1 Toy Project) FSH - Deploy 0.1 Find Specific Hospital 경기도 특수 수술/시술 가능한 병원 찾기 사내 프로젝트가 어느정도 마무리 되어가는 시점에 경기데이터드림 공공API를 활용하여 사이드프로젝트를 진행해보고자 시작하 sihus.tistory.com 지난번 포스팅에서는 0.1 최초 배포된 FSH 프로젝트를 소개했습니다. Update 0.2 버전 배포에서는 즐겨찾기 기능을 추가하였습니다. 병원 목록에서 '별' 아이콘을 클릭하여 하단 네비게이션 바에 별 메뉴로 진입하면 즐겨찾기에 추가한 병원을 따로 볼 수 있습니다. 구글 플레이스토어 준비 차기 0.3 버전에서는 현재 웹.. 2021. 12. 30.
Toy Project) FSH - Deploy 0.1 Find Specific Hospital 경기도 특수 수술/시술 가능한 병원 찾기 사내 프로젝트가 어느정도 마무리 되어가는 시점에 경기데이터드림 공공API를 활용하여 사이드프로젝트를 진행해보고자 시작하게 되었습니다. 수 많은 데이터 목록 중, 특수 수술 및 시술이 가능한 병원들을 한눈에 볼수 있으면 좋겠다는 생각이 들어 경기도 내 특수수술 / 시술이 가능한 병원 데이터를 선택하였습니다. 혈액투석, 체외충격파쇄석술, 사시수술, 인공와우이식술, 측두하악관절 자극요법, 인공심박동기이식술, 부정맥고주파 절제술, 심율동전환제세동기 거치술, 손/발가락 접합술, 망막수술, 화상치료, 제왕절개 후 자연분만병원, 정맥류 수술, 구순구개열, 안와골절정볼술 이렇게 15항목에 병원데이터를 제공합니다. (이름이 너무 어렵..).. 2021. 12. 21.
Hydrate 이해하기 Hydrate Server Side 단에서 렌더링 된, 정적 페이지와 번들링된 JS파일을 클라이언트에게 보낸 뒤 클라이언트 단에서 HTML 코드와 JS 코드를 서로 매칭시키는 과정 1. Write site in React 2. Create build for production using ReactDOMServer, a server-side React API to generate HTML from React. 3. On Initial Load HTML generated from the server is displayed 4. ReactDOM.hydrate(), hydrates the HTML page rendered from the server with JavaScript 이 과정을 이해하기 위해 Reac.. 2021. 10. 20.
TCP와 UDP 개념과 특징 및 차이점 TCP & UDP TCP와 UDP는 OSI 표준모델과 TCP/IP 모델의 "전송계층" 에서 사용되는 프로토콜이다 "전송계층"은 송신자와 수신자를 연결하는 통신 서비스를 제공하며 IP에 의해 전달되는 패킷의 오류를 검사하고 재전송 요구 제어등을 담당하는 계층이다. (= 데이터의 전달을 담당하는 영역) TCP와 UDP는 1. 포트번호'를 이용하여 주소는 지정 2. 데이터 오류검사를 위한 체크섬이 존재 이 두가지 공통점을 가지고 있지만 정확성(TCP)을 추구할지 신속성(UDP)을 추구할지를 구분하여 나뉜다. TCP - 데이터를 중요하게 생각하여 확실히 주고받고 싶을 때는 TCP (Transmission Control Protocol) 사용 - TCP는 통신할 컴퓨터끼리 '보냈습니다', '도착했습니다' 라고 서.. 2021. 10. 18.
이벤트 루프 (Event Loop) 정확히 알기 (2) 지난 포스팅에서는 이벤트루프에 대해 간략하게 알아보았다. 2021.10.15 - [Front/JavaScript] - 이벤트 루프 (Event Loop) 정확히 알기 (1) 이벤트 루프 (Event Loop) 정확히 알기 (1) 자바스크립트의 특징 중 하나는 '단일 스레드' 기반의 언어입니다. 스레드가 하나라는것은 한번에 하나의 작업만 처리할 수 있다는 말이기도 한데 실제로 브라우저에서 자바스크립트가 사용되 sihus.tistory.com 이번 포스팅에서는 이벤트루프의 동작에 대해 더 살펴보고자 한다. 지난 포스팅에서 이벤트루프란 '단일 호출 스택'을 사용하는 자바스크립트 엔진과 상호 연동하기 위해 사용하는 장치' 라고 설명하였다. 그럼 어떻게 엔진과 상호연동하는지 알아보자. 지난 포스팅에서 확인한 브라.. 2021. 10. 17.

티스토리툴바