LikeLionCAU Blog

LIKELION

멋쟁이 사자들의 블로그 피드를 둘러보세요!

lowDB란?lowDB는 Node.js 환경에서 사용할 수 있는 작고 간단한 로컬 JSON 기반 데이터베이스SQLite 같은 무거운 DB 대신 파일(JSON) 하나로 데이터베이스처럼 CRUD 작업 가능빠르게 프로토타입 만들 때 적합별도 서버(DBMS) 설치 필요 없음JavaScript 객체 조작하듯 데이터 관리 가능주요 특징JSON 파일 기반데이터는 db.json 같은 파일에 저장된다.Lodash API 지원Lodash 체이닝 문법을 그대로 사용할 수 있어 편리하다.경량 & 간단프로토타입, 사이드 프로젝트, 학습용으로 많이

REST, REST API, RESTful

REST란 무엇인가? 가볍게 정리하고 가자REST란?Represntational State Transfer => 자원을 이름으로 구분해서 자원의 상태를 통신하는 것HTTP URI로 자원을 명시HTTP Method를 이용HTTP URI(자원)에 대한 CRUD Opreation 적용CRUDCreate : 데이터 생성(POST)Read : 데이터 조회(GET)Update : 데이터 수정(PUT, PATCH)Delete : 데이터 삭제(DELETE)REST 구성 요소HTTP URI(자원)자원의 식별자 === URI/users =&gt

미들웨어란?

Node.js express의 핵심미들웨어는 요청과 응답을 조작하여 기능을 추가하기도 하고, 나쁜 요청을 걸러내기도 한다.;;요청과 응답에 대한 정보를 사용해서 필요한 처리를 진행;미들웨어는 next() 메소드를 호출해서 그 다음 미들웨어가 작업을 처리할 수 있도록 순서 설정 가능;import express from "express";const app = express();app.get('/', function(req, res, next) { next();});위와 같은 코드가 있다고 가정하자; app.메서드 자체가 미들웨어가 아니

프로젝트를 React로 1차 스프린트를 마쳤는데, 이미지가 너무 많고 검색 엔진 최적화가 되지 않아서 Next로 마이그레이션을 한 경험이 있다. SSR로 인한 빠른 렌더링을 기대하며 마이그레이션을 성공적으로 완료했다.완료 이후 피드백 중에 받은 질문이 있었다.분명 난 이유가 있어서 마이그레이션을 하기로 결정한건데, 질문에 대답을 잘 못하는 모습을 보고 다시 공부해야겠다는 생각이 들어 이렇게 글을 적는다.렌더링이란?서버에서 HTML을 생성하고 클라이언트에 전달하는 과정.서버는 클라이언트의 요청에 따라서 HTML을 동적으로 생성하고,

AWS KMS를 활용한 E2EE(End-to-End Encryption)

개요프로젝트를 진행하다 보면 절대 외부에 노출되면 안되는 민감한 데이터를 다룰 때가 있다. 이번 프로젝트에서는 사용자의 AWS 계정 정보, 비밀 키 값 등이 포함된 요청 패킷을 안전하게 전송해야 하는 미션이 주어졌고, 고민 끝에 AWS Key Management Service(KMS)를 활용한 End-to-End 암호화(E2EE)를 도입하기로 마음먹었다. 왜 E2EE ?먼저, 내가 마주한 보안 요구사항은 클라이언트에서 서버로 전송되는 요청(request) 패킷 전체를 보호하는 것이었다. 이 패킷 안에는 제3자에게 노출될 경우 심각한

Node.js + express 시작하기

1. npm i express 후 폴더 구조 세팅project/├─ src/│ ├─ app.js # Express 초기 설정│ ├─ routes/│ │ └─ posts.js # 라우터│ ├─ controllers/│ │ └─ posts.controller.js│ ├─ models/│ │ ├─ posts.memory.js # 1주차: 메모리 기반 Mock│ │ └─ posts.file.js # (선택) 파일 기반 저장(lowdb 또는 json 직저장)│ ├─ views/│ │ ├─ layout.ejs│ │ ├─ posts/│ │ │

Node.js란?오픈 소스이자 크로스 플랫폼 JS 런타임 환경누구나 자유롭게 사용이 가능하고, Windows / macOS / Linux 등 다양한 OS에서 실행 가능Chrome의 핵심인 V8 엔진 기반브라우저가 아닌 외부에서도 JS를 실행 가능하게 함단일 스레드, 이벤트 루프 기반(⭐⭐⭐)Node.js는 싱글 스레드지만 동시성을 띔비동기 I/O와 이벤트 루프를 이용표준 라이브러리에서 비동기 I/O 기본 요소 제공Node.js에 필요한 개념비동기 프로그래밍콜백어떤 작업이 끝났을 때 실행되는 함수비동기 코드에서 한 작업이 끝나면 이

후롱트 두 번째 세션(Flex)Flex레이아웃 배치 전용 기능수직 구성 & 수평 구성<div class="container"> <div class="items">1</div> <div class="items">2</div> <div class="items">3</div> <div class="items">4</div> <div class="items">5</div> <div class="items"&gt

HTML 웹 표준과 태그 + css

웹 표준(3단계로 구분)HTML = 구조웹 문서의 구조를 만듦태그를 사용해서 문서의 구조를 명시 = <>CSS = 표현Cascading = 우선순위 = 위에서 아래로 계단식으로 우선순위 결정웹 문서를 꾸미기 위해 사용<head> <link rel = "stylesheet" href="경로"></head>JavaScript = 동작사용자 동작에 반응하고 동적인 효과를 냄라이브러리 - 호출해서 사용 가능하도록 재사용 가능한 기능을 미리 구현한 도구프레임워크 - 프로그램 생성 시 필요한 여러 기

네이버 부스트캠프 10기 웹·모바일 챌린지 후기

N̆̈ 왜 부스트캠프를 지원했나? N̆̈교내 학회를 통해 프론트엔드 개발을 처음 접한 뒤 학습을 이어왔고 여러 프로젝트를 경험했지만, 지금까지의 경험들은 개발자의 필수 덕목이라고 할 수 있는 **‘CS 지식’**과 ‘문제 해결 능력’ 두 가지 없이도 할 수 있는 것들이었다(있다·없다의 유무만 따졌을 때). 비전공자라는 핑계로 항상 미뤄왔던 부분들이었고, 코딩 테스트 공부를 하면서 이 필수 덕목들의 부재를 뼈저리게 느꼈다. 현재 가장 관심 있는 분야에서 더 성장하고 싶었고, 두 가지 덕목을 채울 수 있다고 생각해 네이버 부스트캠프 웹

Change Data Capture (CDC)

데이터 파이프라인데이터 파이프라인은 여러 소스에서 생성된 원시 데이터를 수집, 처리, 변환하여 최종 목적지로 옮기는 일련의 과정을 의미한다. 데이터 파이프라인의 각 단계는 이전 단계의 출력을 입력으로 받아 작업을 수행하며, 이를 통해 데이터는 정제되고 분석에 용이한 형태로 가공된다. 데이터 파이프라인의 최종 목적지는 주로 데이터 웨어하우스나 데이터 레이크와 같은 데이터 저장소가 된다.오늘날 많은 기업은 마이크로서비스 아키텍처(MSA)를 채택하고 있으며, 각 서비스는 독립적인 데이터베이스를 운영하는 경우가 많다. 이러한 분산 환경에서

합의 (Consensus)

2PC의 한계, 합의 알고리즘의 등장분산 시스템에서 여러 노드가 동일한 결정을 내려야 하는 상황을 흔히 볼 수 있다. 하지만 네트워크 지연, 메시지 유실, 노드 장애 등으로 인해 모든 노드가 동일한 상태를 보장하는 것은 쉽지 않다. 이를 처음 해결하고자 등장한 방식이 Two-phase commit (2PC) 이다. 코디네이터 노드(Coordinator)가 트랜잭션 참여자(Participant)들에게 사전 승인 요청을 보내고, 모두가 동의하면 커밋을 진행한다.그러나 2PC는 구조적인 결함이 있다. Coordinator가 커밋 직전에

Two-phase commit (2PC)

coordinator한테 회신이 올때까지 기다릴거야 ...단일 노드 트랜잭션의 원자성, 그리고 그 한계단일 노드 트랜잭션의 원자성현대의 데이터베이스 시스템은 단일 노드에서 실행되는 트랜잭션에 대해 원자성(Atomicity) 을 보장한다. 단일 노드에서 실행되는 트랜잭션은 대개 스토리지 엔진 수준에서 다음과 같은 방식으로 원자성이 보장된다.쓰기 작업은 WAL(Write-Ahead Logging)에 먼저 기록된다.로그에 모든 변경 사항을 기록한 후, 커밋 레코드(commit record)를 로그에 추가한다.이 커밋 레코드가 디스크에 영

네이버 부스트캠프 10기 웹·모바일 베이직 후기

네이버 부스트캠프 웹 풀스택 10기 베이직 과정을 완료하고, 느낀 후기에 대해서 작성하고자 글을 작성한다.N̆̈ 네부캠 지원 이유 N̆̈개발공부를 이어오고, 취업을 준비하면서 부족하다고 생각되는 부분이 2가지가 있었다.CS 지식문제 해결력코딩 테스트를 대비해 문제를 풀어보고, 면접을 대비해 이론을 공부하면서 부족한 점을 깨닫고 어떻게 보완할지 고민하던 중 컴퓨팅적 사고와 CS 기초 개념을 기반으로 문제를 정의하고 설계하는 학습 방향을 가진 네부캠 basic 과정을 발견하여 지원하게 됐다.베이직 과정베이직 과정은 2주간 진행되며 월~

당근 인턴 회고 - 6월 회고 (18 ~ 21주차)

내용에 문제가 있는 경우 삭제, 수정 조치 하겠습니다.6월이 끝났다. 4주간 회고글을 못썼는데 한 번에 정리해보고자한다.;되돌아보기기존에 목표로 했던 것들을 기반으로 작업했다.업무별 시간을 작성하고, 각 작업별 분류를 통해 인지-개선하는 과정을 이어가고자 쭉 이어왔는데,;점점 챙겨야 하는 부분들이 생기게 되면서, 전환이 잦아졌고 로우 데이터를 작성하는 것이 어려워지게 되었다.작성 자체가 하나의 컨텍스트 전환이 되어서 어려워진 부분도 있는 것 같다.;지금까지 데이터를 봤을때는 구현이 초기에는 60%였으나 50%대로 내려온 상태이고,

Safari의 iframe은 부모와 같은 스레드를 사용한다. (Lottie 스레드 블로킹)

배경스크롤 랜딩과 같은 페이지를 구성하고 있는데, 이 페이지의 섹션1은 무한 재생돠는 로띠를 갖고 있고, 섹션2는 iframe으로 임베드된 유튜브 영상을 보여주고 있는 형태다.문제이상하게도, 처음 페이지에 들어왔을 때 safari에서 로띠가 잠깐 버벅거리는 현상이 자꾸 발생했다.도대체 이유가 뭘까 고민하다가 아래 섹션을 처음에 숨김처리했더니 버벅이지 않는 것을 확인했다.;Lottie 동작원리https://github.com/airbnb/lottie-web/blob/bede03d25d232826e0c9dca1733d542d8a7754

당근 인턴 회고 - 이웃알바 캠페인 회고 (16주차, 17주차)

16주차,17주차가 끝났다.이전 주에는 캠페인으로 바빠서 작업을 하느라 회고글을 작성하지 못했다.;어쨌든 캠페인이 라이브되었다!https://daangn-jobs-campaign.karrotwebview.com/indvjobsBDC/opt;당근 이웃알바도움이 필요했던 순간 알려주고 1만원 받기daangn-jobs-campaign.karrotwebview.com단독으로 개발한 것중 가장 많은 사람들에게 전달된 프로젝트다!!3000명이 넘는 사람이 이벤트에 참여했고, 페이지에 들어온 사람은 100배 이상 더 많다.;느낀점두려움당근에서

당근 인턴 회고 -15주차

내용에 문제가 있는 경우 삭제, 수정조치 하겠습니다.;15주차가 끝났다.이번주에는 프로젝트 하나를 온전히 맡게되어 대부분 그 부분에 시간을 쏟았다.;되돌아보기목표로 했던 것들은 이제 어느정도 대부분 체화가 되어 잘 이뤄지고 있는 것 같다.이번주에는 아침 CSS 학습은 거의 하지 못한 것 외에는 목표로 잡은 것들을 잘 챙기고 있다.;UI 검증으로 얻는 신뢰감pixel pro를 사용한 검증을 통해 팀 내에서 신뢰를 얻을 수 있다는 것을 알게 됐다.사람이 하는 일은 늘 실수가 발생한다. 이걸 방지하기 위한 시스템, 루틴이 필요하다.앞으로

당근 인턴 회고 - 12, 14주차

;내용에 문제가 있는 경우 삭제, 수정조치 하겠습니다.;12, 14주차가 끝났다.13주차는 워크샵을 다녀오면서 거의 1주일간 일을 하지 않아서 따로 회고에 넣지 않았다.;되돌아보기;이번주와 다음주까지 마케팅 프로젝트를 맡게 되면서 혼자 개발해야하는 양이 많아짐따라 구현 비중이 높아졌다.;스펙에 대한 이정표 만들기이제 이게 어느정도 체화가 된 것 같다. 이렇게 상세히 분석하면 회색 영역이 거의 없이 개발할 수 있어서 좋고,분석 시에 작성한 체크리스트만 확인하면, 개발 내용에 대한 확신을 가질 수 있게된다.;메모하는 습관이제 싱크미팅뿐

당근 인턴 회고- 11주차

내용에 문제가 있는 경우 삭제, 수정조치 하겠습니다.;11주차가 끝났다.이번주는 크게 느낀 것은 따로 없으나,이전주에 느낀바로 사이클을 잃으면 성장하기 어렵기 때문에 계속해서 지속한다는 관점에서 작성하였다.;되돌아보기이번 주는 구현뿐 아니라 데이터 분석도 했었어서 전반적으로 구현의 비율이 많이 낮아지게 되었다.스펙에 대한 이정표 만들기이 부분은 잘 된 것 같다.스펙을 분석하고 작성하고, 또 뭔가 변경되었을때 문서를 수정하면서 놓치는 부분이 없도록 할 수 있었다.다만, 변경이 되거나 의사결정이 필요한 부분이 생기는 경우, 이런 부분을

당근 인턴 회고 - 8,9,10주차

내용에 문제가 있는 경우, 삭제, 수정조치하겠습니다.8,9,10주차가 끝났다.;휴일, 휴가로 며칠씩 쉬다보니 모아서 써야지 하다보니 벌써 3주가 지나버렸다.사실 3주(15일)동안 실제 일한건 11일정도라 사실상 2주차 회고가 아닌가... 싶기도하다.그나저나 역시 흐름이 끊기면 글을 쓰기가 참 어려운 것 같다.;되돌아보기UI 검증은 반복적이지 않도록 되도록 한번에 할것3주간 진행했던 기능 개발이 이전보다 간단했어서 그런 것도 있겠지만이 부분은 잘 되었다고 생각한다. 마지막에 한번 체크하는 형태로 전환하면서 UI에 대한 검증 시간이 크

당근 인턴 회고 - 6,7주차

;내용에 문제가 있는 경우, 삭제, 수정조치하겠습니다.6,7주차가 끝났다.6주차 주말에는 너무 정신이 없어서 작성하지 못해서 이번주에 한번에 회고하고자 한다.;되돌아보기도구를 통해 UI정확성 확인하고, 수치값으로 한번 더 확인하기우선 PixelParallel보다 좋은 Pixel Perfect Pro라는 확장 익스텐션으로 변경했고, 작업중에 지속적으로 확인했다.완전히 UI에 대한 정확성을 100% 챙길수는 없었지만 그런 부분이 줄어들었다.;100%가 될 수 없었던 이유는, Figma와 브라우저 렌더링 방식이 100% 동일하지 않았기때

당근 인턴 회고 - 5주차

;내용에 문제가 있는 경우 삭제, 수정조치 하겠습니다.5주차가 끝났다. 이번 주는 대체 휴일로 하루를 쉬어서 4일동안 일했기도했고 저번주에 설계한 것들을 바탕으로 리팩터링을 하거나 코드보다 스펙에 대해 이해하고 설계하는 시간이 대부분 이었어서 뭔가 따로 세운 목표를 적용해볼 기회가 좀 적었던 것 같다.;되돌아보기뽀모도로 휴식시간에 다음 계획 더 잘 작성해보기;이 부분은 좀 더 개선된 것 같다. 여전히 가끔은 놓치기도 하지만....;어떤 테스크를 한다 -> 어떤 테스크중에 어떤 부분을 한다 형태로 좀 더 구체적으로 작성하려고 노

React Hook Form과 Zod를 활용한 Multi-step Form 구현기

서론최근 멀티 스텝 폼 기능을 구현하는 과제를 수행하면서, 처음으로 react-hook-form과 zod를 활용해봤다. 이를 통해 복잡한 폼 데이터 관리와 값 검증을 간편하게 처리할 수 있었으며, 구현 과정에서 궁금했던 기타 속성들도 함께 알아보고자 한다 🤔리액트의 제어 컴포넌트로 Form 다루기과거에 한 서비스에서 유저 정보를 입력받는 기능을 구현했을 때, 제어 컴포넌트 방식으로 각 필드의 state를 관리하고, 이를 검증하는 핸들러 함수들을 직접 만들었던 경험이 있다.예를 들어, 다음과 같은 회원가입 폼을 구현할 때 필드별 s

패키지 업데이트를 위한 yarn.lock에 대한 이해

이전까지 패키지 관리에 대해서는 뭔가 부분적으로 이해하고 있었다.;왜냐하면 경험 자체가 패키지를 설치하거나, 만든 패키지를 배포하기 위한 버전 관리였기 때문이다.이런 경험은 버전에 대해 심화적으로 살펴볼 필요가 없다.그래서 버전정보와 관련한 것들은 틸드, 캐럿에 대해서만 어느정도 이해하고 있었다.;그러나 이번에 Typescript를 비롯한 여러 패키지의 버전을 업그레이드하는 경험을 할 수 있었고, 이때 학습한 것들을;글로 남기고자 한다.;yarn.lock파일package.json은 어떤 패키지를 사용하는지 대략적인 정보만을 가지고

당근 인턴 회고 - 4주차

내용에 문제가 있는 경우 삭제, 수정조치 하겠습니다.;벌써 한달차가 끝나버렸다.돌아보기우선 이전 주 목표를 기반으로 돌아보고, 느낀 것들을 적어보려고 한다.;1. 뽀모도로 유지 및 좀 더 잘 작성하기;이전 주와 비슷하게 유지되었다. 다만, 좀더 익숙해져서 다음 일을 계획하거나 기록하는 것은 조금 개선됐다.아직까지 완벽하게 일하다가 돌아와서 5분간 다음 할일을 계획하는 수준은 아니어서 이 부분에 대해서는 계속해서 의식적으로 인지해서 개선할 필요가 있다.;2. 문제가 안풀릴 땐 다시 상단부터 다시 좁혀나가기 + 코드/맥락 파악시 그림을

당근 인턴 회고 - 3주차

내용에 문제가 있는 경우 삭제, 수정조치 하겠습니다.;점점 시간이 빨리 간다. 3주차가 지나갔다.;돌아보기쪼갠 문제를 푸는 시간이 기능을, 이 코드를 여기에 두는게 맞는가? 고민하는 시간을 줄이고자 했는데, 관련해서 직접 물어보고 한번 정리를 해서 시간을 조금 단축 시킬 수 있지 않았나 싶다. 사실, 이번 주에는 새롭게 컴포넌트를 짤 일이 거의 없었어서 그렇게 느끼는 것일 수도 있다.아마 이 목표는 다음 UI작업을 하게될 때 한번 더 되돌아볼 필요가 있다.;그래도 하다보니 5번 중에 한번은 맞게 예측하는 경우도 생기는 것 같다.사실

당근 인턴 회고 - 2주차

;내용에 문제가 있는 경우 삭제, 수정조치하겠습니다.;순식간에 2주차가 지나갔다.첫주차는 주저리주저리 다 적었다면 이제는 좀 간결하게 작성해볼 예정이다.;돌아보기전주에 개선이 필요한 것들부터 돌아보자.;문제가 무엇인지 정확히 파악할 것 (섣불리 코드를 먼저 살펴보지 말 것);이전보다 확실히 문제를 파악하는 시간이 단축된 것 같다.이 과정에서 가장 도움이 됐던 두 가지는이걸 해결해서;어떤 것이 나아지는가를 생각해보는 것, 그리고 그것이 완료되면;문제를 잘게 쪼개는 것이었다.내가 하는 작업이 어떤 것을 개선시키고 어떤 가치를 가져오는지

가상 스크롤로 DOM 부하 핸들링하기

실시간 스트리밍 서비스인 라이부의 최종 발표 당시에 한 멘토분께서 DOM에 쌓이는 컴포넌트들을 핸들링하는 부분이 있는지 질문해주셨고, 개선책으로 생각하고 있었던 가상스크롤을 언급하며 리팩토링 계획을 말씀드릴 수 있었다.이번 글에서는 위 리팩토링 중에 학습한 가상 스크롤의 구현 방식과, 기술 도입을 고민했던 과정에 대해 정리해보고자 한다 🚀가상 스크롤 (Virtual Scroll)가상 스크롤은 사용자가 보이는 영역만 렌더링하고, 스크롤을 내릴 때 필요한 요소를 동적으로 추가하는 기법이다. 이를 통해 불필요한 DOM 요소 생성을 막아

TanStack Query는 어떻게 데이터를 캐싱할까?

서론프로젝트에서 서버 상태를 효율적으로 관리하기 위해 TanStack Query를 자주 활용한다. 특히, 네트워크 요청이 많은 환경에서 캐싱 기능은 성능 최적화와 사용자 경험 개선에 중요한 역할을 한다. 하지만 단순히 라이브러리를 사용하기만 할 뿐, 내부에서 어떻게 캐싱이 동작하는지 깊이 이해하지 못하고 있었다. 이번 기회를 통해 캐싱 관련 개념을 정리하고, 코드를 통해 TanStack Query의 내부 동작 방식을 분석해보고자 한다 🔥캐싱이란?캐싱(Cache)이란 자주 사용하는 데이터나 결과를 저장하여 빠르게 접근할 수 있도록

당근 인턴 회고 - 1주차

;내용에 문제가 있는 경우 삭제, 수정조치하겠습니다.;드디어 당근에서 일해보다나에게 당근은 꼭 일하고 싶은 회사였다.기술적인 부분도 분명 있지만, 무엇보다 프로덕트 자체가 로컬 플랫폼이기에, 삭막해져가는 사회에 동네라는 가치를 만들고 사람들과 사람들을 이어준다는 가치에 크게 공감하고 있기 때문이다. 이건 있다 설명할 당근에서의 이름인 Manolin과도 이어진다.또한, 내가 유튜브, 인스타 다음으로 많이 사용하는 앱이기도 하기 때문에 제품에 대한 애정과 오너십을 가질 수 있겠다는 생각에서 재작년 12월부터 계속해서 공고가 올라올때마다

리액트 파이버와 함께 알아보는 리액트 렌더링

📚 모던 리액트 Deep Dive의 내용을 기반으로 학습하고 정리합니다.지난 글에서 직접 JSX를 가상DOM으로 변환하고 재조정을 통한 브라우저 렌더링까지 구현해 볼 수 있었다.이번 글에서는 실제 리액트에서는 어떤 방식으로 렌더링이 이뤄지는지 알아볼 것이다. 그리고 해당 과정을 담당하는 리액트 파이버에 대해서도 깊게 알아보자!리액트 파이버파이버란?React Fiber는 React 16부터 도입된 새로운 재조정(reconciliation) 알고리즘으로, UI 업데이트를 보다 유연하고 효율적으로 수행하기 위해 설계되었다. 기존 Rea

TLS/SSL 인증서 관리

개요HTTPS 적용을 위해서는 Cloudflare와 같은 TLS/SSL 인증서 관리 기능을 제공하는 프록시 서버를 활용하거나, 서버에 직접 TLS/SSL 인증서를 발급 받아야 한다.대부분의 무료 도메인 서비스는 루트 도메인을 관리하고, 사용자에게 해당 도메인의 서브도메인을 등록할 수 있는 기능을 제공하는 방식으로 운영된다.Cloudflare는 네임서버 수준에서 도메인을 관리하기 때문에, 서브 도메인을 Cloudflare를 통해 관리하려면 반드시 루트 도메인을 Cloudflare에 추가하고 해당 도메인의 네임서버를 Cloudflare

부스트캠프 웹・모바일 9기 멤버십 회고

부스트캠프 웹・모바일 9기 멤버십부스트캠프 멤버십 과정을 수료했다.이렇게 학습의 방향성을 잃고 방황하던 중, 앞으로 걸어갈 길을 명확히 하고자 입과했던 약 5개월 간의 부스트 캠프 과정이 마무리 되었다.멤버십 과정 동안의 기억이 휘발되기 전에 내가 느끼고 배웠던 것들을 기록하고자 한다. 1차 학습 스프린트4주 동안 주어진 기능 명세에 따라, UI부터 API까지 모두 직접 개발하는 과정이었다.React, NestJS, MySQL 등 프로젝트에서 흔히 사용되는 기술 스택이 아닌, 더욱 기초적인 VanilaJS, ExpressJS, lo

만들면서 이해하는 SPA - 가상DOM, 리렌더링, 재조정

리액트와 같은 SPA 프레임워크에서 지원하는 기능들을 비슷하게 구현해보며 학습하는 것을 목표로 합니다 📚이전 글에서 JSX로 작성된 코드를 직접 만든 팩토리 함수를 통해 트랜스파일링하고 객체로 변환하는 과정을 거쳤다.이번 글에서는 변환된 객체(가상DOM의 구성요소)를 통해 실제 DOM에 렌더링을 해보고자 한다. 그리고 재조정을 통해 변경될 부분만 렌더링해보자!브라우저는 브라우저 엔진, 렌더링 엔진, 네트워크 통신부, 자바스크립트 해석기, UI 백엔드, 자료 저장소 등으로 구성되어 있고, 이 중 렌더링 엔진이 브라우저의 렌더링 과정

JS로 이해하는 프로토타입 기반 상속

📚 모던 자바스크립트 Deep Dive의 19장을 학습하며 정리한 내용을 기반으로 작성되었습니다.평소 상속을 구현할 때 ES6 클래스를 주로 사용해왔다. 클래스 문법은 간단하게 상속을 구현할 수 있지만, 그 이면의 프로토타입 체인이 어떻게 동작하는지에 대한 이해가 부족하다고 느꼈다 🥲그래서 이번 학습을 통해 프로토타입 기반 상속에 대한 개념을 명확히 하고, 자바스크립트에서 상속과 객체 간의 관계를 더 잘 다룰 수 있는 방법을 익히고자 한다!🧩 프로토타입(Prototype)의 기원들어가기 전, 개발자 임성묵님의 아티클 <자

클로저는 환경을 어떻게 기억할까?

📚 모던 자바스크립트 Deep Dive의 23,24장을 학습하며 정리한 내용을 기반으로 작성되었습니다.과거 함수형 프로그래밍을 학습하거나 useState 훅을 비슷하게 구현해보면서, 클로저를 잘 활용하려면 자바스크립트 엔진이 각 스코프에 대해 환경을 어떻게 생성하고 관리하는지 이해하는 것이 중요하다고 느꼈다.따라서 이번 글에서는 자바스크립트의 실행 컨텍스트와 렉시컬 환경이 어떻게 작동하는지, 그리고 이를 기반으로 클로저가 어떻게 형성되고 동작하는지를 설명해 보고자 한다.실행 컨텍스트와 렉시컬 환경 이해하기 🤔클로저의 동작 방식을

벌써 2024년의 마지막날이다.되돌아보면 이번년도는 꽤 많은 일이 있던 1년이었다.연초부터 창업 프로젝트가 좌초되고, 수 많은 탈락을 겪기도하고하필 내가 인턴을 시작했을때 업무강도나 역대급으로 강해지거나... 하는 식이었다.상반기 목표로 하반기 돌아보기회사/팀/프로덕트에 기여하기이 부분은 정말 잘해냈다고 생각한다. 짧은 기간이었음에도 불구하고, 많은 양의 업무를 해낼 수 있었다.더불어 회사의 lint룰이나, multi-starter cli를 만들어 생산성을 향상시키는 등의 기여를 할 수 있었고, 덕분에 좋은 피드백도 받을 수 있었다

만들면서 이해하는 SPA - JSX, createElement

리액트와 같은 SPA 프레임워크에서 지원하는 기능들을 비슷하게 구현해보며 학습하는 것을 목표로 합니다 📚JSX란JSX is an XML-like syntax extension to ECMAScript without any defined semantics.- JSX 공식문서 -JSX란 JavaScript에 XML/HTML을 추가한 JS 확장 문법이다.리액트를 페이스북(현 메타)에서 소개하며 함께 등장한 새로운 구문이지만 리액트에 종속적이지만은 않은 독자적 문법이다. 또한 ECMAScript(JS 표준)의 일부도 아니다.당시 JSX

Shared Worker를 활용한 실시간 채팅의 소켓 통신 개선기

문제 인식하기 🤔기존 설계 : 컴포넌트 기반의 동적 소켓 연결우리 서비스는 유저가 여러 방송에 참여해 채팅을 할 수 있고, 질문, 공지, 유저 차단 등 다양한 기능을 제공했다.기존 소켓 통신의 로직은 다음과 같다.채팅 컴포넌트 마운트 시 새로운 소켓 생성 및 connection (createSocket)소켓 연결 성공 시 초기화 콜백함수(ex. 사용자 참여 room 등록) 실행 및 등록된 이벤트에 대한 송수신 진행채팅 컴포넌트 언마운트 시 disconnectuseEffect(() => { const eventMap = { [

[K8s] AWS Access Key 대신 AWS IRSA 적용하기 (+EKS Pod Identity)

애플리케이션에서는 AWS 서비스에 접근하기 위한 자격 증명을 통해 AWS API 요청에 서명해야한다. 현재 개발 중인 백엔드 애플리케이션에서는 Parameter Store 연결을 위해 SSM 권한을 가진 IAM 사용자의 Access Key를 발급받아 Secret으로 등록하고 Volume으로 주입했다. env에 계정 정보를 주입해서 사용하는 게 과연 최선의 방법인가? 를 고민하다가 IRSA를 알게되어 찾아본 결과를 간단하게 적어보려고 한다.🚧 아래의 모든 글은 AWS와 EKS 환경을 전제로 작성하였습니다. IRSA란?IRSA는 IA

네이버 부스트캠프 웹모바일 9기 멤버십을 마치며

내용에 문제가 있을 시 수정・삭제 조치하겠습니다.드디어 6월부터 달려왔던 네부캠의 모든 과정이 끝났다!거의 매일을 규칙적으로 팀원들과 대화하고 학습, 구현하는 것에 시간을 써온 터라 할 일 없는 휴학생이 된 이번 주가 낯설게만 느껴졌던 것 같다.항상 본격적으로 글을 쓰는 것이 어려워 부캠 기간 동안 쌓아둔 임시저장 글들이 생각났다. 나중에서야 글을 마무리하고자 하면 그때의 문제해결을 위해 써온 집념이 사라지는 기분이라 결국 노션 한구석에 대충 나만 볼 수 있을 정도로 작성해왔던 거 같다.하지만 부스트캠프에서 겪을 수 있었던 나만의

[CD] ArgoCD Image Updater를 활용한 Continuous Delivery w/AWS ECR

CI를 어느정도 구체화시켰으니 이제 CD를 구체화할 시간이다. CD의 Continuous Deployment는 GUI를 활용해 관리 용이성을 높이고 history rollback을 쉽게 수행하기 위해서 ArgoCD를 활용하기로 결정했다.CD 기술 선정ArgoCD를 선택하면서 처음에는 여러 환경을 나눠서 사용하지 않아서 Kustomize 없이 아래와 같이 CD 레포를 구성했다..├── README.md└── backend ├── deployment.yaml ├── hpa.yaml ├── ingress.yaml └── service.y

로깅과 관심사 분리

배경여러 번의 리젝과 끝없는 기다림 끝에 개인 프로젝트인 dev-feed을 playstore와 appstore에 배포하는데 성공했다...!;그러나 배포가 끝이 아니다.나는 앞으로도 컨텐츠를 추가할 생각이다.그중에 하나가;인기 블로그를 제공하는 것인데, 우선 데이터를 모아보고 싶어 analytics로 해당 데이터들을 모으고자 했다.;dev-feed는 react-native로 만들었기에 @react-native-firebase/analytics를 사용하여 google-analytics를 통해 어떤 블로그를 구독했는지를 수집하기로 했다.

좋은 코드를 작성한다는 것, 그를 위한 노력에 대한 고민

고민의 시작이전부터 좋은 코드란 무엇인지 고민해왔다.이런 고민은 팀원과 함께 협업하여 개발해야했던 인턴을 진행하면서 좀 더 심해졌고, 정리되지 않은 상태였다.이번 글로 하여금 생각을 정리해보고자한다.;좋은 코드를 작성하는 방법이라기보다는, 조금 더 근본적인 이해와 내가 해야하는 노력에 대한 글이다.;좋은 코드?좋다라는건 참 모호하다.;좋은 사람은? 좋은 인생은? ~에가 빠진 좋다 라는 가치판단은 머리를 점점 혼란스럽게 할 뿐이다.;목적을 따져보기목적을 따져보자. 코드는 왜 쓰는가?;코드는 불편한 문제를 해결하고, 자동화하여 가치를

여러 Service 간 의존성 관리

개요이번 프로젝트에는 여행 기록(Record)을 저장할 수 있는 기능이 있었다.이 여행 기록에는 0 ~ 10개의 이미지(RecordImage)가 포함되어있고, 여행 기록을 생성하면 사용자에게 뱃지(Badge)가 부여되어야 했다.결국 한 기능에서 Record, RecordImage, Badge 세 종류의 데이터를 모두 다뤄야 하는 상황이었다.처음에는 당연히 책임 분리를 위해 3개의 Service로 분리하여 아래와 같은 구조를 생각했지만, 생각하면 할 수록 이게 맞는 구조인가에 대한 의문이 생기기 시작했다.단방향 의존 관계이러한 의문은

[CI] CronJob으로 ECR 인증 Secret Update 하기

앞선 글에서 Spot Instance로 Jenkins Kubernetes cloud agent 구성했다. 하지만 현재 EKS NodeGroup으로 설정한 모든 노드는 Docker 설치가 되어있지 않은 기본 제공 AMI를 쓰기 때문에 기존에 활용하던 Docker 플러그인 활용이 어려워져 Kaniko로 이미지 빌드와 푸시를 수행하게 되었다.문제 상황 - name: kaniko image: gcr.io/kaniko-project/executor:debug command: - sleep args: - infinity volumeMounts

웹 브라우저 이벤트루프는 왜 그런 우선순위로 작업을 실행시킬까 (feat. CPU 스케줄링)

요즘 OS수업을 듣고 있는데, 프로세스 스케줄링 관련 부분을 배우고 있다.그러다가 문득, 최근 면접에서 받은, 그리고 제대로 답하지 못했던 이벤트루프는;왜;그런;우선순위로;작업을;실행시킬까? 라는 질문이 떠올라 지금에라도 작성해본다.서론동시성Concurrency(동시성)와 Parallelism(병렬성)동시성과 병렬성은 같은 단어 같지만, 분명히 다른 단어이다.동시성은 동시에 실행되는 것 같이 보이는것병렬성은 실제로 여러 작업이 동시에 처리되는 것이다.동시성에 대해 말할 것이다.;과거, 코어가 하나인 CPU에서 동시성을 해결하는 것은

[합격 후기] YAPP 25기 WEB 최종 합격

간단한 후기 + 면접 복기를 위한 내용입니다. 많은 사람들이 다음 기수를 준비하는 데 도움이 되길 바라며 🔥서류 합격작년에 떨어졌기도 하고, 자소서에 시간을 많이 못써서 기대 안했지만 서류 합격!역시 깊은 프로젝트 경험은 강한 무기가 된다.중간에 회사에 몇 군데 지원했을 때는 광탈했었는데 동아리는 붙어서 다행이다. 내용은 좋다는 것 아닐까?자기소개서 문항은 다음과 같다.본인이 진행했던 프로젝트에서 책임감을 갖고 노력했던 사례와 이를 통해 배운점은 무엇인지 서술해주세요.YAPP 활동을 통해 어떤 점을 배우고 성장할 수 있을 것으로

[우아한테크코스 FE LEVEL4-2] 6차 스프린트 회고 & 최종 데모 데이

💭 TMI최종 데모데이를 끝으로 마지막 스프린트, 그리고 레벨4가 마무리되었다...!레벨 4는 레벨 1, 2, 3, 4 를 통틀어 가장 힘들었다고 말할 수 있다. 진짜...어떻게 한 번에 이렇게 많은 일을 시키지...? 라는 생각이 들었다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ프로젝트 리팩토링, 사용자 피드백 반영, 코드 리뷰, 강의, 심화 미션, 테크니컬 라이팅, 소개 페이지 작성, 부스 준비 등...나열하면 별로 없어 보이지만 하나하나 작업량이 적지 않았다. 근데 한번에 밀려오니까 그냥 정신이 하나도 없었다.하지만 끝났죠?최종 데모데이 성공적 ⭐️

[CI] Spot Instance로 Jenkins Kubernetes cloud agent 구성하기

쿠버네티스에서 파드로 에이전트를 만드는 Jenkins가 캡틴 같아서 가져왔습니다.설계 의도AWS EKS로 매니지드 쿠버네티스 클러스터를 활용한 안정적인 애플리케이션 운영 환경을 구성을 계획했고 Jenkins까지는 requests, limits를 잘 설정한다면 운영 환경에 큰 영향을 주지 않고 별도의 인스턴스 관리 없이 젠킨스를 활용할 수 있을 것 같아 운영 환경과 같은 클러스터에 Jenkins를 배포했습니다. 운영 환경과 Jenkins는 정해진 수의 온디맨드 노드에 배포해서 안정적으로 구성하고 리소스가 추가로 필요하다면 스팟 인스턴

2주 완성 CKAD

CKA를 취득하고 고득점이 아깝다는 생각과 함께 CKA만으로는 쿠버네티스를 제대로 활용하기는 확실히 부족하다는 생각이 들어서 바로 CKAD를 준비하기 시작했습니다. CKA가 넓고 얕게 공부해야한다면 CKAD는 좁고 깊게 공부해야하는 느낌이 강한 것 같아요. 그래서 한 문제에서 해결해야하는 사항이 다양하고 개인적으로는 CKA보다 어렵지는 않지만 준비나 문제 풀이가 까다로울 수는 있다고 느꼈습니다.사전 지식CKA 취득가벼운 Kubernetes 프로젝트 활용 경험준비 과정10/6 - CKA 응시 ➡️ 7일에 결과 발표 후에 일주일 정도의

AWS Lambda, DynamoDB로 Serverless 구축하기

이번 프로젝트에서 풀스택으로 하나의 기능을 구현하게 됐다. 이전에 MySQL을 사용했던 프로젝트에서는 쿼리문 작성이 번거롭고, 간단한 api를 만드는데에 품이 많이 든다는 느낌을 많이 받았다. 그러다 DynamoDB + AWS Lambda 조합을 사용하는 레퍼런스를 봤는데, 구조도 깔끔하고 연동도 쉬워 보여 최종적으로 이 조합을 선택했다.Serverless 아키텍처를 사용하면 서버 관리 없이도 자동 확장이 가능하고, 데이터 CRUD 작업도 빠르게 처리할 수 있는 환경을 만들 수 있다.구현에 들어가기 전에, 이 프로젝트에서 사용할 주

React native Code Push 적용 및 인앱 업데이트시 UX 개선하기

배경2024 관광데이터 활용 공모전에 프론트엔드 개발자로 참여하여 프로젝트를 진행중이다.앱을 1차적으로 릴리즈하고, 다음 업데이트를 한번 해보니, 스토어 심사를 진행하는 것이 생각보다 시간이 걸리고 불편한 일이라는 것을 느낄 수 있었다.이런 부분들은 이미 알고는 있었으나, 실제로 경험해보니 더욱 체감이 되었다.원스토어는 빠른편이다.;웹뷰를 사용하면 해결할 수 있었겠지만, 초기에 웹뷰를 사용하지 않고, RN으로만 진행하기로 하였기때문에, 다른 방법을 탐색해야했다.그러다 찾은 것이 Code push다.;어떻게 가능한가?이것을 이해하기

kubectl 2달이면 CKA 99점을 받는다

근데 이제 alias k=kubectl을 곁들인.. 실제로는 k만 날렸습니다😆사전 지식2달 전의 저는.. 쿠버네티스는 컨테이너 오케스트레이션이다! 정도를 알고 있었습니다. 그게 끝! minikube, microk8s, eks가 어떤 구조인지, 클러스터와 노드가 뭔지조차 정확히 이해하지도 못하고 있었는데 CKA 취득은 정말 kubectl 첫 입력한 날이 3달이 지나기 전에 취득한 것 같습니다.그럼 쿠버네티스를 잘 알지도 못했던 사람이 생각보다 짧은 기간에 어떻게 CKA 취득을 할 수 있었는지!? 풀어보도록 하겠습니다.준비 과정저는

[컨퍼런스] toss slash 24 컨퍼런스 후기

💭;TMI추첨운이 하나도 없는 내가 운좋게 당첨이 되어 토스 slash 24 컨퍼런스를 다녀왔다. 몰랐는데 오프라인으로 컨퍼런스를 진행한 게 이번에 처음이라고 한다. 첫 번째 오프라인 행사에 초청을 받다니 영광이였다. 오프닝 소개를 들어보니 대략 5:1 의 경쟁률이였다고 한다. 생각보다 경쟁률이 낮아서 놀랐는데, 생각보다 뽑은 인원이 많았다 ㅋㅋㅋㅋㅋㅋㅌ 아무튼 이렇게 코엑스 홀을 빌려 무료로 컨퍼런스를 진행한다는 것 자체가 개발 지식 공유에 진심인 것 같아서 이런 회사에서 일하고 싶다는 마음이 커졌다.📘 프론트엔드 세션 정리프

[CI/CD] GitOps 환경 구축하기(4) ArgoCD, Kubernetes

마지막으로 쿠버네티스 활용에 대한 아쉬움과 함께 ArgoCD를 어떻게 활용했는지를 적어보겠다!아키텍처매니페스트 레포를 ArgoCD에 등록하면 Jenkins에서 해당 레포의 애플리케이션 이미지 태그를 바꿀 때마다 상태를 비교하고 CD를 지원할 수 있다.Kubernetes구성한 쿠버네티스 클러스터 아키텍처는 다음과 같다.ingress, argocd, cert-manager, cluster-autoscaler 등은 재배포 시에 업데이트가 필요하지 않아서 매니페스트 레포지토리에는 BE, AI 각각 애플리케이션의 Service, Deploy

[CI/CD] GitOps 환경 구축하기(3) Jenkins

GitHub에 이어 이미지 빌드로 CI를 담당하고 CD를 트리거하는 역할로 Jenkins를 선택했다. 기존에 CI/CD를 위해 사용했던 Github Actions와의 비교는 아래에 서술했다. 아키텍처아키텍처의 젠킨스 내부에 있는 아이콘 하나마다 파이프라인을 생성하여 백엔드/AI CI, CD 트리거를 위해 총 4개의 파이프라인을 활용하였다.Jenkins프로젝트에서 Jenkins의 대표적인 역할은 GitHub 레포지토리의 변경 사항을 확인하고 파이프라인을 실행해서 다음을 수행하는 것이었다.이미지를 DockerHub에 빌드/푸시새로운 빌

[CI/CD] GitOps 환경 구축하기(2) GitHub

GitOps라면 역시 Git을 써야한다. Git을 활용하여 명시적인 선언으로 프로젝트 코드와 상태, 형상 등을 명시적으로 관리할 수 있도록 한다. GitLab, BitBucket 등 다양한 Git 저장소가 있지만 프로젝트 기간이 짧고 따로 Git 서버를 구축할 시간적, 금전적 여유가 없어 가장 익숙한 GitHub를 저장소/플랫폼으로 골라 GitOps를 시작했다. 구현한 CI/CD GitOps 아키텍처는 아래와 같다.아키텍처아키텍처를 살펴보면 GitHub에서 변경 사항이 생기면 Jenkins와 ArgoCD가 수정사항을 인지하는 어떤

[CI/CD] GitOps 환경 구축하기(1) GitOps, Kubernetes

최근 팀프로젝트를 시작해서 클라우드 담당으로서 다양한 삽질을 하기 시작했다. 자동화된 빌드/배포 환경을 처음부터 만든다거나 테라폼으로 AWS 인프라를 생성했다 삭제하기를 반복하고 쿠버네티스로 서비스를 배포하려고 부딪혔다. 트러블 슈팅에 밤새 시달리다가 자고 일어나서 아침이 되니 한 시간만에 해결하기를 반복했지만 90DaysOfDevOps를 보며 말로만 이건 이렇고 저건 저렇다 비교했던 서비스를 직접 사용해보며 기술 비교가 겉핥기식 보다는 조금 나아진 것 같다. 그리고 되돌아보면 GitOps로 CI/CD를 일찍부터 적용해둬서 혼자 클

[우아한테크코스 FE LEVEL4-1] 5차 스프린트 회고

💭 TMI레벨 1, 2 때는 미션 단위, 레벨 3 때는 스프린트 단위로 회고를 진행했는데, 회고 방식에 대해 회고해봤다. 레벨 1, 2 때는 미션 단위니까 배운 것을 기록하고, 배운 것을 상기하면서 달라진 나와 비교하며 성취감을 얻으려는 목적이였다. 하지만 레벨 3 때는 팀 프로젝트의 스프린트 단위로 회고하다보니 학습 내용과 프로젝트 내용이 섞여서, 글의 목적이 뚜렷해보이지 않는다. 회고의 회고를 진행하게 된 이유도 이 부분에 대해 약간의 불편함을 느껴서였다. 이유를 살짝 고민해보니 보여주기식 회고를 한 것 같다. 또한 학습한 내

활동 기록 데이터는 어디서 처리하는 것이 좋을까 ?

개요최근 제작 중인 프로그램에서 페이지 활동 기록을 보여주는 기능을 구현하며, 한가지 의문이 생겼다.활동 기록은 사용자가 직접 개입하는 것이 아닌 사용자의 활동으로 부터 자동 생성되는 로그 데이터로, 활동 기록 생성에 필요한 정보는 다음과 같다.행위자변경 발생 위치 (컴포넌트)변경 내용여기서 변경 발생 위치, 변경 내용 데이터를 처리하는 방식에는 2가지가 있다.클라이언트에서 해당 데이터를 DOM API를 사용하여 조회하고, 이를 API 호출할 때 전달한다.클라이언트에서 API 호출 할 때 식별자만 전달하고, 서버가 DB에서 해당 데

[webpack] 번들 사이즈 최적화

[ 요약 ]webpack 5 production build 최적화 기본 적용webpack-bundle-analyzer 로 번들 사이즈 분석mini-css-extract-plugin : JS 파일에서 css 파일 분리css-minimizer-webpack-plugin : css 파일 압축 (minify) - 번들 사이즈에는 영향 안줌코드 스플리팅 : 초기 로딩에 불필요한 코드 분리번들 사이즈 개선 : 65.24KB → 55.29KB (15.25% 감소)홈화면 번들 글자수(공백 줄바꿈 포함) : 218,472 → 168,432💭;TM

[Tanstack-Query] 쿼리 데이터 캐싱으로 인한 무한 루프 문제 해결

💭;문제 상황1라운드가 끝난 라운드 통계 화면에서 2라운드 게임을 시작할 때, 게임 화면과 라운드 통계 화면이 서로 라우팅시키며 무한 루프가 돈다.🔍;현재 구현 방식게임 화면 → 라운드 통계 화면 : 게임 화면에서 isFinished 가 true일 경우 라우팅라운드 통계 화면 → 다음 게임 화면 : 라운드 통계 화면에서 isRoundFinished 가 true일 경우 라우팅게임 화면 → 라운드 통계 화면 → 게임 화면 → 라운드 통계 화면 … 무한 루프❌;문제점라운드 통계 화면에서 다음 게임 화면으로 넘어가는 시점에 isFini

엘리스 인턴십 회고

엘리스에서 현장실습으로 프론트엔드 인턴십을 진행했다.중간에는 정리하지 못했으나, 끝난 지금 제대로 정리해보고자 한다.;진행한 일들팀원들께서 말씀하시기를... 나는 역대급으로... 바쁠때 들어왔다고 한다.일이 굉장히 많았고(거의 쏟아졌던...), 그래서 밤을 새워가며 개발을 하기도 했지만, 그래도 그만큼 압축적인 경험을 통해 성장할 수 있었다고 믿는다. ;;나는 크게 네 가지 일들을 진행했다.1. 기존 프로젝트의 우선순위가 높은 버그 픽스들2. 커뮤니티 기능 및 UI개선 스프린트, 버그 픽스3. 커뮤니티 신규 기능 개발4. 디지털 교

[K8s] HPA 설정 트러블슈팅하기

ArgoCD를 연결해서 Auto-Sync를 켜놓고 따로 파일을 적용해서 안됐던 멍청이슈를 반복하지 않기 위해서.. 적어보려고 합니다. ArgoCD를 연결하셨다면 로컬에서 파일을 적용시키거나 Github에 반영하더라도 Auto-Sync 끄시고 적용하시길 바라요. 부디..🥹환경 및 참고 자료HPA 설정은 Kubernetes 공식문서의 Horizontal Pod Autoscaling와 HorizontalPodAutoscaler 연습을 참고하였습니다.저는 EKS 환경에서 GitHub에 manifest 레포를 두고 이를 추적하는 ArgoC

[우아한테크코스 FE LEVEL3-3] 3차 스프린트 회고

💭;TMI작업 분배, 일정 산출이 이전 스프린트에 비해 적절히 이뤄진 스프린트여서 만족스럽다. 데모데이 전날에 2시에 시연하기로 했는데, 10시에 시연을 할 수 있었다 ㅋㅋㅋㅋㅋㅋ 8시간 디버깅^^ 그 전날에는 mocking해서 발생한 문제라고 생각했는데 실서버를 사용해도 같은 문제가 발생했다. 그 다음날에 시연해야하는데, 제대로 동작하지 않아 저녁도 대충먹고 문제 해결에 집중했는데 결국 해결해냈다…데모 데이 때 문제가 발생했다면 절대 시간 안에 해결하지 못했을 것이다 미리 시연해서 진짜 다행이였고, 데모날에도 여유롭게 준비하고

[우아한테크코스 FE LEVEL3-4] 4차 스프린트 회고 & 중간 데모 데이

💭;TMI사용자 피드백 경험4차 데모데이 및 론칭 페스티벌을 마지막으로 레벨 3가 마무리가 되었다 ㅎㅎㅎ이렇게 다양하고 많은 사용자가 내 서비스를 이용하고 피드백 해주니까 감회가 새로웠다. 물론 같은 크루들이라 안좋은 말을 적진 않겠지만 진심어린 피드백과 칭찬들을 받으니까 더 좋은 서비스로 개선하고 싶었다. 내가 만든 서비스를 사람들이 사용하는, Product 개발자가 되고 싶다는 생각이 들었다. 기획, 디자인, 개발 모든 분야에 관여하면서 해당 프로젝트에 대한 애정이 남달랐던 것 같다.서비스 개발에 몰입한 경험2달 동안 하나의

[K8s] nginx ingress controller에서 https 적용하기

쿠버네티스를 처음 써보는 입장에서 백엔드, AI 서버를 배포하면서 했던 가장 큰 고민은 백엔드 서버의 통신에 https를 설정하는 것이었습니다. AI 서버는 ClusterIP로 배포해 백엔드에서만 활용해서 https 설정이 필요없지만 외부에서 별도로 배포하는 프론트엔드와 통신하기 위해서는 백엔드 서버에 https 설정이 필수적이어서 일단 쿠버네티스 공식문서를 따라가기 시작했습니다. 환경 안내저는 EKS 환경에서 Nginx Ingress Controller로 서비스를 배포했습니다!kubernetes.github.io/ingress-n

[Fluentd] ⚠️ [in_tail_container_logs] pattern not matched 해결책

쿠버네티스로 서비스를 배포하기 전에 EFK 스택을 구축해서 로그 수집부터 하려고 계획을 했는데.. ElasticSearch와 Fluentd가 연결이 안 되길래 데몬셋으로 배포한 Fluentd 파드 중 하나의 로그를 확인했더니 다음과 같이 찍히고 있었습니다.⚠️ [in_tail_container_logs] pattern not matched뭔지는 모르겠지만 경고와 함께 끝없는 \가 찍히고 있었고 그러다가 갑자기 프로세스가 죽어버리기도 했습니다.원인 분석간단히 정리하자면 문제를 알려주는 로그는 아래 두가지였습니다.[warn]: #0 [

네이버 부스트캠프 웹모바일 9기 챌린지를 마치고

챌린지가 끝나고 일주일간 휴식을 취한 후 뒤늦게 회고를 작성하게 되었습니다.이전 회고에서는 지원 과정과 챌린지 자체에 대해 다루었기 때문에, 이번에는 다음 기수를 준비하는 분들을 위해 제 배경과 성장 방향, 그리고 3차 문제해결력 테스트에 대한 전반적인 경험을 공유하려 합니다 🔥배경과 지원 동기 👀저는 주전공생이 아닌 복수전공생으로, 학과의 커리큘럼이나 선배들을 통해 개발자 진로에 대한 정보를 얻는 것이 쉽지 않았습니다. 이런 상황에서 웹 개발에 입문하기 위해 개발 동아리에 가입하였고, 1년 동안 약 5개의 프로젝트를 쉬지않고

부스트캠프 웹・모바일 9기 챌린지 회고

4주 간의 챌린지 과정을 마치고, 이 과정에서 얻은 것들을 정리하고자 회고를 작성하게 되었다.부스트캠프 웹・모바일 9기 챌린지란 ?부스트캠프는 네이버 커넥트 재단에서 주관하는 개발자의 지속가능한 성장을 위한 학습 커뮤니티다.그 중에서도 챌린지 과정은 이름 그대로 "도전"을 통해 자신의 한계를 극복하는 과정이다.챌린지는 다음과 같이 CS에 대한 내용들을 학습하게 된다.그리고 매일 아래와 같은 일정에 따라 활동한다. (19:00이 아니라, 00:00으로 바꿔야 할 것 같다.)피어세션오전에 진행하는 피어세션은 매주 바뀌는 그룹원들과 서로

[AWS] Access Key 없이 CodeBuild + CodePipeline + Lambda Function 활용하여 배포 자동화하기(2) - storybook

[ 요약 ]CodeBuild 에서 storybook 빌드 결과물도 s3에 같이 업로드하기artifact를 생성할 때 discard-paths 사용 ❌cloudfront로 배포한 서비스 도메인과 storybook 연동하기cloudfront function 활용하여 storybook의 index.html로 redirect 하기🚨 문제 상황PR이 여러개 올라와있을 때 최종적으로 반영된 컴포넌트 상태를 확인하기 어려웠다. PR 단위로 github actions가 돌아서 storybook을 자동 배포하는데, 여러개가 섞이니까 구버전의 st

[K8s] CronJob으로 크롤링한 데이터 저장하기

여러 노드에서 사용할 수 있게 곧 PV, PVC를 추가할 예정입니다!최근 쿠버네티스를 써야하는 프로젝트 두개에서 동시에 같은 문제가 발생했습니다. 둘 다 주기적으로 어떤 페이지를 크롤링해서 가공한 데이터를 파일로 저장해두고 써야했습니다. 주기적인 작업이라서 크론잡을 생각해냈고 크론잡으로 [크롤링→추출 및 가공] 을 수행하는 컨테이너를 주기적으로 실행하고 종료할 계획을 세웠습니다. 크론잡이 끝나면 데이터가 사라질 것을 방지하여 볼륨에 데이터를 저장했습니다! 그래서 두 프로젝트 중 하나에서 쓸 크론잡 수행을 통해 로컬에 데이터 저장하기

[Sentry] 서비스 에러 모니터링 및 에러 트래킹하기

📘 Sentry 설정Sentry를 react 애플리케이션에 설정하는 방법을 하나씩 설명하려고 한다.Sentry 설치처음에 공식문서에 --save로 되어 있어서 --save-dev인줄 알았다. sentry를 런타임에 사용하기 때문에 빌드 결과물에 추가해야 한다.npm i @setry/reactSentry 초기화가능한 빨리 Sentry를 init하는 것이 중요Sentry 초기화 코드를 index 파일에 넣고 해당 파일을 애플리케이션 진입 지점에 포함하는 것이 좋음import * as Sentry from "@sentry/react";

'무중단배포' 라고 쉽게 부르지 말자

제목은 스스로 하는 반성입니다. 파면 팔수록 그동안 무중단배포라는 단어를 너무 쉽게 붙여왔고 무중단배포가 아님에도 무중단배포라고 칭했던 경우가 잦았던 것 같아 아무 배포나 무중단배포라고 부르지 않기 위해서! 무엇이 무중단배포이고 무엇이 아닌지 확실히 정리해보려고 합니다.Zero Downtime Deployments무중단배포는 서비스 운영과 클라이언트 입장에서 서비스가 끊어지지 않으면서(Zero-downtime) 신규 소프트웨어를 배포하는 기술로 운영 중인 서비스를 중단하지 않고 업데이트 과정에서 서비스가 동작하지 않는 영향을 주지

[Sentry] 로컬에서 에러 테스트 시 Debug ID가 매칭되지 않는다는 오류 해결

[ 요약 ]Sentry.init 을 설정하고 npm run build 하면 빌드 결과물이 Sentry에 업로드된다.webpack-dev-server로 로컬에서 개발 서버 열고 에러를 던진다.Sentry를 열어 에러를 확인하고 Unminify Code를 클릭하면 Debug ID가 매칭되지 않는다는 오류가 발생했다고 하며 번들링된 파일을 제공한다.** ❌ 문제점 : source map을 설정한 npm run build 한 빌드 결과물과 webpack-dev-server로 돌렸을 때 실행한 빌드 결과물이 달라 오류가 발생한다. (mism

[Event] 모달 dimmed 영역 클릭 시 안 닫히는 문제 해결

💭;문제 상황모달 dimmed 영역 클릭 시 모달을 닫는 콜백함수 실행하려고 함모달이 안열림 !!!콘솔을 찍어보니 모달이 열리자마자 닫힘isOpen이 true가 되자마자 false가 됨mousedown, mouseup으로 하면 잘 됨mousedown → mouseup → click 으로 이벤트가 발생한 시점만 다른데 왜 click만 안되는가?🔍;현재 구현 방식(의도)button 클릭했을 때 이벤트 핸들러가 동작하여 setIsOpen(true)를 수행해 모달을 연다.useEffect로 클릭 이벤트 리스너를 등록하여 클릭이 발생했을

네이버 부스트캠프 챌린지 3주차 회고

내용에 문제가 있을 시 수정・삭제 조치하겠습니다.8월에 들어서며 엄청나게 더워졌는데 나는 에어컨이 나오는 방에서 계속 미션을 했기 때문에... 아직 무더위를 실감하지 못하고 있다 🥲이번 주는 '개선하기'라는 시간이 추가되었는데, 덕분에 한 미션에 집중할 수 있는 시간도 늘었고 여유가 생겼던 것 같다. 그리고 개인적으로 만족스러운 성장과 결과를 이뤄낼 수 있었다.배우고 성장한 부분 🏃🏻‍♀️‍➡️개구리를 해부하지 말고, 직접 만들기이번 미션에서 해부와 직접 만들어서 이해하는 것의 큰 차이를 느낄 수 있었다. 구체적으로 미션 언급

[AWS] Access Key 없이 CodeBuild + CodePipeline + Lambda Function 활용하여 배포 자동화하기(1)

[ 배포 자동화 흐름 요약 ]0. CodePipeline 으로 source, build, deploy, invalidate 단계를 생성한다.source: 지정한 브랜치에 push되면 CodePipeline 이 변화를 감지하여 소스 코드를 가져온다.build : CodeBuild 를 이용해 지정한 브랜치의 최신 소스 코드를 빌드한다.deploy : CodePipeline 을 통해 빌드한 output을 s3에 저장한다.invalidate : Lambda Function 을 활용하여 cloudfront의 캐싱을 무효화하고 최신 빌드 결과

[우아한테크코스 FE LEVEL3-2] 2차 스프린트 회고

💭;TMI2차 스프린트가 끝이 났다. 보통 일정이 끝나고나면 미화되는 편인데, 이번 스프린트는 꽤나 힘들었다 ㅋㅋㅋㅋ 잠을 1시쯤 자는데 이번주는 3-4시에 침대에 누웠던 것 같다. 본격적으로 개발을 시작하니까 다양한 상황들이 생겼다.git 충돌 해결이 안된다, 배포가 안된다, API 연결이 안된다 등 프로젝트에 영향이 가는 문제들이 생겼다. 하지만 팀원들 모두 이것을 팀의 문제로 바라보고 비대위(?)를 소집하여 함께 해결해나가는 모습이 좋았다. 근본적인 해결책은 아니였지만 마감기한을 지키기 위한 방법을 제시하고, 다음주 스프린트

[CI] Jenkins에서 AWS ECR 업로드하는 GitHub Webhook 세팅

사전 준비사항Dockerfile을 가진 GitHub 레포지토리ECR 리포지토리Minimum hardware requirements:256 MB of RAM1 GB of drive space (although 10 GB is a recommended minimum if running Jenkins as a Docker container)Recommended hardware configuration for a small team:4 GB+ of RAM50 GB+ of drive spaceGitHub에서 호스팅 가상 머신을 제공하는 Gi

네이버 부스트캠프 챌린지 2주차 회고

내용에 문제가 있을 시 수정・삭제 조치하겠습니다.2주 차가 지났다! 왜인지 너무 빠르게 한 주가 지나간 기분이다.이번 주는 특히 동료들과 함께하는 시간이 많았는데 하루는 14시간 동안 줌을 하며 미션을 진행했다 ㅎㅎ...1주 차는 적응이 힘들었고 미션은 어느 정도 감당할 수 있었는데 이번 주는 감당하기에는 벅찬 느낌이 컸던 것 같다.. 그래도 노력했으니 스스로 박수를 👏🍷배우고 성장한 부분 🏃🏻‍♀️‍➡️지식 공유하기저번 주차 "슬랙을 잘 활용해 보기"를 스스로의 미션으로 설정하고 행동으로 옮겼다 (물론... 정말 적극적으로

가상환경 vs 가상화, 가상머신 vs 컨테이너

가상환경으로 패키지와 종속성을 격리하고 가상머신으로 리눅스를 사용하고 가상화로 구현된 도커로 컨테이너를 돌리고.. 가상가상가상이 반복되다보니 가상환경, 가상머신, 컨테이너는 왜 가상이란 이름이 붙었고 어떻게 동작하고 어떻게 다른 건지 문득 궁금해졌습니다..! 그래서 하나씩 무엇인지 알아보며 각각의 가상은 무엇을 말하고 싶은 건지 알아보려고 합니다. 제가 헷갈릴 때 다시 보려고 적는 거 맞습니다. 하하가상환경python virtual environment 기준A virtual environment is created on top of

[Django] HTTPS로 동작하는 서버 구성하기 (nginx, gunicorn)

목표위와 같은 구조를 바탕으로 HTTPS로 동작하는 Django 서버를 구성하려고 합니다! nginx와 gunicorn의 세부 설명과 쓸모에 대해서는 Web Server와 Web Application Server(WAS)를 참고해주세요.사전 체크리스트 Django python3 mysql requirements.txt Github서버 세팅Ubuntu 22.04 LTS 기준먼저 우분투 기본 세팅과 git, python, python-venv 설치를 진행합니다.sudo apt-get updatesudo apt-get upgradesud

네이버 부스트캠프 챌린지 1주차 회고

내용에 문제가 있을 시 수정・삭제 조치하겠습니다.오지 않을 것 같았던 주말이 왔다거의 매일을 자취방 한자리에서 아침부터 밤까지 거북목 상태로 미션을 이해하고 해결하고 학습 정리를 해온 한 주였다 😂나에게 CS는 굉장히 이론적인 무언가였다. 컴공을 복수전공하면서 원하는 전공을 놓치고 주워 담는 경우가 많아서 그런지 흥미가 떨어지는 부분도 컸고, 바로 눈앞에 있는 시험을 위해 공부하는.. 그런 존재였던 것 같다.이번 1주 차는 언젠가 들어봤던 혹은 공부했던 CS 이론들을 직접 구현하는 시간을 가질 수 있었다. 처음 미션이 주어졌을 때

[jest & msw] jest + msw 적용 안되는 문제 해결

📘 TextEncoder is not definedjest로 api 요청하는 컴포넌트를 테스트 돌려보면 TextEncoder is not defined 라는 오류가 발생한다.공식문서에 따르면 jest에서 Node.js globals를 빼앗고 다시 추가하지 않기 때문에 오류가 발생한다고 한다. 그래서 이를 사용자가 직접 명시적으로 추가해야 한다. 📘 Cannot find module ‘undici’ from ‘jest.polyfill.js’공식문서에 작성된 jest.polyfill.js 를 그대로 가져오고 jest.config.j

[babel] babel-loader로 emotion 스타일링 적용 오류 해결

📘 문제 상황개발환경에서는 ts-loader를 사용하여 빌드하였는데, 배포 관련한 작업이 필요해 프로덕션 환경에서 babel-loader를 사용하여 빌드했더니 에러가 발생하였다. React is not defined 오류는 React 17 미만 버전에서 jsx를 해석할 때 React.createElement로 트랜스파일되기 때문에 발생하는 오류로 판단하였다. 하지만 runtime: “automatic” 을 적용하면 새로운 jsx 변환 방식을 사용하기 때문에 React import가 필요없다고 알고 있어서 이해가 되지 않았다.//

[우아한테크코스 FE LEVEL3-1] 1차 스프린트 회고

💭;TMI걱정 반, 기대 반이였던 레벨 3!!! 2주 간에 첫 스프린트가 끝났다. 팀 배정이 되었을 땐 캠퍼스가 바뀌지 않아 좋았지만, 방학 후 첫 출근에는 모르는 사람들이 너무 많아져서 당황스러웠던 기억이 있다 ㅋㅋㅋㅋ제일 걱정이였던 아이디에이션…! 나온 아이디어를 디벨롭하면서 해결할 문제도 어느정도 명확해졌다. 하지만 아이디어가 정해지고 나니 기술적인 도전을 하기 어렵다고 생각이 들었다. 기술적인 도전 경험은 내 레벨 3 의 목표 중 하나였기 때문에 근무 시간이 끝나고 회의 이후 남아서 고민해봤다. 하지만 현재로는 게시판 형태

[AWS] VPC 구성하고 ALB 테스트하기

지금까지 단일 EC2를 활용하기에 그쳤는데 클라우드 컴퓨팅의 고가용성을 살려서 여러 AZ에 EC2를 두고 VPC를 구성하고 ALB로 로드밸런싱을 테스트해보고자 합니다. 실습인 만큼 퍼블릭으로 로드밸런서를 사용해보고 프라이빗과 NAT Gateway를 연결하는 등을 시도했습니다.VPC를 구성하려면 네트워크에 대한 이해가 필요하니 개념부터 설명해보겠습니다. 개념 하나마다 글 하나가 나올 수 있는 단어들이라 이 글에서는 간략하게 설명하고 넘어가려고 합니다..개념먼저 CSP는 하나의 Region에 여러 Availability Zone을 두고

yalc로 로컬환경에서 패키지 테스트하기

배경여러가지 라이브러리를 만들어보며, 지금까지 항상 npm에 임의로 버전을 올리고, 패키지를 다운받은 이후에 테스트했었다.그런데 인턴을 하다, eslint룰을 추가하고 잘 적용됐는지 확인해볼 일이 생기게 됐고, 회사 사내의 라이브러리였기에 이때도 이렇게 진행할 수는 없었다.;yarn link설명하기에 앞서, 로컬에서 수정하여 프로젝트에 적용시키고자하는 것을 패키지, 실제로 변경된 패키지를 테스트되는 곳을 프로젝트라고 하겠다.;yarn link를 사용해서 패키지와 프로젝트를 연결하면 프로젝트의 node_modules/<packa

네이버 부스트캠프 웹모바일 9기 베이직 수료 및 챌린지 합격 후기

내용에 문제가 있을 시 수정・삭제 조치하겠습니다.올해 휴학을 하며 그동안 많이 해오던 프로젝트 대신, 내 설계와 코드를 돌아보며 JS 기초를 단단하게 만들어줄 경험을 쌓아보고 싶었다. 그러던 중 두 가지 경로를 준비하게 되었는데 그중 하나가 바로 '네이버 부스트캠프'이다.동아리 선배도 했던 부트캠프라 커리큘럼과 성장에 대한 신뢰가 있었고, 고민 없이 지원했던 거 같다.1차 문제해결력 테스트올해는 선발 과정이 많이 바뀐 느낌이었다. 여러 수료생분들의 후기를 통해서 테스트들이 전부 만만치 않고 CS문제도 어렵다고 들었는데, 이번 1차는

[webpack] webpack으로 react + typescript + babel + husky 개발 환경 구축하기

💭;TMICRA를 쓰다가 vite가 생긴 이후로 더더욱 빌드 환경을 직접 건드리는 경우가 없어졌는데, webpack을 사용해야하는 상황이 되었다. 사실 webpack이 근본(?)있는 모듈 번들러이기 때문에 공부할 필요성을 느꼈는데 동기부여가 좀 부족했기도 했고, webpack 쓸 줄 아냐고 물어보면 머뭇거리게 된다. 내 생각에 webpack을 제대로 이해해야 번들러를 이해했다고 할 수 있다. 이번 기회에 webpack 쓸 줄 아는 사람이 되어보자. 시간이 없다면 마지막 설정 부분만 추가하여도 된다.🎀 webpack[ webpac

Axios Interceptors로 토큰 자동 재발급하기

지난 포스팅의 구글 로그인 적용과정을 통해서 클라이언트는 access토큰과 refresh 토큰을 성공적으로 받아올 수 있었다.이번 포스팅에서는 두 토큰을 이용해 토큰의 만료 여부에 따라 자동 재발급 혹은 자동 로그아웃을 어떻게 구현하였는지 정리해보고자 한다!간단 개념 정리 ✍️JWT (Json Web Token)인증에 필요한 정보들을 객체 형태로 Token에 담아 암호화시켜 사용하는 것JWT는 다음과 같이 세 부분으로 구성된다.헤더(Header): 토큰 유형과 해싱 알고리즘 정보를 포함.페이로드(Payload): 인증에 필요한 정보

2024 상반기 회고

되돌아보기2024년이 반이나 지나갔다.세상에,이번 6개월은 눈 깜짝할 새에 지나갔다.;2023 하반기 목표 돌아보기독서량 늘리기2023하반기에서 책을 많이 읽는 것을 목표로 세웠었는데, 운 좋게도 책읽기와 상상력이라는 교양수업을 들을 수 있었고 덕분에 많은 책들을 읽을 수 있었다. 덕분에 최근에는 새로운 취미로 민음사 책들을 모으고 있다. 이번 상반기를 통해 책은, 특히 민음사 전집과같은 고전은 때로는 약으로, 때로는 예방주사로 작용할 수 있다는걸 알게 됐다.지식의 전달이라는 관점보다는 경험과 가치를 보다 온전한 형태로 전달받는다는

[서버리스] Github Actions로 Lambda 업데이트하기

람다 작업을 하면서 가장 번거로웠던 점을 뽑자면 개별 함수를 고칠 때마다 따로 Github을 업데이트하는 점이었습니다.. 엔드포인트마다 함수를 연결했더니 10개의 함수를 개별적으로 관리해야했고 코드 업데이트 과정에서 함수 코드와 깃헙 코드의 싱크를 놓치는 경우도 발생했습니다. 그래서 가장 편하게 자동화할 수 있는 방법을 찾아 마켓플레이스를 뒤져보았습니다. Github Actions Marketplace - AWS Lambda 그 중 스타가 어느정도 있는 액션을 발견하여 해당 액션을 활용했습니다. AWS Lambda DeployYou

[테코톡] 컴포넌트 렌더링과 생명주기

[10분 테코톡] 마루의 리액트 컴포넌트 LIFECYCLE💭;TMI무사히 테코톡 발표를 끝마쳤다!!! 페어 프로그래밍 주간이라 페어에게 조금 미안해서 발표시간 외에는 최대한 페어 프로그래밍에 집중하려고 노력했다. 페어 주간인 것을 알고 나름 미리 준비한다고 했는데 피피티를 전날까지 수정했다. 그리고 발표준비가 완전하지 않다고 느껴 전날까지 살짝 불안했다. 발표 준비로 인해 4시에 자서 아침에 매우 피곤한 상태였는데 발표 자체는 꽤나 만족스러웠다. (실전파일지도)컴포넌트 생명주기 를 발표 주제로 선택하였는데, 그 이유는 useEff

OAuth2.0 구글로그인 적용하기

길고 긴 중앙대 멋사 위키의 소셜로그인 구현 일대기가 (거의) 끝났다 🫠이제 어떤 식으로 위키의 프론트와 백이 협업하고 로그인 기능을 구현했는지 차근차근 정리해보자!🤔 OAuth 2.0 ?OAuth 2.0(Open Authorization 2.0, OAuth2)은 인증을 위한 개방형 표준 프로토콜OAuth는 플랫폼 외부에서 개발된 서비스에게 리소스 소유자를 대신하여 리소스 서버에서 제공하는 자원에 대한 접근 권한을 위임하는 방식을 제공하는 프로토콜이다.OAuth 2.0은 1.0과 달리 HTTPS를 통해 보안을 강화하고, 다양한

[Tanstack-Query] tanstack-query에서 toast UI로 전역 에러처리 시 캐시 초기화되는 문제 해결

💭;문제 상황tanstack-query를 활용하여 서버상태를 관리하였고, API 요청 시 발생하는 에러를 핸들링하려고 하였다. Tkdodo님 블로그의 에러 핸들링편에 따르면 useQuery에서 에러가 발생할 경우 onError로 처리하면 observer마다 실행이 된다. 이러한 문제 때문에 v5에서는 onError 옵션이 제거되긴 했지만, 이전 버전을 사용하더라도 fetch error는 전역에서 잡아 처리하는 게 적절하다. 블로그 예시와 유사하게 Provider로 내려준 toast.error()를 호출하여 에러 메세지를 toast

클라이언트의 FCM 실시간 푸시알림 구현하기

지난 3월 구름톤에서 웹 푸시알림으로 특정 이벤트 발생을 유저에게 알려주는 기능을 구현하게 되었다. 백엔드 팀원 역시 FCM을 처음 시도하는 것이라 일주일이라는 기간동안 가능할까 걱정하였는데 다행히 성공적으로 구현해 당일 시연까지 할 수 있었다.FCM 이란?Fire-Cloud-Messaging의 약자로 메시지를 안정적으로 무료 전송할 수 있는 크로스 플랫폼 메시징 솔루션 이라고 소개된다.주요기능은 다음과 같다알림 메시지 또는 데이터 메시지 전송다양한 메시지 타겟팅 (단일 기기, 기기 그룹, 주제를 구독한 기기 등 3가지 방식으로 메

Next를 만들어보면서 이해해보자 (JSX기반 MiniNext) - pages기반 라우팅 (+중첩라우팅)

;pages 파일 기반 라우팅지금까지는 pages에 App.tsx만 있어서 하나의 파일에 대해 html을 만들어서 전송했었다.하지만 Next에서는 pages에 있는 모든 파일이 라우팅되어, 해당 경로로 접근하였을때 페이지를 제공해준다.이러면 /와 /gallery 경로가 생성된다.이번에는 이 기능을 구현해 볼 것이다.;pageFiles찾기우선 이를 위해서는 pages의 파일이름들을 가져올 수 있어야한다. 그래서 바벨로 트랜스파일링된 dist/pages내부의 모든 tsx파일을 찾아올 것이다.const PAGES_PATH = 'dist/

실존은 본질에 앞선다. (feat. 노인과바다, 사피엔스, 이기적 유전자)

의자는 앉기 위해 만들어진다. 침대는 자기 위해 만들어진다. 옷은 입기 위해 만들어진다.본질이 실존에 앞서는것이다.;그렇다면 사람은 무엇을 위해 만들어졌는가? 꽃과 동물은 무엇을 위해 만들어졌는가?이런 질문에 대답하기 위해 많은 철학, 종교가 탄생했다. ;하지만, 과학이 발전함에따라 종교의 힘은 점차 축소되고, 결국 남는 건 무의미다.우리는 그냥 존재할 뿐이다. 본질은 아직 존재하지 않는다.;최근의 경험에 관하여나는 꽤나 창업에 관심이 많다. 새로운 가치를 만들어 내고, 이것을 사람들에게 알려 세상을 더 개선하는 것이 나의 꿈, 최

ssh 접속 시, 환경변수를 읽어오지 못하는 이슈

개요산보실록 서비스를 올릴 물리 서버가 들어오면서, 드디어 운영 단계를 앞두게 되었다.이후, 운영과 유지보수를 위해 Spring으로 전환하는 과정에서 수월한 유지보수를 위해 CI/CD를 구축하기로 결정했다.지원 받은 물리 서버의 인프라 구축이 완료되기 전, 프론트엔드 개발자와 원활한 협업을 위해 EC2와 RDS를 이용해 사전 배포를 진행하게 되었다. 그래서 물리 서버에 CI/CD를 구축하기 전 CI/CD 구축과정을 익히고, 개발을 원활히 하기 위해 EC2 서버에 CI/CD를 구축하는 과정에서 발생한 이슈 해결 과정을 기록하고자 한다

Next를 만들어보면서 이해해보자 (JSX기반 MiniNext) - getServerSideProps, hydration

;이전에 동일한 JSX를 갖고 html과 React App을 렌더링하고, 이 둘을 연결시켜보았다.이번에는 Next(12버전)의 핵심 기능중 하나인 getServerSideProps를 구현하고, 이걸 클라이언트와 연동시켜보고자 한다.;getServerSideProps아래는 Next docs에서 가져온 사진이다.이걸 어떻게 사용하는지는 이미 알고있다고 가정하고, 이 코드들의 특성을 분석해보자.https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-

Next를 만들어보면서 이해해보자 (JSX기반 MiniNext) - createHTML, 기본 hydrate 구현하기 (feat. miniReact)

이전 게시글에서 호환 가능한 JSX 컴포넌트를 만들었다.이제는 JSX를 사용해서 SSR에서 반환할 HTML과 클라이언트에서 hydrate, 업데이트할 코드를 작성해볼 것이다.;이번 게시글에서 할 일jsx함수로 부터 반환된 miniReactNode객체를 서버에서 HTML String으로 변환할 것이다.(클라이언트로 js파일을 여기서 보내 줄 것이다.)jsx함수로 부터 반환된 miniReactNode객체를 클라이언트에서는 DOM으로 변환할 것이다.클라이언트에서는 이전에 만들어둔 miniReact를 활용하여 useState을 통해 upd

Next를 만들어보면서 이해해보자 (JSX기반 MiniNext) - 호환 가능한 JSX(feat. Rollup, nodemon, Babel)

구성하기내가 원하는 것app.get('/', (req, res) => { const html = createHTML(<App />); res.send(html);});바로 이런 그림이다. 클라이언트와 동일한게 <App/>을 렌더링하고, 이걸 초기 HTML로 전송해주는 것이다.;그리고 클라이언트에서는 이렇게 App을 렌더링해줄 것이다.import App from '../src/pages/App';import { hydrate } from '@core/render';hydrate(<App/>, do

Next를 만들어보면서 이해해보자 (JSX기반 MiniNext) - 무엇을, 어떻게 만들것인가?

시작하며이전에 리액트가 어떻게 동작하는지, 이해하기 위해서 리액트처럼 동작하는 어플리케이션을 만들어보았었다.https://0422.tistory.com/317;리액트를 만들면서 이해해보자 (1) - JSX와 React.createElement이 글을 읽기에 앞서 이 게시글은 리액트처럼 동작 하는 코드를 작성해보는 것이지 리액트와 100% 동일한 코드를 작성하려 하는 것이 아닙니다. JSX jsx는 javascript + xml의 줄임말이다. 이걸 쓰면 html0422.tistory.com이번에도 마찬가지다. 이번에는 Next의 SS

라이브러리를 만들어보자 - (3) Rollup+babel로 ESM과 CJS모두 대응되게 만들기

;이전 게시글에서 TS는 내부 코드의 확장자를 변경하지 않는다는 것을 알 수 있었다.그렇다면 tsconfig.json 두개로 cjs와 esm 모두 대응되게 만든다는 것은 어려운 일이라는 것을 알 수 있다.하지만, 시작한 이상 여기서 포기하고 싶진 않았다. 그래서 번들러로 코드를 번들링한 결과를 npm에 배포하도록 했다.;왜 Rollup?Webpack과 Vite, Rollup등 다양한 번들러가 있으나 Rollup을 택했다.이유는1. 라이브러리 번들링이기에 HMR이나 개발서버가 필요하지 않았다. (결과물 테스트는 Jest와 Storyb

typescript 컴파일러와 모듈 시스템에 대한 이해

이전 게시글에서 확장자 문제에 부딪혔고, 이런 문제를 해결해보고자 했다.;이를 이해하기 위해서는 이 문서를 읽는게 직빵이었는데, 이 글에 해당 내용을 담으려고 읽다가 보니 그냥 번역해서 오픈소스에 기여해보는게 좋을거란 생각이 들어서 해보았다.;https://github.com/microsoft/TypeScript-Website-Localizations/pull/224;#6 Translate module-reference/Theory.md to korean by d0422 · Pull Request #224 · microsoft/Ty

라이브러리를 만들어 배포해보자 - (2) tsconfig와 ESM,CJS

배경이전 게시글에서 라이브러리를 tsc만으로 컴파일해서 배포했다.;그랬더니 아래와 같은 일이 발생한다. 번들러 없이는 아무것도 작동되지 않는...CJS방식으로 require했을때도, ESM으로 import했을때도 잘 작동되지 않는다.왜 이런일이 발생했을까?;모듈 시스템그전에, 모듈 시스템 중 CJS와 ESM에 대해 살펴보자.CJSrequire와 module.exports를 통해 동작한다. 동기적으로 실행된다.또한, 메인스레드를 블로킹한다. 즉, 모듈의 코드 실행까지 다음 진행이 차단되는 것이다.exports되는 항목을 마치 obje

라이브러리를 만들어 배포해보자 - (1) tsc만으로 기본 설정하기

배경아직 대학생이기에, 아직 취업을 하지 못하기에 최근에 용돈벌이용으로 외주를 시작했다.첫 외주를 진행하다가 문득, 보통 외주를 통해 개발하는 웹페이지는 구성, 기능들이 어느 정도 비슷할 수 있다 생각하게되었다. 특히 랜딩페이지와 같이 사용자 UI를 신경써야하는 부분은 더욱 그런 기능이 겹치기 마련이다.;그래서 이런 부분들을 빠르게 개발하기위해 자주 반복되는 로직을 react-hook형태로 모아보자는 다짐을 하게되었다.이번 글에서는 기본적인 설정만 간단하게(아무생각없이...) 하기에 간단하게 살펴보고, 이로인해 발생한 문제들을 다음

[프로그래머스/Lv.2] 디펜스 게임 - Java

문제https://school.programmers.co.kr/learn/courses/30/lessons/142085;프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr;;리뷰그동안 여러 코딩 테스트에 많이 나왔을 법한 문제였다. 이번 기회로 확실히 풀이를 기억해 두어야겠다.풀이 아이디어가 떠오르지 않아서 일단 재귀를 통한 완전탐색을 해봤다. 문제의 제한사항이 아래와 같으니 당연하게도 시간

[프로그래머스/Lv.2] 시소 짝꿍 - Java

문제https://school.programmers.co.kr/learn/courses/30/lessons/152996;프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr;;리뷰정확성을 맞히기는 어렵지 않고, 효율성을 더 고려해야 하는 문제이다. 2023 카카오 겨울 인턴십 3번 문제였던 주사위 고르기를 풀 때 효율성을 개선했던 방법으로 해결했다.;풀이포인트는 몸무게가 중복인 사람들이 있기

[프로그래머스/Lv.3] 정수 삼각형 - Java

문제https://school.programmers.co.kr/learn/courses/30/lessons/43105;프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr;;;리뷰DP(동적계획법) 문제이다. 직전 단계까지의 계산을 따로 저장해놓고 현 단계를 계산할 때 이를 사용해야 한다.풀이주어진 triangle과 똑같은 형태의 이차원배열 memo를 생성했다. 그리고 맨 위 숫자부터 차례로 내

[프로그래머스/Lv.2] 숫자 변환하기 - Java

문제https://school.programmers.co.kr/learn/courses/30/lessons/154538;프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr;리뷰프로그래머스 알고리즘 고득점 Kit에서 DFS/BFS 문제로 분류되는 타겟넘버와 비슷하다고 생각해서 아이디어를 얻었다.풀이Case #1 BFS문제에 따라 x에서 n을 더한 경우, 2를 곱한 경우, 3을 곱한 경우를 모두

[프로그래머스/Lv.2] 큰 수 만들기 - Java

문제https://school.programmers.co.kr/learn/courses/30/lessons/42883;프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr;;리뷰그리디(탐욕법) 문제이다.풀이주어진 수의 일정 범위에서 가장 큰 수를 각 자리의 값으로 만들면 된다. 이때 그 범위를 지정하는 것이 관건이다.현재 자리에 들어갈 수를 구하는 범위를 정하기 위해서는 다음과 같은 조건을 고

[프로그래머스/Lv.2] 호텔 대실 - Java

문제https://school.programmers.co.kr/learn/courses/30/lessons/155651;프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr;배열 book_time에 저장된 각 예약 건의 입실 시간과 퇴실 시간을 바탕으로 최소 몇 개의 객실이 필요한지 구하는 문제이다. 퇴실 시간 이후 청소 시간 10분 동안은 다른 예약자가 같은 방을 사용할 수 없다는 점을 고려

[프로그래머스/Lv.2] 미로 탈출 - Java

문제https://school.programmers.co.kr/learn/courses/30/lessons/159993;프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr시작점에서 출발하여 출구로 탈출하는 데 걸리는 최단 시간을 구하는 문제이다. 한 칸을 이동하는 데는 1초가 걸린다. 미로를 탈출하기 위해서는 레버를 반드시 거쳐야 한다.;리뷰풀이BFS로 최단 거리를 구하면 된다.;단, 레버를

불굴의 의지로 살아내기 - 노인과 바다

130페이지정도의 짧은 이 소설이 왜 세기의 명작인지 알 수 있게 되었다. 정말 추천한다.;삶은 꽤나 허무하고, 무의미하다. 결과적으로 노인이 잡은 물고기는 앙상한 뼈만을 남겼다.;그러나, 그 고기를 잡기까지의 고통, 그리고 그것을 견뎌내는 노인의 의지는 너무나도 아름답다.;한번만 더...! 한번만 더..! 를 속으로 외치며 삶과 투쟁하는 모습을 보며 정말 숭고함을 느낄 수 있었다.내가 견디지 못할 것 같아. 아냐, 그럴 리가 없어, 하고 그는 스스로에게 타일렀다. 난 언제까지나 끄떡없을 거야....머리를 맑게 해야해. 머리를 맑게

모노레포 Vite 경로의 마법사를 해부해보자 - vite-tsconfig-paths

어떻게? 왜 작동하는가?자 이전글에서 모노레포에서 tsconfigPath의 마법 같은 경로문제 해결 기능을 보았다.하지만, 개발자라면 마법과 같은 일은 없으리라는 것을 알고 있을 것이다. 결국 왜? 를 알아야 내 것이 되는 것이다.어떻게 tsconfigPath가 경로문제를 해결했는지 확인해보자.;바쁜 분은 결론만 보아도 이해에 도움이 될 수 있을 것 같다.;viteFinal.storybook/main.ts의 viteFinal은 vite-builder를 통해 storybook을 구성하는 경우에 사용되는 옵션이다.추가적인 플러그인을 적

모노레포에서 Storybook 통합으로 UI배포 시간 단축시키기 (6min -> 2min)

;이전 게시글에서 UI테스트를 하기 위해 Storybook을 도입했다.각각의 프로젝트마다 각각의 컴포넌트 테스트를 해볼 수 있어서 좋을것이라 판단했다.하지만 문제가 있었다. 배포가 너무 많다.3개의 배포3개의 레포에 대해서 chromatic을 통해 storybook을 각각 배포하다보니 두가지 문제가 발생했다.테스트하기 힘들다.배포 완료된 링크가 3개라 일일히 들어가서 테스트해봐야한다는 단점이 있다.;속도가 느리다.프로덕션 배포보다 느린 Storybook배포위 사진처럼 순차적인 형태로 각각의 레포 storybook을 배포하다보니 2분

[프로그래머스/Lv.2] 두 원 사이의 정수 쌍 - Python

문제https://school.programmers.co.kr/learn/courses/30/lessons/181187#;프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr두 원의 반지름이 주어지고 두 원 사이에 있는 정수 좌표의 개수를 구하는 문제이다.;리뷰풀이처음에는 좌표에 대하여 원점으로부터의 거리를 구하고, 그 거리가 r1 이상, r2 이하이면 count하는 방식으로 구했다. 하지만

[프로그래머스/Lv.2] 석유 시추 - Python

문제https://school.programmers.co.kr/learn/courses/30/lessons/250136;프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr(세로길이 n * 가로길이 m)인 이차원 리스트 land의 한 열에서 시추할 수 있는 석유 덩어리의 최대값을 구하는 문제이다.한 열에서 수직으로 꽂아 시추하는데, 해당 열에 있는 석유 덩어리 뿐만 아니라 그 덩어리와 연결된

[프로그래머스/Lv.2] 광물 캐기 - Python

문제https://school.programmers.co.kr/learn/courses/30/lessons/172927;프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr;마인이 광물을 캐는 작업을 다 마칠 때까지 필요한 최소 피로도를 구하는 문제이다. 마인이 가진 곡괭이와 광물을 캐는 순서는 문제에서 주어지나, 종류별 곡괭이를 사용하는 순서는 정해져있지 않다.마인이 광물을 캐는 작업을 다

UI테스트를 위해 Storybook을 도입하게 된 이야기

이제 프로젝트는 앱 런칭을 앞두고 QA를 진행하고있다.139개의 QA를 진행했다...;;이렇게 QA를 진행하다보니 알게된 것은 생각보다 다양한 기기에서 테스트하다보니 UI가 깨지는게 많다는 점이었다.;그러나 의외로 UI 깨지는 것을 쉽게 해결하기가 쉽지않았다.아래와 같은 이유들 때문이었다.;특정 사이즈에서만 깨진다.아래와 같이 화면이 좁아지면; UI가 깨진 다던가... 문제가 있었다.반응형 사이즈 테스트를 해볼 수가 없다.서버 API호출을 줄여 운영 비용을 줄이기 위해 네이티브 DB를 사용하기로 결정했었다.사용자가 쓴 글, 좋아요

노르웨이의 숲

무라카미 하루키의 소설을 처음 읽어보았다.;하루키의 문장들처음 접한 하루키의 책은 달리기를 말할 때 내가 하고 싶은 이야기였다.이 책은 에세이였어서 하루키의 문체를 제대로 경험하지 못했다는 걸 이번 책을 읽으면서 알게 됐다.;하루키의 문체는 정말... 뭐랄까... 모네의 그림같은 느낌이다.푸르빌 절벽 위 산책은 2년째 내 노트북 배경화면이다.나는 모네의 그림을 좋아한다. 분명 현실을 담았음에도 그 순간의 기억, 기분, 냄새까지 담겨 있는, 한순간의 추억을 담아내기때문이다.;하루키의 문장에서도 비슷한 느낌을 받을 수 있었다.하늘은 더

React-ReactNative Webview통신을 Event-Driven에서 Request-Response형태로 확장하기

이전 게시글들에서 React Webview와 ReactNative의 통신을 시켜보았고, 추가적인 데이터도 주입시켜보았다.;이때의 통신은ReactNative->React 통신의 경우 onLoad시 React Webview에서 필요한 데이터를 한번에 주입시켜주는 형태 하나였고React->ReactNative 통신이 대다수여서 불편함이 있지 않았었다.;하지만 프로젝트가 커지고, 서버 API호출을 줄이고자 내활동을 저장하는 부분에 대해 네이티브 기기의 DB를 사용하는 부분을 적용시켰고, 이에 따라 Webview가 열린 후에 데이

Promise 지연평가로 비동기 문제 해결하기

이전 게시글에서 React Webview와 ReactNative의 통신을 시켜보았다.;이때의 방식은 WebView가 onLoad되었을때, React Webview에서 필요한 토큰을 주입하게 하는 형태였다.;하지만, 프로젝트가 커지고, 다양한 API요청이 많아짐에 따라 우리팀은 자연스럽게 비용문제가 발생할 수 있을거라는 걱정을 하게되었고, 이에 서버 API호출을 줄이고자 데이터를 받아오는 부분에서 네이티브 기기의 DB를 사용하기로 하였다.;문제상황기기 DB에 저장된 데이터를 받아와서, 웹뷰에서 보여줘야했다.이때의 DB테이블은 우리팀원

무기여 잘 있거라

;이번 년도에는 정보성 글, 자기계발서들에서 의도적으로 벗어나 소설을 읽어 보려 하고 있다.그러던 중 서점에서 민음사코너를 보게 됐다. 쭉 훑다가 눈에 들어온 것이 무기여 잘있거라였다.;어니스트 헤밍웨이가 그렇게 대가로 유명하다는데 나는 그의 글을 한 번도 읽어본 적이 없었다는걸 알게 됐다.과연 이 사람은 어떤 내용의 글을 어떻게 적었을지 궁금하여 선택하게 된 책이다.;인간은 죽는다. 그것이 무엇인지 몰랐어. 그것에 대해 배울 시간이 없었던 거야. 경기장에 던져 놓은 뒤 몇 가지 규칙을 알려 주고는 베이스를 벗어나는 순간 공을 던져

무한 스크롤 (3) - 피드 데이터 최신화하기

이전 글에서 useInfinityQuery를 사용하여 무한 스크롤 피드를 구현해보았다.;하지만 두가지 문제가 존재했다.새롭게 글을 작성/수정/삭제 하는경우 피드데이터는 어떻게 최신화 되어야 하는가?세부 글보기에서 좋아요/댓글을 추가/삭제하는 경우 피드데이터는 어떻게 최신화 되어야 하는가?이번에는 이 두 가지 문제를 해결해보자.;이 문제 중 두번째 문제가 당근마켓 그룹플랫폼 인턴직무의 사전 질문이었다...!이걸 직접 해결해 볼 수 있는 기회가 이렇게나 빨리 오게 될 줄이야....https://0422.tistory.com/331;당근

무한스크롤 (2) - 데이터 요청과 캐시 처리 (react-query)

이전글에서 무한스크롤에 필요한 두가지 조건을 정리했다.사용자가 페이지 하단에 도달했을때콘텐츠가 계속 로드첫번째 조건은 이전글에서 완료했으니, 2번째 미션을 해결할 차례다.;어떻게 콘텐츠가 계속 로드되게 만들 수 있을까?데이터를 페이지네이션 형태로 제공하는 방법은 크게; cursor 기반과 offset 기반, 두가지 방법이 존재한다.하지만 그것은 백엔드 개발자의 일이구요... 라고 하면 큰일나니 간단하게 알아보자.offset 기반;페이지단위로 구분해서 구현이 간단하나 데이터 중복문제(중간에 글이 써지는경우)가 발생한다.offset값이

무한 스크롤 (1) - 하단 감지하기 (Scroll Event vs Intersection Observer)

배경커뮤니티 서비스를 만들고 있는데, 피드를 만들어야 했다.이전에 당근마켓 인턴십의 사전 질문이기도 했던 세부 글보기 에서 좋아요/댓글이 추가/삭제된 경우 어떻게 피드에 반영할 것인가?라는 질문에 직접 구현해보며 답할 수 있는 좋은 기회라고 생각해서 구현하게 됐다.무한스크롤에 필요한 것들을 하나씩 확인해보면서 구현할 것이다.;필요한 것 알아내기무한 스크롤은 사용자가 페이지 하단에 도달했을때 콘텐츠가 계속 로드되는 사용자 경험 방식이다.;그럼 구현에 필요한 두가지 필수 조건을 알 수 있다.사용자가 페이지 하단에 도달했을때콘텐츠가 계속

웹뷰 + 모노레포 환경에서 자동 토큰 갱신 훅으로 개발자 경험 개선하기 (feat. axios, zustand)

https://0422.tistory.com/347;React, RN 환경에서 WebView 통신하기 (react-native-webview)배경 웹뷰를 사용하여 앱을 구성하고 있다. 웹뷰는 마치 HTML의 iframe 태그처럼, 내부적으로 하나의 화면을 띄우는 형태이다. 그런데 우리 서비스의 로그인 로직은 앱에 있어서, 웹에서 따로 로그0422.tistory.com위 글에서 이어진다.;이전 게시글을 통해 앱-웹간 통신으로 토큰을 받아오고 이벤트를 발생시키는 것까지는 완료했다.하지만 이제부터 시작이다. 받아오기전에는 어떻게 하고,

React, RN 환경에서 WebView 통신하기 (react-native-webview)

배경웹뷰를 사용하여 앱을 구성하고 있다.웹뷰는 마치 HTML의 iframe 태그처럼, 내부적으로 하나의 화면을 띄우는 형태이다.;그런데 우리 서비스의 로그인 로직은 앱에 있어서, 웹에서 따로 로그인/로그아웃을 구현하지 않고, 앱 내부의 JWT토큰을 웹으로 전달할 수 있어야 했다. 또한 웹내에서 JWT토큰이 만료되는 경우 로그인 페이지로 이동시켜줄 필요가 있었다.;우선 Web과 App환경의 통신 방법에 대해 알아보고, 이후에 토큰을 내부적으로 관리해볼 것이다.;기본 구성하기기본적으로 react-native-webview 라이브러리를

React로 라이브러리 없이 Carousel 만들기 (2) - Indexed Carousel

Indexed Carousel이제 Index 기반의 Carousel을 구현해보자.사실 로직은 이전 글과 거의 동일하다. 시작 터치 위치를 기억하고, 움직일때 transX를 변경하고, transX를 기반으로 translateX를 통해 스크롤을 구현한다.;여기서 Index를 추가하고, 특정 scroll값을 넘으면 인덱스를 변경시켜 주고, translateX값을 Index기반으로 작동하도록 만들어주면된다.;그래서 handleTouchStart와 handleTouchMove콜백함수는 Non-Indexed와 동일하다.// Non-Indexe

React로 라이브러리 없이 Carousel 만들기 (1) - Non-Indexed Carousel

문제상황Teengle 프로젝트는 웹뷰프로젝트로, 모바일 기기에서 실행되어야하다보니, 여러 정보를 작은 화면에서 조회하기위해서 상당히 많은... Carousel이 필요했다.;Non-Indexed Carousel첫번째 Carousel은 커뮤니티 피드에서;마치 스레드처럼;여러개의 사진을 볼 수 있는 기능에 필요했다.이 Carousel은 아래 사진 처럼 스크롤한 만큼 자유롭게 이동이가능해야했다.그냥 overflow scroll로 구성해서는 스크롤 속도가 너무 빨라서 사용할 수 없었다.overflow-scroll만 적용한 모습(너무빠르다);

Turborepo를 도입하게 된 이야기

배경새로운 프로젝트는 많은 사용자들이 모바일 환경에서 사용할 수 있도록 앱 형태를 택했다.또, 플레이스토어/앱스토어에서의 업데이트 없이, 실험을 통해 앱을 지속적으로 빠르게 업데이트해보고자 그 중에서도 웹뷰를 선택하게 되었다.;사실 웹뷰는 토스/당근에서 다양한 실험/빠른 업데이트 때문에 사용한다는 이야기를 들은 뒤부터 사용자에게 정말 유효한 가치를 전달하려면 꼭 필요한 기술이라고 생각해서 꼭 한번 도전해보고 싶었다.;문제웹뷰 화면 설계를 이야기 하지 않을 수가 없다.웹뷰, 아니 앱의 문제점중 하나라고 한다면, 바로 스토어 리젝이다.

JWT를 활용한 로그인 없는 안전한 프로필 공유 만들기

들어가며프렌딩에서 프로필 교환 관련 개발을 하고있었다.여기서 프로필 교환이란, 나와 상대의 프로필 카드를 교환하는 것이다. 마치 명함을 교환하는 것처럼 말이다.그런데 여기서 약간의 문제가 생겼다.;앱인 경우에는 프로필 공유를 하게되면, 해당 프로필을 가진 사람의 기기에 푸시알림을 보내서 친구추가를 하는 형태였지만,;앱을 설치하지 않은 사람이 설치한 사람의 프로필 링크를 받거나, QR을 찍는 경우 어떻게 할지가 고민했다.;결론은 앱을 설치하지 않은 사용자의 경우 웹을 띄워서 어떤 프로필인지 볼 수 는 있게 해주자 였는데, 이걸 어떻게

PyTorch 모델 서빙 (3) - EC2 환경에서 모델 실행+ 에러

배경지난 글에서 로컬 환경에서 플라스크를 사용하여 파이토치로 된 모델 파일을 동작시켜 보았다. 이번 글에선 EC2 위에서 플라스크를 동작시켜 보겠다. 개발하던 중 마주했던 문제들도 다룰 예정이다.;개발1. EC2 인스턴스 생성 및 기본 세팅2. git 또는 scp(ssh 프로토콜 기반 서버간 파일 전송 명령어)를 사용하여 파일 업로드github는 100 MiB보다 큰 파일을 올릴 수 없기 때문에, 모델 파일의 경우는 scp 명령어를 사용해 EC2에 전송했다.;모델 파일의 크기가 347.5 MiB였다,,,$ scp {파일 경로} {호

PyTorch 모델 서빙 (2) - Flask 모델 서빙

;Flask?;Python 기반 웹 프레임워크. Django와 같은 Python 웹 프레임워크지만 Django 보다 더 쉽고 간단하다는 느낌을 받았다. Django는 MTV 패턴처럼 어느 정도 서비스 개발 사이클이 존재하는 비교적 전통적 방식의 프레임워크라면, Flask는 더 간단하고 빠르게 개발을 진행할 수 있다. 다만, Django와 비교하여 인증 및 인가, Admin 페이지에 있어서 기본 세팅이 되어 있지 않기 때문에 따로 라이브러리를 사용해야 하는 어려움이 있다.;Flask를 모델 서빙에 많이 사용하는 이유;Python 언어

PyTorch 모델 서빙 (1) - 여러 방법들

;배경;; 2023년 2학기 학부 캡스톤디자인(1) 수업에서 진행했던 프로젝트에서 PyTorch로 학습이 완료된 딥러닝 모델을 Spring Boot에서 사용할 수 있도록 해야 했다. PyTorch 모델은 Pretrained model 중 Vision Transformer 딥러닝 아키텍처. 백엔드에서 할 일은 클라이언트에서 넘겨받은 이미지를 딥러닝 모델에 input으로 넣어 분류값(0 또는 1의 정수)을 output으로 받아 저장하는 간단한 작업이었다.- input: 224 x 224 Color img- output: 1 or 0;개

2023년이 끝나간다.되돌아보면 2023년에는 정말 많은 경험들을 할 수 있었던, 뜻깊은 한 해였다.되돌아보기안녕, 멋쟁이사자처럼...!이번 년도의 목표는 성장하는 조직을 만들어 보는 것;이었다.그래서 작년에 운영진을 지원한 것이기도 하다.;고등학교때 반장을 매년하긴했었지만, 나는 뭔가 주도적으로 기획하고, 이끌기보다는 다른 친구들이 하자고 하는대로 의견을 조율하는 형태로 일을 진행했어서 기획을 해본 경험이 없었다.;그래서 운영진으로써 멋사를 처음 시작했을때는 어떻게 해야할지 모르는, 다소 막막한 상태였던 것 같다.이때 다른 운영진

[Django] 로그인 시도 횟수 제한

문제 상황산보실록 프로젝트의 사용자 피드백을 받던 중,,,브루트포스 공격에 취약할 거 같다는 피드백을 받아, 브루트 포스 공격 방지를 위해 로그인 시도 횟수 제한 기능을 추가하게 되었다.해결방안 설계우선, 구상한 해결 방안은 5회 이상 로그인 시도 실패 시 30분 동안 로그인 시도를 잠그는 기능이었다.이 기능을 구현하기 위해 고민할 부분은 다음과 같았다. 로그인 전의 사용자를 어떻게 식별할 것인가 ? 로그인 시도 실패 횟수를 어디에 저장할 것인가 ? 일정 시간동안 로그인 시도를 막는 기능은 어떻게 구현할 것인가 ?1차 설계우선, 로

협업을 위한 ESLint, Prettier

이번 학기 진행하는 두 프로젝트에서 프로젝트 기초 세팅을 진행하였다. 2명 이상의 팀원과 개발하는 것은 처음이었기에, 평소보다 더 꼼꼼하게 세팅을 진행하였고 그 과정을 작성해보았다.💁🏻‍♂️ Typescirpt create-react-appCRA로 ts를 세팅할 수 있다.$npx create-react-app "프로젝트명" —template typescript추가적으로 ts개발을 위해 필요한 library를 설치해준다.$npm i --save react react-dom typescript$npm i --save-dev @typ

SSO 파헤치기 - 서브 도메인 간 토큰 공유하기!

문제이전 게시물을 통해 살펴보았듯, SSO 모델을 선택한 이후에도 문제가 남았다.여러 사이트 간 데이터를 공유하기 위해 하나의 JWT 토큰을 둘 건데, 이걸 사이트 간 어떻게 공유해야 할까?이 문제를 해결할 수 있는 방법을 조사해서 몇 가지 추려 보았다선택지일단 클라이언트 단에서 특정 정보를 저장해야 하는 것은 분명했다.서버에서 데이터를 가지고 있다면, 클라이언트가 스스로임을 인증하기 위해 매번 다시 로그인을 해야하므로, 당초 목표였던 '로그인 빈도 낮추기'를 이룰 수 없기 때문이다.(물론, 이렇게 구현하는 경우에도 로그인 횟수를

SSO 파헤치기 - 개념과 모델 선택

배경동아리 해커톤 이후 사이드 프로젝트로 동아리 위키 페이지 개발을 시작하게 되었다.동아리 위키는 동아리 내 있었던 일이나 레퍼런스들을 보기 쉽게 정리하는 게 목적이라, 이미 구현되어있는 메인 사이트와 로그인을 연동하고자 했다.그러나 해당 메인 사이트는 이전 기수의 사이드 프로젝트로 제작한 것이라 유지보수가 쉽게 이루어지기 힘들었고, 따라서 DB를 공유하면서 작업하기 어려웠다(사실 이제 와 생각하니 DB를 공유하는 것이 오히려 불필요하다는 생각도 든다)뿐만 아니라, 리크루팅 페이지를 만드는 사이드 프로젝트 팀도 있었기 때문에, 앞으

세상에서 제일 짜증나는 일은 파이썬 다운그레이드가 분명합니다.

배경프로젝트 팀원이 로컬에서 작업하다가 깃헙에 올린 코드를 받아 다음 이슈를 작업하고 있었는데, 로컬에서 구동해보니 버전 오류 때문에 구동에 실패하게 되었다.알고보니 팀원의 파이썬 버전은 3.10.5, 나의 버전은 3.11.0 이였고, EC2 Ubuntu에 설치된 버전이 3.10.6이였기 때문에 서로 EC2에 맞게 버전을 바꾸기로 했다.시작당연히 파이썬 내에 명령어가 있을 거라 생각한 나는 웹서핑을 열심히 해보았으나, 돌아온 결론은 3.11.0을 삭제하고 3.10.6을 재설치해야한다는 것이였다.조금 귀찮아지긴 했으나 다시 작업해보았

네이버 클라우드 플랫폼, 서버 생성하기

Naver Cloud Platform 사용은 확실히 익숙치 않았다.먼저, 흔히들 알고 있는 AWS의 EC2와 비슷할 것 같아서 시도 해봤는데, 첫 페이지에서부터 헤맸다.서버 생성내가 이해한 바에 따르면, EC2와 같은 서버 서비스는 콘솔>Compute>Server 에서 선택할 수 있다. 회원 가입시 제공한다고 하는 "Micro Server"는 사실 이 서버의 Classic 1세대에 해당하는 Micro-g1 서버로, 아래와 같이 소개되어 있다. 서버를 생성하려면 콘솔 > Services > Compute >

깃허브에 실수로 개인정보를 커밋했다면? BFG 사용하기!

나 같은 개발 초보라면 비슷한 경험이 있을 수 있었으리라 생각한다.첫 개발하던 프로젝트에서는 AWS IAM 개인키를 실수로 깃허브에 올려 이런 무서운 메일도 받아봤다..이 때의 대참사 이후 깃허브에 업로드하는 내용을 꽤 조심하고 있다고 생각하며 사용했지만, 최근 멋쟁이사자처럼에 지원하려고 깃허브를 돌아보다가 이상한 점을 발견했다.내가 운영 중인 서비스의 깃 리포의 유저DB에 유저 데이터가 전부 공개 되고 있었던 것...gitignore 에 추가 했어야 했는데 까먹은 것 같다..문제는 이제 와서 지우고 커밋하기에는 이미 리포 히스토리

EC2, SSH로 연결이 안될 때? "Permission denied" 해결 방법

AWS를 활용해 EC2로 서비스를 열었다면, 이제 자신만의 서버를 활용할 수 있게 된 것이다.하지만 서버를 만들어서 기쁜 것도 잠시, 접속을 할 방법을 모르겠다면?흔히 Headless 서버를 제어할 때 SSH 연결을 통해 원격으로 이용하곤 한다.이 시리즈에서는 SSH 연결을 할 때 흔히 발생하는 오류를 짚고 넘어가려고 한다.이 글 시리즈의 내용은 공식 트러블슈팅 문서를 참고해서 작성되었음.자세한 내용을 확인하려면 위 문서를 확인하세요!.pem 파일 permissionec2-user@XXX.XXX.XXX.XXX: Permission

EC2에 nvm을 설치하고 싶다면?

EC2를 처음 사용하게 되었을 때 당황스러울 수 있는 일인 것 같다.문제:EC2 인스턴스를 처음 만들고 git clone을 하려고npm install git을 입력했는데$ bash: npm : command not found 을 받아 황당했었다. 사실 생각해보면 그도 그럴 것이 AWS EC2 입장에서는 사용자가 어떤 코드로 서버를 구현할지도 모르는데 모든 프레임워크를 설치해두는 것이 매우 비효율적일 것이다.문제는 node를 설치하기 위해 nvm을 설치하려고 했는데sudo apt-get install npm을 해도,$ sudo: ap

[CAUnotify] 구조 설명

Link: https://caunotify.meCAUnotify.me 는 내가 처음으로 개발해본 웹 프로젝트이다.중앙대학교 서울캠퍼스 교내 48개의 게시판을 주기적으로(30분에 한번) 크롤링하여 과거 데이터와 대조해 변화가 있는지 알아내고, 변화가 있었다면 해당 게시판을 구독한 유저들만을 골라내어 이메일을 전송하는 서비스이다.대략적인 구조는 다음과 같다.유저가 CAUnotify.me 웹사이트를 통해 자신의 이름, 이메일 그리고 구독할 게시판을 html form에 입력하여 submit한다(HTTP POST).해당 정보를 받은 서버는

[중앙대] 소프트웨어학부 전과

사실 난 어렸을 때부터 공학을 하고 싶었다. 어쩌다 문과생으로 몇 번의 수능을 거쳐 문과가 갈 수 있는 가장 '이과스러운' 학과인, 중앙대학교 산업보안학과에 20학번으로 입학했었다.군대를 다녀오고 22학번들과 수업을 들으며 느낀 것은, 학과 공부만으로는 절대로 공학에 발을 들일 수 없겠다는 것이였다.학과 커리큘럼상 내가 원하는 과목만 듣기에는 과목이 턱없이 부족했고, 그나마 공학에 관련 과목은 내용이 허술하거나 생략되는 경우가 많아서 구글링으로 독학하게 되었다.이렇게 전과를 결심하게 되었다.학과에 따라 다르지만, 중앙대학교에서 전과