Daily Front_Minhhk

웹 표준 W3C(World Wide Web Consortium)에서 권고하는 ‘웹에서 표준적으로 사용되는 기술이나 규칙’ 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법을 담고있습니다. 웹 개발에 사용되는 언어인 HTML, CSS, JavaScript 등의 기술을 다룹니다. 💡 인터넷은 ‘전 세계적으로 연결되어있는 컴퓨터 네트워크 통신망’을 의미 웹뿐만 아니라 온라인 게임, 모바일 앱, 이메일 등 네트워크를 사용하는 다양한 서비스들을 모두 포함합니다. 웹과 인터넷을 혼동하지 않도록 주의해주세요! 💡 웹은 ‘공간’으로 정의할 수 있습니다. 문서, 이미지, 영상 등 다양한 정보를 여러 사람들과 공유할 수 있는 공간이 ‘웹’입..

📌 이전에 Cmarket Hooks 로 만들었던 장바구니를 Redux로!! 테스트 케이스는 이렇다. 위에서 부터 하나하나 구현 해보자! 전체적으로는 구현되어 있었고, 부분적으로 구현해야할 부분은?! //TODO 를 찾아 해보자 Dispatch함수에 에 넘겨줄 인자 Action을 작성해보자! Reducer함수에 전달할 Dispatch 함수를 작성 테스트 케이스가 잘 통과되었다면, store 상태가 잘 변경 될 것이다~ addToCart는 작성이 되어 있었다. 참고하여 removeFromCart 와 setQuantity 작성 actions/index.js // action types export const ADD_TO_CART = "ADD_TO_CART"; export const REMOVE_FROM_CAR..

Redux 데이터 흐름 Redux는 다음과 같은 순서로 상태를 관리합니다. 상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성됩니다. 이 Action 객체는 Dispatch 함수의 인자로 전달됩니다. Dispatch 함수는 Action 객체를 Reducer 함수로 전달해줍니다. Reducer 함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경합니다. 상태가 변경되면, React는 화면을 다시 렌더링 합니다. 즉, Redux에서는 Action → Dispatch → Reducer → Store 순서로 데이터가 단방향으로 흐르게 됩니다. 리덕스의 3가지 규칙 하나의 애플리케이션 안에는 하나의 스토어를 가져야 한다..

Props Drilling이란 Props Drilling은 상위 컴포넌트의 state를 props를 통해 전달하고자 하는 컴포넌트로 전달하기 위해 그 사이는 props를 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 데이터를 전달하는 현상을 의미합니다. 위 그림처럼 컴포넌트 A의 state를 컴포넌트 D로 전달하기 위해선 사이에 있는 컴포넌트 B, C를 거쳐야합니다. Props Drilling의 문제점 Props의 전달 횟수가 5회 이내로 많지 않다면 Props Drilling 은 큰 문제가 되지 않습니다. 하지만 규모가 커지고 구조가 복잡해지면서 Props의 전달 과정이 늘어난다면 아래와 같은 문제가 발생합니다. 코드의 가독성이 매우 나빠지게 됩니다. 코드의 유지보수 또한 힘들어지게 됩니다. state..

📌 점점 난이도가 어려워지고 있다,,, 잘 하고 있는건지 모르겠지만! 📌 styled-components와 속성을 삼항연산자로 나타내었다 Bare minimum Requirement modal.js > import { useState } from "react"; import styled from "styled-components"; export const ModalContainer = styled.div` // TODO : Modal을 구현하는데 전체적으로 필요한 CSS를 구현합니다. display: flex; justify-content: center; align-items: center; height: 100%; `; export const ModalBackdrop = styled.div` // TO..

CDD, styled-Component , storybook, useRef 📌 Component Driven Development (CDD) 디자인과 개발 단계에서부터 재사용할 수 있는 UI 컴포넌트를 미리 디자인하고 개발 → 레고처럼 조립해 나갈 수 있는 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 을 진행 (컴포넌트 단위로 만들어 페이지를 조립하는 개발 방식인 상향식 개발) 📌 CSS 전처리기(CSS Preprocessor) CSS가 구조적으로 작성될 수 있게 도움을 주는 도구 → CSS 전처리기 로는 웹 서버가 인지하지 못하기 때문에 각 CSS 전처리기에 맞는 Compiler를 사용해야 하고 컴파일을 하게 되면 실제로 우리가 사용하는 CSS 문서로 변환 Sass(Syntactically Awes..