Daily Front_Minhhk

💡 웹 접근성(Web Accessibility) 일반적으로 웹 접근성은 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것을 뜻합니다. 웹 접근성을 갖추면 얻을 수 있는 효과 1. 사용자층 확대 웹 접근성을 확보하면 장애인, 고령자 등 정보 소외 계층도 웹 사이트를 자유롭게 이용할 수 있게 됩니다. 그만큼 사이트의 이용자를 늘릴 수 있고, 새로운 고객층을 확보할 수 있게 됩니다. 실제로 웹 접근성 향상을 통해 매출이 증가한 외국 쇼핑몰 사례도 있으며, 국내 온라인 쇼핑몰에서도 노년층의 매출이 증가 추세를 보이고 있습니다. 2. 다양한 환경 지원 앞서 이야기 했듯 정보 소외 계층이 아니더라도 정보에 접근하기 어려운 상황에 처할 수 있습니다. 운전 ..

웹 표준 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..