분류 전체보기

컨퍼런스 & 밋업 참여 후기

AWSKRUG 플랫폼 엔지니어링 모임 후기 (2023/11/21)

2023년 11월 21일, AWSKRUG에서 처음으로 플랫폼 엔지니어링 모임이 열렸습니다. 플랫폼 엔지니어링이라는 단어를 보자마자 이거다! 환호하며 바로 신청했고, 기다리던 모임에 참석했습니다. 그리고 모임에서 듣고 나눴던 이야기를 잊지 않도록 집에 들어오자마자 바로 정리해보았습니다. 플랫폼 엔지니어링이란 무엇인가? 플랫폼 엔지니어링이란? 플랫폼 엔지니어링은 클라우드 네이티브 시대에 소프트웨어 엔지니어링 조직의 작업을 촉진하고 가속화하기 위한 플랫폼을 설계하고 제공하는 분야입니다. 이는 모든 부분과 그에 대한 역량, 즉 사람, 프로세스, 정책, 기술을 포괄합니다. 다시 말해, 플랫폼 엔지니어링의 목적은 "소프트웨어 엔지니어링 조직이 일을 더 빠르게 잘 할 수 있도록 하는 것"이고, 그 문제를 "플랫폼"을..

DevOps

해커톤에서 10분에 한 번 배포하기 (해커톤을 위한 DevOps)

생애 첫 해커톤으로 Unit에서 운영하는 10번째 Unithon에 참여했습니다. 비록 상은 받지 못했지만, 그 뒤에서 치열하게 수많은 피쳐를 만들어내고 안정적인 개발 프로세스를 만들어내기 위해 노력했던 이야기를 풀어보려 합니다. DevOps 공개 레포지토리 보러 가기 : https://github.com/Unithon-10th-team8/devops GitHub - Unithon-10th-team8/devops: gitops & infrastructure repository gitops & infrastructure repository. Contribute to Unithon-10th-team8/devops development by creating an account on GitHub. github.c..

DevOps

Vultr Kubernetes Engine 사용기

정말 저렴한 가격으로 관리형 쿠버네티스 엔진을 사용할 수 있는 Vultr Kubernetes Engine을 소개한다. Vultr란? https://www.vultr.com/ SSD VPS Servers, Cloud Servers and Cloud Hosting Vultr Global Cloud Hosting - Brilliantly Fast SSD VPS Cloud Servers. 100% KVM Virtualization www.vultr.com Vultr는 흔히 VPS(Virtual Private Server) 서비스를 제공하는 업체로 많이 알려져있다. 기존에 Cafe24같은 호스팅 서비스에 비하여 단독 서버를 제공해서 다르게 불리는 걸로 알고 있다. EC2같은 서비스는 비슷하지만 지향점이 조금 다르..

Frontend

Next.js에서 recoil-persist 사용하기

Recoil이란? Recoil A state management library for React. recoiljs.org Recoil은 리액트를 위한 상태관리 라이브러리이다. NPM Trends를 살펴봤을 때 (2023.07 기준) 다른 라이브러리들에 비해 다운로드 수가 다소 낮은 수준이지만, 그럼에도 불구하고 편리한 사용성으로 적지 않은 관심을 받고 있는 라이브러리이다. 이번 글은 Recoil을 소개하는 글이 아니니 자세한 설명은 생략하겠다. Next.js와 Recoil Next.js와 Recoil 라이브러리 자체는 잘 어울리는 편이다. Magic의 영역이 다소 있지만 사용법 자체가 워낙 직관적이고, Next.js에서의 일반적인 개발 흐름에 잘 맞는다. SSR 환경에서도 잘 동작하고... 그런데 만약에..

Backend

NestJS Devtools 사용법 및 간단 후기

Documentation | NestJS - A progressive Node.js framework Nest is a framework for building efficient, scalable Node.js server-side applications. It uses progressive JavaScript, is built with TypeScript and combines elements of OOP (Object Oriented Programming), FP (Functional Programming), and FRP (Functional Rea docs.nestjs.com 기능 소개 기능은 크게 5가지이다. 1. Dependency Graph (Modules, Classes 의존성 조회) 2...

개발 기타

코드앤버터로 프로덕션 환경에서 우아하게 팝업 관리하기

코드앤버터 - 팝업을 쉽고 빠르게! 웹사이트를 꾸미는 가장 쉬운 방법 코드를 작성하지 않고 웹사이트에 필요한 기능을 쉽고 빠르게 추가하세요! www.codenbutter.com 최근에 가장 만족하며 사용한 SaaS 프로덕트 중 하나여서 사용기를 공유해보려 한다. 코드앤버터란? 코드앤버터는 노코드 팝업 솔루션이다. 퍼플아이오에서 만들었는데, 이쪽은 이커머스 관련 스타트업이다. 아마 이커머스쪽 서비스를 만들면서 사용된 컴포넌트와 기술을 활용해 완전관리형 팝업 서비스를 런칭한 걸로 보인다. 원래도 퍼플아이오를 들어보긴 했었다. Purple Admin UI라고 Next와 Tailwind 기반으로 만든 어드민 템플릿이다. 이게 한 때 깃허브에서 유행했었는데, 나도 한 때 PHP로 백오피스 작업들을 많이 해봤기도 ..

Frontend

Next.js SSR 환경에서 Mantine 사용하기

Mantine You've submitted a pull request Fix incorrect notification message (#187) 34 minutes ago mantine.dev Mantine이란? Mantine은 React에서 사용할 수 있는 UI Component 라이브러리이다. 2023년 7월 기준 v6까지 출시되었으며, 지속적으로 업데이트되고 있다. Chakra UI와 컨셉이 굉장히 유사한데, 깔끔하고 직관적인 디자인에 풍부한 컴포넌트, 다양하고 유용한 훅 제공 등, 단순 UI 컴포넌트뿐 아니라 종합 라이브러리 역할도 겸하는 것 같다. 여러 프레임워크/라이브러리들을 지원하고 있고, 최근 많이 사용되는 Next.js 환경에서 Mantine을 사용하면서 겪은 Layout Shift 이..

Frontend

Cloudflare Pages는 게임 체인져가 될 수 있을까?

JAM 스택의 웹앱을 호스팅해주는 PaaS(Platform as a Service)가 여럿 존재한다. Netlify, Vercel, Github Pages 등... 여기에 Cloudflare Pages가 도전장을 내밀고 있는 추세이다. 클라우드플레어가 보유하고 있는 인프라와 네트워크가 주무기인데, 과연 Cloudflare는 기존의 벽을 넘어설 수 있을까? Cloudflare 공식 홈페이지에 올라온 바에 따르면 빌드와 배포가 빠르다는 것을 전면에 내세우고 있다. 또 기존에 클라우드플레어가 보유 중인 edge network의 퍼포먼스를 온전히 활용할 수 있다는 점과, 서버리스 플랫폼인 Cloudflare Workers를 이용해 풀스택 서비스를 만들어낼 수 있다는 점도 눈에 띈다. 직접 Cloudflare P..

사이드 프로젝트

나와 가장 잘 맞는 레븐 멤버는?

5개의 질문을 통해 나와 가장 잘 맞는 레븐 멤버를 찾아보는 간단한 미니게임입니다! 여기서 잠깐! 레븐이 뭔가요? 10인조 버츄얼 그룹으로, 주로 노래 커버영상 위주로 활동 중이랍니다~ 트위치에 오시면 멤버별 생방송도 볼 수 있으니 많관부! 레븐 Leaven Official www.youtube.com 개발동기 및 개발과정 간단한 설문형 게임이나 mbti와 유사한 검사들이 netlify 등으로 배포되어 많은 호응을 얻고 있는 걸로 알고 있다. 이에 그것들과 유사하게 질문형 미니게임을 만들어보고자 계획했다. 더불어 기술적으로 몇 가지 새로운 도전도 해봤다. 기존에는 일반적인 CRA로 제작하는 경우가 많았지만, 이번에는 Next.js(SSR)와 Tailwind CSS로 프론트 개발을 진행했다. Vercel에..

Backend

[스터디] Redis 개념정리 & 기본 사용법

스터디를 진행하며 준비한 발표자료를 공유합니다. 1. 캐시에 대해서 캐시가 뭐지? 보통 크롬이 좀 이상하거나 하면 '방문기록, 쿠키, 캐시 삭제' 같은 걸 하곤 한다. 여기서 캐시는 웹사이트에 들어가며 컴퓨터 안에 다운로드받은 이미지나 자바스크립트 파일같은걸 로컬에 저장해둔 걸 의미한다. 처음에 웹사이트에 들어갔을 때 10mb의 이미지를 다운받았고, 새로고침을 할 때도 똑같이 10mb의 이미지를 다운받는다면, 새로고침 몇 번에 수백mb의 데이터를 쓰게 될 것이다. 캐시가 왜 필요할까? 이처럼 로컬에 데이터를 저장해뒀다가 뽑아서 쓰면 데이터 전송량도 줄이고, 웹사이트의 성능 개선까지 얻을 수 있다. 그래서 브라우저 단에서는 이렇게 기본적으로 캐시를 사용하게 된다. 그런데 서버에서는 캐싱을 어떻게 할까? 하..

HAENU
'분류 전체보기' 카테고리의 글 목록