안녕하세요 강사님! 강의 정말 잘 보고 있습니다. 카카오맵 지도를 띄우는 코드를 작성하는 실습을 하면서 크롬으로 확인을 했는데요,처음에는 아래의 오류가 떠서 구글링 후에 useEffect(() => { window.kakao.maps.load(() => { const container = document.getElementById("map"); // 지도를 담을 영역의 DOM 레퍼런스 const options = { // 지도를 생성할 때 필요한 기본 옵션 center: new window.kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표. level: 3, // 지도의 레벨(확대, 축소 정도) }; const map = new window.kakao.maps.Map(container, options); // 지도 생성 및 객체 리턴 }); }, []);위의 코드처럼 kakao의 map 객체가 로드되면 실행되게끔 수정을 했습니다. 그 후부터는 위의 오류가 뜨지는 않았지만 한참동안 브라우저 상단 탭에 로딩되는 상태가 보이다가 지도는 결국 보이지 않더라고요. 개발자도구의 네트워크 탭을 보면 아래와 같이 kakao.js를 불러오지 못했다고 오류가 나오는데, 로딩 중에 크롬 콘솔에 window.kakao를 쳐보면 정상적으로 찍힙니다.크롬에서 브라우저 캐시를 삭제하는 방법, 시크릿창에서 해보는 방법, 새 api 키를 발급하는 방법 등등 해보았지만 모두 안됐는데 사파리에서 실행해보니 곧잘 되는걸 확인했습니다... 코드 상의 문제는 아닌 것 같은데 왜 크롬에서만 안되는 건지 혹시 알 수 있을까요..? 구글링하다가 저와 같은 이슈를 겪은 분의 글을 발견했는데, 이슈가 해결은 안됐지만 일단 첨부합니다. https://devtalk.kakao.com/t/kakao-maps-load-net-err-internet-disconnected/125422/4 위의 글 답변에서는 크롬 확장프로그램 문제일 가능성이 있다고 나오는데, 딱히 문제가 될 것 같은 확장프로그램도 없어서요.. 답변 부탁드립니다! 감사합니다!

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.  AWS로 배포하고나면 visual studio code에서 npm으로 로컬실행을 할 수 없을 까여?

import { useState } from "react"; import CommentPageUi from "./BoardCommentWrite.presenter"; import { useMutation } from "@apollo/client"; import { CREATE_BOARD_COMMENT } from "./BoardCommentWrite.queries"; import { useRouter } from "next/router"; import { FETCH_BOARD_COMMENTS } from "../list/BoardCommentList.queries"; export default function CommentPage () { const [writer, setWriter] = useState(""); const [password, setPassword] = useState(""); const [contents, setContents] = useState(""); const [createBoardComment] = useMutation(CREATE_BOARD_COMMENT) const router = useRouter; const onChangeWriter = (event) => { setWriter(event.target.value) } const onChangePassword = (event) => { setPassword(event.target.value) } const onChangeContents = (event) => { setContents(event.target.value) } const onClickSubmit =async() => { try { await createBoardComment ({ variables : { createBoardCommentInput: { writer : writer, password : password, contents : contents, rating: 0, }, boardId: router.query.boardId, }, refetchQueries: [ { query: FETCH_BOARD_COMMENTS, variables: { boardId : router.query.boardId}, }, ], }); } catch (error) { alert(error.message); } alert("정상적으로 댓글이 달렸습니다.") } return ( <CommentPageUi onChangeWriter = {onChangeWriter} onChangePassword ={onChangePassword} onChangeContents ={onChangeContents} onClickSubmit = {onClickSubmit} contents={contents} > </CommentPageUi> ) }comment write  import { gql } from "@apollo/client"; export const CREATE_BOARD_COMMENT = gql` mutation createBoardComment( $createBoardCommentInput: CreateBoardCommentInput! $boardId: ID! ) { createBoardComment( createBoardCommentInput: $createBoardCommentInput boardId: $boardId ) { _id } } `;comment write queryimport { gql } from "@apollo/client"; export const FETCH_BOARD_COMMENTS = gql` query fetchBoardComments($boardId: ID!) { fetchBoardComments(boardId: $boardId) { _id writer contents createdAt rating } } `;comment list queryimport { useQuery } from "@apollo/client" import { FETCH_BOARD_COMMENTS } from "./BoardCommentList.queries" import { useRouter } from "next/router" import BoardCommentListUI from "./BoardCommentList.presenter" export default function BoardCommentList() { const router = useRouter() const {data} = useQuery(FETCH_BOARD_COMMENTS, { variables: {boardId : router.query.boardId} }) return ( <BoardCommentListUI data={data} /> ) }comment list폴더명 에러1에러2둘 다 boardId와 관련있고, 내용으로 봐서는 boardId에 값이 없는 것 같은데, 코드를 아무리 봐도 문제점을 모르겠네요.. 문제가 뭘까요 ???

const express = require('express'); const { User, Post, Image, Comment } = require('../models'); const router = express.Router(); console.log(Post); // undefined router.get('/', async (req, res, next) => { try { const posts = await Post.findAll({ limit: 10, order: [ ['createdAt', 'DESC'], [Comment, 'createdAt', 'DESC'], ], include: [{ model: User, attributes: ['id', 'nickname'], }, { model: Image, }, { model: Comment, include: [{ model: User, attributes: ['id', 'nickname'], }], }, { model: User, as: 'Likers', attributes: ['id'], }], }); res.status(200).json(posts); } catch (error) { console.error(error); next(error); } }); module.exports = router;posts.jsconst express = require('express'); const cors = require('cors'); const passport = require('passport'); const session = require('express-session'); const cookieParser = require('cookie-parser'); const dotenv = require('dotenv'); const morgan = require('morgan'); const db = require('./models'); const passportConfig = require('./passport'); const postRouter = require('./routes/post'); const userRouter = require('./routes/user'); const postsRouter = require('./routes/posts'); dotenv.config(); db.sequelize.sync() .then(() => { console.log('db 연결 성공'); }) .catch(console.error); passportConfig(); const app = express(); app.use(express.json()); app.use(express.urlencoded({ extended: true })); app.use(cors({ origin: true, credentials: true, })); app.use(cookieParser(process.env.COOKIE_SECRET)); app.use(session({ saveUninitialized: false, resave: false, secret: process.env.COOKIE_SECRET, })); app.use(passport.initialize()); app.use(passport.session()); app.use(morgan('dev')); app.use('/posts', postsRouter); app.use('/post', postRouter); app.use('/user', userRouter); app.listen(3065, () => { console.log('3065포트 서버실행중'); });app.js(node:4192) Warning: Accessing non-existent property 'User' of module exports inside circular dependency (node:4192) Warning: Accessing non-existent property 'Post' of module exports inside circular dependency // 생략영상보면서 코딩중에위 문구와 함께 ../models에서 require한 것이존재하지 않는 문제가 발생했습니다.const { Post } = require('../models')console.log(Post) 출력결과 undefined 입니다이 문제가 posts.js 파일에서만 발생했습니다.(user.js, post.js는 정상)그래서 postss.js 라는 이름이 다르고 코드만 옮긴 파일을 만들어서 다시 시도해보았습니다.(rename시 module not found 에러 발생)그랬더니 ../models에서 require 한것이 존재했습니다.근데 요청시라우터(method: get, url: /posts)의 미들웨어가 실행이 안되는 문제가 있었습니다.상태코드는 300 Multiple Choices 였습니다이번에는 url를 바꿔서 요청을 보냈습니다ex) /posts/test그랬더니 성공했습니다.왜 이런 현상이 발생했는지어떻게 해결할 수 있는지 모르겠어서 질문남깁니다!

<li className={styles.menu} key={menu.name}> <span className={styles.name}>{menu.name}</span> <span className={styles.price}>{menu.price}</span> </li>위 코드는 DetailContent.tsx 코드의 일부입니다.위 코드에서 span 태그의 경우 inline 태그이기 때문에 부모 태그인 li 태그에 display: flex 속성을 적용해도 의미가 없는 것이 당연하다고 생각했습니다.그런데 위 코드에서는 inline 태그인 span 태그가 display: flex에 영향을 받고 있더라구요.혹시 제가 잘못 이해하는 걸까요? 혹은 다른 이유가 있는걸까요??(Next.js 관련 질문이 아니라 너무 지엽적인 질문이라 죄송합니다...!)

안녕하세요 선생님 !하나 궁금한 점이 있어서 질문 드려요.게시물 수정할 때, 기존에 입력한 값이 사라지고 수정한 내용만 남는 문제가 발생해, 수정하기 버튼을 눌렀을 때 기존 값도 남아있고, 수정한 내용도 체인지 돼서 나오게끔 하는 부분을 공부중입니다.(이미지는 강의내용 캡쳐입니다)궁금한 게, 이렇게 코드를 적용하고 게시물을 수정하면 바뀐 내용들만 뮤테이션이 날라간다는 건 이해 하겠는데 기존에 입력한 값들이 안 사라지고 출력되는 건 이해가 쉽지 않네요.. !! 어차피 writer,title,contents 스테이트는 수정된 게 없으니 빈 값 아닌가요 ? 빈 값인데 초기값이 나온다는 게 ..ㅠㅠ 미리 답변 감사합니다 선생님.    

freeboard_frontend 랜딩페이지를 만들어보세요 ( 접속 시 첫 화면 )라고 나와있는데 이 조건이 무엇을 의미하나요?

안녕하세요. 강의 잘 듣고 있습니다. css가 중요한 것은 아니지만 important가 없으면 안되는 이유가 궁금해서 질문드립니다.naver 로고에 important 값을 주는 이유는 naver 에서 자체적으로 주는 css 값 때문이라고 생각했는데, 제가 생각한 게 맞을까요?

피그마 주소밖에 확인이 안되는데,어디에 나와있는건가요..??

return () => { marker?.setMap(null) }해당 코드는 어떤 역할을 하는건가요??

안녕하세요 선생님강의노트 다운받고 싶은데 링크를 못찾겠습니다.부탁드립니다.

중고마켓 구현 중에 계속 구글링해도 해결이 안돼서 질문드립니다ㅠHeader에 판매하기 Link가 있고, 클릭하면 /product/new 로 이동하게 했습니다주소창에 직접 주소를 입력해서 들어가면 에러가 안뜨는데, 버튼을 클릭해서 들어가면TypeError: window.kakao.maps.LatLng is not a constructor 에러가 발생하는데원인이 뭘까요 ....??Header <Link href="/product/new"> <a> <S.HeaderIcon> 판매하기 </S.HeaderIcon> </a> </Link>BoardWritedeclare const window: typeof globalThis & { kakao: any } export default function BoardWrite(props: IBoardWriteProps): JSX.Element { const router = useRouter() const { setValue, trigger } = useForm({ mode: "onChange", }) useEffect(() => { const script = document.createElement("script") script.src = "https://dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=앱키" document.head.appendChild(script) script.onload = () => { window.kakao.maps.load(function () { const container = document.getElementById("map") // 지도를 담을 영역의 DOM 레퍼런스 const options = { // 지도를 생성할 때 필요한 기본 옵션 center: new window.kakao.maps.LatLng(37.462381, 126.813369), // 지도의 중심좌표. level: 3, // 지도의 레벨(확대, 축소 정도) } const map = new window.kakao.maps.Map(container, options) // 지도 생성 및 객체 리턴 }) } }, [])

Layout.tsx의 return을 return ( <html lang="en"> <AuthProvider> <body>{children}</body> </AuthProvider> </html> )위와 같이 수정했을 때에, 경고가 Login을 실행했을 때 발생했습니다. 무시하면 안 되는 경고인것 같아 어떻게 해결하는지 궁금하여 질문 남깁니다.경고 내용:Warning: Cannot update a component (`Router`) while rendering a different component (`Login`). To locate the bad setState() call inside Login, follow the stack trace as described in https://reactjs.org/link/setstate-in-render

강의에 useRef 사용 이유에 대해선 안나오는거 같은데 아래 두 코드는 왜 사용된건지 설명해주실 수 있나요?? const mapRef = useRef<NaverMap | null>(null) mapRef.current = map

강의 ver1, ver2 뭘듣고 있는지 어떻게 알수있나요? ver1, ver2 표시가 안되어있어서요!html, css, javascript 는 노션 링크 따로있나요?

안녕하세요 zerocho 님아래 코드에서 const onChangePasswordCheck = useCallback( (e) => { console.log("onChangePasswordCheck1 :" + e.target.value); console.log("onChangePasswordCheck2:" + passwordCheck); //전 값을 참조함 setPasswordError(e.target.value !== password); setPasswordCheck(e.target.value); }, [password] //passwordCheck 로 바꾸어도 전 값을 참조함 ); 1.[password] 부분을 [] 바꾸어도 정상 작동 하는 것 같구요 [] 의미는 최초 render 시에만 함수를 생성한다는 의미로 알고 있습니다만...2.[passwordCheck]로 바꾸면... [웹 게임을 만들며 배우는 React/6-5. useMemo와 useCallback] 강의에 의하면 onChangePasswordCheck 안에서 passwordCheck 가 정상 참조 되어야 할 것 같은데.. 이전 값으로 참조 되는 것 같습니다. 2번째 인자 작동 방식이 정확히 이해 되지 않습니다.다시 한번 설명 부탁 드려도 될까요? (참고자료나, zerocho님, 다른 강의 부분 알려 주시면 직접 찾아 보겠습니다.)감사합니다.

깃주소 알려주세요, 뭐 다 들어야 깃 주소를 아는건지 왜 찾을수가 없나요

혹시 중고마켓에서 게시글들어갈때 해당 게시글을 찜했는지 알 수 있는 API가 있을까여?

강력한 css 섹션 5 단위심화 강의에서 고슴도치 이미지 파일을 자료에 올려놨다고 하는데 못찾겠어요 ㅡㅡ...뭔 자료를 이렇게 찾기 힘들게 올려논건지?장난하나.. 이미지 찾다가 시간 다갔네

import { configureStore } from "@reduxjs/toolkit"; import { createWrapper } from "next-redux-wrapper"; import reducer from "../reducers"; function getServerState() { return typeof document !== "undefined" ? JSON.parse(document.querySelector("#__NEXT_DATA__").textContent)?.props .pageProps.initialState : undefined; } const serverState = getServerState(); console.log("serverState", serverState); const makeStore = () => configureStore({ reducer, devTools: true, middleware: (getDefaultMiddleware) => getDefaultMiddleware(), preloadedState: serverState, // SSR }); const wrapper = createWrapper(makeStore); export default wrapper;ssr 문제를 계속 해결해보고 있는데 지금 보니 console.log()에 serverState가 undefined가 나옵니다 이게 혹시 문제의 원인인가 싶어서 그런데 serverState는 무었이고 왜 undefined가 나오나요?