차근차근 배움터

한국어 어학원을 겨냥한 웹사이트를 한 번 가볍게 만들어 봤다. 리액트 그리고 SCSS 를 이용해 봤고 컴포넌트 단위로 잘 나누려고 했다! 궁금한 것 중 하나는 import classes from '../Home.module.scss' 이런 식으로 classes 로 적용을 하면 해당 컴포넌트에만 style이 적용되는 줄 알았는데 아닌 것 같다...? 그리고 Netflify에서 자꾸 build랑 deploy 오류가 나서 배포를 못했는데 이 부분은 ChatGPT한테 물어봐서 해결했다. 문제는 ESLint 문법에 에러가 있어서 그랬다. 예를 들면 img 태그 같은 것에 alt 속성이 무조건 있어야 한다던지 사용하지 않는 컴포넌트가 import 되어 있다던지 그런 문제들로 인해서 deploy에 에러가 생겼다. 이..

box shadow 맨날 3px 4px 4px 이런 식으로 작성하기도 조금 귀찮기도 했고 ㅎ 예쁜 모양을 만들 줄 몰라 헤맸는데 여기 아주 간단하게 box shadow 코드 작성을 도와주는 사이트가 있다. 박스 사이즈 뿐만 아니라 Text shadow, flex box 등 다른 css 효과를 알아보는 기능도 있으니 유용하게 참고해보자 https://cssgenerator.pl/en/box-shadow-generator/ CSS Box shadow generator | CSSGENERATOR.PL CSS BOX SHADOW GENERATOR | An easy to use tool that allows you to generate ready CSS rules. Adjust values and copy the..

리액트에서 이미지 파일을 일반 HTML에서 하듯이 넣으려고 하면 당연히 출력이 되지 않을 것이다 리액트에서는 다른 방법으로 이미지를 삽입해야 하는데 첫 번째 방법은 다음과 같다. 1. 컴포넌트 이용하기 아래와 같이 이미지를 import 해서 src 경로에 따옴표를 이용하는 대신 { } 괄호 안에 import 해온 이름을 작성해 준다. import lesson1 from '../../images/lesson1.jpg'; const FeaturedCard = (props) => { return } export default FeaturedCard; 아주 간단한 방법이지만 절대 경로를 이용해야 하는 상황이 발생할 수 있다. 그럴 때는 또 그냥 html 처럼 사용하면 안되고 비슷하지만 우리는 require를 이..

useRoutes() may be used only in the context of a component. 이런 에러가 떴는데 index.js에 BrowserList.js 를 넣어줬다 import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { BrowserRouter } from 'react-router-dom'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( )..

Ref 복습을 하자면 이번 화면에서는 주문하고자 하는 양을 입력하면 submit 즉 버튼을 클릭해서 form을 제출했을 때 iput 태그에 입력된 값을 가져오는 것이다. 이때 ref를 이용할 수 있는데 MealItemForm.js 에 들어간다 import { useRef } from 'react'; 값을 받아오려는 컴포넌트인 Input.js에 가서 아래와 같이 React.forwardRef() 를 이용해 감싸준다 import styles from './Input.module.css'; import React from 'react'; const Input = React.forwardRef((props, ref) => { return {props.label} }); export default Input; 이..

HeadCartButton.js 여깃 발생한 에러 cartCtx.items가 존재하지 않아서 item으로 바꿨다 const numberOfCartItems = cartCtx.item.reduce((curNo, item) => { return curNo + item.amount; }, 0); 발견, CartProvider의 items의 's'가 빠져 있었다

reduce() 메서드를 사용해서 배열 내 중복된 항목을 제거하고 난 개수를 알려준다 두 가지의 인수를 받는 데, 첫번째는 함수 두 번째는 값이다. 질문 CartProvider와 CartContext를 언제 다르게 사용해야 하는 지 차이를 모르겠다. HeaderCartButton.js import { useContext } from 'react'; import CartIcon from './CartIcon'; import CartContext from '../../store/cart-context'; import classes from './HeaderCartButton.module.css'; const HeaderCartButton = props => { const cartCtx = useContext..

전체 장바구니 데이터를 모든 컴포넌트에서 사용하고 싶다 전체 state를 관리하는 폴더의 이름은 store라고 보통 이름 짓는다 store 폴더 내에 cart-context.js 파일을 생성한다 import React from 'react'; const CartContext = React.createContext({ items: [], totalAmount: 0, addItem: (item) => {}, removeItem: (id) => {}, }); export default CartContext; 이제 이 state를 관리하기 위해서 useState나 useReducer를 사용해야 할 것이다 CartProvider.js 파일 생성 이 컴포넌트의 목표는 CartContext 데이터를 관리하고, 그 컨..

장바구니를 클릭하면 리스트 Modal 창이 뜨고 close 버튼이나 모달 바깥 창을 클릭했을 때 꺼지도록 코드를 작성했다. 중간에 왜 모달 창이 안 뜨나 했더니 Cart.js에서 map()를 사용할 때 key 값을 입력해주지 않아서 발생한 오류였다 Modal.js import { Fragment } from 'react'; import ReactDOM from 'react-dom'; import classes from './Modal.module.css'; const Backdrop = props => { return }; const ModalOverlay = props => { return {props.children} }; const portalElement = document.getElementBy..

import ReactDOM from 'react-dom'; Modal.js 에 아래와 같이 Portal을 사용하지 않아도 된다 const Modal = props => { return {props.children} }; 하지만 사용해보겠다 Portal을 사용하기 위해서는 react-dom 에서 ReactDOM을 import 해야 함 import ReactDOM from 'react-dom'; 무엇을 Portal 할 지와 어디로 Portal 할 지를 알려줘야 한다. id가 overlays인 div을요, index.html 파일에 헬퍼 상수를 만든다 Modal.js import { Fragment } from 'react'; import ReactDOM from 'react-dom'; import clas..