Next.js와 Supabase로 이벤트 초대장 애플리케이션 만들기이벤트를 생성하면 그 이벤트에 대한 초대장을 만들어주고 공유할 수 있는 서비스를 개인 프로젝트로 진행하고 있다. 단순 초대장 생성 기능뿐 아니라 내 위치 기반으로 주변의 이벤트들을 확인하고 참가할 수 있는 기능도 차차 추가해 보려고 한다. 이벤트 생성 기능과 관련 이미지를 업로드할 수 있는 기능을 구현했다. 프론트엔드에는 Next.js, 백엔드에는 Supabase를 사용하면서 S3와 CloudFront로 이미지를 호스팅하는 방식을 적용해봤다. 이 과정에 대해서 기록해 보려고 한다.Supabase에서 이벤트 테이블 만들기먼저, 이벤트 데이터를 저장할 event 테이블을 Supabase에서 만들었다. 테이블은 간단히, 이벤트 제목, 날짜 및 ..
최근 새로운 프로젝트 본격 진행에 앞서 커밋 린트(commit lint)를 설정하는 작업을 진행했다. 처음에는 간단히 끝날 줄 알았지만, 예상치 못한 문제들이 발생하며 생각보다 많은 시간을 소모하게 되었다. 하지만 배운 점들도 많아 기록해두려 한다.커밋 린트의 필요성 커밋 린트는 커밋 메시지의 형식을 검증하여 일관성을 유지하는 도구다. 이번 프로젝트에서는 하나의 레포에 프론트엔드와 백엔드 코드를 공유하면서 사용하기로 했는데, 이에 따라 커밋 메시지에 (front)와 같은 구분을 추가해야 했다. 그런데 이 규칙을 자주 잊어버리는 일이 발생했다. 이런 문제를 해결하기 위해 커밋 메시지의 형식을 강제할 필요성을 느끼고, commitlint를 도입하기로 결정했다.패키지 설치 및 초기 설정프로젝트의 package..
마지막 업데이트: 2024-10-18 지난 10개월을 돌아보며프론트엔드 개발자로 일을 시작한 지 이제 곧 10개월이 된다. 그동안 여러 일을 맡아서 해 보면서 장애물을 만나기도 하고, 한가지 문제로 며칠동안 고민하고 토론하면서 답을 찾아나가기도 했다. 그 과정이 유익했고 배운 것이 많았기에 중간 기록을 해두려 한다. 물론 단순 구현을 하거나 큰 어려움을 겪지 않았던 작업들도 있었기 때문에 모든 일의 내용을 적지는 않을 것이고, 특별히 기록할 만하고 기억에 남는 것들을 위주로 적어 보려 한다.(본문에 첨부된 코드는 실제와 다르며 이해를 돕기 위해 간소화 및 변형되었다.)서비스 소개지난 10개월간 일한 회사는 모듈화된 애플리케이션을 사용자의 필요에 따라 선택해 통합적으로 이용할 수 있는 플랫폼을 제공했다. ..
한줄 요약 웹서버와 WAS는 클라이언트로부터 온 요청을 처리하는 데서 서로 다른 역할을 한다. 웹서버와 WAS를 분리하면 자원 이용의 효율성 및 장애 극복, 배포 및 유지 보수의 편의성 등의 장점이 있다. 웹서버 하드웨어: 웹 서버의 소프트웨어와 웹사이트의 컴포넌트 파일(html, css, javascript, 이미지)을 저장하는 컴퓨터 소프트웨어: 클라이언트로부터 http 요청을 받아 정적인 컨텐츠를 제공하는 컴퓨터 프로그램 ➡️ 웹 서버의 종류: 아파치, NginX 등 WAS(Web Application Server) WAS는 웹서버와 웹 컨테이너가 합쳐진 개념이다. 정적인 컨텐츠 외에 DB 조회와 다양한 로직 처리를 요구하는 동적인 컨텐츠를 제공하기 위해서 만들어졌다. http 프로토콜을 기반으로 ..
동시성 기능(concurrency feature) 이전 버전까지의 동기 렌더링 방식에서는 컴포넌트 트리 내의 모든 컴포넌트가 렌더링되고 DOM에 반영되기까지 반응이 없는 UI를 경험했다. 리액트 18 버전에서 도입된 동시성 기능으로 렌더링 과정을 일시 중지했다가 다시 시작하거나 아예 중단할 수 있게 되었다. 이로 인해 대규모 렌더링 작업이 진행되고 있더라도 사용자 입력에 대해 UI가 즉각적으로 반응할 수 있게 된다. 각 컴포넌트에 렌더링 우선순위를 부여해 낮은 우선순위의 컴포넌트가 렌더링되는 동안에는 더 중요한 작업이 있는지 확인해 중간에 렌더링을 일시 중단하고 다른 작업을 수행한 뒤 재개할 수 있다. 자동 배칭(automatic batching) 배칭이란 여러 개의 상태 업데이트를 하나의 재렌더링으로 ..
라우팅 라우팅이란 사용자가 웹사이트의 여러 페이지로 이동하도록 해주는 프로세스를 말한다. 라우팅과 렌더링은 다르다. 특정 라우트에 대한 요청을 보낼 때마다 그 페이지를 렌더링하게 되지만, 모든 렌더링이 라우팅의 결과는 아니다. Client-side routing clinet-side routing은 자바스크립트에 의해서만 처리되는 라우팅이다. 웹 애플리케이션의 모든 내용을 한 페이지에서 동적으로 로드하고 표시하는 싱글 페이지 애플리케이션(SPA)은 클라이언트사이드 라우팅 방식으로 구현된다. 전체 페이지를 새롭게 렌더링하지 않기 때문에 부드러운 페이지 이동 경험을 제공할 수 있다. client-side routing의 장점과 단점 장점 렌더링되는 데이터의 양이 적어 컴포넌트 간의 라우팅이 빠르게 처리된다...
프로그램이 실행하게 되면 OS는 메모리(RAM)에 공간을 할당해준다. 메모리 공간은 코드 영역, 데이터 영역, 스택 영역, 힙 영역의 네 가지 영역으로 나뉜다. 코드(Code) 영역 우리가 작성한 소스코드가 들어 가는 부분. 즉, 실행할 프로그램의 코드가 저장되는 영역으로 텍스트(code)영역이라고도 부른다. 코드영역은 실행 파일을 구성하는 명령어들이 올라가는 메모리 영역으로 함수, 제어문, 상수 등이 여기에 지정된다. 데이터(Data) 영역 전역변수와 정적변수가 할당되는 영역. 프로그램의 시작과 동시에 할당되고, 프로그램이 종료되어야 메모리가 소멸되는 영역 스택(Stack) 영역 프로그램이 자동으로 사용하는 임시 메모리 영역이다. 함수 호출 시 생성되는 지역 변수와 매개변수가 저장되는 영역이다. 함수가..
연결리스트 연결리스트(Linked List)는 각 노드가 데이터와 포인터를 가지고 한 줄로 연결되어 있는 방식으로 데이터를 저장하는 자료구조이다. 각 노드는 다음 노드를 가리키는 포인터를 포함한다. 연결리스트의 종류 단순(단방향) 연결리스트 단일 연결 리스트(Singly linked list)는 각 노드에 자료 공간과 한 개의 포인터 공간이 있고, 각 노드의 포인터는 다음 노드를 가리킨다. 이중(양방향) 연결리스트 단순 연결 리스트(Singly Linked List)는 next로 현재 노드에서 다음 노드로 갈 수 있지만 이전 노드로는 갈 수 없다. 이러한 단점을 해결하기 위해 노드에 앞 노드의 메모리 주소를 보관하는 포인터 prev를 만들어준 형태를 이중 연결 리스트(Doubly Linked List)라..
