가까이 가면 뜨껍고, 멀어지면 차가워지는 관계

목차1. 문제 발생2. 문제에 대한 정보 수집3. 원인 추론4. 문제 해결 1. 문제 발생Next.js를 EC2로 배포한 서버에서 동시 접속자가 3명 이상일 때, CPU 사용률이 33%까지 급증하면서 서버가 멈추는 문제가 발생했습니다. 그 결과, 사용자들은 502 Bad Gateway 오류가 발생하겠되었다.2. 문제에 대한 정보 수집EC2의 무료 티어(Free Tier)로 서버를 배포했기 때문에 이게 문제일까 싶어서, 팀원 한 분이 백엔드 멘토님께 문의드렸습니다. 멘토님께서는 RAM 문제일 가능성이 높다며, 서버의 RAM 메모리가 충분한지 확인해 보라고 조언해주셨다.RAM 메모리란 무엇인가RAM은 서버에서 사용되는 작업 메모리이다. 서버가 많은 요청을 처리할 때, RAM이 부족하면 과부하가 발생해서 서버..

1. 왜 오픈 소스 기여인가?오픈소스 기여를 통해 얻을 수 있는 장점이 있다. 이는 실무 경험을 쌓을 수 있고, 외국인들과 소통하는 글로벌 협업 경험, 코드 리뷰를 통한 성장, 포트폴리오로도 활용 가능하다.오픈소스 기여가 프론트엔드 개발자뿐만 아니라 모든 개발자에게 주는 의미는 다양하다고 생각한다. 필자는 toss 프로젝트에 오타 수정을 했다. 이에 대한 무료 코드 리뷰를 받았는데 생소한 개념 대해 추가적으로 공부했었다. 이처럼 오픈소스 생태계를 접해보면 내가 몰란던 개념에 대해 추가적으로 학습할 수 있는 장점이 있다. 부끄럽지만 내가 기여했던 PR을 남겨두었다.내가 기여했던 간단한 PR(오타, 이슈 등)RollupInsightSynctoss/es-hangul 2. 오픈소스 기여 준비 과정먼저 오픈소스 ..

프론트엔드 개발자 공고를 보면 요즘 CI/CD를 요구하는 기업이 종종 보입니다. 이 말은 즉슨 프론트엔드가 개발한 프로덕트가 배포 과정에서 문제가 생겼을 때 어느 부분에서 문제가 발생했는지 확인하고 대응할 수 있어야 하기 때문에 서버 공부를 해야한다(?)고 생각합니다.그래서 "그림으로 이해하는 AWS 구조와 기술" 책을 읽으면서 서버 개념 정리에 대한 글을 주제로 써보겠습니다.Q. AWS란 무엇인가요?AWS는 클라우드 컴퓨팅 서비스의 하나이다.Q. 그러면 클라우드 컴퓨팅 서비스란?서버 및 네트워크 등을 인터넷으로 빌려주는 서비스로 언제 어디서든지 사용할 수 있다. ex. Amazon EC2, Amazon S3Q. AWS 특징이란?여러 사업자에게 각각 빌려야 했던 인프라를 일괄로 빌릴 수 있다는 것과 운영..

목차1. 프로젝트 목적2. 개발 과정3. 개발 성과AllYouRaffle 사이드 프로젝트를 2달간 운영해보면서 힘든 과정도 있었지만 결과적으로는 새롭게 알게된 것들이 많아 그 중에 하나인 비즈니스 모델 구축을 해보면서 실사용자에게 현물을 제공했던 사례에 대해 소개해보겠습니다!! 1. 프로젝트 목적AllYouRaffle는 비영리 목적 프로젝트로, 학생들을 대상으로 미니 게임을 통해 응모권을 획득하고 원하는 상품에 응모할 수 있는 플랫폼입니다. 사용자는 미니 게임이 끝난 후 광고를 시청하게 되고, 광고 시청을 통해 얻은 응모권으로 랜덤으로 당첨자를 뽑아 실제 상품을 지급하는 방식입니다.비즈니스 모델: 구글 애드센스, 카카오 애드핏, 구글 애드몹을 통해 광고 시청으로 얻은 수익으로 유저에게 상품을 제공하는 구..

목차1. 뷰포트를 사용한 이유2. css 단위 변경 및 이유 3. 결과 1. 뷰포트를 사용한 이유처음 reracle프로젝트는 화면 크기에 따라 레이아웃이 자동으로 조정되도록 모든 레이아웃에 vh와 vw 단위를 사용했습니다. vh는 화면의 높이를, vw는 화면의 너비를 기준으로 비율을 설정해주는 단위인데, 이 단위를 사용하면 화면 크기가 달라질 때마다 비율에 맞춰 요소들이 함께 변형되어서 반응형 디자인을 쉽게 구현할 수 있다는 장점이 있어서 사용했습니다.하지만 리팩토링을 할 때 고민을 해보니 vh, vw에는 몇 가지 단점이 있었습니다.export const WasteCategory = () => { const chunkedCategories = chunkArray(wasteCategories, 9); ..

목차1. 비즈니스 모델 구축 배경2. 수익 모델 도입: 광고를 통한 서버 비용 상쇄3. 무료 서버 Netlify로의 전환4. 결론1. 비즈니스 모델 구축 배경REracle 서비스 초기에는 CI/CD 파이프라인을 구축하여 main 브랜치 push 할 때 마다 Amazon S3와 CloudFront를 활용하여 배포되도록 하였습니다.그러나 지속적인 운영 과정에서 약 15,000원 이상의 금액이 서버 비용으로 청구되었습니다. 이는 취준생인 저에게 부담되는 금액이었습니다.2. 수익 모델 도입: 광고를 통한 서버 비용 상쇄 서버 비용을 상쇄하기 위해 광고 수익 모델을 고려했습니다. Google AdSense는 심사 기준이 엄격하여 글자 수가 몇 만자 이상인 블로그 글만 심사 기준에 충족된다는 제약이 있었습니다. 그..

목차1. 배경2. 개발 과정3. 결과1. 배경사용자들에게 REracle 서비스의 업데이트 및 공지사항을 실시간으로 받아볼 수 있는 알림 기능을 제공하는 것이 필요했었습니다. 그래서 PWA의 기능인 PUSH 알림 기능을 구현하게된 내용을 소개해드리겠습니다.제가 만든 REracle 서비스에서 push 알림을 코드를 참고할 수 있습니다.2. 개발 과정PWA 구현service-worker.js 파일을 생성하여 PWA의 기본 기능을 구현하여 오프라인 지원, 앱 설치 기능 등 PWA의 핵심 기능을 추가했습니다.푸시 알림 구현firebase-messaging-sw.js 파일을 생성하여 백그라운드 메시지 처리를 구현하였고, NotificationComponent를 만들어 포그라운드 알림 수신 및 권한 요청 로직을 구현..

목차1. 배경2. 과정: Tailwind로 전환한 이유1. 배경해당 reracle 프로젝트는 초기에는 4명의 팀원과 함께 협업하여 진행되었습니다. 하지만 프로젝트가 진행되면서 팀의 방향성에 이견이 생겨 협업이 중단되었고, 결국 프로젝트를 혼자 이어가게 되었습니다. 단독으로 프로젝트를 운영하면서, 스타일링 라이브러리를 다시 고민하게 되었습니다. 특히, 코드 복잡성을 줄이고, 스타일링 효율을 높이며, 성능 최적화를 이루고자 Styled-components에서 Tailwind CSS로 전환하기로 결정했습니다.import { useEffect, useRef, useState } from 'react';import { useNavigate } from 'react-router-dom';import styled f..

1. Suspense와 React lazy의 개념 2. Suspense와 React lazy 프로젝트에 적용1. Suspense와 React lazy의 개념SuspenseSuspense는 컴포넌트의 렌더링을 일시 중지하고, 데이터 로딩을 기다릴 수 있게 해주는 React의 기능이다. React 16.6부터 도입된 기능으로 컴포넌트가 렌더링 되기 전에 데이터 로딩을 기다릴 수 있게 해줌으로써 데이터 로딩 중에도 자연스러운 사용자 경험(UX)를 유도한다. 또한 코드 스플리팅(Code Splitting)과 함께 사용하면 초기 로딩 속도를 개선하는 데에도 도움이 된다.React lazy를 통해 지연 로딩 된 컴포넌트가 로드되는 동안 로드 상태를 처리하고, 대체 콘텐츠를 표시하기 위해 사용된다. 이는 지연 로딩 ..

목차1. 단위 테스트와 통합 테스트2. 테스트 도구3. 왜?1. 단위 테스트와 통합 테스트:소프트웨어 개발 과정에서 테스트는 매우 중요하다. 테스트를 통해 개발된 소프트웨어가 요구사항을 만족하는지, 버그 없이 잘 동작하는지 확인할 수 있다. 테스트 없이는 소프트웨어의 품질을 보장할 수 없으며, 사용자의 신뢰도를 떨어뜨릴 수 있다.테스트는 크게 단위 테스트(Unit Test)와 통합 테스트(Integration Test)로 나눌 수 있다. 각각의 테스트는 소프트웨어 품질을 보장하기 위한 중요한 역할을 하며, 개발 과정에서 서로 다른 목적으로 사용된다. 단위 테스트는 소프트웨어의 가장 작은 단위를 테스트하는 반면, 통합 테스트는 여러 단위가 함께 잘 작동하는지 확인한다.단위 테스트(Unit Test)란?단위..