Develog/Front10 [꼬랑지랑] next.js 사이트 개선기 (2) 이커머스 상세페이지 더보기 구현 안녕하세요 주니어 프론트엔드 개발자입니다!이번엔 사이드 프로젝트로 만들었던 꼬랑지랑(이커머스 사이트)의 상세페이지 더보기 기능을 구현하겠습니다.- 상세페이지 탭 고정, 미리보기 이미지의 화면 상단에 보이게 하기 등 꼬랑지랑에 적용하기상품정보 더보기 기능상품상세 메뉴바가 위에 고정되는 기능BeforeAFTER 문제정의문제 : 미리보기 페이지가 이미지의 중간부터 보여줌=> 미리보기 부분이 이미지의 가장 윗부분 으로 바꾸기문제 : 화면을 펼쳤을 당시 아랫부분에 렌더링되야하는 상품후기 탭 레이아웃이 깨진다=> 이미지 더보기를 클릭해도 레이아웃이 깨지지 않고 그 하단에 탭이 생성되게 하기기존코드 상품설명 .. 2024. 10. 26. [리액트 성능최적화] useCallback 과 useMemo의 차이와 React.memo 1. React 성능최적화에 사용되는 useCallback() 과 useMemo(), React.memo의 차이는 무엇일까?useMemo()는 특정 계산의 결과를 메모이제이션 하며 의존성 배열이 변경되지 않는 한 동일한 결과를 반환하는 리액트 훅이다. 비용이 많이 드는 계산을 반복하지 않도록 방지하여 성능최적화에 쓰인다. useCallback()은 '함수'의 메모이제이션에 사용된다. 컴포넌트가 리렌더링 될 때마다 동일한 함수가 재생성되는 것을 방지하며, 불필요한 리렌더링이나 성능 저하를 방지한다. React.memo()는 자식컴포넌트가 부모컴포넌트에게서 전달받는 props가 변하지 않으면 자식컴포넌트가 리렌더링 되지 않게 해준다. 부모컴포넌트가 자식컴포넌트에 함수를 props로 전달해준다면 useCall.. 2024. 8. 17. 실전으로 배우는 웹 성능 최적화 for React 강의를 듣는 이유1. Next.js로 성능 개선을 하다보니까 웬만한 건 다 Next.js가 해주는 걸 알게됐다.=> 그럼 리액트는 ?2. 리액트에서 성능개선을 하는 법을 알고싶었다.3. 네트워크 탭, 성능 탭을 잘 이용하는 법을 배우고 싶었다. 1. 프론트 성능 최적화는 두개로 나눌 수 있다.1) 로딩 성능 최적화 : 브라우저에서 리소스를 불러올 때의 성능을 최적화 한다.2) 렌더링 성능 최적화 : 화면에 요소들이 그려질 때의 성능을 최적화 한다. 2. 성능 최적화 방법들1) 로딩성능 최적화이미지 사이즈 최적화 : 이미지의 크기를 줄인다.code spilit : 해당 페이지(ex. 메인페이지)에서 당장 필요없는 코드는 나중에 불러온다.텍스트 압축 : 사용하지 않는 텍스트는 일부분만 불러온다.2) 렌더.. 2024. 7. 20. [꼬랑지랑] next.js 사이트 개선기 (1) 요약 : 1. next.js로 만든 웹사이트의 성능을 개선하려고 했다.2. next.js는 Image 태그를 사용하면 자동으로 최적화가 되는데 나는 안됐다. 어째서?3. 나는 unoptimized 옵션으로 next.js의 최적화 기능을 사용 안하고 있었다 ^0^ 1. Next.js로 만든 웹사이트 성능최적화를 해보자 주인공은 이 웹사이트다2.결과 미리보기 처음엔 이랬다 개선 후 LCP가 확 줄어들었다 3. 개선기1. 문제파악하기 구글의 Light House는 최적화를 위한 방법들을 분석하고 제안해 준다. 그 예로 우리 사이트는 이렇다 3.6초나 차지하는 LCP 요소가 무엇일까?메인엔 이미지 밖에 없었다. 나는 이 이미지들을 로드하는데 시간이 많이 걸린다고 생각했다. 방법 1. 배너와 같은 관리자가 설.. 2024. 7. 13. [우아한-Tech 스터디] Framer-motion을 이용한 애니메이션으로 화려한 웹 페이지 만들기 - 2주차 - 개요Framer-mortion 으로 페이지 전환시의 효과를 구현한다.사용 개념motion.div의 initial ,animate, exit 를 이용했다. + react-router-dom-v6 도 준비물 motion.div, AnimatePresense, react-router-dom-v6, useLocation STEP 1경로에 맞는 페이지 만들기import { AnimatePresence, motion } from "framer-motion";import { useLocation } from "react-router-dom";const About = () => { const location = useLocation(); return ( AnimatePresence mode="w.. 2024. 6. 20. [리팩터링]Object.keys() 타입 지정해서 사용하기 type CoffeePrice = { [K in CoffeeName]: number; }; type CoffeeName = "americano" | "latte" | "ade"; const obj: CoffeePrice = { // ~~~ error Property 'ade' is missing in type '{ americano: number; latte: number; }' but required in type 'CoffeePrice'.ts(2741 americano: 10, latte: 10, }; ade 가 없어서 완전히 일치하지 않기 때문에 오류가 나온다. 해결법 ? 연산자를 넣어주거나 부분만 포함하겠다는 partial 키워드를 넣어주면 된다. 위의 기초 연습을 토대로 내 코드를 리팩터링 하기.. 2023. 7. 23. Drag AND Drop (react.js)구현하기 - 1 drag : 드래그 하고있는 상태의 아이템 dragend : 드래그 동작이 끝났을 때 dragenter : 드롭할수있는 target에 드래그 아이템이 들어왔을 때. dragleave: 드래그 아이템이 드롭타겟을 떠났을 때 dragover : 드래그 아이템이 드롭 타겟에 놓여졌을 때 dragstarg : 드래그 동작이 시작 됐을 때 drop : 아이템이 드롭 타겟에 놓였을 때 const onDragStart=(e)=>{ setX(e.clientX) //시작 위치를 저장 setY(e.clientY) e.dataTransfer.setData("data",e.target.id) e.dataTransfer.dropEffect="copy"; } const onDragOver = (e)=>{ //drop 이벤트가 발.. 2023. 7. 9. React 중첩라우팅 https://ostarblog.tistory.com/9 React Router v6 정리 React Router v6 React Router는 현재 리액트의 라우팅 기능을 지원하는 가장 인기있는 라이브러리입니다. 이 React Router가 지난 2021년 11월에 정식 6.0 버전이 릴리즈되었습니다. 5.0 버전에서 큰 변경사항 ostarblog.tistory.com React-dom-router 의 대한 정보를 찾다가 v5랑 v6랑 섞인 정보가 많아 혼란스러웠다. 내가 원한건 페이지에서 -> 링크를 눌러서 하위 페이지로 이동할 경우에 따른 페이지를 보여주는걸 구현하고 싶었다. 이 페이지에서 nav 바를 누름에 따라 오른쪽 공간에 다른 정보가 보이게 하고 싶었는데. 이 블로그의 글을 읽고 중첩라우팅을.. 2022. 7. 10. [Udemy Web 부트캠프] 섹션 19,20,21 루프의 구조, 함수란?, 함수 레벨업 섹션 19 루프의 구조 for of 메소드와 객체에는 .length같은 길이가 없어서 for of에 사용할 수 없다 (반복가능한 객체가 아니기 때문에) 그래서 Object.key()와 Object.value()등을 이용해서 for of 문을 돌릴수있다. 해당 메소드들은 키값과 value값을 배열로 만들어서 반환하기 때문에 for of를 돌릴 수 있기 때문이다. For(let score of Object.values(객체명)){ } 18) { input = prompt(`The number is lower then ${input}`); } } //미니 ToDo List만들기 let todoes = []; let countTodo = 0; let input = prompt("명령어를 입력해 주세요!"); w.. 2022. 3. 29. [Udemy Web부트캠프] 공부일지 3일차 후기 * Udemy 강의가 괜찮다는 말을 듣고 사이트에 들어갔더니 내가 원하는 강의와 커리큘럼으로 Best강의가 있어서 바로 구매했다. * 강의 품질이 정말 좋은데 옜날엔 그냥 외우고 지나갔던 것들을 왜 중요한지 하나하나 알려주고 깊게 파고든다. 그리고 암기보다는 이해를 시키려는 방식이 정말 좋다.(하지만 초급부분은 이미 지식이 있어서 지루할 수도 있을 것 같다.) * 흥미를 유발하고 무엇보다 영어라서 집중하게 된다 ㅋㅋ * 하지만 문서에서 왜 h1~h6를 나눴는지, 웹 페이지를 만들때 label의 접근성이 얼마나 중요한지, 시맨틱 태크가 왜 중요한지 등등 스크린 리더 사용자들을 예시로 들어서 알려주는데 기억에 정말 잘 남았다. [섹션 2. Web 개발이란?] 3/17 [섹션 3. HTML 기초].. 2022. 3. 19. 이전 1 다음
