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

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

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

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

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

최근 프론트엔드 공부를 하면서 아키텍처와 디자인 패턴에 대해 더 자세하게 알아보고자 정리하게 되었습니다.잘못된 내용에 대한 지적과 더 많은 정보들은 언제든 감사하게 받고 있습니다 😊이 세 가지는 효율적이고 유지보수가 용이한 애플리케이션 개발을 위해, 개념과 특징을 알고 적절히 조합하여 적용해야 합니다.방법론은 아키텍처를 구현하는 방식을 제시하고 디자인 패턴은 방법론 내에서 특정 문제를 해결하는 데 사용됩니다. 프론트엔드 아키텍처- 애플리케이션의 전체적인 구조와 구성 요소 간의 관계를 정의하는 설계 방식입니다.- 애플리케이션의 유지보수성, 확장성을 높이는 데 중요한 역할을 합니다.  특징애플리케이션의 전반적인 구조 결정주요 구성 요소와 그들 간의 상호작용 방식을 정의확장성, 유지보수성, 성능 등 비기능적..

🌿 ThemeProvider란?styled-components에서 제공하는 기능으로, 전역적으로 테마를 관리하고 적용할 수 있게 해주는 컴포넌트React의 Context API를 기반으로 만들어져 있어, 하위 컴포넌트들에게 테마 정보를 props 형태로 전달테마 객체 정의src/types/themes.ts 파일 생성export const lightTheme: Theme = { colors: { background: "#ffffff", text: "#000000", primary: "#0070f3", }, fontSize: { small: "12px", medium: "16px", large: "20px", },};ThemeProvider로 래핑테마를 적용할 컴포넌..

강의 들으면서 복습겸 적은거라 나중에 따로 정리를 다시 하던가 해야겠다.프로젝트 생성npx create-react-app [프로젝트명]프로젝트 실행npm start // http://localhost:3000HMR(Hot Module Replacement) : 코드 수정 시 화면에 바로 반영Component함수형 컴포넌트JSX(JavaScript XML) 스타일은 객체 형태로 전달해야 적용이 된다. 카멜케이스로 작성 중괄호({ }) 내부에서 변수 사용 가능재사용에 용이import Hello from "./component/Hello";function App() { const name = "Tom"; const naver = { name: "네이버", url: "https://naver..

퇴사 후에 이것저것 계획을 세우긴 했지만, 너무 우당탕이어서 일단 프론트엔드 복습부터 해보자항상 프로젝트를 진행하면서 필요한 기능만 검색해서 적용했더니 프론트엔드 이론을 제대로 공부해본 적이 없었다. 그래서 유튜브를 통해 한 번 훑어보고 시작하기로 결정했다.JAVASCRIPT코딩앙마 - 자바스크립트 중급 강좌 : 140분 완성기초지만 잘 안쓰는 것들은 다시 봐도 새로워서 반복이 중요하다는 걸 다시 느꼈다.오늘 일단 중급 강좌 하나만 들어서 차차 복습하는 내용들을 이어서 적을 예정이다. 모던 자바스크립트 Deep Dive마침 책도 있고 유튜브에 스터디 강의가 있길래 1.5배속으로 수강하고 복습해야지 모던 자바스크립트 Deep Dive를 틈틈이 읽으며 사이드 프로젝트를 진행하는 중인데역시나 React에 대한..