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

목차1. 글쓰기의 필요성2. 본 강의 내용3. 느낀점 여러분들은 글을 자주 쓰고 계신가요? 1. 글쓰기의 필요성 글은 자신의 생각을 표현하고 전달하는 중요한 수단이다. 또한, 일상생활 및 특정 상황에서 타인에게 자기의 생각을 전달해야 할 때 필요성을 느껴 우리는 펜을 집는다. 이처럼 일상생활, 특정 상황에서도 자주 쓰인다면 우리는 글쓰기의 중요성을 다시 한번 되짚어 볼 필요성이 있겠다. https://www.hankyung.com/article/2019102996011" data-og-host="www.hankyung.com" data-og-source-url="https://www.hankyung.com/article/2019102996011" data-og-url="https://www.hankyun..

목차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. 오픈소스 기여 준비 과정먼저 오픈소스 ..

목차서론본론 결론 1. 서론 "역행자"는 우리 사회의 일반적인 흐름을 거슬러 성공을 이루는 방법에 대해 이야기하는 책입니다. 저는 이 책을 읽으면서 책의 중요성에 대해 인지하게 되어 이후부터는 열심히 독서를 했던 것 같습니다. 그래서 이 책에서 얻은 주요 인사이트들을 공유하고자 합니다. 중요하다고 생각한 부분만 간략하게 요약하여 하였습니다. 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..