◆ 파일 기반 라우팅각 페이지는 `page.js`라는 파일에 정의되고, 이 파일은 NextJS에게 페이지를 렌더링해야 한다는 것을 알려줍니다.이것은 NextJS의 강력한 기능 중 하나이며, 파일 시스템을 사용하여 애플리케이션의 구조를 자연스럽게 관리할 수 있습니다. ◆ 파일 시스템을 통한 경로 추가새로운 경로를 추가하기 위해 `app` 폴더 내에 새 폴더를 만들고 하위에 `page.js` 파일을 생성하면 됩니다.예를 들어 `/app/about/page.js` 파일을 생성하면 `/about` 페이지가 추가됩니다. ◆ 페이지 간 이동Server-side(Backend) : 서버 컴포넌트 함수를 실행하는 과정에서 최종적으로 렌더링될 HTML 코드를 생성합니다.Client-side(Frontend) : 렌더링될..

◆ NextJS란?: React 프레임워크의 확장판이며, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), API 라우팅 등을 쉽게 구현할 수 있도록 도와주는 도구입니다. ◆ NextJS의 필요성: NextJS는풀스택 리액트 프레임워크이기 때문에 리액트로 풀스택 애플리케이션을 구축하는 과정을 단순화합니다.풀스택 애플리케이션을 구축하는데 필요한 라우팅, 폼 제출, 데이터 처리, 인증 등의 기능을 제공합니다. ◆ NextJS 주요기능 및 장점풀스택 애플리케이션 구축프론트엔드와 백엔드에서 실행되는 코드를 모두 작성할 수 있어 풀스택 애플리케이션을 쉽게 구축할 수 있습니다.파일 시스템 기반의 경로 설정 (File-based Routing)파일 시스템을 사용하여 페이지의 경로를 설정할 수 있어 코드 기반..

문제 발생처음에는 이미지가 한 번에 로드되도록 구현되었습니다. 이로 인해 사용자가 페이지를 처음 접속했을 때, 모든 이미지가 동시에 로드되면서 페이지 로딩 시간이 길어졌습니다.특히 이미지 미리보기에서 이미지 개수를 기준으로 스크롤 기능을 구현하였는데, 사용자가 스크롤을 할 경우 이미지 로딩 시간이 길어져 모든 이미지가 표시되지 않은 상태에서 스크롤을 움직여 제대로 동작하지 않는 문제가 발생하였습니다. 해결 방법1. Spinner 추가처음에는 이 문제를 해결하기 위해 Spinner를 추가하여 모든 이미지가 로딩되어 출력되는 동안 스크롤을 조작할 수 없게 처리를 하였습니다.하지만 이 방법의 문제점은 출력되는 이미지의 수가 많아질수록 사용자의 입장에서는 해당 Spinner가 무한 로딩으로 느껴지고 오류로 생각..

문제 발생기능 적용 후, 처음에는 이미지 파일들을 대상으로 업로드 테스트를 진행했습니다. 그러던 중 파일의 크기와 종류를 다양하게 하여 대용량 파일이나 고화질 이미지들이 포함된 업로드를 시도하게 되었습니다. 그 결과 업로드 시간이 지나치게 길어지고, 네트워크 환경에 따라 서버 API에서 타임아웃이 발생하는 문제를 겪었습니다. 해결 방법문제를 해결하기 위해 백엔드 개발자와 논의한 결과, 파일을 청크(Chunk) 단위로 분할하여 업로드하는 방식을 채택했습니다.이 방법은 대용량 파일을 작은 청크로 나누어 서버에 전송하는 방식으로, 한 번에 전송되는 데이터의 양을 줄여 서버와의 연결이 끊어지는 것을 방지하고, 업로드 안정성을 크게 향상할 수 있습니다. 이를 통해 대용량 파일을 효율적으로 업로드할 수 있게 되었습..

최근 React 강의를 복습하면서 Vite를 처음 사용해 보았습니다. Vite의 설치와 실행 속도가 create-react-app(CRA)에 비해 현저히 빠르다는 점이 인상적이었습니다. 이에, 그동안 사용해 온 CRA의 기반인 Webpack과 자세히 비교해보고자 합니다.  ◆ 모듈 번들러 (Module Bundler)란?여러 개의 자바스크립트 파일(모듈)을 하나의 파일로 묶어주는 도구입니다. 웹 애플리케이션에서는 여러 모듈을 사용하기 때문에, 이를 한 번에 로딩하는 것은 비효율적입니다. 이를 해결하기 위해 모듈 번들러는 여러 개의 파일을 하나의 번들로 묶어 최적화된 형태로 브라우저에 전달합니다. 모듈 번들러가 해결하는 문제모듈화된 코드 관리 : 여러 개의 파일로 나누어 개발할 수 있습니다.성능 최적화 :..

◆ 11. Using Typesnumberstring: ' ', " ", ` `(템플릿 리터럴)booleanapp.tsfunction add(n1: number, n2: number) { return n1 + n2;}const number1 = 5;const number2 = 2.8;const result = add(number1, number2);console.log(result); // 7.8함수의 매개변수에 타입을 지정하여 컴파일 시 오류를 예방할 수 있습니다.예를 들어 `number1`에 문자열이 넘어가면 타입 오류가 발생합니다. 이는 개발 중에만 확인이 가능하고, 컴파일된 JS에서는 오류가 발생하지 않습니다. ◆ 12. TypeScript 타입 vs. JavaScript 타입JavaScript..

이번 주부터 유데미 'Typescript: 기초부터 실전형 프로젝트까지 with React + NodeJS' 강의 스터디를 진행하게 되었습니다. 스터디는 총 4주간 진행되며, 각 주차마다 강의 섹션별로 학습 내용을 나누어 계획을 세웠습니다. 매주 공부한 내용을 포스팅으로 정리하면서 복습할 예정입니다.◆ TypeScript란? TypeScript는 자바스크립트의 수퍼셋(Superset)으로, 자바스크립트의 모든 기능을 포함하면서, 타입 시스템과 클래스, 인터페이스 등 고급 기능이 추가된 프로그래밍 언어입니다. 하지만 타입스크립트 코드는 브라우저에서 바로 실행되지 않습니다. 브라우저가 타입스크립트를 이해할 수 없으므로, 먼저 자바스크립트 코드로 컴파일한 후에 실행해야 합니다. 타입스크립트는 컴파일러 역할을 ..

실무에서는 주로 프론트엔드와 백엔드 영역을 분리하거나, 하나의 프로젝트 내에서 두 영역을 함께 관리하는 방식을 경험해왔습니다. 두 방식 모두 각각의 장단점이 있었고, 상황에 따라 적합한 방법을 선택하는 것이 중요하다고 느꼈습니다. 하지만 그동안 이 방식들에 대해 깊이 고민해본 적은 없었던 것 같아, 이번 기회에 좀 더 자세하게 알아보고자 정리하게 되었습니다.소프트웨어 개발에서 코드 베이스를 관리하는 두 가지 주요 접근 방식◆ 모노레포 (Monorepo)란?: 여러 프로젝트의 코드를 하나의 버전 관리 저장소(Repository)에서 관리하는 개발 전략. 이 방식은 여러 프로젝트가 상호 의존하거나 공통된 코드를 공유할 때 유리하다.특징1. 단일 코드 저장소 : 모든 프로젝트와 관련 코드가 하나의 저장소에 존..

최근 커뮤니티에서 주로 사용하는 패키지 매니저에 대한 투표를 본 적이 있습니다. 그중 대부분은 Yarn과 npm을 선택하였지만 항목 외에 댓글에서 자주 등장하는 pnpm에 대한 궁금증이 생겨, npm과 비교해 보았습니다.  ◆ npm (Node Package Manager) 이란?: Node.js의 기본 패키지 매니저. JavaScript 런타임 환경인 Node.js와 함께 제공된다.특징광범위한 패키지 생태계 : 세계 최대의 소프트웨어 레지스트리를 보유하고 있다.의존성 관리 : package.json 파일을 통해 프로젝트 의존성을 관리한다.스크립트 실행 : npm run 명령어를 통해 사용자 정의 스크립트를 실행한다. 장점사용 용이성 : Node.js와 함께 제공되어 추가 설치가 필요 없다.풍부한 생태계..

- 애플리케이션의 전체적인 구조와 구성 요소 간의 관계를 정의하는 설계 방식입니다.- 애플리케이션의 유지보수성, 확장성을 높이는 데 중요한 역할을 합니다.  아키텍처에서 초기 설계를 신경 쓰지 않으면, 시간이 지날수록 새로운 기능을 추가하기 어려워집니다. 핵심 원칙관심사의 분리 : UI, 비즈니스 로직, 상태 관리 등을 명확히 분리합니다.모듈성 : 애플리케이션을 독립적이고 재사용 가능한 모듈로 구성합니다.확장성 : 새로운 기능을 쉽게 추가할 수 있는 구조를 만듭니다.성능 최적화 : 초기 로딩 시간, 렌더링 성능 등을 고려한 설계를 합니다.테스트 용이성 : 단위 테스트, 통합 테스트 등을 쉽게 할 수 있는 구조를 만듭니다.상태 관리 : 애플리케이션의 상태를 효과적으로 관리할 수 있는 전략을 수립합니다.모놀..