안녕하세요. [순수JS1] 폴더구조 편에서 npx 로 웹서버 띄우고 localhost:3000 켜고 크롬에서 개발자도구로 네트워크 보면 store.js 로딩하는데 404에러가 나오는데 이유가 뭘까요?그리고 강사님처럼 console.log 로 로그를 찍어도 크롬 개발자도구 console 탭 보면 아무것도 안나오는데 이유가 뭘까요 ㅠㅠ?

import { useCallback } from 'react'; import io from 'socket.io-client'; // 아무 key값이 들어올수 있으니 이런 형식으로 타입 지정 const sockets: {[key: string]: SocketIOClient.Socket} = {}; const backUrl = "http://localhost:3095"; const useSocket = (workspace?: string): [SocketIOClient.Socket | undefined, () => void] => { const disconnect = useCallback(() => { if(workspace) { sockets[workspace].disconnect(); // 연결 끊을때는 지우기 delete sockets[workspace]; } },[workspace]) if(!workspace) { // 한번 맺었던 연결을 끊는 함수 (끝맺음을 잘하자) return [undefined, disconnect]; } sockets[workspace] = io.connect(`${backUrl}/ws-${workspace}`,{ transports: ['websocket'], }); return [sockets[workspace], disconnect] } export default useSocket;  const [socket, disconnect ] = useSocket(workspace); useEffect(()=>{ if(channelData && userData){ socket?.emit("login",{id : userData.id, channels: channelData.map((y)=> y.id)}); } },[userData, channelData, socket]); // socket연결을 끊어줄 때 useEffect(()=>{ return () => { disconnect(); } },[workspace, disconnect]) 버전이 달라서 이런 현상이 생기는건지 잘 모르겠습니다. ..

안녕하세요! 제가 강의를 보며 npx webpack 명령어를 실행하고 아래와 같은 에러를 만났습니다.아래는 제 webpack.config.js 파일입니다.npx webpack 명령어를 실행하면 /dist/app.js 파일이 생성되기는 하지만 깔끔하지 않은 모습입니다. 우선 17강까지 듣고 잠시 멈춰둔 상태입니다. 검색해도 원인을 좀처럼 찾기 힘들어서 문의글 남겨봅니다. 감사합니다!

안녕하세요 저작권 관련 질문드립니다! 본 학습 자료의 저작권은 코드캠프에 있어 무단 도용, 배포, 복제를 금지한다고 적혀있는데 그럼 혹시 개인 블로그에 내용을 공부한 내용을 정리한 것을 공개 처리해두어도 문제가 되지 않을지 문의드립니다.

포트폴리오를 깃허브에 올리려고 하는데 git허브강좌 보면서 따라하고 있었는데 git add . 후 git status 하면은 해당 오류가 떠요 .. admin@DESKTOP-8KF9PK5 MINGW64 ~/Desktop/portfolio (master)$ git add .admin@DESKTOP-8KF9PK5 MINGW64 ~/Desktop/portfolio (master)$ git statusOn branch masterNo commits yetChanges to be committed:(use "git rm --cached <file>..." to unstage)new file: freeboard_frontendChanges not staged for commit:(use "git add <file>..." to update what will be committed)(use "git restore <file>..." to discard changes in working directory)(commit or discard the untracked or modified content in submodules)modified: freeboard_frontend (modified content, untracked content) 해당 폴더 구조는 이렇습니다 보니까 .git이 이중으로 설치되어 있는데 어디 부분을 어떤 명령어로 삭제해야하는지 알려주시면 감사하겠습니다..!

05-05-dynamic-routing-board-mutation강의에 있는 내용을 구현했습니다이상은 없게 정상 작동하는데콘솔로그가 2번 찍히는데 이해가 가지 않습니다===========================================폴더구조================================================05-05-dynamic-routing-board-mutation/index.jsimport {gql, useMutation} from "@apollo/client"; import {useRouter} from "next/router"; const 나의그래프큐엘세팅 = gql` mutation createBoard($writer: String, $title: String, $contents: String){ createBoard(writer: $writer, title: $title, contents: $contents){ _id number message } } ` export default function GraphqlMutationPage() { const router = useRouter() const [나의함수] = useMutation(나의그래프큐엘세팅) const onClickSubmit = async () => { try{ // try에 있는 내용을 시도하다가 실패하면, 다음에 있는 모든 줄들을 모두 무시하고, catch에 있는 내용이 실행됨. const result = await 나의함수({ variables: { writer: "호날두", title: "모두다 외쳐", contents: "Siuuuu~~~~~~" } }) //console.log("result 값은 다음과 같습니다", result) //console.log("동적라우팅 주소는 number라고 지칭했고 다음과 같아요", result.data.createBoard.number) // router.push('/section05/05-05-dynamic-routing-board-mutation-moved' + result.data.createBoard.number) router.push(`/section05/05-05-dynamic-routing-board-mutation-moved/${result.data.createBoard.number}`) }catch (error){ alert(error.message) } } return <button onClick={onClickSubmit}>GRAPHQL-API 요청하기</button> // 한줄일 때는 괄호 ( ) 가 필요없다. }===========================================================05-05-dynamic-routing-board-mutation-moved/[number]/index.jsimport {gql, useQuery} from "@apollo/client"; import {useRouter} from 'next/router' const FETCH_BOARD = gql` query fetchBoard($number: Int){ fetchBoard(number:$number){ # 1번 게시글 내용에 생략된 내용이 많아서 19047을 1번 게시글로 가정 number writer title contents } } ` export default function StaticRoutingMovedPage(){ const router = useRouter() console.log("라우터에 뭐가 들어있는지 알아보기",router) const { data } = useQuery(FETCH_BOARD, { variables: { number: Number(router.query.number) } }) console.log("데이터에 뭐가 들어있는지 알아보기",data) return( <> <div>{router.query.number}번 게시글 이동이 완료됐어요!!😀😀</div> <div>작성자: {data && data.fetchBoard?.writer}</div> <div>제목: {data?.fetchBoard?.title}</div> <div>내용: {data? data.fetchBoard?.contents : "로딩중입니다."}</div> </> ) }==================================================================브라우저 콘솔창-> 여기서 GraphQL요청 후 콘솔 찍어놓은게 2번 반복됩니다.위의 내용 확대 ==================================================================네트워크 탭여기에 GraphQl 요청이 두번 나간 것 같은데 그것 때문에 그런 건가요?아니면 data 내용을 콘솔 찍었을때 한번 undefined 처리가 되어서 데이터를 받아오는 과정에서 한번 더콘솔이 찍힌건가요? 

강의 흐름대로 모든 설정을 하고 SVG 파일을 불러왔는데 제목과 같은 에러가 계속 생깁니다... ㅠㅠ여기저기 검색해서 해결하려고 했지만 쉽게 안되네요.다음과 같이 안드로이드 스튜디오에 에러가 나고 제목에 있는 에러는 터미널에서 나오는 메시지입니다.package.json의 일부는 다음과 같고metro.config.js는 다음과 같이 했습니다..const { getDefaultConfig } = require("expo/metro-config"); module.exports = (() => { const config = getDefaultConfig(__dirname); const { transformer, resolver } = config; config.transformer = { ...transformer, babelTransformerPath: require.resolve("react-native-svg-transformer"), }; config.resolver = { ...resolver, assetExts: resolver.assetExts.filter((ext) => ext !== "svg"), sourceExts: [...resolver.sourceExts, "svg"], }; return config; })(); 윈도우 운영체제에서 생기는 문제일까요 ㅠㅠ 버전 호환성 문제일까요...

챕터3-2 useRouter 를 import하는데navigation router 는 import 가 되지 않네요..혹시 따로 설치를 해야하는 부분인가요?

Should not import the named export 'version' (imported as 'version') from default-exporting module (only default export is available soon) npm run dev를 실행했더니 이런 오류가 떠요.....도와주세요ㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜ

강사님 안녕하세요강사님 강의 덕분에 저 혼자서 페이지도 만들고 nginx 사용해서 서버까지 배포해보았습니다.다름이 아니라 3일전 까지만 해도 느리긴 했지만 잘 되던 서버가오늘 서버내의 기능을 사용할려고 하니 502 bad gateway를 내 뱉으면서 멈춰버립니다.(되다가 안되다가 반복함)그래서 error 로그를 찾아보니2023/11/01 00:20:22 [error] 10930#10930: *232 upstream prematurely closed connection while reading response header from upstream라고 뜨네요 3일동안 해봤는데 헛발짓만 했네용..gpt한테 물어봐도 메모리 리소스, 네트워크 문제 , 응답시간 문제 등 이라곤 하는데 메모리랑 네트워크에는 아무런 문제가 없는거 같습니다.3일전까지만 해도 잘되던 서버가 안되니까 많이 답답하네요..

다름이 아니라 제로초님의 로그인 문제 해결하기 챕터를 보다가Posts.length관련 오류 해결하는 강의를 보는데제로초님의 redux화면이랑 저의 화면이랑 구성이 좀 다른 것 같아서 문의드립니다.제로초님의 화면은 위 사진처럼 me라는 객체로 나와서 확인하기 쉬운데제 화면은 아래처럼 그냥 데이터 라고 나오고 있습니다..어느 부분을 수정해야하는지 잘 모르겠어서 질문드립니다.

컴파일은 오류 없이 잘 되는데, 폼에서 짹짹(게시)버튼을 눌러도 글 작성이 되지 않습니다개발자도구에서 나타나는 오류입니Incorrect use of <label for=FORM_ELEMENT>The label's for attribute doesn't match any element id. This might prevent the browser from correctly autofilling the form and accessibility tools from working correctly.To fix this issue, make sure the label's for attribute references the correct id of a form field. PostCard가 작성되지 않는데 코드에서 오류를 못 찾겠어서 질문합니다! 의심스러운 부분들만 올려봅니다..post.js 코드입니다const ADD_POST = 'ADD_POST'; export const addPost = { type: ADD_POST } const reducer = (state = initialState, action) => { switch (action.type) { case ADD_POST: { return { ...state, mainPosts: [dummyPost, ...state.mainPosts], postAdded: true, }; }; default: { return { ...state, }; }; } }; PostForm.js 코드입니다const PostForm = () => { const { imagePaths } = useSelector((state) => state.post); const dispatch = useDispatch(); const imageInput = useRef(); const [text, setText] = useState(''); const onChangeText = useCallback((e) => { setText(e.target.value); }, []); const onSubmit = useCallback(() => { dispatch(addPost); setText('') }, []); return ( <Form style={{ margin: '10px 0 20px' }} encType="multipart/form-data" onFinish={onSubmit}> <Input.TextArea value={text} onChange={onChangeText} maxLength={140} placeholder='새로운 글 작성' /> <div> <input type="file" multiple hidden ref={imageInput} /> <Button onClick={onClickImageUpload}>이미지 업로드</Button> <Button type="primary" style={{ float: 'right' }} htmlType="submit">게시</Button> </div> <div> {imagePaths?.map((v) => ( <div key={v} style={{ display: 'inline-block' }}> <img scr={v} style={{ width: '200px' }} alt={v} /> <div> <Button>제거</Button> </div> </div> ))} </div> </Form> ) };  pages/index.js 코드입니다const Home = () => { const { isLoggedIn } = useSelector((state) => state.user); const { mainPosts } = useSelector((state) => state.post); return ( <AppLayout> {isLoggedIn && <PostForm />} {mainPosts.map((post) => <PostCard key={post.id} post={post} />)} </AppLayout> );

 java-11.0.20javac 11.0.20sdk 33gradle-plugin 7.4.2gradle 7.6.3시뮬레이 android 13react-native 0.68.2react-native-push-notification 8.1.1입니다 현재 설치이후에 아래와 같은 에러와 함께 알람이 표시되지않습니다. build시에는 문제가 없습니다. 혹시 왜그런지 키워드를 알 수 있을까요?Could not run phased build action using connection to Gradle distribution 'https://services.gradle.org/distributions/gradle-5.6.4-all.zip'.Could not open cp_init remapped class cache for 6a5krabdzij62jglcll542e66 (C:\Users\dladl\.gradle\caches\5.6.4\scripts-remapped\eclipsePlugin_3ntw3lnplzg95m5nu28ubyn0\6a5krabdzij62jglcll542e66\cp_initb88fbed980d87867994e661e74c75e1f).Could not open cp_init generic class cache for initialization script 'C:\Users\dladl\AppData\Roaming\Code\User\workspaceStorage\8a08ff5a0b7649681859b892f1a2bdc2\redhat.java\jdt_ws\.metadata\.plugins\org.eclipse.buildship.core\init.d\eclipsePlugin.gradle' (C:\Users\dladl\.gradle\caches\5.6.4\scripts\6a5krabdzij62jglcll542e66\cp_init\cp_initb88fbed980d87867994e661e74c75e1f).Could not initialize class org.codehaus.groovy.vmplugin.v7.Java7Exception org.codehaus.groovy.GroovyBugError [in thread "Daemon worker"]

안녕하세요, 수업 도중에 콘솔에 찍힌 결과가 이해가 되지 않아 문의 남깁니다.persons에 "철수"부터 "영수"까지 for문에 결과가 총 6번 나와야 하는데 4개 값 밖에 안나와 해당 이유. 궁금합니다,

docker-compose.yml 은 왜 루트에 두나요?.?~

선생님 안녕하세요.좋은 강의해주시고 리뉴얼도 준비해주셔서 감사합니다. 무척 기대하는 마음으로 기다리고 있는데요. 리뉴얼 강의에 대해서 질문 및 요청 사항이 있어서 글 남깁니다. 다른 질문 글에서 리뉴얼 강의에서도 리액트를 다룰 예정이시라고 들었는데요. 리액트에서 18버전에서 업데이트 된 기능들, server component 같은 부분도 다루어지는지, Next를 다루실 계획도 있으신지 궁금합니다. 그리고 혹시 리뉴얼에서 테스팅도 다루실 계획이 있으신가요? 앱을 만들어볼수록 테스팅이 참 중요하다는 걸 느끼게 되는데요. 실습으로 만드는 프로젝트를 위한 테스팅 코드까지 다루어진다면 정말 실전에서 필요한 건 빠지는 게 없는 강의가 되지 않을까 하는 기대를 해봅니다. 감사합니다!

마지막 createProduct 불러오는 부분에서 createProductInput 부분에 제공되는 값이 없다고 뜨는 것 같습니다.오타나 변수를 확인해봐도 제 눈에는 안보여서.. 이 부분에서 오류가 나는건 맞는 것 같은데 서버에서 못받아오는걸까요? 어떤게 문제일까요?ㅠㅠ 작성코드도 같이 첨부합니다..!    

안녕하세요!캐싱 관련하여 질문드립니다.날씨 데이터 재검증하기 챕터에서강의를 봤을 때는 새로고침을 해도 기존 응답값을 캐싱해서 보여주는 것 같은데제가 따라해봤을 떄는 새로 고침시에는 apI를 새로 불러와서 보여주고 라우팅 이동 중에는 캐싱된 값을 보여주고 있습니다.그래서 깃헙에 있는 코드를 클론 받아서 실행을 해봤는데 마찬가지로 새로고침시 시간이 유지되지 않고 변경이 됩니다.현재 상황은 이런데 어떤 부분을 확인하면 좋을까요?영상 첨부합니다.

req.logout을 호출할때 콜백함수가 필요하다 라고 나옵니다.req#logout requires a callback function이런식으로요 제 코드는 제로초님 코드처럼 적어놨는데 제가 이해하는 콜백함수라는게 라우터 부분이라고 생각이 드는데 어떻게 수정을 해야할지 감이 안잡힙니다 ㅜㅜ const express = require('express'); const bcrypt = require('bcrypt'); const passport = require('passport'); const { isLoggedIn, isNotLoggedIn } = require('./middlwares') const { User, Post } = require('../models'); const router = express.Router(); router.post("/login", isNotLoggedIn, (req, res, next) => { passport.authenticate("local", (err, user, info) => { if (err) { // 서버에러 부분 console.error(err) return next(err) } if(info){// 클라이언트 에러 부분 return res.status(401).send(info.reason) } // 성공시 return req.login(user,async(loginErr)=>{ // 패스포트 에러날시 if(loginErr){ console.error(loginErr) return next(loginErr) } // 유저의 모든 정보 const fullUserWithoutPassword = await User.findOne({ where:{id:user.id}, // 비밀번호 제외 // 받고 싶은 정보만 적을경우 // attributes:["id","nickname","email"], attributes: { exclude:["password"] }, // 나머지 정보 include:[{ model:Post }, { model: User, as: "Followings", }, { model: User, as: "Followers", }] }) // post 팔로워 팔로잉 정보 비밀번호 제거 return res.status(200).json(fullUserWithoutPassword) }) })(req,res,next) }) router.post("/", isNotLoggedIn, async (req, res, next) => { try { const exUser = await User.findOne({// 중복이 됫는지아닌지. where:{ email:req.body.email, } }) if(exUser){ return res.status(403).send("이미 사용중인 아이디입니다.") } const hashedPassword = await bcrypt.hash(req.body.password, 12) await User.create({ email:req.body.email, nickname: req.body.nickname, password: hashedPassword, }) // res.setHeader("Access-Control-Allow-Origin","http://localhost:3000") res.status(201).send("회원가입이 완료되셨습니다.") // 201은 생성이 잘됫다. } catch (error) { console.error(error) next(error)// 에러가 난거를 브라우저에 알려준다. statsus:500 } }) router.post('/logout', (req, res) => { req.logout(); req.session.destroy(); res.send('ok'); }); module.exports = router

class LikeButton extends React.Component { constructor(props) { super(props); this.state = {liked: false}; this.onClickButton = this.onClickButton.bind(this) // 이걸 안써주면 동작 안함 } onClickButton() { this.setState({liked: true}); } render() { if (this.state.liked) { return 'You liked this.'; } return ( <button onClick={this.onClickButton}> Like </button> ); } }이 코드에서 this가 button 태그를 가르키기 때문에 bind함수로 LikeButton 클래스 인스턴스로 바인딩 해주어야 화살표 함수가 아닌 일반 function 키워드 함수로 메서드를 정의했을때 동작하는게 맞는걸까요? 화살표 함수라면 button 태그를 가르키지 않고 바깥 this를 그대로 가져오기 때문에 LikeButton 클래스 인스턴스를 가져오는 것이 맞을까요?