묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
작성완료 시 onCreate 함수 호출 못함
App.js에서 onCreate함수를 가지고 오지 못하고 있는데 어디서 오류가 났는지 찾지못하고있어요ㅠㅠ! 도와주세요!코드보여드릴게여 ㅠㅠ오류상황Cannot destructure property 'onCreate' of '(0 , react__WEBPACK_IMPORTED_MODULE_0__.useContext)(...)' as it is undefined. TypeError: Cannot destructure property 'onCreate' of '(0 , react__WEBPACK_IMPORTED_MODULE_0__.useContext)(...)' as it is undefined. at DiaryEdit (http://localhost:3000/static/js/bundle.js:344:5) at renderWithHooks (http://localhost:3000/static/js/bundle.js:26416:22) at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:29702:17) at beginWork (http://localhost:3000/static/js/bundle.js:30998:20) at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:16008:18) at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:16052:20) at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:16109:35) at beginWork$1 (http://localhost:3000/static/js/bundle.js:35983:11) at performUnitOfWork (http://localhost:3000/static/js/bundle.js:35230:16) at workLoopSync (http://localhost:3000/static/js/bundle.js:35153:9)App.jsimport React, { useReducer, useRef } from "react"; import "./App.css"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import Home from "./pages/Home"; import New from "./pages/New"; import Edit from "./pages/Edit"; import Diary from "./pages/Diary"; const reducer = (state, action) => { // return state; let newState = []; switch (action.type) { case "INIT": { return action.data; } case "CREATE": { newState = [...action.data, ...state]; break; } case "REMOVE": { newState = state.filter((it) => it.id !== action.targetId); break; } // 모든 부분을 수정해야해서 다 받아옴 case "EDIT": { newState = state.map((it) => it.id === action.targetId ? { ...action.data } : it ); break; } default: return state; } return newState; }; export const DiaryStateContext = React.createContext(); export const DiaryDispatchContext = React.createContext(); const dummyData = [ { id: 1, emotion: 1, content: "일기 1번", date: 1687326683094, }, { id: 2, emotion: 2, content: "일기 2번", date: 1687326683096, }, { id: 3, emotion: 3, content: "일기 3번", date: 1687326683097, }, { id: 4, emotion: 4, content: "일기 4번", date: 1687326683098, }, { id: 5, emotion: 5, content: "일기 5번", date: 1687326683099, }, { id: 6, emotion: 3, content: "일기 6번", date: 1787321680269, }, ]; function App() { const [data, dispatch] = useReducer(reducer, dummyData); // console.log(new Date().getTime()); const dataId = useRef(0); const onCreate = (date, content, emotion) => { dispatch({ type: "CREATE", data: { id: dataId.current, date: new Date(date).getTime(), content, emotion, }, }); dataId.current += 1; }; const onRemove = (targetId) => { dispatch({ type: "REMOVE", targetId }); }; const onEdit = (targetId, date, content, emotion) => { dispatch({ type: "EDIT", data: { id: targetId, date: new Date(date).getTime(), content, emotion, }, }); }; return ( <DiaryStateContext.Provider value={data}> <DiaryDispatchContext.Provider value={{ onCreate, onEdit, onRemove }}> <BrowserRouter> <div className="App"> <Routes> <Route path="/" element={<Home />} /> <Route path="/new" element={<New />} /> <Route path="/edit" element={<Edit />} /> <Route path="/diary/:id" element={<Diary />} /> {/* <Route path="/diary" element={<Diary />} /> */} </Routes> </div> </BrowserRouter> </DiaryDispatchContext.Provider> </DiaryStateContext.Provider> ); } export default App; DiaryEdit.jsimport { useNavigate } from "react-router-dom"; import React, { useState, useRef, useContext } from "react"; import MyHeader from "./MyHeader"; import MyButton from "./MyButton"; import EmotionItem from "./EmotionItem"; import DiaryDispatchContext from "./../App"; // 감정에 대한 데이터 const emotionList = [ { emotion_id: 1, emotion_img: process.env.PUBLIC_URL + `assets/emotion1.png`, emotion_descript: "완전 좋음", }, { emotion_id: 2, emotion_img: process.env.PUBLIC_URL + `assets/emotion2.png`, emotion_descript: "좋음", }, { emotion_id: 3, emotion_img: process.env.PUBLIC_URL + `assets/emotion3.png`, emotion_descript: "보통", }, { emotion_id: 4, emotion_img: process.env.PUBLIC_URL + `assets/emotion4.png`, emotion_descript: "나쁨", }, { emotion_id: 5, emotion_img: process.env.PUBLIC_URL + `assets/emotion5.png`, emotion_descript: "완전 나쁨", }, ]; // 달력에 오늘의 날짜를 기본 날짜로 구현하기 export const getStringDate = (date) => { let year = date.getFullYear(); let month = date.getMonth() + 1; let day = date.getDate(); if (month < 10) { month = `0${month}`; } if (day < 10) { day = `0${day}`; } return `${year}-${month}-${day}`; }; const DiaryEdit = () => { const contentRef = useRef(); const navigator = useNavigate(); const [date, setDate] = useState(getStringDate(new Date())); // 어떤 감정을 선택했는지 state에 저장 const [emotion, setEmotion] = useState(3); const [content, setContent] = useState(""); const { onCreate } = useContext(DiaryDispatchContext); const handleClickEmotion = (emotion) => { setEmotion(emotion); }; const handleSubmit = () => { if (content.length < 1) { contentRef.current.focus(); return; } onCreate(date, content, emotion); }; return ( <div className="DiaryEdit"> <MyHeader headText={"새로운 일기 쓰기"} leftChild={ <MyButton text={"< 뒤로가기"} onClick={() => navigator(-1)} /> } /> <div> <section> <h4>오늘은 언제인가요?</h4> <div className="input_box"> <input className="input_date" value={date} onChange={(e) => setDate(e.target.value)} type="date" /> </div> </section> <section> <h4>오늘의 감정</h4> <div className="input_box emotion_list_wrapper"> {emotionList.map((it) => ( <EmotionItem key={it.emotion_id} {...it} onClick={handleClickEmotion} isSelected={it.emotion_id === emotion} /> ))} </div> </section> <section> <h4>오늘의 일기</h4> <div className="input_box text_wrapper"> <textarea placeholder="오늘은 어땠나요?" ref={contentRef} vlaue={content} onChange={(e) => setContent(e.target.value)} /> </div> </section> <section> <div className="control-box"> <MyButton text={"취소하기"} onClick={() => navigator(-1)} /> <MyButton text={"작성완료"} type={"positive"} onClick={handleSubmit} /> </div> </section> </div> </div> ); }; export default DiaryEdit;
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션35 13-01 질문
export default function LibraryIconPage(): JSX.Element { const onClickDelete = (event: MouseEvent<HTMLDivElement>): void => { console.log(event.currentTarget.id) } return ( <div id="삭제게시글id" onClick={onClickDelete}> <MyIcon /> </div> ) }강사님께서 상위에 div를 만들고 event.currentTarget.id로 값을 받아오라고 설명해주셨는데,svg 상위 태그인 span에 id가 있으니까MyIcon에 id,onClick 넣고 event.currentTarget.id로span의 id값을 가져오는 건 잘못된 것인지 궁금합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
typeORM Many to one 관계설정
안녕하세요 typeORM 관계설정 중에 궁금한게 생겨서 질문드립니다.공식문서에 나온 코드를 보면 ManyToOne 데코레이터 안에 두 가지 인자가 있는데 앞에 있는건 강의에서도 작성하지만 두번 째인자는 생략이 가능한 것 같네요.. 혹시 두번 째 인자는 OneToMany를 작성할 때도 생략이 가능한가요?그리고 혹시 OneToMany로 받아오는 배열을 배열말고 count해서 숫자로 칼럼에 넣을 수 있는 방법이 있을까요..? 힌트라도 알려주시면 감사하겠습니다!!@Entity() export class Photo { @PrimaryGeneratedColumn() id: number @Column() url: string @ManyToOne(() => User, (user) => user.photos) user: User }
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
swr 캐싱
다른분들 질문 보다보니 부모컴포넌트와 자식컴포넌트가 동일한 key값으로 서버에 요청을 보내면 한번만 요청을 보내고 부모컴포넌트에서 캐싱된 값을 자식컴포넌트가 사용한다고 봤는데 공식 홈페이지 예제 보니 특정 페이지 내부에서 화면에 렌더링되는 모든 컴포넌트에서는 동일한 key값으로 서버에 요청하는경우에 하나만 요청되고 모두 캐싱되어서 같은화면?내에서 렌더링되는 컴포넌트들은 값을 공유하는것같은데 이도 맞을까요? nextjs _app Custom App component 에서 요청하는 swr key는 전역적으로 캐싱이 안되나요?_app에서 서버로 사용자 정보를 요청하도록 코드를 작성해놨고 각 페이지 마다도 동일한 key값으로 사용자 정보를 서버에 요청하도록 작성해두었습니다. 페이지를 이동하더라도 app에서 사용한 key값과 각 페이지에서 서버로 요청하는 key값이 동일하니 캐싱되어 서버로 사용자 정보를 재요청하지 않고 캐싱된 값을 사용해야된다고 생각되는데 계속해서 서버로 사용자 정보를 재요청을 보냅니다. 왜 그런것일까요..?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
[login route 생성하기] - accessToken에 userData를 담은 이유가 궁금합니다.
안녕하세요. login route 생성하기의 내용을 쭉 따라가다가 이해가 되지 않는 부분이 있어 질문하게 되었습니다.강사님께서는 노드 백엔드서버에서 accessToken와 userData를 담은 객체를 json형식으로 반환하도록 하셨습니다. 저로써는 db에 저장되어 있는 회원객체를 그대로 인증정보에 담는 것이 매우 위험하다고 생각되었습니다. userData를 반환해준 이유가 궁금합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
싸이월드 +
home.html이나 game.html은 css가 정상적으로 적용되는데jukebox.html만 css가 적용되지않습니다 왜그런가욤.. jukebox.html:<!DOCTYPE html> <html lang="ko"> <head> <title>JUKEBOX</title> <link href="./styles/jukebox.css"> </head> <body> <div class="wrapper"> <div class="wrapper__header"> <div class="wrapper__title"> <div class="title">추억의 BGM</div> <div class="subtitle">TODAY CHOICE</div> </div> <div class="divideLine"></div> </div> <div class="wrpper__body"> <div class="wrapper__title"> <div class="title">추억의 BGM</div> <div class="subtitle">TODAY CHOICE</div> </div> </div> </div> </body> </html> jukebox.css:*{ box-sizing: border-box; margin: 0px; } html, body{ width: 100%; height: 100%; } .title{ color: #55b2e4; font-size: 13px; font-weight: 700; } .subtitle{ font-size: 8px; padding-left: 5px; } .divideLine{ width: 100%; border-top: 1px solid gray; }
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
싸이월드 만들기 4탄 질문
id="myword"가 떡하니 있는데 왜저럴까요..let lastword = word[word.length-1] let firstword = myword[0]부분도 let 선언이 안되는것같습니다 ㅠ game.html:<!DOCTYPE html> <html lang="ko"> <head> <title>Game</title> <link href="./styles/game.css" rel="stylesheet"> <script src="./game.js"></script> </head> <body> <div class="wrapper"> <div class="wrapper__header"> <div class="header__title"> <div class="title">GAME</div> <div class="subtitle">TODAY CHOICE</div> </div> <div class="divideLine"></div> </div> <div class="game__container"> <img src="./images/word.png"> <div class="game__title">끝말잇기</div> <div class="game__subtitle">제시어 : <span id="word">코드캠프</span> </div> <div class="word__text"> <input class="textbox" id="myword" placeholder="단어를 입력하세요"> <button class="search" onclick="startWord()">입력</button> </div> <div class="word__result" id="result">결과!</div> </div> <div class="game__container"> <img src="./images/lotto.png"> <div class="game__title">LOTTO</div> <div class="game__subtitle"> 버튼을 누르세요. </div> <div class="lotto__text"> <div class="number__box"> <span class="number1">3</span> <span class="number1">5</span> <span class="number1">10</span> <span class="number1">24</span> <span class="number1">30</span> <span class="number1">34</span> </div> <button class="lotto_button">추첨</button> </div> </div> </div> </body> </html> game.js:const startWord = () => { let myword = document.getElementById("").value let word = document.getElementById("word").innerText let lastword = word[word.length-1] let firstword = myword[0] if(lastword === firstword){ document.getElementById("result").innerText = "정답입니다" document.getElementById("word").innerText = myword docement.getElementById("myword").value = "" } else { document.getElementById("result").innerText="떙!" docement.getElementById("myword").value = "" } }
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
서버사이드렌더링 전 백엔드 서버와 프론트 로그인 차이
서버사이드렌더링 전 새로고침하면 로그인 풀리는건 알겠는데, 재로그인시에 isAuthenticated 가 발동되면서 서버는 계속 로그인중입니다. 이건 서버사이드렌더링 거치면 해결될까요? 아니면 코드가 잘못돼서 그런걸까요... 백엔드서버를 다시 수동으로 종료후 재실행하면 백서버 로그인은 풀립니다
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
중고마켓 상세페이지
안녕하세요 .. 중고마켓에서 너무 많이 해메고 있네요..중고마켓 상세페이지 부분에서 삭제하기, 찜카운트 부분은 로그인 한 사람만 버튼이 작동할까요? _id 오류가 뜨는 이유를 잘 모르겠어서요...(alert창)아니면 id값을 못가져오는건가요? toggleUseditemPick(픽카운터)(delete 부분도 비슷하게 가져오고있습니다.)const onClickPickCount = async () => { try { await toggleUseditemPick({ variables: { useditemId: String(router.query.marketId), }, refetchQueries: [ { query: FETCH_USEDITEM, variables: { useditemId: String(router.query.marketId), }, }, ], }); } catch (error) { if (error instanceof Error) { alert(error.message); } } };이렇게 데이터를 가져오고 있습니다. 어떤게 문제일가요 그리고 어떻게 해야 이 문제들을 해결 할 수 있을까요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
(정보 공유)redux toolkit으로 미들웨어 장착하기
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 loggerMiddleware = ({ dispatch, getState }) => (next) => (action) => { console.log(action); return next(action); }; const serverState = getServerState(); console.log("serverState", serverState); const makeStore = () => configureStore({ reducer, devTools: true, middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(loggerMiddleware), preloadedState: serverState, // SSR }); export default createWrapper(makeStore);redux toolkit으로 미들웨어를 장착하고 싶으시면 getDefaultMiddleware에 concat으로 장착하시면 됩니다 configureStore코든는 제로초님 깃허브에 있습니다
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
강의자료 ppt는 어디서 받을 수 있나요?
안녕하세요 11강에서 강의자료 ppt 파일을 올려주신다고 했는데 어디서 다운로드 받을수 있나요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
Ubuntu 듀얼부팅
안녕하세요 windows 사용자인데 램 24기가라서 듀얼부팅 메뉴얼대로 우분투 설치했습니다 (재부팅하는데 os 윈도우로 할거냐 우분투로 할거냐 선택창이 안떠서 엄청 헤매다가 유투브 찾아보고 결국 해결했네요 ㅠㅠ) 수업자료에 있는 20.04.4 LTS 버전은 안보여서 비슷한 버전으로 20.04.6 LTS로 설치했는데 문제 없겠죠? 그리고 파티션 할당할 때 c드라이브 용량을 최대한 줄여본다 해서 40기가 정도 우분투 환경에 할당해줬는데 충분할까요?빠른 답변 주시면 감사하겠습니다!!
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
싸이월드 실습 4탄 질문이요 ㅠㅠ
싸이월드 실습 4탄 하는 중인데LOTTO 부분에 "특히 버튼과 숫자박스 부분"이 왜 세로로 다닥다닥 붙어있을까요..ㅠgame__container 부분에 flex-direction: column; align-items: center; justify-content: space-between; padding: 20px;가 들어있고lotto__text부분에도display: flex; flex-direction: column; align-items: center; justify-content: space-between;를 넣어봤으나 아무 변화가 없었습니다 ㅠgame.html:<!DOCTYPE html> <html lang="ko"> <head> <title>Game</title> <link href="./styles/game.css" rel="stylesheet"> </head> <body> <div class="wrapper"> <div class="wrapper__header"> <div class="header__title"> <div class="title">GAME</div> <div class="subtitle">TODAY CHOICE</div> </div> <div class="divideLine"></div> </div> <div class="game__container"> <img src="./images/word.png"> <div class="game__title">끝말잇기</div> <div class="game__subtitle">제시어 : <span id="word">코드캠프</span> </div> <div class="word__text"> <input class="textbox" id="myword" placeholder="단어를 입력하세요"> <button class="search">입력</button> </div> <div class="word__result" id="result">결과!</div> </div> <div class="game__container"> <img src="./images/lotto.png"> <div class="game__title">LOTTO</div> <div class="game__subtitle"> 버튼을 누르세요. </div> <div class="lotto__text"> <div class="number__box"> <div class="number1">3</div> <div class="number1">5</div> <div class="number1">10</div> <div class="number1">24</div> <div class="number1">30</div> <div class="number1">34</div> </div> <button class="lotto_button">Button</button> </div> </div> </div> </body> </html>game.css:* { box-sizing: border-box; margin: 0px } html, body{ width: 100%; height: 100%; } .wrapper { width: 100%; height: 100%; padding: 20px; display: flex; flex-direction: column; /* 박스가 wrapper안에 game__container 두개 총 세개*/ align-items: center; justify-content: space-between; } .wrapper__header{ width: 100%; display: flex; flex-direction: column; } .header__title{ display: flex; flex-direction: row; align-items: center; } .title{ color: #55b2e4; font-size: 13px; font-weight: 700; } .subtitle{ font-size: 8px; padding-left: 5px; } .divideLine{ width: 100%; border-top: 1px solid gray; } .game__container{ width: 222px; height: 168px; border: 1px solid gray; border-radius: 15px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 20px; background-color: #f6f6f6; } .game__title { font-size: 15px; font-weight: 900; } .game__subtitle { font-size: 11px; } .word__result { font-size: 11px; font-weight: 700; } .word__text { width: 100%; display: flex; flex-direction: row; justify-content: space-between; } .textbox { width: 130px; height: 24px; border-radius: 5px; } .search { font-size: 11px; font-weight: 700; width: 38px; height: 24px; } .number__box{ width: 130px; height: 24px; border-radius: 5px; background-color: #FFE400 ; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .lotto__text { display: flex; flex-direction: column; align-items: center; justify-content: space-between; } .number1{ font-size: 10px; font-weight: 700px; margin: 5px; } .lotto_button { font-size: 11px; font-weight: 700; width: 62px; height: 24px; }
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션 30 퀴즈
import styled from "@emotion/styled"; import { useState } from "react"; // 스타일 // -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- const Container = styled.div` display: flex; justify-content: center; padding: 100px; `; const Wrapper = styled.table` width: 600px; `; const MyTr = styled.tr` text-align: center; `; const MyTd = styled.td` padding: 20px 0 20px 0; `; // -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- export default function Quiz02() { // 리스트에 뿌려줄 목업 데이터 // -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- const dataList = [ { id: 1, data: "9월달 시스템 점검 안내입니다.", date: "2020.09.19" }, { id: 2, data: "안녕하세요! 공지사항 전달드립니다.", date: "2020.09.17" }, { id: 3, data: "개인정보 처리방침 변경 사전 안내", date: "2020.09.12" }, { id: 4, data: "ios 10.0이하 지원 중단 안내", date: "2020.08.10" }, { id: 5, data: "이용약관 변경 사전 안내", date: "2020.08.01" }, { id: 6, data: "개인정보 처리방침 변경 사전 안내", date: "2020.07.19" }, ]; const [checkList, setCheckList] = useState([]); console.log("현재 체크리스트", checkList); const onClickCheckAll = () => { console.log("받아오는 데이터의 길이", dataList.length); console.log("현재 체크리스트에 들어있는 데이터의 길이", checkList.length); if (checkList.length !== dataList.length) { setCheckList(dataList); //체크 리스트 크기와 데이터 크기가 같지않으면 체크리스트에 데이터를 넣는다. } else { setCheckList([]); } }; const onCheckedItem = (list) => { console.log("내가 누른 체크리스트가 뭔가?", list); // 모든 checkList.id 중에 체크한 list.id값이 없으면 CheckList에 list 값을 넣는다. if (checkList.every((cur) => cur.id !== list.id)) { setCheckList([...checkList, list]); } else { // 체크된것만 제외하고 배열에 담는다. const result = checkList.filter((cur) => cur.id !== list.id); setCheckList(result); } }; const isChecked = (list) => { // 체크박스에 체크할지 안할지 return checkList.some((cur) => cur.id === list.id); //list.id 요소와 checkList.id 요소와 겹치는게 있다면 true를 반환한다. }; return ( <Container> <Wrapper> <tr> <th> <input type="checkbox" onChange={onClickCheckAll} checked={checkList.length === dataList.length} style={{ marginTop: "5px" }} ></input> </th> <th>번호</th> <th>제목</th> <th>작성일</th> </tr> {dataList.map((list, index) => ( // 데이터 배열의 요소와 인덱스 가져오기 <MyTr key={index}> {/* 정적 데이터기 때문에 key값을 인덱스로 설정 */} <MyTd> <input type="checkbox" onChange={() => onCheckedItem(list)} checked={isChecked(list)} style={{ marginTop: "5px" }} /> </MyTd> <MyTd>{list.id}</MyTd> <MyTd>{list.data}</MyTd> <MyTd>{list.date}</MyTd> </MyTr> ))} </Wrapper> </Container> ); }섹션 30 퀴즈 레퍼런스 코드에서 onChange={() => onCheckedItem(list)}이 부분 그냥 화살표 함수로 하는 이유가 있나요?else { // 체크된것만 제외하고 배열에 담는다. const result = checkList.filter((cur) => cur.id !== list.id); setCheckList(result); }이 코드에서 선택한것을 체크해제 했을때 아무것도 체크 되어 있지 않다면 result는 빈값인가요?
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
9장 추가 과제 관련 질문
안녕하세요. 9장강의를 듣고 추가 과제를 시도해보던 중 궁금증이 생겨 질문드립니다.스스로 해보기 -> 팔로잉 끊기에서 destory와 라우터를 사용하라고 안내해주셨는데 user자체를 삭제하는 것이 아닌 중간테이블(follow)에서 해당 로우만 삭제하는 방법이 따로 있나요? if (user) { const a = await user.destroy({ where: { Followings: { followerId: req.params.id } }, });위와 같이 방법을 여러가지로 시도해보았지만 계속해서 유저 삭제(탈퇴)가 되는 상황이라 도움주시면 감사하겠습니다..!
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
postman에 /login으로 send 시 무한 로딩 에러
postman에서는 이런 오류가 뜨구요..위에는 index.js 파일이고User.js 파일입니다!몇일을 열심히 구글링해봐도 답을 찾을 수가 없네요,, register은 잘 작동합니다. 어떤 문제가 있는지 부탁드려요,,,
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
로그 이미지 주소 중 절대 경로 원리에 관한 질문
본 강의 중 로그가 나오지 않는 이슈에 관하여경로 설정에 문제가 있다고 하셨고, grab_market_web/src/App.js의 내용 중 로그 src의 경로를"./imgages/icons/log.png"에서 -> "/imgages/icons/log.png"으로 변경하라고 하였습니다. 작동은 잘 되는데, 작동 원리가 궁금합니다./ 절대값 root경로의 시작은 어디로 설정되어 있나요?이전에는 메인 화면에서는 ./ 상대 경로 중, 현재 경로로 설정되어 있었는데 잘 작동했던 이유도 궁금합니다.App.js파일의 내용이니까 App.js가 존재하는 grab_market_web/src 디렉토리가 현재 경로라고 이해되는데,그보다 상위 디렉토리에 존재하는 grab_market_web/public이 ./ 현재 경로로 인식되어grab_market_web/public/images가 호출 되는 것도 이해가 잘 되지 않으며/ 절대 경로로 설정시에도grab_market_web/public/images가 호출되는 것이 잘 이해가 되지 않습니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
redux toolkit에서는 redux thunk가 들어있는건가요?
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 }); }; export default createWrapper(makeStore); https://redux-toolkit.js.org/api/getDefaultMiddleware이걸 읽어보니configureStore에서 middleware의getDefaultMiddleware()에 redux thunk가 이미 추가가 되어있는거 같은데 맞나요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
이 강의에서 타입스크립트를 사용하지 않은 이유가 있나요??
요즘은 타입스크립트가 대세라는 소리를 어디서 들은 것 같아서 질문드립니다.왜 타입스크립트를 안썼냐고 따지는 것은 절때 아니고...단순히 자바스크립트를 사용했는데 어떠한 의도를 갖고 했는지가 궁금합니다.작성하기가 쉬울 수도 있고, 코드의 길이가 짧을 수도 있고, 기존에 만들어진게 자바스크립트일 수도 있다는 생각이 들긴 하지만 직접 물어보는게 더 좋을꺼같아서 질문드립니다.
-
미해결Slack 클론 코딩[백엔드 with NestJS + TypeORM]
nest-morgan 패키지 사용
안녕하세요! 강의 마지막 부분에 nest-morgan 패키지를 사용하면 된다고 하셨는데요. npm 문서를 확인해보니 해당 패키지가 deprecated 되어 있다고 명시돼 있습니다. 혹시 여전히 해당 패키지를 사용하고 계신지 혹은 다른 로그 패키지를 사용하고 계신지 궁금합니다!