본문 바로가기

분류 전체보기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.

티스토리툴바