이번에 회사에서 새 프로젝트를 시작하게 되었습니다. 하나의 시스템을 위해 3개의 서비스가 필요했는데, 이는 각각 웹+앱, 앱 전용, 웹 전용으로 구성됩니다. 기술 스택으로는 React와 React Native를 사용하기로 했습니다. 이 3가지 서비스에서 공통적으로 사용

모노레포(Monorepo)는 여러 개의 프로젝트 코드가 동일한 저장소에서 관리되는 소프트웨어 개발 전략입니다. 글로벌 테크 기업들인 Google, Facebook, Microsoft, Uber, Airbnb, 그리고 Twitter 등은 이미 대규모 모노레포 시스템을 운

서비스를 배포하고 지속적으로 유지보수하려면 발생하는 에러를 신속하게 분석하고 대응할 수 있어야 합니다.하지만 개발 환경에서 볼 수 있는 에러는 한정적입니다. 다양한 기기와 버전, 환경을 모두 테스트하는 것은 불가능에 가깝기 때문입니다. 우리는 사용자가 어떤 기기를 사용

브라우저의 렌더링 엔진이 DOM 요소들의 위치와 크기를 계산하는 과정(레이아웃 단계)에 영향을 미치기 때문입니다. 각 속성은 요소의 배치, 크기, 관계에 변화를 일으켜 브라우저가 레이아웃을 다시 계산해야 하는 상황을 만듭니다. 또한, 레이아웃 이후의 렌더링 단계들도 모

Next.js 서버 API를 통해 Supabase 데이터베이스에서 데이터를 가져올 때, 요청 시간이 2~3초씩 걸리는 문제가 있었습니다.스키마를 수정해 보기도 하고, 쿼리 플랜을 최적화해 보기도 했지만, 별다른 차이가 없었습니다.문제를 파고들다 보니, 처음부터 데이터베

FSD 아키텍쳐 Feature-Sliced Design 으로 프런트엔드 애플리케이션을 스캐폴딩하기 위한 아키텍처 방법론입니다. 간단히 말해, 코드 구성에 관한 규칙의 모음이다. 이 방법론의 주된 목적은 끊임없이 변화하는 비즈니스 요구사항에 맞서 프로젝트를 더 이해하기

프로젝트 빌드 중에 write 페이지와 post 페이지에서 발생한 prerendering Error를 해결한 과정을 작성합니다.Next.js는 서버 사이드와 클라이언트 사이드에서 모두 동작하는 프레임워크입니다. Next.js의 SSR(서버 사이드 렌더링) 구조로 인해,

지난 몇 달간 개인 프로젝트에 TailwindCSS를 적용해보았습니다. TailwindCSS가 Next 프로젝트에서 권장되는 이유는 크게 세 가지입니다:사용하지 않는 클래스 제거: 빌드 시 사용하지 않는 클래스가 제거되어 번들 크기가 줄어듭니다.효율적인 스타일 관리:

href: 링크가 이동할 URL을 지정하는 필수 속성입니다. 일반적으로 문자열 형식의 경로를 포함합니다.as: 브라우저에 표시되는 URL을 지정하는 옵션입니다. 기본적으로 href 속성과 동일한 값을 가집니다. 예를 들어, 동적 라우팅을 할 때 사용될 수 있습니다.pa

api 폴더에 index.js로 api를 만들어왔다그리고 HTTP 메소드에 따라서같이 작성하여 코드의 가독성이 저하되었다.13버전 이후부터는 index 예약어는 route로 변경되었다 고로 route.js 또는 route.ts 로 만들어줘야 한다.함수 명은 HTTP 메

넥스트 13버전에서는 공유 레이아웃, 중첩 라우팅, 로딩 상태, 에러 핸들링을 포함한 그 이상의 기능을 제공하는 리액트 서버 컴포넌트를 기반의 새로운 App Router 방식을 도입하였다.업로드중..app 폴더에서 동작하며, 각 폴더는 URL Segment 를 의미한다

Next.js 13부터 도입된 layout.js 파일은 여러 페이지(page.js) 들에 공통적으로 적용되는 UI를 정의하는 컴포넌트이다.layout.js는 하위의 page.js 및 layout.js 를 자식(children)으로 감싸서 화면을 렌더링 한다.따라서 여러

Promise를 '콜백의 진화' 버젼이라고 잘못 생각하는 경우가 많은데, Promise는 '콜백의 진화'가 아니다.콜백과 다르게 Promise의 가장 큰 장점은, '결과값을 나중에 쓸 수 있는 것'이다.Promise가 없었다면, 아래와 같이 '1초 뒤 무조건 실행되는'

비디오 컴포넌트를 자바스크립트에서 타입스크립트로 전환하던 중, 아래와 같은 에러를 맞이했다.이는 HTMLVideoElement에 브라우저별 Property가 정의되어 있지 않기 때문이다.아래와 같이 HTMLVideoElement 인터페이스를 확장해줌으로써 해결할 수 있

이렇게 작성하면 아래와 같은 장점이 있습니다 가독성: 객체 매개변수를 사용하면 함수 호출이 더 가독성 있을 수 있습니다. 특히, 여러 개의 선택적 매개변수가 있는 경우, 매개변수의 목적을 키 기반으로 쉽게 파악할 수 있습니다. 매개변수 순서 변경에 대한 영향 최소

OOP란 OOP(Object Oriented Programming)는 현실 세계를 프로그래밍으로 옮겨와 현실 세계의 사물들을 객체로 보고, 그 객체로부터 개발하고자 하는 특징과 기능을 뽑아와 프로그래밍하는 기법입니다. OOP로 코드를 작성하면 재사용성과 변형가능성을

전통적인 사이트들은 하나의 index.html을 통해 다른 페이지(html)로 이동하는 방식이다. (이러한 방식을 MPA라 한다.)하지만, 최근의 웹 사이트들은 ReactJS,VueJS,AngularJS와 같은 프레임워크/라이브러리를 사용한 SPA 방식이 주를 이룬다.

본 게시글은 "JSP 웹 프로그래밍"을 학습하며, 내용 요약 또는 몰랐던 부분을 정리하는 글 입니다.서버나 클라이언트에게 어떤 행동을 하도록 명령하는 태그JSP 페이지에서 페이지와 페이지 사이 제어다른 페이지의 실행 결과 내용을 현재 페이지에 포함자바빈즈(JavaBea

본 게시글은 "JSP 웹 프로그래밍"을 학습하며, 내용 요약 또는 몰랐던 부분을 정리하는 글 입니다.JSP 페이지를 어떻게 처리할 것인지를 설정하는 태그JSP페이지가 서블릿 프로그램에서 서블릿 클래스로 변환할 때JSP 페이지와 관련된 정보를 JSP컨테이너에 지시하는 메

본 게시글은 "JSP 웹 프로그래밍"를 학습하며, 내용 요약 또는 몰랐던 부분을 정리하는 글 입니다.<% ... %> 사용JSP 페이지가 서블릿 프로그램에서 서블릿 클래스로 변환할 때JSP 컨테이너가 자바 코드가 삽입되어 있는 스크립트 태그를 처리하고 나머지는 H