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를 통해 어떤 블로그를 구독했는지를 수집하기로 했다.

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

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

앞선 글에서 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

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

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

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

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

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

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

배포된 웹페이지에 폰트가 갑자기 적용이 안되는 상황이 발생했다.코드를 건든 적이 없는데, 왜 갑자기 페이지가 변하는지 알 길이 없었다…왼쪽이 기존 폰트, 오른쪽이 갑자기 변해버린 폰트이다.css의 font-family 속성이 적용 여부를 확인하기 위해 개발자 도구를 켜봤는데,GmarketSans가 잘 적용되어 있다고 나오는데,,,, 대체 왜이러는걸까로컬에서 프로젝트를 열어봐도 똑같은 상황이었고, 몇시간 삽질 끝에 원인을 찾을 수 있었다.네트워크 탭을 열어보니 웹폰트로 사용하고 있던 GmarketSans가 404 오류로 인해 불러오지

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

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

Introduction and Recap단어를 벡터화 한 것은 단순히 유사도 계산을 용이하게 하는 것이 아니라, 실제 단어의 의미를 포착한다Word Vectors, Analogies, and Applicationsanalogy() 함수로 의미의 덧셈 뺄셈 등이 가능 ⇒ king → man = woman → ? 특정 벡터 (가장 유사한 단어 찾으면 queen) ⇒ autsralia → beer = france → ? 특정 벡터 (가장 유사한 단어 찾으면 champagne) ⇒ tall→ tallest= long→ ? 특정 벡터 (가장

The courseProf. Christopher Manning학습 목표 :효과적, 현대적인 딥러닝 방법론 이해RNN, 어텐션 등 NLP의 핵심 방법론자연어에 대한 큰그림, 자연어를 이해하는 것과 생성하는 것의 난관을 이해NLP 문제를 이해하고 이를 해결할 시스템을 작성할 수 있는 능력 배양단어의 의미, 의존성 파싱, 기계번역, 질의응답 등올해 다른 점:charater models, transformers, safety/fairness, multitask learn 등의 내용을 다룸과제 많음Tensorflow보다 Pytorch 활용

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

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

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

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

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

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

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

[ 요약 ]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

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

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

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

이번학기 캡스톤에 활용하는 모델에 관한 논문이라, 기억할 겸 레퍼런스를 남길 겸 정리해두었다논문 링크서론기존 모델들의 문제점:Misalignment : 옷을 착용자의 신체에 맞게 변형(warping)하는 과정에서 옷 이미지가 신체 부위와 정확히 정렬되지 않으면 아티팩트 발생Pixel Squeezing : 신체 부위가 옷을 가리는 상황에서 옷이 비정상적으로 변형되어 옷 패턴 왜곡제안된 모델이 제시하는 해결책:Try-On Condition Generator : Warping과 Segmentation 단계를 통합하여 한 번에 처리함으로써

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

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

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

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

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

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

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

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

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

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

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

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

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

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

캐시데이터를 미리 복사해 놓는 임시 장소저장 공간의 크기는 작지만 속도는 빠름자주 사용하는 데이터를 캐시에 저장 시 데이터를 훨씬 빠르게 가져올 수 있음웹 브라우저는 기본적으로 캐시를 사용해 속도를 높이고 네트워크 비용 감소서버에 매번 데이터를 요청하는게 아니라 저장해 놓은 데이터를 유저에게 보여줌캐시를 사용하는 것이 캐싱React-Query 캐시백엔드에서 데이터를 다시 받아오는 것 → refetchimport { getRecentDocs } from '@/apis/docs';import { useQuery } from '@tans

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

목표위와 같은 구조를 바탕으로 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

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

프로젝트 소개Arti는 신진 디자이너들의 일러스트를 투표, 해당 투표 결과를 통하여 옷을 직접 제작하고 펀딩까지 하는 것을 목표로 하는 웹서비스프로젝트 주제신진 디자이너 및 브랜드 홍보 플랫폼프로젝트명Arti프로젝트 제작 기간2023.10.04 ~ 2023.12.05프로젝트 구현 기능https://zza-lng.notion.site/Arti-cb288edfea4849608f06736a52845398기술 스택;;역할종류FrameworkProgramming LanguageStylingState ManagementData Fetching

📘 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

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

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

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

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

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

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

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

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

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

끝난지 한달이 넘어가는 시점에서 남기는 AWS 서밋 서울 2024 후기입니다. 하하..유튜브에 영상이 올라오기 전에 얼른 적어보겠습니다!서밋 2023에서는 알아듣지 못하고 듣고 흘렸다면 올해는 그래도 단어가 귀에 들어와서 몇개의 세션을 재미있게 듣고 왔습니다! 1일차에 코엑스를 다 돌아다니면서 2만보를 걷다보니 체력 부족으로 놓친 세션들이 많아 아쉬운데 어서 유튜브에 업로드 됐으면 좋겠습니다.😆[L300] 채널톡 스타트업 기술 성장기: RDBMS에서 NoSQL로의 전환MongoDB를 사용하면서 NoSQL을 경험했고 전환 과정에서

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

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

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

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

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

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

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

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

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

구성하기내가 원하는 것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

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

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

2023년 7월 26 ~ 8월 26일까지, 이 기간동안 멋쟁이 사자처럼 프론트엔드 파트에서 활동하며, 교환학생 매칭 서비스 "오리챗(All-It-Chat)"의 프론트엔드 개발자로 전체 해커톤에 참가하였다. 개발을 시작하고 참여한 첫 프로젝트로, 2달간 공부한 React를 잘 활용할 수 있을지에 대한 걱정을 안고 시작했었다.| 프로젝트에서 구현한 기능https://zza-lng.notion.site/All-It-Chat-c6e7240f004c456fb0bf5ea2a0785d05?pvs=4;오리챗(All-It-Chat) | Notion

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

프로젝트 소개"멋쟁이사자처럼 중앙대학교"의 이야기를 저장하고 공유하는 공간순수 팔로우 프론트엔드 개발자가 아닌, 프론트엔드 리드 개발자로 참여했던 프로젝트프로젝트 제작 동기함께 모여 활동하며 쌓인 추억들이 시간이 지나면서 잊혀지는게 아쉬웠다.즐겁거나, 힘들었던 순간들과 감정들을 기록할 우리만의 오프더레코드, 멋사위키프로젝트명멋사위키프로젝트 제작 기간2023.12.11 ~기술 스택;;역할종류FrameworkProgramming LanguageStylingState ManagementData FetchingFormatting Packa

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

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

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

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

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

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

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

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

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

문제점성능을 측정해보기 위해 lighthouse를 사용하던 중 점수대가 심상치 않다는 것을 알게되었다.무려 79점...이었다.;문제파악하기우리 AlgoITNi는 Home과 Room 두가지 페이지로 구성된다.대부분의 기능은 Room에 필요하고, Room에서만 사용한다.;그러나, 리액트는 SPA이기에 이런 모듈들을 Home을 렌더링할때도 가져오게되고, 따라서 Home의 초기렌더링 성능이 나빠지는 것이라 추측했다.확인해보기프로덕션에서는 빌드가 완료된 청크가 네트워크 응답으로 오기때문에 정확하게 분석하기 어렵다.따라서 개발환경에서 Home

문제점네이버 부스트캠프에서 진행하고 있는 AlgoITNi프로젝트에서 아래와 같은 문제가 발생했다.빌드하는 과정에서 이러한 경고 메시지가 발생한 것이다.특정 청크가 500KB보다 크다는 것이 문제이다.;위 사진을 보면 번들사이즈가 1285kb이고, 사용자가 실제로 받는 번들사이즈인 gzip사이즈가 425.33kb이라 초기 렌더링이 느려질 수 있다는 문제가 있다.;청크 사이즈 줄이기청크 구조 분석하기원인을 알기위해서 vite-bundle-visualizer를 사용해서 청크의 시각적인 분석을 해보았다.파란 부분이 안쓰는 파일이다.high

그럼 이걸 활용해서 yml을 만들어보자.;Github ActionsGithub Actions는 github에서 제공하는 CICD 툴으로써, 코드 저장소에 어떤 이벤트가 발생했을때 특정 작업을 일어나게 하거나 주기적으로 작업을 반복 실행시키는 일을해준다.;이에 따라 브랜치마다 다른 일을 할 수 있도록 처리해줄 수 있다.그럼 브랜치마다 어떻게 작동하게 만들지 전략을 수립해보자.;배포 브랜치 전략 수립하기우리팀은 프론트엔드 코드와 백엔드 코드가 한 레포지토리에 있기때문에, 각 파트별 배포가 필요한 상황이었다.https://github.c

CICD를 구성하기전에 우선은 배포를 위한 서버 자원(S3, CloudFront, IAM)을 생성하고, AWS CLI를 사용해보자.S3만들기클라우드 프론트를 통해 OAC설정을 할것이기에 ACL비활성화, 퍼블릭 엑세스 차단설정을 해도된다.;CloudFront배포 만들기원본 도메인으로 S3 버킷을 연결시켜주자.OAC설정하기클라우드 프론트로만 S3에 접근할 수 있도록 S3의 정책을 변경해주자S3에 파일을 업로드 하기웹 콘솔에서 업로드 버튼 누르기사실 업로드하는 방법은 간단하다. AWS 콘솔에서 업로드 버튼을 누르면 된다 허허;그런데 gi

들어가며네이버 부스트캠프의 그룹프로젝트 과정에서 진행했던 AlgoITNi의 배포전략, 선택한 이유, 방법들을 기록해두고자 한다.;프론트엔드에서 배포는 어떻게 이뤄지는가?프론트엔드의 배포는 결국 html,css,js 정적파일을 서빙하면 끝이다. (SSR 제외)좀더 세부적인 동작은 이전에 작성한 아래의 게시글을 참고해주면 좋을 것 같다.https://0422.tistory.com/312;프론트엔드 웹서버 직접 만들기 (1) - Content-Type, MIME프론트엔드 개발을 해본 사람이라면 vscode의 live-server, web

부스트캠프의 모든 과정을 마쳤다.정말 길다면 길고 짧다면 짧은 5개월굉장히 많은것을 배우고, 느낄 수 있었다.;배우고 느낀것을 챌린지, 스프린트, 그룹프로젝트로 크게 3가지로 나누어서 살펴보자.;챌린지챌린지에서는 CS미션이 매일매일 쏟아지며 정말 힘겹게 미션을 해결했던 기억이 있다.;챌린지를 통해서는 어떻게 큰 문제를 작은 문제로 분할할 것인지, 그 방법을 터득할 수 있었다정의조차 잘 되지 않는 거대한 문제를 마주하다보니 어렵기도 어렵거니와 좌절감을 느끼기도 했었다.하지만 4주동안의 훈련 과정을 통해 문제를 해석하고, 해결하기 위한

https://0422.tistory.com/334;실시간 동시편집 구현 연대기 (3) - Yjs를 도입해보자이전 게시글에서 문제가 있어서 Yjs를 도입하기로 했다. 이 글을 통해 어떻게 도입했는지 작성해보려고한다. Yjs알아보기 공유 타입 선택하기 Yjs는 다양한 타입을 지원한다. map도있고, array도 있0422.tistory.com이전 게시글에서 CRDT를 Yjs를 사용해서 구현했다.하지만, 언젠가는(하겠지...?) 직접 구현해놓고 싶기때문에 라이브러리를 통해 만들어둔 기능을 언제든 내가 만든 모듈로 교체할 수 있도록 처리

이전 게시글에서 문제가 있어서 Yjs를 도입하기로 했다.이 글을 통해 어떻게 도입했는지 작성해보려고한다.;Yjs알아보기공유 타입 선택하기Yjs는 다양한 타입을 지원한다.map도있고, array도 있다. 하지만, 우리는 코드 에디터니까 text를 선택했다.이렇게 사용할 수 있다.;insert를 통해 n번 인덱스에 문자를 삽입하는 형태다.toString을 통해 실제 텍스트를 얻어올 수 있다.delete역시 동일한데, insert와 다르게 length를 두번째 인자로 받는다.어떻게 병합하지여기서 핵심만 보자면// Merge changes

이 글은 아래의 글 부터 이어집니다.https://0422.tistory.com/332;실시간 동시편집 구현 연대기 (1) - CRDT와 OT들어가며 네이버 부스트캠프에서 진행중인 그룹프로젝트로 algoitni라는 알고리즘을 동료, 친구들과 화상, 음성, 채팅을 공유하며 코드를 함께 작성할 수 있는 서비스를 만들고 있다. https://algoitni0422.tistory.com;;우리 프론트엔드 팀은 우선은 CRDT 구현에 도전해보기로 했다.굉장한 기술적 도전이 될것이라 판단했기때문이다.;어떻게 구현하지?구현하기위해서는 필요한 것

들어가며네이버 부스트캠프에서 진행중인 그룹프로젝트로algoitni라는 알고리즘을 동료, 친구들과 화상, 음성, 채팅을 공유하며 코드를 함께 작성할 수 있는 서비스를 만들고 있다.https://algoitni.site/; AlgoITNi너 알고리즘 얼마나 알고있니?algoitni.site;;;실시간 동시편집이번 프로젝트에서 가장 어려운 문제는;코드를 함께 작성할 수 있는;이었다. (사실 쉬운게 없었다...)하나의 문서에 대해 실시간으로 여러 유저의 편집이 각자의 편집화면에 바로 반영되는 것을 실시간 공동편집이라한다.;;다행히도 시중에

그룹 플랫폼 팀에 지원이번 윈터테크 인턴십은 프론트엔드가 코어, 광고, 그룹플랫폼 3가지 형태로 구성되어있었다.나는 이 중 광고와 그룹플랫폼에 지원했다.그 중,; 그룹플랫폼에 조금 더 신경을 써서 이력서를 작성했다.;왜냐하면, 창업과 서비스를 만들어내는 것에 관심이 있는 나와 잘 맞다고 생각하기 때문이었다.팀에 참여한다면 부스트캠프에서 학습한 백로그 기반의 애자일 스프린트를 진행하면서 빠르게 소통하며 프로덕트를 만들어보는 경험을 해보고싶었다.;또한, 만든 프로덕트가 사용자에게 전달되는 과정을 확인해보며 사용자의 데이터를 확인하고,

부스트캠프 멤버십 그룹프로젝트 3주차를 마쳤다.벌써 4주차다... 2주차 밖에 남지 않았다.;배운 것이번주는 꽤나 많은 도움을 받은 한 주였다.도움을 줄때도 기분이 좋지만, 이제는 도움을 받을때도 참 기분이 좋다.그 사람이 나를 위해 시간을 내고, 같이 고민해줬다는 것에 참 감사하다.;개발 환경 개선하기이전 주에 구현했던 내용들에 엣지케이스가 상당히 많아서 이번주에는 이 부분을 개선하려고 노력을 많이 했다.그러나 우리 서비스의 경우에는 쿠키를 통해 토큰을 전송하기에, 로컬-배포환경의 차이가 발생할 수 밖에 없었다.;이걸 해결하지 못

놀랍게도 쿠키는 대부분 서버에서 set해준다.;쿠키에 대한 개념, CORS간 쿠키요청에 대한 글은 이전 글을 참고해주면 된다.참고이 글은 배포환경에 아닌(배포환경은 same-site다) 개발환경에서의 cross-domain, 즉 localhost와 백엔드 서버간의 쿠키 인증, 그리고 api테스트에 대해 다룬다.여기서 설정한 것들은 배포환경과는 별개의 로직이다.;배경과 문제상황도입하게 된 배경우리 서비스는 OAuth2.0을 사용해 구글, 깃허브 로그인을 진행하고, 이후에 얻어지는 서버 자체의 JWT토큰을 set-cookie를 통해 h

모달이란 무엇인가?모달은 이목을 집중시키기 위해 사용하는 화면 전환 기법이다.프론트엔드에서는 반드시 구현하게 되는 그것이다.;공통 모달을 위하여.왜? ;모달이 딱 하나라면 딱히 고민하지 않겠지만, 우리 서비스는 정말 모달이 많다.반복해서 사용되기에 이를 공통 컴포넌트로 만들어줄 필요가 있었다. 더불어, 모달 자체 규격이 존재하지 않았기에 조금 더 고민해볼 필요가 있다.;어떻게 구현할 것인가?모달을 구성하는 방법을 찾아보니 여러 방법이 있지만 크게 두 가지로 분류되는 것 같았다.1.;루트에 하나만 생성하여 전역 상태(type, pro

부스트캠프 멤버십 그룹프로젝트 3주차를 마쳤다.세상에 벌써 3주차가 끝났단말이야?;배운것이번 주는 코드적인 부분을 많이 학습할 수 있었다.;Context API는 상태관리 도구가 아니다.모든 시작은 Modal에 대한 고민으로부터 시작했다.요런 고민들을 했었는데, 이런 고민들을 멘토님께 공유드리니, 멘토님께서 이것 뿐만 아니라 모달이 여러개라면 어떻게 할 것이냐는 질문을 던져주셨고, @ebay/nice-modal-react라이브러리를 알려주시며 해당 구조를 한번 살펴보라고 해주셨다.;그래서 무작정 코드를 뜯어보기 시작했는데, 여기서

React+TS로 서비스를 만들어 출시했다.;Arti 아티투표를 통해 세상에 숨겨져 있던 유니크한 옷들을 만나보세요arti-fashion.site하지만 이미지가 너무 많아서 렌더링이 느리고, 검색 엔진에서 찾기 쉽게 하는 SEO 작업에 제한이 있다는 것을 알게 됐다.이러한 이유로 더 빠른 렌더링과 SEO를 위해 Next.js로 마이그레이션을 하기로 결정했다.1차 스프린트를 React+TS로 마무리하고, 이 프로젝트를 Next로 마이그레이션 후 2차 스프린트를 진행하는 순서로 진행중이었는데, 한 선생님께서 질문을 하셨다.분명 난 이유

보통 우리는 npm에서 필요한 모듈을 설치한 다음 필요한 컴포넌트에서 해당 모듈을 import해서 사용합니다.하지만 TS에서는 분명히 모듈을 설치했는데도 아래와 같은 에러가 발생하는 경우가 있다.;내가 설치를 안했나... 해서 다시 설치도 해보고, 실수로 다른 모듈을 설치했나.... 해서 다시 설치 했는데 결국 실패했다. 본인이 설치한 모듈이 JS 환경에서 사용가능한 형태만 지원하고, 해당 모듈 개발자가 TS에서 사용가능한 형태는 지원하지 않아서 아무리 설치해도 모듈을 찾을 수 없다는 오류가 발생했던 것이다.이러한 오류를 해결하는

대한민국의 98%는 카카오톡을 사용하고 있다.그래서인지 현재 대부분의 서비스에서 소셜로그인, 그 중에서도 카카오 로그인을 이용하여 서비스를 사용 할 수 있도록 하고있다.내 기억에도 서비스에서 로그인이 필요할 때, 카카오 로그인을 이용해서 로그인 한 경험이 많았었다.그래서~ 이번 프로젝트에서 소셜 로그인을 맡아서 진행하기로 했다.카카오 소셜 로그인 서비스이번 프로젝트는 프론트와 백엔드가 협업하여 프론트에서 로그인을 요청하여 인가코드를 받아와서 백엔드로 넘겨주면 인가코드를 이용해 카카오 서버에서 토큰을 받아와 얻은 정보를 이용해 자체

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

이번 학기 진행하는 두 프로젝트에서 프로젝트 기초 세팅을 진행하였다. 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

💡 상대경로와 절대경로프로젝트를 진행하다보면 컴포넌트가 증가하기 때문에 폴더구조가 복잡해진다.이런 상황에서 상대경로로 import를 하게 되면 다음과 같이 가독성이 떨어지고, 파일트리의 뎁스가 깊어지면 ../../../파일명 처럼 경로가 길어진다는 문제가 발생한다.import Home from './pages/Home' import MyPage from './pages/MyPage'import NavBar from '../components/NavBar';그래서 프로젝트를 세팅하며 다른 글들을 참고해 아래와 같이 절대경로로 쉽고

시작하기 전에 왜 프론트를 공부하다가 NodeJs를 공부하게 되었는지 설명하자면프론트를 공부하면서 백엔드와 함께 2번정도 프로젝트를 진행했는데, 백엔드에 대해 전혀 아는게 없다보니 서비스를 기획 할 때도 이 기능 구현이 가능한지, 구현이 힘든건지 모를 때가 많았다. + 소통할 때 모르는 부분이 나오면 답답함...그래서 백엔드를 공부하면 앞으로 프론트 개발자를 공부하고 일하는데 큰 도움이 될 것 같다는 생각이 들었다!그리고 뭔가 프론트 쵸큼 할 줄 아니까... 백엔드도 공부하면 프로젝트를 할 기회가 더 많이 생기지 않을까? 하는 생각

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

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

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

어느 날 메일을 보니 다음과 같은 메일이 있었다.바로 이전 포스팅에서 만든 서버에 문제가 생긴 것이다급하게 SSH를 연결해서 장고 로그를 확인했다.지운 IP들을 확인해보니 하나 빼고 모두 미국IP였고, 하나는 네덜란드IP였다.어딘가에 서버 링크를 올린 적은 없는데, 무작위 scan 공격을 받은 것으로 추정된다.특히나 로그 내역을 보면 phpMyAdmin나 mysqlmanager 등에 접근하려고 했던 내용들이 확인되는데, 아마 이러한 애플리케이션들의 알려진 취약점들을 활용해 공격하려던 것으로 생각된다.다행히 내가 별다른 설정을 하지

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

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

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

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

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

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