[ React ] 장바구니 구현 중 수량에 따른 가격 계산 오류 이슈 해결
·
🧡 Projects/🧡 Projects: Web
React에서 useReducer를 사용해 장바구니 기능을 구현하던 중,수량을 조절하는 + 버튼을 클릭했을 때 가격이 NaN으로 표시되거나, 수량과 맞지 않는 가격이 표시되는 현상이 나타났습니다.이 글에서는 1️⃣ 문제 상황, 2️⃣ 원인 분석, 3️⃣ 해결 방법과 함께 관련 개념을 정리해보았습니다. 💡 내가 구현하고자 했던 기능"React 티셔츠 추가"버튼을 누르면 장바구니에 상품이 추가된다.+,- 버튼을 눌러 수량을 조절각 아이템의 수량에 따라 가격이 실시간으로 반영 🚨 문제 1: 가격이 NaN으로 표시됨📌 발생 상황수량 증가(+) 버튼을 눌렀을 때 가격이 NaN으로 표시됨🔍 원인sampleItem 객체 내부에서 total: this.price * this.quantity를 사용함하지만 일반..
[web] SNS Instagram 커뮤니티 만들기(post,like, comments,signin) (Nextjs, tailwind, firebase)
·
🧡 Projects/🧡 Projects: Web
☑️ 커뮤니티 게시판 기획 조건 ☑️ 1. 게시판이 최소 7개 존재 2. UI가 2개 (즉 페이지가 넘어가야) 3. 좋아요, 댓글, 추천 기능 4. 웹, 앱 반응형 웹사이트 🎯 커뮤니티 기획안 🎯 1. 주제: 자기계발 게시판 2. 구글로 SingIn을 해서 좋아요와 댓글, 추천 기능, 포스팅까지 가능 💡 SKILL 💡 1. Reactjs + NextJs 2. 댓글과 좋아요, 포스팅 등을 위한 데이터 관리 -> firebase 3. firebase에서 구글로 로그인하기 활용 (authentification) 4. CSS 는 tailwindcss 활용 SignIn sign out signOut 된 상태에서는 댓글, 좋아요, 추천 기능을 할 수 없다. signIn 버튼을 누르면 '구글로 로그인' 버튼이 있는 ..
<React> <p> cannot appear as a descendant of <p> 해결방법
·
💛 Frontend/💛 Frontend : React
요런 에러가 발생한 상황!! 코드는 동작하지만 에러가 발생해서 거슬린다 왜인지 App.js 코드 어디에서 오류가 난 것인지 라인 넘버가 보이지 않는다. 일단 오류 내용을 보면 안에 가 있으면 안된다? 는 뜻인 듯 이건 App.js코드 일부 https://stackoverflow.com/questions/41928567/div-cannot-appear-as-a-descendant-of-p cannot appear as a descendant of I'm seeing this. It's not a mystery what it is complaining about: Warning: validateDOMnesting(...): cannot appear as a descendant of . See ... Some..