doeunn.log

공용 컴포넌트 모듈화를 적극 도입한 이유 저는 "사용자에게는 일관적인 사용자 경험을, 개발자에게는 생산성 있는 경험을 제공하는 것"이 제가 가장 중요하게 생각하는 부분인데요. 이전 프로젝트에서는 초반에 모듈화 틀을 잘 잡아놓지 못해 서로 중복되는 스타일 컴포넌트를 작성하거나, 심지어 비슷하면서도 조금씩 다른 스타일을 가지기도 했습니다. 이는 사용자에게 혼란을 주며(동일한 기능을 하는데 스타일이 다르다면 사용자는 다른 기능을 한다고 인식할 수 있습니다), 개발자는 중복되는 스타일 코드, 기능 코드를 매번 작성해야 합니다. 이런 불편함을 해소하기에는 공용 컴포넌트 모듈화가 필요했습니다. 모듈화에 큰 어려움이 없었던 결정적 이유 모듈화에 큰 어려움이 없었던 이유는 초반 설계를 꼼꼼하게 했었기 때문인데요. Fi..

프로젝트 설명 본 프로젝트는 위치 기반으로 중고 물품을 확인할 수 있습니다. 사용자들을 채팅을 통해 중고 거래가 가능합니다. 사용자에게 더욱 합리적인 거래 서비스를 제공하기 위해 물품 별 시세 동향 조회 기능, 개인 가계부 조회 기능이 포함되어 있습니다. 진행 기간 2023년 4월 말 ~ 6월 중순까지 총 8주 동안 진행하였습니다. 팀원 Frontend 6명 + Backend 1명으로 진행되었습니다. (백엔드 1명의 경우, 수강하고 있던 학원 강사님께서 진행해주셨습니다) 페이지 구성 제가 직접 구현에 참여한 부분에는 을 표시해두었습니다 :) 로그인, 회원가입 메인 화면 검색 결과 화면 리스트 화면 (중고 상품, 무료 상품) 상세 화면 물품 등록, 수정 시세 동향 마이페이지 가계부 내가 등록한 상품 관심 ..

본 포스팅은 아래 글을 토대로 정리된 내용입니다 :) Common mistakes with React Testing Library Some mistakes I frequently see people making with React Testing Library. kentcdodds.com 위 글에서는 다음과 같은 중요도에 따라 레이블을 지정했습니다. 낮음(⭐) : 이것은 대부분 개인적인 의견일 뿐이므로, 자유롭게 무시해도 괜찮을 것이다. 중간(⭐⭐) : 버그를 경험하거나, 신뢰도를 잃거나, 필요치 않은 작업을 하게 될지도 모른다. 높음(⭐⭐⭐) : 꼭 이 조언을 듣자! 신뢰도가 낮거나 문제가 있는 테스트가 있을 수 있다. 1. Testing Library ESLint 플러그인을 사용하지 않음 ⭐⭐ → Te..

Batching state가 변경되면 React에서는 렌더링을 하죠? React에서는 불필요한 리렌더링을 방지하기 위해 state를 변경하는 작업을 일괄적으로 처리합니다. 예를 들어 prev+1을 5번 동시에 작성했다면, 1 2 3 4 5가 아니라 그냥 5 이렇게 됩니다. → 이렇게 state의 업데이트 작업을 일괄 처리하는 방식을 Batching이라고 합니다. 덕분에 불필요한 리렌더링을 방지할 수 있는 것입니다. import { useState } from "react"; function Counter() { const [count, setCount] = useState(0); function increaseCountThree() { // 아래의 작업은 모두 일괄적으로 묶여 처리된다. 한 번의 리렌더링..

일단! Lazy loading의 필요성부터 사용자가 웹 페이지를 열면 SPA에서는 전체 페이지의 내용이 다운로드 되어 단일 이동으로 렌더링됩니다. → 이를 통해 브라우저는 웹페이지를 캐싱할 수 있지만, 사용자가 다운로드한 모든 콘텐츠를 다 본다는 보장은 없죠? 예를 들어, 갤러리 전체 사진을 다운로드했지만 사용자는 첫 번째 이미지만 본 후 서비스를 이탈했을 때 웹 페이지에서는 메모리 및 대역폭 낭비로 이어질 것입니다. 💡 페이지에 접근할 때 모든 콘텐츠를 대량으로 로드하는 대신 사용자가 필요한 페이지의 일부에 접근할 때 그 콘텐츠를 로드할 수 있다면 어떨까요? 즉, 로딩을 지연할 수 있다면? Lazy loading이란? Lazy loading은 페이지를 읽어들이는 시점에 중요하지 않은 리소스 로딩을 미루..

DOM ✔️ DOM(Document Object Model)은 문서 객체 모델이라는 뜻, HTML, XML 문서의 프로그래밍 interface ✔️ 웹 페이지는 일종의 문서(document)라고도 할 수 있는데 ✔️ 이 문서는 웹 브라우저를 통해 그 내용이 해석 → 웹 브라우저 화면에 표시 ✔️ 이때 DOM을 통해 동일한 문서를 표현, 저장, 조작할 수 있게 되는 것 → DOM은 문서로 만들어져있는 웹 사이트를 브라우저가 이해할 수 있는 구조를 제공 렌더링(Rendering) ✔️ Render는 애플리케이션에서 요소의 속성(props)이 새로운 속성으로 바뀌거나 컴포넌트의 상태가 변경될 때 사용자 화면의 해당 정보만을 갱신하는 것을 의미 ✔️ 렌더링 방법 덕분에 웹 페이지를 전부 다 다시 로드하지 않아도..