안녕하세요, 강의 자료 pdf #2 Authentication 부분에 깨져서 보이는데 업데이트 해주실수 있나요?

안녕하세요!user/[id].js 페이지 안에서 hashtag/[tag] 페이지로 이동하는 버튼을 만들에 사용 하면 알맞은 페이지로 이동하는 것이 아니라 user/hashtag/[tag]로 이동하게 됩니다.참고로, hashtag/[tag]로 이동하는 버튼을 Applayout에 추가 하고 user/[id]페이지에서 Applayout 컴퍼턴트로 감싸 줬습니다. 이 페이지에서 상단에 Search버튼을 누르면,이런 페이지로 이동합니다...import React,{useCallback} from 'react' import {HStack, Input, Button, Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalCloseButton, useDisclosure} from '@chakra-ui/react' import {BiSearch} from 'react-icons/bi' import { css } from '@emotion/react' import Router from 'next/router' import PropTypes from 'prop-types' import useInput from '../hooks/useInput' import Spacer from './CustomizedUI/Spacer' const buttonCss = css` :hover { background-color: transparent; color: #1890ff; } `; export default function SearchButton({type, children}) { const { isOpen, onOpen, onClose } = useDisclosure(); const [value, onChangeValue, setValue] = useInput('') const onClickHandler = useCallback(()=>{ Router.push(`hashtag/${value}`); },[value]) const ConditionButton = type; return ( <> <ConditionButton variant="ghost" aria-label="Search Button" icon={<BiSearch />} leftIcon={type === Button && <BiSearch />} onClick={onOpen} fontSize="25px" css={buttonCss} > {children} </ConditionButton> <Modal isOpen={isOpen} onClose={onClose} size="md" isCentered> <ModalOverlay /> <ModalContent> <ModalHeader>Search</ModalHeader> <ModalCloseButton /> <ModalBody> <HStack> <Input type="text" value={value} onChange={onChangeValue} required /> <Button onClick={onClickHandler}>Search</Button> </HStack> <Spacer /> </ModalBody> </ModalContent> </Modal> </> ); } SearchButton.propTypes = { type: PropTypes.elementType.isRequired, children: PropTypes.node.isRequired, }이것은 제가 만든 컴퍼넌트인데, 혹시 어디서 문제가 있는걸까요? 혹시나 해서 Chakra UI 상의 문제 아닐까 해서 antd로도 해봤는데, 같은 오류가 납니다.신기한 오류라서 질문드립니다.감사합니다.

안녕 하십니까 제로초님다름이 아니라 강의를 수강하는 중에 아래와 같은 오류가 발생했는데 해결법을 모르겠어서 질문을 남깁니다.제로초님이 말씀하신대로 npx sequelize db:create를 하고테이블을 봤는데 user밖에 없어서 터미널을 봤더니 아래와같은 오류가 났습니다. 찾아보려고 했지만 도저히 모르겠어서 질문을 남깁니다.<오류코드>Executing (default): SELECT TABLE_NAME FROM INFORMATION_SCHEMA.TABLES WHERE TABLE_TYPE = 'BASE TABLE' AND TABLE_NAME = 'Users' AND TABLE_SCHEMA = 'react-nodebird'Executing (default): SHOW INDEX FROM Users FROM react-nodebirdExecuting (default): SELECT TABLE_NAME FROM INFORMATION_SCHEMA.TABLES WHERE TABLE_TYPE = 'BASE TABLE' AND TABLE_NAME = 'Posts' AND TABLE_SCHEMA = 'react-nodebird'Executing (default): CREATE TABLE IF NOT EXISTS Posts (`id` INTEGER NOT NULL auto_increment , content TEXT NOT NULL, createdAt DATETIME NOT NULL, updatedAt DATETIME NOT NULL, UserId INTEGER, RetweetId INTEGER, PRIMARY KEY (`id`), FOREIGN KEY (`UserId`) REFERENCES Users (`id`) ON DELETE SET NULL ON UPDATE CASCADE, FOREIGN KEY (`RetweetId`) REFERENCES Posts (`id`) ON DELETE SET NULL ON UPDATE CASCADE) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE utf8_general_ci;Error at Query.run (/Users/ihyeoncheol/Desktop/nodebird_project/prepare/back/node_modules/sequelize/lib/dialects/mysql/query.js:52:25) at /Users/ihyeoncheol/Desktop/nodebird_project/prepare/back/node_modules/sequelize/lib/sequelize.js:315:28 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async MySQLQueryInterface.createTable (/Users/ihyeoncheol/Desktop/nodebird_project/prepare/back/node_modules/sequelize/lib/dialects/abstract/query-interface.js:98:12) at async Post.sync (/Users/ihyeoncheol/Desktop/nodebird_project/prepare/back/node_modules/sequelize/lib/model.js:942:7) at async Sequelize.sync (/Users/ihyeoncheol/Desktop/nodebird_project/prepare/back/node_modules/sequelize/lib/sequelize.js:377:9) { name: 'SequelizeDatabaseError', parent: Error: COLLATION 'utf8mb3_general_ci' is not valid for CHARACTER SET 'utf8mb4' at Packet.asError (/Users/ihyeoncheol/Desktop/nodebird_project/prepare/back/node_modules/mysql2/lib/packets/packet.js:728:17) at Query.execute (/Users/ihyeoncheol/Desktop/nodebird_project/prepare/back/node_modules/mysql2/lib/commands/command.js:29:26) at Connection.handlePacket (/Users/ihyeoncheol/Desktop/nodebird_project/prepare/back/node_modules/mysql2/lib/connection.js:478:34) at PacketParser.onPacket (/Users/ihyeoncheol/Desktop/nodebird_project/prepare/back/node_modules/mysql2/lib/connection.js:97:12) at PacketParser.executeStart (/Users/ihyeoncheol/Desktop/nodebird_project/prepare/back/node_modules/mysql2/lib/packet_parser.js:75:16) at Socket.<anonymous> (/Users/ihyeoncheol/Desktop/nodebird_project/prepare/back/node_modules/mysql2/lib/connection.js:104:25) at Socket.emit (node:events:517:28) at addChunk (node:internal/streams/readable:335:12) at readableAddChunk (node:internal/streams/readable:308:9) at Readable.push (node:internal/streams/readable:245:10) { code: 'ER_COLLATION_CHARSET_MISMATCH', errno: 1253, sqlState: '42000', sqlMessage: "COLLATION 'utf8mb3_general_ci' is not valid for CHARACTER SET 'utf8mb4'", sql: 'CREATE TABLE IF NOT EXISTS Posts (`id` INTEGER NOT NULL auto_increment , content TEXT NOT NULL, createdAt DATETIME NOT NULL, updatedAt DATETIME NOT NULL, UserId INTEGER, RetweetId INTEGER, PRIMARY KEY (`id`), FOREIGN KEY (`UserId`) REFERENCES Users (`id`) ON DELETE SET NULL ON UPDATE CASCADE, FOREIGN KEY (`RetweetId`) REFERENCES Posts (`id`) ON DELETE SET NULL ON UPDATE CASCADE) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE utf8_general_ci;', parameters: undefined }, original: Error: COLLATION 'utf8mb3_general_ci' is not valid for CHARACTER SET 'utf8mb4' at Packet.asError (/Users/ihyeoncheol/Desktop/nodebird_project/prepare/back/node_modules/mysql2/lib/packets/packet.js:728:17) at Query.execute (/Users/ihyeoncheol/Desktop/nodebird_project/prepare/back/node_modules/mysql2/lib/commands/command.js:29:26) at Connection.handlePacket (/Users/ihyeoncheol/Desktop/nodebird_project/prepare/back/node_modules/mysql2/lib/connection.js:478:34) at PacketParser.onPacket (/Users/ihyeoncheol/Desktop/nodebird_project/prepare/back/node_modules/mysql2/lib/connection.js:97:12) at PacketParser.executeStart (/Users/ihyeoncheol/Desktop/nodebird_project/prepare/back/node_modules/mysql2/lib/packet_parser.js:75:16) at Socket.<anonymous> (/Users/ihyeoncheol/Desktop/nodebird_project/prepare/back/node_modules/mysql2/lib/connection.js:104:25) at Socket.emit (node:events:517:28) at addChunk (node:internal/streams/readable:335:12) at readableAddChunk (node:internal/streams/readable:308:9) at Readable.push (node:internal/streams/readable:245:10) { code: 'ER_COLLATION_CHARSET_MISMATCH', errno: 1253, sqlState: '42000', sqlMessage: "COLLATION 'utf8mb3_general_ci' is not valid for CHARACTER SET 'utf8mb4'", sql: 'CREATE TABLE IF NOT EXISTS Posts (`id` INTEGER NOT NULL auto_increment , content TEXT NOT NULL, createdAt DATETIME NOT NULL, updatedAt DATETIME NOT NULL, UserId INTEGER, RetweetId INTEGER, PRIMARY KEY (`id`), FOREIGN KEY (`UserId`) REFERENCES Users (`id`) ON DELETE SET NULL ON UPDATE CASCADE, FOREIGN KEY (`RetweetId`) REFERENCES Posts (`id`) ON DELETE SET NULL ON UPDATE CASCADE) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE utf8_general_ci;', parameters: undefined }, sql: 'CREATE TABLE IF NOT EXISTS Posts (`id` INTEGER NOT NULL auto_increment , content TEXT NOT NULL, createdAt DATETIME NOT NULL, updatedAt DATETIME NOT NULL, UserId INTEGER, RetweetId INTEGER, PRIMARY KEY (`id`), FOREIGN KEY (`UserId`) REFERENCES Users (`id`) ON DELETE SET NULL ON UPDATE CASCADE, FOREIGN KEY (`RetweetId`) REFERENCES Posts (`id`) ON DELETE SET NULL ON UPDATE CASCADE) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE utf8_general_ci;', parameters: {}}

분명히 코드를 그대로 따라 쳤는데 1초에 두 번씩 알림이 나오는 경우도 존재하나요?Warning: Each child in a list should have a unique "key" prop. 오류도 떴습니다. 각각 notification.jsx, notificationList.jsx 코드입니다import React from "react" const styles = { wrapper: { margin: 8, padding: 8, display: 'flex', flexDirection: 'row', border: '1px solid grey', borderRadius: 16 }, messageText: { color: 'black', fontSize: 16 } } class Notification extends React.Component { constructor(props) { super(props) this.state = {} } render() { return ( <div style={styles.wrapper}> <span style={styles.messageText}>{this.props.message}</span> </div> ) } } export default Notificationimport React from 'react' import Notification from './notification' const reservedNotifications = [ { message: '안녕하세요, 오늘 일정을 알려드립니다.' }, { message: '점심식사 시간입니다.' }, { message: '이제 곧 미팅이 시작됩니다.' }, { message: '안녕하세요, 오늘 일정을 알려드립니다.' }, { message: '점심식사 시간입니다.' }, { message: '이제 곧 미팅이 시작됩니다.' }, { message: '안녕하세요, 오늘 일정을 알려드립니다.' }, { message: '점심식사 시간입니다.' }, { message: '이제 곧 미팅이 시작됩니다.' }, { message: '안녕하세요, 오늘 일정을 알려드립니다.' }, { message: '점심식사 시간입니다.' }, { message: '이제 곧 미팅이 시작됩니다.' }, ] var timer class NotificationList extends React.Component { constructor(props) { super(props) this.state = { notifications: [] } } componentDidMount() { const { notifications } = this.state timer = setInterval(() => { if(notifications.length < reservedNotifications.length) { const index = notifications.length notifications.push(reservedNotifications[index]) this.setState({ notifications: notifications }) } else { clearInterval(timer) } }, 1000) } render() { return ( <div> {this.state.notifications.map(v => { return <Notification message={v.message}/> })} </div> ) } } export default NotificationList

props 강의 관련 질문입니다!1)어떻게 컨테이너 컴포넌트에 프롭스 형태로 전달하지 않아도,<Container children = { <Counter {...counterProps} />} />2)jsx 자체를 컨테이너 아래에 중첩?! 시키는 방법만으로도 children prop으로 작용할 수 있게되는지 그 이유? 원리가 궁금합니다!!<Container> <div className='App'> <Counter {...counterProps} /> </div> </Container> import './App.css'; import Container from './Container'; import Counter from './Counter'; function App() { const counterProps = { // initialValue: 7, a: 1, b: 2, }; return ( <Container> <div className='App'> <Counter {...counterProps} /> </div> </Container> ); } export default App; 저는 예를 들어 아래와 같은 방식으로 children prop을 전달하는 걸로 생각하고 있었습니다. <Container children={<OddEvenResult count={count} />} /> 1), 2) 방식의 차이는 무엇이고(어떤 게 더 나은 방식이고?), 2)방식의 동작원리에 대해 질문드립니다!!

게시글 디테일 페이지에 댓글부분 레퍼런스코드는 따로 없을까요 31-2 레퍼런스 코드에는 나와있지 않아서요

안녕하세요 선생님,전역상태관리에 추가적으로 특정페이지별로 상태관리가 필요할때에 대해 질문드립니다, 아토믹패턴을 구현할려다보니 props drilling이 너무 많이 일어나서 recoil로 상태관리를 시도했는데 전역에 필요한 상태들말고 특정페이지에서만 쓰이는 상태들까지 포함이 되니 파일이 너무 지저분해져서요, 특정페이지 상태관리는 context api, 전역은 recoil, 이런 조합으로 써도 될까요?아니면 다른 더 좋은 방법이 있을까요? 감사합니다

코드는 이렇게 작성했는데아래 있는 wrapper__left__body 가 너무 작게 나오는데 이유가 뭘까요?

프론트는 react이고 백엔드는 스프링 부트입니다 .리액트 소스입니다 .import "./App.css"; import { useState, useEffect } from "react"; import SERVER_URL from "./config/config"; function App() { const [hello, setHello] = useState([]); useEffect(() => { if (!hello.length) { console.log(`서버주소는 ::::::::::::::${SERVER_URL}`); fetch(`${SERVER_URL}/api/headers`) .then((response) => response.json()) .then((data) => { console.log("데이터:::::::::::", data); // 데이터 출력 setHello(data); // 데이터를 상태에 설정 }) .catch((error) => console.log("Error:", error)); } }, []); return ( <div className="App"> <div>백엔드에서 가져온 데이터입니다</div> <ul> {hello.map((item) => ( <li key={item.id}>{item.name}</li> ))} </ul> </div> ); } export default App;  config.js 소스입니다. const SERVER_URL = "http://localhost:8080"; export default SERVER_URL;  백단입니다. package com.service.com.controll; import java.util.HashMap; import java.util.List; import org.springframework.http.HttpStatus; import org.springframework.http.ResponseEntity; import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RestController; import com.service.com.domain.User; import com.service.com.service.MainService; import lombok.RequiredArgsConstructor; @RequiredArgsConstructor @RestController public class MainController { private final MainService mainService; @GetMapping("/api/headers") public ResponseEntity<List<User>> getHeaders() { List<User> headerList = mainService.findAll(); System.out.println(headerList.toString().toString()); return ResponseEntity.status(HttpStatus.CREATED).body(headerList); } } 백단 로그입니다 . [User(id=1, name=a), User(id=2, name=b), User(id=3, name=c), User(id=4, name=d), User(id=5, name=e)] 궁금한 질문입니다 .서버주소는 ::::::::::::::http://localhost:8080서버주소는 ::::::::::::::http://localhost:8080데이터::::::::::: (5) [{…}, {…}, {…}, {…}, {…}]데이터::::::::::: (5) [{…}, {…}, {…}, {…}, {…}]왜 2번씩 둘다 찍히는걸까요 ..빈배열 넣었고 처음에만 작동하라고 hello배열의 길이가 없을떄?? useEffect가 작동하라고 코딩했는데 ..궁금합니다.

같은 실습 코드를 mac에서 돌렸을 경우에는 잘 작동되고 윈도우에서 돌리면 오류는 뜨지 않으나 작동되지 않고 빈화면만 출력되는데 이유가 무엇인가요?

혹시 넷플릭스로 Netlify 배포 가능할까요?

아래와 같이 바벨 패키지가 다운로드 되지 않습니다. 어떻게 진행해야 될지 모르겠네요. 도움을 구합니다.

안녕하세요 제로초님! 백엔드 서버 구동을 하고 주소창에 경로를 입력하여 띄웠을때 오류가 나서 질문드립니다우선 프로젝트를 클론을 받아 back폴더로 이동후 리드미에 적힌대로 세팅을 진행하였고 아래캡쳐와 같이 스키마와 테이블이 잘 생성이 된 것을 확인했습니다. 그런데 주소창에 경로를 입력해서 화면이 떴을때 아래캡쳐와 같이 에러가 발생하였습니다.확인을 해보니 요청 주소가 https://sleact.nodebird.com/api/users 여기로 가는데 코드의 어떤 부분을 수정해주어야 하는걸까요?이전에 다른분께서 저와 같은 에러가 발생하여 제로초님이 답변하시기를 프론트의 코드를 수정하면 된다고 하셨는데, 백엔드만 실행했는데 이런 문제가 발생하는 이유가 궁금합니다. 클론받은 back폴더 내에서 전체검색으로 http://sleact.nodebird.com 키워드로 검색한 결과 public/dist 경로안의 파일 838.js와 app.js 에서 defaults.baseURL의 경로로 되어있는것을 확인했습니다. 제로초님께서 프로젝트를 만들고 프론트와 연동을 했을때 남은 결과물 인것같아서 아래 캡쳐본에 있는 dist안에서 빌드?된 결과물을 삭제한 뒤 다시 실행을 시켜보면 되지않을까 했는데 백엔드에서 빌드를 어떻게 해야하는것일까요?  

질문 가이드 📖강의에서 이해가 안가는 부분이 있나요?강사님께서 hydration이라고 언급하셨는데 정확히 어떠한 개념인지 설명해주실 수 있나요??Next.js 공부 1년동안 했는데도 개념이 모호하네요.. 😅   좋은 퀄리티의 강의 감사합니다.

npm run dev를 하고 크롬에 local 창을 띄운 후 개발자모드로 console을 확인했는데요.창은 정상적으로 뜨지만 GET http://localhost:3000/api/users/auth 403 (Forbidden) 이렇게 오류가 납니다.왜그런건가요? 

3번째 줄 "./Notification"에 왜 경고창이 뜨는걸까요? 실행은 잘 됩니다

콘솔 메시지jest.config.jspackage.json라이브러리들을 전부 설치하고 버전도 맞춰 보았는데 "Cannot use import statement outside a module"이 에러가 뜨면서 테스트가 진행이 되지 않습니다.무슨 문제인지 모르겠습니다. 

오류가 생기는 이유는 무엇인가요?

htmlcss안녕하세요! 얼마 전부터 강의 결제해서 보고 있는 코린이입니다.언제나 도움 많이 받고 있습니다. css 첫번째 과제로 웹페이지 구현하던 중 질문이 생겼는데요,전화번호 사이에 들어가는 '-' 부호는 어떻게 코드를 작성하면 될지 알 수 있을까요?픽셀 크기가 지정되어있어 뭔가 코드를 쓰는 것 같기는 한데 감이 안 오더라구요ㅠㅠ그리고 지금까지 구현한 내용도 이 김에 검토 받고 싶습니다! 확인해주시면 감사하겠습니다 :)

강의의 useTransition을 사용한 부분에서 input 태그의 value를 deferedFilter로 설정하고 handleChange 내의 setFilter를 제거해도 문제가 없나요?아니면 input에서 다루는 value와 Words를 렌더링하기 위한 filter value를 따로 관리해야 하나요?이렇게 해도 문제가 없는지 궁금합니다!