LG 유플러스 유레카 SW

Redux자바스크립트 앱에서 상태(state)를 예측 가능하게 관리할 수 있도록 도와주는 상태 관리 라이브러리애플리케이션의 상태를 하나의 스토어(store)에서 관리하고, 상태 변경은 액션(action)이라는 이벤트를 통해서만 이루어짐 사용 이유여러 컴포넌트가 같은 데이터를 써야 할 때, 상태 공유가 복잡해짐Props drilling(깊은 자식에게 props 전달)이 심해짐상태 흐름이 예측되지 않음 ➡️ 디버깅 어려움 핵심 원칙단일 스토어(Single Source of Truth): 애플리케이션의 모든 상태는 하나의 스토어에 저장됨상태는 읽기 전용(State is Read-Only): 상태를 직접 변경할 수 없고, 액션을 통해서만 변경할 수 있음변경은 순수 함수로만(Changes are made with..

React HookuseStatehttps://nueos.tistory.com/204#useState-1 [#50] React - useStateuseState- 컴포넌트에 상태를 추가하는 Hook- 화면에 보여주는 데이터를 저장하고 변경할 수 있게 해주는 기능기본 사용법const [상태, 상태변경함수] = useState(초기값);const [state, setState] = useState(초기nueos.tistory.com useEffect컴포넌트의 렌더링 외에 발생하는 부수 효과(side effects)를 처리하기 위한 훅더보기부수 효과데이터 가져오기 (API 호출)타이머 설정 (setTimeout)이벤트 리스너 등록외부 시스템과 연동useEffect(() => { // 마운트될 때 실행할 코드..

상품 필터링/정렬카테고리 필터: 전체, 신상품(new), 인기상품(top) 선택 가능정렬 조건: 등록순(id), 낮은 가격순(price), 높은 가격순(-price), 낮은 할인율(discount), 높은 할인율(-discount)URL 쿼리스트링을 이용한 상태 관리ex) /shop?_page=1&_per_page=12&category=top&_sort=priceReact Router의 loader 기능 활용 Router Loader에서 쿼리 파싱 및 쿼리 스트링 조합쿼리 파라미터를 받아 json-server에 전달할 쿼리스트링 구성필요한 데이터를 미리 받아두기 위해 loader 사용export const shopLoader = async ({ request }) => { const url = new ..

🛒 장바구니장바구니 수량 업데이트cartApi.jsexport const updateCartItem = async (id, count) => { try { // id에 해당하는 상품 가져오기 const cartItem = await axios.get(`/api/cart/${id}`) // 해당 상품 카운트 업데이트 const updateItem = { ...cartItem.data, count } const res = await axios.put(`/api/cart/${id}`, updateItem) return res.data } catch (err) { console.log('[error]', err) }}CartPage.js const decrease ..

🛍️ 상품 상세 페이지로딩 상태 처리상품 상세 페이지에서 데이터를 불러오는 동안 로딩 스피너를 보여주고, 이후 내용을 표시✅ useState로 로딩 상태 정의 const [isLoading, setIsLoading] = useState(true)✅ useEffect로 데이터 준비 확인 후 상태 업데이트useEffect(() => { // 컴포넌트가 마운트된 직후에는 로딩 상태로 표시 setIsLoading(true) // 데이터가 로드된 후 로딩 상태 해제 if (product && product.id) { // 약간의 지연 효과를 줘서 로딩 화면을 확인할 수 있도록 const timer = setTimeout(() => { setIsLoading(..

유틸 함수 모듈화1. 금액을 한국 통화로 포맷팅export const formmatCurrency = number => number.toLocaleString() + '원'2. 날짜를 한국 시간 형식으로 포맷팅export const formatDate = date => { const d = new Date(date) const year = d.getFullYear() // getMonth()는 0부터 시작하므로 1을 더하고, 10보다 작으면 앞에 0 추가 const month = String(d.getMonth() + 1).padStart(2, '0') const day = String(d.getDate()).padStart(2, '0') return `${year}. ${month}. ${d..

이미지 용량 최적화✅ 이미지 최적화가 중요한 이유전체 페이지 로딩 시간의 대부분은 이미지가 차지이미지 최적화는 웹 성능 개선의 핵심 요소 📌 최적화 기준1MB 이상은 너무 큼 ➡️ 용량 줄이기 필수가능하면 200~300KB 이하로 유지 🥊 실제 용량 줄인 후 Lighthouse 비교 ☠️ 스켈레톤 UIhttps://somyclass.notion.site/UI-1d6973f5e0fe8018b219d86627ba1bb8 스켈레톤 UI | Notion스켈레톤 UI(Skeleton UI)는 콘텐츠가 로딩되는 동안 표시되는 저해상도 미리보기 또는 자리 표시자 화면으로, 실제 콘텐츠의 구조와 레이아웃을 시각적으로 나타냅니다. 이는 사용자에게 콘텐츠가somyclass.notion.site 배너가 로딩 중일 때 ..

성능Lighthouse웹 페이지의 성능, 접근성, SEO, PWA 등을 분석해서 점수와 함께 개선할 수 있는 인사이트를 제공해주는 오픈소스 자동화 도구항목설명Performance(성능)페이지 로딩 속도, 인터랙티브 속도 등Accessibility(접근성)다양한 사용자(장애인 포함)가 콘텐츠를 이용 가능한지Best Practices(모범 사례)웹 표준, 보안 관련 권장 사항 준수 여부SEO(검색 엔진 최적화)검색 엔진에 잘 노출될 수 있도록 구조화됐는지PWA(Progressive Web App)앱처럼 동작할 수 있는 웹앱인지 🛠️ 실행 방법Chrome DevTools 사용페이지에서 개발자 도구 열기상단 탭에서 Lighthouse 클릭원하는 항목 체크 후 Analyze 버튼 클릭리포트 생성됨 ✅ 강사님 참..