안녕하세요 !FCM으로 푸시 기능을 짜다가,, 도저히 모르겠어서 글 남깁니다 ..! 문제는 콘솔에는 푸시 알림이 왔다는 게 찍히는데,푸시가 보이지 않습니다 ... ㅠㅠ[ 폴더 구조 ][ firebase-messaging-sw.js ]self.addEventListener('push', function (e) { console.log('push: ', e.data.json()) if (!e.data.json()) return const resultData = e.data.json().notification const notificationTitle = resultData.title const notificationOptions = { body: resultData.body, icon: resultData.image, tag: resultData.tag, ...resultData } console.log('push: ', { resultData, notificationTitle, notificationOptions }) registration.showNotification(notificationTitle, notificationOptions) }) [ messaging_init_in_sw.js ] import { initializeApp } from 'firebase/app' import { getMessaging, getToken } from 'firebase/messaging' const firebaseConfig = { apiKey: process.env.REACT_APP_FIREBASE_API_KEY, authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN, projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID, storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET, messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID, appId: process.env.REACT_APP_FIREBASE_APP_ID, measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID } function requestPermission() { console.log('푸시 허가 받는 중 ...') void Notification.requestPermission().then((permission) => { if (permission === 'granted') { console.log('푸시 알림이 허용되었습니다.') } else { console.log('푸시 알림이 허용되지 않았습니다') } }) const app = initializeApp(firebaseConfig) const messaging = getMessaging(app) void getToken(messaging, { vapidKey: process.env.REACT_APP_FIREBASE_VAPID_KEY }).then((token) => { if (token.length > 0) { console.log('푸시 토큰 : ', token) } else { console.log('푸시 토큰 실패 !') } }) } requestPermission()  토큰은 제대로 잘 받아와지는데,,, 혹시 서비스워커 코드에 문제가 있는 걸까요 ..?

npm i -D postcss autoprefixer tailwindnpx tailwindcss init -p 모두 작업을 마치고 /** @type {import('tailwindcss').Config} */ export default { content: [ "./index.html", "./src/**/*.{js,jsx,ts,tsx}" ], theme: { extend: {}, }, plugins: [], } index.css@tailwind base; @tailwind components; @tailwind utilities; npm run dev 를 돌리면,node:internal/process/promises:246triggerUncaughtException(err, true /* fromPromise */);[Failed to load PostCSS config: Failed to load PostCSS config (searchPath: C:/WebStudy/WebDevelement/React/fullstack-react/front): [Error] Loading PostCSS Plugin failed: Cannot find module 'tailwindcss'라는 오류가 뜹니다.원인파악이 어려운데 문의드립니다!

혹시 4번째 줄에서 inline css style을 적용할 때 {} 중괄호로 한번 더 감싸는 이유가 무엇인가요?

코드가 선생님이랑 똑같은거 같은데 아이폰만 키보드가 안나옵니다ㅠㅠ

  case CLICK_CELL: { // table데이터를 얕은 복사를 한다 const tableData = [...state.tableData]; //이 부분 왜 필요한지 확인 console.log(tableData); tableData[action.row] = [...tableData[action.row]]; console.log(tableData); tableData[action.row][action.cell] = state.turn; console.log(tableData); return { ...state, tableData, recentCell: [action.row, action.cell], }; }tableData를 얕은 복사로 복사한다음에 row데이터를 갱신하고 cellData를 복사하는 갱신방법이 이해가 안되어서 하나씩 console.log를 찍으면서 확인해 봤습니다확인을 해보니 tableData는 tableData[action.row] = [...tableData[action.row]];이 코드가 실행되기 전부터 table에 갱신되 o값을 가지고 있었습니다 그래서 생각해볼때 tableData에 따로 추가적으로 갱신이 필요없어 보이는데 그렇다고 코드를 지워보니 제대로 동작은 안하는 것 같습니다 왜 추가적으로 갱신하는 코드를 넣어줘야하나요?

강의에서는 불변성을 지키기 위해 Shallow Copy(얕은 복사)를 하신다고 하셨는데,이는 많은 혼동을 야기하는 것 같습니다.https://developer.mozilla.org/en-US/docs/Glossary/Shallow_copyhttps://developer.mozilla.org/en-US/docs/Glossary/Deep_copy에 따르면,Shallow Copy 는 원본 객체의 속성과 동일한 참조를 공유하는 복사본이고Deep Copy 는 원본 객체의 속성과 동일한 참조(동일한 기본 값을 가리킴)를 공유하지 않는 복사본이라 되어있습니다.강사 님이 생각하시는 참조가 Shallow Copy 고,불변성을 지키기 위해 사용하는 것이 Deep Copy 가 아닌지요?강사님의 강의는 앞으로 개발 능력 향상에 아주 도움이 되기에, 정확한 이해를 위해 질문드려봅니다.

import { useState, useRef } from "react"; const DiaryItem = ({ author, emotion, created_time, content, id, onDelete, onEdit, }) => { const [isEdit, setIsEdit] = useState(false); const [localContent, setLocalContent] = useState(content); // 본문 수정 시 수정 전 콘텐츠 띄우기 const localContentInput = useRef(); const toggleIsEdit = () => { setIsEdit(!isEdit); }; const handleDelete = () => { if (window.confirm(`${id}번째 일기를 삭제하시겠습니까?`)) { onDelete(id); } }; const handleQuitEdit = () => { setIsEdit(false); setLocalContent(content); }; const handleEdit = () => { if (localContent.length < 5) { localContentInput.current.focus(); return; } onEdit(id, localContent); }; return ( <div className="DiaryItem"> <div className="info"> <span> 작성자 : {author} | 감정점수 : {emotion} </span> <br /> <span className="date">{new Date(created_time).toLocaleString()}</span> </div> <div className="content"> {/* 수정 중 콘텐츠 vs 수정 전 콘텐츠 */} {isEdit ? ( <textArea ref={localContentInput} value={localContent} onChange={(e) => setLocalContent(e.target.value)} /> ) : ( <>{content}</> )} </div> {/* 수정 중 버튼 vs 수정 전 버튼 */} {isEdit ? ( <> <button onClick={handleQuitEdit}>수정 취소</button> <button onClick={handleEdit}>수정 완료</button> </> ) : ( <> <button onClick={handleDelete}>삭제하기</button> <button onClick={toggleIsEdit}>수정하기</button> </> )} </div> ); }; export default DiaryItem;위는 제가 수업을 보며 따라친 DiaryItem.js인데 실행을 시키면 수정하기 버튼을 눌렀을 때 원래 콘텐츠가 textArea에 뜨지 않고 수정이 되지 않습니다. 하지만 소스코드에 올려진 DiaryItem.js를 복붙했을 때는 또 됩니다. 몇 번이나 두 파일을 비교했지만 잘못된 점을 찾아낼 수가 없었는데 도와주세요 ㅠㅠ

34번째 줄에서 {content}를 빈 태그로 감싸는 이유가 뭔가요? 어차피 content는 문자열 아닌가요?

안녕하세요 섹션 5 . 수학 객체 파트3분 19 초 에서 077215 는 존재할 수 없다 라고 하셨는데 왜 존재할 수 없다라는 것인가요 ?077215에서 0을 인식할 수 없어 77215로 인식하기 때문에 그런 것 같은데 제 입장에서는 급 ?뜬금없이 ? 라는 느낌이 있어서 정확히 왜 존재할 수 없다고 하신지 이해가 가지 않습니다..

저는 그랩 님처럼 개발자 도구에서 data가 깔끔하게 정리 돼서 나오지 않습니다 어떤 부분이 잘못된 걸까요?

Counter.js의 defaultProps를 설정했는데도 count 값이 0으로 설정되지 않아 질문드립니다.각각 App.js랑 Counter.js 입니다.// import logo from './logo.svg'; // import "./App.css"; // inline 스타일 적용 시 필요 없음 import MyHeader from "./MyHeader"; import MyFooter from "./MyFooter"; import Counter from "./Counter"; function App() { let name = "김학준"; const style = { App: { backgroundColor: "black", // Camel case }, h2: { color: "red", }, bold_text: { color: "green", }, }; const counterProps = { a: 1, b: 2, }; return ( // <div className="App"> // <div style={style.App}> <div> <MyHeader /> <Counter {...counterProps} /> {/* <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> </header> */} {/* <h2>안녕 리액트 {name}</h2> */} {/* <h2 style={style.h2}>안녕 리액트 {name}</h2> */} {/* <b id="bold_text">React.js</b> */} {/* <b style={style.bold_text}>React.js</b> */} {/* <MyFooter /> */} </div> ); } export default App; import React, { useState } from "react"; // React의 메소드 const Counter = ({ initialValue }) => { // console.log("counter 호출!"); console.log(initialValue); const [count, setCount] = useState(initialValue); const onIncrease = () => { setCount(count + 1); }; const onDecrease = () => { setCount(count - 1); }; return ( <div> <h2>{count}</h2> <button onClick={onIncrease}>+</button> <button onClick={onDecrease}>-</button> </div> ); }; Counter.defaultProps = { initialValue: 0, }; export default Counter;  

9번째 줄에서 useState(0)이라는 값이 배열을 반환하는 것이죠?

inline 스타일을 적용할 때 div의 속성 className을 제거하는 이유가 무엇인가요?

setSignUpError(error.response.data);이 부분의 data에 typeerror가 뜹니다.왜 뜨는지 검색을 해봐도 모르겠어서 질문 남깁니다.

저는 콘솔 창에서 함수가 안 나오고 에러가 나오는데 어떤 부분이 문제인 건가요?

강의에서 설치돼 있지 않은 패키지를 딱 한번만 쓰고 싶을 때 npx를 사용한다고 했는데 이게 무슨 말씀인지 좀 더 자세하게 설명해주실 수 있나요?

10강 Bcrypt로 비밀번호 암호화 하기에서 User.js의49번째 줄에서 next()로 인해 index.js의 38번째 줄 미들웨어 함수로 이동한다고 했는데 많은 미들웨어 함수중에서 38번째 줄 미들웨어 함수로 이동하는 이유가 뭔지 궁금합니다

웹으로 확인해보려 하니 이런화면이 자꾸 뜹니다ㅠ

 3:22 이때 어디다가 어떤 명령어를 쳐서 rss 랑 stie map 이 배포가 잘됐나 확인하는건가요? 주소창 맨 끝에 .app/rss.xml 인가요?

왼쪽이 어떻게 오른쪽과 같을 수 있나요? resolve가 콜백함수라서 그런 건가요? 맞다면 좀 더 자세하게 설명해주세요.