김기지의 코딩노트

🌱 번들링 여러 제품이나 코드, 프로그램을 묶어서 패키지로 제공하는 행위 번들 : 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음 사용자가 더 쉽고 빠르게 프론트엔드 애플리케이션에 접근할 수 있도록 용량을 줄이거나 파일을 최소화하여 유저에게 전달하는 과정 사용자가 브라우저를 열고 주소를 입력하면, 해당 주소에서 개발자가 번들링한 여러 파일을 받음 이 파일을 브라우저가 실행하여 웹 애플리케이션을 제공 🌱 번들링의 필요성 HTML, CSS, JavaScript 파일을 그대로 전송할 시 생길 수 있는 문제점 두 개의 .js파일에서 같은 변수를 사용하고 있는 경우 → 변수 간 충돌이 일어남 딱 한 번 불러오는 프레임워크 코드가 8MB → 인터넷 속도가 느린 국가의 모바일 환경에서는 사용이 불편 번들 파일 ..

✅ Todo… Shopping Cart Actions ✓ addToCart는 ADD_TO_CART 액션을 생성해야 합니다 ✓ removeFromCart는 REMOVE_FROM_CART 액션을 생성해야 합니다 ✓ setQuantity는 SET_QUANTITY 액션을 생성해야 합니다 Item Reducer ✓ ADD_TO_CART 액션에 따라 cartItems 상태가 변해야 합니다 ✓ REMOVE_FROM_CART 액션에 따라 cartItems 상태가 변해야 합니다 ✓ SET_QUANTITY 액션에 따라 cartItems 상태가 변해야 합니다 ✓ 리듀서는 다른 상태의 값을 보존해야 합니다 Shopping Pages ✓ ShoppingCart에 cartItems가 렌더되어야합니다. ✓ ADD_TO_CART 액..

🪝 useRef() 레퍼런스를 사용하기 위한 훅 더보기 📌 리액트에서 레퍼런스란? 특정 컴포넌트에 접근할 수 있는 객체를 의미한다. useRef()훅은 레퍼런스 객체를 반환한다. 레퍼런스 객체에는 .current라는 속성이 있는데 이것은 현재 레퍼런스(참조)하고 있는 엘리먼트를 의미한다. const 주소값을_담는_그릇 = useRef(참조자료형-> 초기값) 📍 useRef()훅을 사용하면 파라미터로 들어온 초기값으로 초기화된 레퍼런스 객체를 반환한다. 만약, 초기값이 null이라면 .current의 값이 null인 레퍼런스 객체가 반환된다. 반환된 레퍼런스 객체는 컴포넌트의 라이프타임 전체에 걸쳐서 유지된다. (컴포넌트가 마운트 해제 전까지는 계속 유지된다는 뜻) ➡︎ uesRef()훅은 변경 가능한 ...

1. Styled Components CSS를 컴포넌트화 시키는 라이브러리 CSS-in-JS라는 개념이 대두되면서 나온 라이브러리로 CSS-in-JS라이브러리를 사용하면 CSS도 쉽게 JavaScript안에 넣어줄 수 있다. ⇒ HTML + JS + CSS 까지 묶어서 하나의 JS파일 안에서 컴포넌트 단위로 개발할 수 있게된다. CSS-in-JS 라이브러리 중 가장 인기 있는 라이브러리가 Styled Component이다. CSS를 컴포넌트화 시키면 CSS코드를 다룰때 느꼈던 불편함을 해결해준다. class, id 이름을 짓느라 고민할 때 CSS 파일 안에서 내가 원하는 부분을 찾기 힘들 때 CSS 파일이 너무 길어져서 파일을 쪼개서 관리할 때 스타일 속성이 겹쳐서 내가 원하는 결과가 나오지 않을 때 ⚙..

Component Driven Development (CDD) 컴포넌트 기반 개발 부품 단위로 UI컴포넌트를 만들어 나가는 개발방식이다. → 레고처럼 컴포넌트를 하나씩 조립해가는 상향식 개발이다. ➰ CDD를 하는 이유? 더보기 재사용할 수 있는 컴포넌트의 필요성때문 하나의 페이지를 만든 후 추가적으로 다른 페이지를 만들때, 앞서 만들었던 버튼을 후의 버튼으로 똑같이 사용하도록 요청 받은 경우 CDD방식으로 개발을 진행한다면 먼저 만든 버튼을 다시 새로 만들지 않아도 된다. 이는 디자인과 개발 단계에서부터 재사용 할 수 있는 UI컴포넌트를 미리 디자인하고 개발하기 때문이다. 실제 CDD방법을 활용하여 UI를 구축하는 사이트도 많다. ex) BBC, UN 📍 구조적인 CSS작성 방법의 발전 (CSS in ..