김기지의 코딩노트

✅ 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 액..

Redux 상태 변경 로직을 컴포넌트로부터 분리하면 표현에 집중한, 보다 단순한 함수 컴포넌트를 만들 수 있다. 더보기 ⚠️ 참고 사항 ⚠️ Redux는 React의 관련 라이브러리, 혹은 하위 라이브러리가 아니므로 React 없이도 사용할 수 있는 상태 관리 라이브러리이다. React 애플리케이션 중 하위 특정 컴포넌트에서만 사용되는 상태가 있는 경우, 이 상태를 어느 컴포넌트에 위치시켜야 할까? 기존 React의 데이터 흐름에 따르면, 최상위 컴포넌트에 위치시키는 것이 적절하다. 하지만 이런 상태 배치는 다소 비효율적이라고 느껴진다. 해당 상태를 직접 사용하지 않는 최상위 컴포넌트, 컴포넌트1, 컴포넌트2도 상태 데이터를 가짐 상태 끌어올리기, props내려주기를 여러번 거쳐야함 애플리케이션이 복잡해..

1. 전역 상태 관리 React가 상태 관리를 위한 라이브러리는 아니다. 그러나 상태 관리의 주요 원칙을 배우고 이를 따라간다면, 컴포넌트간 서로 느슨하게 결합된(loose coupled), 구조적으로 아름다운 코드를 작성할 수 있다. 📍 프론트엔드 개발에서의 상태 관리 상태란? 변하는 데이터로 UI, 프론트엔드 개발에서는 “동적으로 표현되는 데이터”이다. ➰ UI에서 상태 찾기 연습 : 장바구니 페이지 이 장바구니 페이지에 몇 개의 상태가 있을까? “장바구니에 담기”와 같은 버튼을 눌러 해당 물품을 장바구니에 추가할 수 있음 → 동적인 데이터이므로 상태 상단에 [일반구매/ 정기배송] 중 현재 선택된 탭이 무엇인지 나타내는 상태가 있을 수 있음 상품 선택 여부에 따라 주문 금액이나 배송비가 달라짐 선택 ..

🪝 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 ..

📌 UI (User Interface, 사용자 인터페이스) 사람들이 컴퓨터와 상호작용하는 시스템 화면상의 그래픽 요소 외에도 키보드, 마우스 등 물리적 요소도 UI이다. 휴대폰의 경우 숫자버튼, 방향버튼 등 다양한 물리적UI가 있는 형태였지만 스마트폰이 대중화되면서, 화면 터치를 통한 상호작용의 비중이 높아졌다. 따라서 물리적UI는 볼륨, 전원버튼 정도만 남게 되어 그래픽UI가 매우 중요해졌다. 컴퓨터 또한 마우스의 등장 이후로 꾸준히 그래픽UI가 중요한 요소이다. 터미널과 같은 CLI(Command Line Interface)와 키보드를 이용해 텍스트로 컴퓨터와 상호작용하는 것보다는 직관적이고 간편하기 때문이다. 현재 많이 사용화되고 있는 스마트 워치, 키오스크, 터치 스크린 안내판 등에서 찾아볼 수 ..

1. 목표 상기하기 한 달 전, 블로그에 기록한 내 목표가 기억이 나질 않… 2022.12.15 - [코딩/코드스테이츠] - 프론트엔드 부트캠프를 들어가며..- 💬 나는 지금 어느 정도까지 왔을까? 현재 ‘내'가 학습을 통해 이루고자 하는 것은 무엇인가요? 더보기 부트캠프에 들어오기 전, 수강 했던 다른 수업이 완료된 이후에 나만의 페이지를 만들어 보려 시도한 적이 있었다. 그런데 혼자서 시작을 해보려 하니 첫 시작 단추부터 채우지 못했다. 학원에서 주던 코드에 무언가를 추가 하기만 했었기에 내가 원하는 페이지를 만드는 데에는 전혀 쓰지를 못했던걸까.. 그래서 이번 부트캠프에 들어오면서 처음부터 끝까지 내가 원하는 무언가를 만들어보자! 라는 목표를 제일 먼저 세웠다. 여러분이 현재 바라는 목표를 모두 이..

🔍 koans???? = 불교에서 유래된 단어로, 결론을 내리기 전에 이게 왜 맞는지 깊게 고민한다는 의미를 가짐 (각 주제의 문제를 해결하면서 알게 된 부분을 위주로 적어보겠다!) ► 01_Introduction 첫 번째 주제에서는 '기대하는 값'과 '결과로 나온 값'이 같은지 알아보는 expect함수를 사용했다. expect(테스트하는값).기대하는조건 여기서 기대하는 조건에 들어가는 함수를 'matcher'라고 부른다. expect(1+1).to.equal(2) // sum(1+1)의 결과값은 2와 같아야함 expect(true)to.be.true // 테스트하는 값이 true여야함 기대하는 값은 표현식 이거나 함수의 실제 실행 결과이다. (기대하는 조건에 들어가는 함수는 여러가지가 있지만 수업에서는..

◎ 원시 자료형 (primitive data type) 고정된 저장 공간을 차지하는 데이터 ex) number, string, boolean, undefined, (null) , bigint, symbol 🔍 왜 원시 자료형이라 부를까? 더보기 원시 자료형은 모두 "하나"의 데이터를 담고있음 왜? 옛날에는 데이터 저장소의 용량이 제한되어 있어 변수 하나에 용량이 제한된 하나의 원시 자료형밖에 담을 수 있었음 BASIC이라는 예전에 사용하던 컴퓨터 언어에서도 string과 number는 쉽게 찾을 수 있지만, 배열에 상응하는 형태는 찾기 어려움 이 때 배열이 구현 가능했더라도 보통 사이즈가 제한되어있음 이처럼 원시 자료형의 보관함인 변수에는 하나의 원시 자료형만 담을 수 있다. 원시 자료형은 값 자체에 대..