우아한 테크코스26 재사용 가능한 컴포넌트 Grid 오류 문제 상황 Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React a Simple, Modular and Accessible UI Components for your React Applications. Built with Styled System chakra-ui.com Chakra UI를 보면서 재사용 가능한 컴포넌트를 만들었다. 그중 Grid의 Starting and ending lines를 참고해 row와 column의 시작점과 끝점을 정의했다. gridColumn: col === 'auto' ? 'auto' : `span ${c.. 2023. 9. 18. 프론트엔드 성능개선2 3️⃣ 같은 건 매번 새로 요청하지 않기 CDN을 적용하고, 한 번 요청한 리소스는 CDN 캐시에서 불러와야 한다. GIPHY의 trending API를 Search 페이지에 들어올 때마다 새로 요청하지 않아야 한다. 도구 CloudFront Chrome DevTools > Network WebPageTest 키워드 CDN HTTP Cache Cache Policy memoization 캐시란? 캐시란 어떠한 데이터를 임시 저장하는 장소를 말한다. 만약 서버로부터 리소스를 받기 위해 API 통신을 한다고 가정해 보자. 이미 존재하는 데이터를 요청하는 것은 불필요한 요청이다. 이 경우 서버의 부하를 높이고 웹 성능이 저하되는 문제가 발생한다. 캐싱은 리소스의 복사본을 저장하고 있다가 요청 시 해당 복사본을.. 2023. 9. 6. 프론트엔드 성능개선 1 개선 전 이번 과제는 움짤을 볼 수 있는 'memegle' 사이트 개선하기이다. 깃허브 페이지 배포 후 라이트하우스로 성능을 측정하였다. 배포 ... 그전에 개념 S3란? Simple Storage Service로, AWS에서 제공하는 인터넷 스토리지 서비스이다. S3를 사용하면 데이터를 안전하게 저장하고 필요할 때 언제든지 접근할 수 있다. S3의 장점 ✦ 확장성 무제한으로 확장 가능한 객체를 저장할 수 있다. ✦ 내구성 추후 어떤 데이터가 손상되더라도, 복제본을 통해 내구성을 높일 수 있다. 하지만, 내부 복제가 모두 완료되지 않은 상태라면 S3는 각각 다른 객체로 요청에 대해 응답해 사용자별로 받은 응답 결과가 다를 수 있다. S3 버킷은 내부 복제를 통해 안정적으로 보관을 제공한다. ✦ 보안 암호.. 2023. 9. 5. 생각해보기🤔 - 장바구니 🛒 Flux는 MVC의 어떤 문제를 해결했을까? MVC는 복잡한 의존성과 양방향 데이터 흐름이라는 문제가 있었다. 이를 해결하기 위해 Flux가 만들어졌다. 1. 중앙 집중화된 데이터 스토어 MVC 패턴의 여러 모델 대신, Flux는 중앙 집중화된 데이터 스토어를 사용한다. 이를 통해 데이터 일관성을 유지하고 유지 보수를 용이하게 한다. 2. 단방향 데이터 흐름 Flux는 데이터를 단방향으로 흐르게 하여 구조를 단순하게 만든다. 데이터는 액션(Action) -> 디스패처(Dispatcher) -> 스토어(Store) -> 뷰(View) 순서로 흐른다. 이를 통해 상태 관리를 좀 더 예측 가능하게 하여 디버깅을 쉽게 만든다. 🛒 이전 미션에서와 같이 React 자체에서 제공하는 방법으로만 상태를 관리하는 .. 2023. 6. 25. 생각해보기🤔 - 페이먼츠 💳 컴포넌트를 어느 정도까지 분리해야 할까요? 아래 기준에 따라 분리하는 것이 좋다. 1. 단일 책임 원칙 각 컴포넌트는 최대한 작은 기능적 단위를 가지도록 설계하는 것이 좋다. 이렇게 하면 재사용성이 높아지고, 각 컴포넌트의 역할을 명확히 할 수 있다. 2. 재사용성 공통적으로 사용되는 UI 요소나 로직이 있는 경우, 컴포넌트로 분리하면 여러 곳에서 재사용할 수 있다. 이렇게 하면 코드 중복을 줄이고 관리하기 편해진다. 3. 복잡성 컴포넌트 내부 로직이나 상태 관리가 복잡해진다면, 여러 하위 컴포넌트로 분리하여 복잡성을 줄일 수 있다. 💳 어떤 경우 컴포넌트를 그룹화해서 하나의 컴포넌트처럼 보이게 하는 것이 좋을까요? 1. 컴포넌트 간 의존성이 강한 경우 여러 컴포넌트들이 의존적이라면, 이를 그룹화하여.. 2023. 6. 20. 생각해보기🤔 - 다시, 점심 뭐 먹지 🍲 React 탄생 배경은 어떻게 될까요? React는 대규모 웹 애플리케이션 개발에서 발생하는 여러 문제를 해결하고자 하는 것에서 시작되었다. 특히 UI와 상호 작용하는 데이터의 복잡한 상태 관리와 DOM을 효율적으로 업데이트하는 것이 주요 과제였다. 이를 해결하기 위해 아래 기능을 도입했다. 1. 컴포넌트 기반 아키텍처 UI를 독립적이고 재사용 가능한 부분으로 나누어 개발의 복잡성을 줄이고 코드의 유지 보수를 쉽게 했다. 2. 가상 DOM (Virtual DOM) 실제 DOM 대신 메모리에 가상의 DOM을 생성한다. 이를 통해 업데이트가 발생할 때 불필요한 DOM 조작을 줄인다. 3. 단 방향 데이터 흐름 데이터와 상태가 계층 구조를 따라 일정한 방향으로 흐르게 한다. 이를 통해 상태 관리의 복잡성을.. 2023. 6. 19. 이전 1 2 3 4 5 다음
