본문 바로가기

전체 글

취업 준비 기간을 회고하며 작년 11월 우테코를 수료하고 현재 8월인 지금까지 취업 준비를 하면서 느낀 점을 정리해보려고 해요. 커리큘럼 상 11월부터 본격적으로 취업 준비를 할 수 있었어서 11월부터 8월까지 약 9~10개월 정도 취업 준비를 했는데 짧다면 짧고 길다면 긴 기간이었습니다. 이 기간 동안 저는 어떻게 버텼는지, 취업 준비 기간 속 제가 찾은 정답은 무엇인지에 대해서 적어보려고 해요. 제 정답이 꼭 모두에게 정답은 아니겠지만 취업 준비를 하고 있거나 곧 하게 될 우테코 크루들에게 조금이나마 도움이 되기를 바라며 적어봅니다. 우테코는 월클이 아니다.첫마디부터 정말 강렬한 언어를 사용했어요. 이 말의 기원은 작년 10월 5기 선배와의 수다타임에서 나온 이야기입니다.선배님의 말을 빌리자면 우테코는 정말 이상적으로 프로젝트.. 더보기
전역 상태 라이브러리 직접 만들어보기 (flux 패턴의 Zustand) 이번에는 전역 상태를 라이브러리 없이 직접 만들어보는 과정에 대해 적어보려고 한다.전역 상태를 관리하는 3가지 패턴 Flux, Atom, Proxy 중 Flux 패턴인 Zustand를 모방해서 만들어보려고 한다. 0. 전역 상태를 만든다고 할 때 쉽게 떠오르는 방법?먼저 전역 상태를 만든다고 상상해 볼 때 가장 쉽게 떠오르는 방식으로는 아래 코드와 같이 컴포넌트 외부에 변수를 두어 내부에서 수정하는 방식을 생각해 볼 수 있다. 아래 코드를 실행했을 때 버튼을 누르면 state가 증가될까?let state = 0;const State = () => { const onClick = () => { state += 1; }; return ( {state} 버튼 );}.. 더보기
React에서 다른 컴포넌트로 상태를 공유하는 방법에 대해서 특정 컴포넌트에서 사용하는 상태를 다른 컴포넌트에서 사용하기 위해선 어떻게 해야할까? 위 상황에 대해 이해를 돕기 위해 카드 정보 입력 서비스를 생각해보자. App 아래 View와 Form 컴포넌트가 있고 Form에 입력한 값이 바뀌면 실시간으로 View에 반영이 되는 요구사항을 구현한다고 생각할 때 이 상태관리를 어떻게 하면 좋을까? 여러가지 방법이 있겠지만 대표적으로 아래 세 가지 방법이 떠오른다. 1. 상태 끌어올리기2. Context API 사용하기3. 전역 상태를 사용하기 1. 상태 끌어올리기먼저 App에서 상태를 선언해서 View와 Form에 내려주는 방법이 있다. 가장 직관적인 방법이라고 할 수 있다.App에서 useState를 사용해서 카드번호, 카드사, CVC 등 상태를 선언해서 관리하.. 더보기
행동대장 : input 이벤트 제어로 다양한 계좌번호 형태 붙여 넣기 기능 구현 행동대장의 송금 유도 기능을 사용하기 위해선 주최자가 행사를 생성한 뒤 은행과 계좌번호를 입력해야 한다. 이때 우리 계좌번호 입력창은 입력제한이 있어서 사용자에게 올바르지 않은 입력을 막아서 올바른 입력을 유도할 수 있도록 아래 오른쪽 화면처럼 유효하지 않은 입력이 들어오면 입력을 막고 에러 메시지를 보여준다. 붙여넣기 할 때 예외상황 발생그러나 사용자 입장에서 우리 기능을 사용할 때 정상적으로 사용할 수 없는 예외케이스가 있었다.계좌번호를 외워서 우리 형식에 맞게 바로 입력하는 사람도 있겠지만, 계좌번호를 외우지 않고 각자 사용하는 은행 앱에서 계좌번호를 복사한 뒤 붙여 넣는 경우를 고려했을 때 바로 예외상황을 발견할 수 있었다. 토스에서 계좌번호를 복사한 결과는 "은행이름 계좌번호(숫자)"의 형식이.. 더보기
크루위키 Next.js CD구축 (EC2, CodeDeploy, PM2) 2월 초 크루위키 마이그레이션 작업을 끝내고 시간에 맞춰 재출시를 하기 위해 EC2 인스턴스를 열어서 환경을 셋팅하고 직접 인스턴스 안에서 빌드를 수행하고 서버를 실행하는 수동 배포 방식으로 배포했다. 이제 어느 정도 서비스가 안정화되고 조금 여유가 생겨 자동 배포를 도전해 봤다. 현재 수동 배포 과정을 그림으로 살펴보면 EC2 인스턴스에 직접 접근한 뒤 디렉터리에 들어가 git pull origin main을 입력해서 main 코드를 EC2로 가져온다. 그 뒤에 next의 build 명령을 실행해서 main 코드에 기반한 빌드 파일을 만들고 background로 실행하기 위해 PM2로 next start를 실행해 주는 과정으로 수동 배포를 했었다. 하지만 이 과정에서 문제점이 있었는데 1. EC2 프리.. 더보기
행동대장 브랜치 별 자동 배포 적용 성공 (webpack, cloudfront, function) 저번에 행동대장 팀의 CI와 브랜치 별 배포 시도를 작성하며 개인적으로 Vite 번들링을 사용하는 레포지토리와 내 AWS 계정을 활용해서 브랜치 별 배포를 성공했었고, 이를 팀 내에 적용시켜 리뷰할 때 배포 링크를 활용해서 리뷰하는데 시간을 줄일 수 있도록 하고 싶었다. 그러나 생각보다 쉽지 않았고 결국 실패해서 태스크를 잠시 내려놓게 되었다. 그동안 크루위키 마이그레이션 및 운영과 취업준비를 동시에 하며 행동대장에 신경 쓰지 못하다가, 조금의 여유가 생긴 지금 저번에 실패했던 일을 해내고 싶어서 다시 도전하게 되었다. 새로운 마음으로 다시 시작하니 어라 성공하게 되었다. (역시 버그로 고통받을 땐 계속 매몰되면 안 되는 것 같다.) 오늘은 성공한 과정을 설명하며 행동대장에 브랜치 별 자동 배포를 적용한.. 더보기
Next.js의 fetch와 렌더링 방식(SSR, SSG, ISR), TanStack-Query 캐시 관리의 차이점 1. Next.js의 fetch에 대해서Next.js는 Node.js를 기반으로 서버 사이드 렌더링을 지원해주는 프레임워크이다. 오늘은 Next.js의 fetch에 대해서 설명하려고 한다. 이를 설명하기 전에 Next.js와 React의 동작 방식을 비교하며 Next.js를 먼저 이해해보면 Next.js 15버전의 app router 방식을 기준으로 작성하였으며 서버 컴포넌트에서 fetch를 호출하는 상황으로 가정한다.React와 Next의 동작방식 (CSR, SSR)먼저 React의 CSR 동작 방식부터 살펴보면사용자가 브라우저로 주소를 입력하면 정적 파일 저장소(ex: S3)에 index.html을 요청하게 된다. 그 후 index.html을 받은 브라우저는 이를 파싱하며 script tag를 만나서.. 더보기
크루위키 홍보 이후 사용자 분석 올해 1월, 크루위키 서비스를 고치며 6기 크루들이 불편했던 두 가지 문제를 개선해 냈고 2월 초에 마이그레이션이 끝나 Next 버전으로 배포도 완료했다. 목표는 새로운 유저인 7기 크루를 모집하기 위해서!  2월 11일 우테코 7기 교육이 시작되었고, 우리 크루위키 팀은 먼저 슬랙 채널을 이용해서 전체 기수가 모여있는 전체-잡담방에 홍보하여 크루위키 서비스는 어떨 때 사용할 수 있는지, 캠퍼스 꿀팁 및 맛집 정보를 담아 홍보했다. (전체-잡담 채널에 올린 것은 이번이 처음이다. 6기만 알고 사용하다가 이제는 6,7기 및 그 이전 기수도 알 수 있게 되었다.)  그리고 적당한 날을 잡아 선릉 캠퍼스와 잠실 캠퍼스 두 곳을 방문하여 직접 7기 크루들 앞에서 크루위키 사용 설명회를 진행했고, 크루위키 팀과의.. 더보기

티스토리툴바