이렇게 갈색으로 뜨는데, 에러가 되는 이유가 이 때문인 것 같아요. 무슨 이유 때문에 그럴까요? ㅠㅠㅠ

위는 선생님 파일 다운로드 한거의 package.json 이거는 제 포폴의 package.json 입니다ts-node 라든지 devDependencies에서도 빠진 게 몇개 있어보이는데.. 터미널에서 뭘 설치해야 할까요?? 수업 코드에서도 똑같이 설치한것같은데 types.ts 내용이 다르더라구요. ㅠㅠ이건 수업 코드 내의 package.json 입니다별 다를 건 없어 보입니다.. 근데 둘다 types.ts 내부 내용들이 누락된 게 너무 많더라구요 설치는 똑같이 한 거 같은데 버전 문제일까요?(types.ts)이런식으로 많이 다릅니다.. (오른쪽이 수업코드) +추가질문포트폴리오 파일인데 저런 오류가 뜹니다.. types.ts 에 누락된 내용이 많아서 그런걸까요?

다른 공부하시는분들도 잘 적용됐는지 확인하는데 번거로움이있을거 같아서 말씀드려요!

제가 리액트, node.js의 RestAPI를 다루는 부분이 필요해서 수업을 듣게 되었습니다.(전체적인 리액트, node.js의 활용법도 필요함) 그런데 Graphql이란 것이 있어서 그 부분을 뛰어넘고 제가 필요한 부분만 들으려고 하니까 섹션 8과 9가 Graphql을 모르면 진행이 안되는 것 같더라고요.  이런 경우 실무에서도 이런 식으로 많이 쓰시는지, 점점 바뀌는 추세인 건지 궁금합니다.

안녕하세요 질문 있습니다!refetchQueries 적을 때 자동완성되는 익스텐션이 뭔지 알 수 있을까용?

redux-saga 쪼개고 reducer 연결 하려고 하니 user reducer만 반응하고 LOG_IN_SUCCESS 는 반응을 하지 않습니다. 커뮤니티 게시판에서 여러가지를 확인해보고 해도 어디 부분이 잘못 된지 몰라 올려봅니다.. 제가 작성한 코드는 이러합니다. store/configureStore.js import { applyMiddleware, createStore, compose } from "redux"; import createSagaMiddleware from "redux-saga"; import { createWrapper } from "next-redux-wrapper"; import { composeWithDevTools } from "redux-devtools-extension"; import reducer from "../reducers"; import rootSaga from "../sagas"; const configureStore = (context) => { console.log("context", context); const sagaMiddleware = createSagaMiddleware(); const middlewares = [sagaMiddleware]; const enhancer = process.env.NODE_ENV === "production" ? compose(applyMiddleware(...middlewares)) // 배포용 : composeWithDevTools(applyMiddleware(...middlewares)); const store = createStore(reducer, enhancer); store.sagaTask = sagaMiddleware.run(rootSaga); return store; }; const wrapper = createWrapper(configureStore, { debug: process.env.NODE_ENV === "development", }); export default wrapper;reducers/index.js import { HYDRATE } from "next-redux-wrapper"; // HYDRATE = action import { combineReducers } from "redux"; import user from "./user"; import post from "./post"; const rootReducer = combineReducers({ index: (state = {}, action) => { switch (action.type) { case HYDRATE: console.log("HYDRATE", action); return { ...state, ...action.payload }; default: return state; } }, user, post, }); export default rootReducer;  reducers/user.js export const initialState = { isLoggingIn: false, // 로그인 시도중 isLoggedIn: false, // 로그인 isLoggingOut: false, // 로그아웃 시도중 meUser: null, signUpData: {}, loginData: {}, }; export const LOG_IN_REQUEST = "LOG_IN_REQUEST"; export const LOG_IN_SUCCESS = "LOG_IN_SUCCESS"; export const LOG_IN_FAILURE = "LOG_IN_FAILURE"; export const LOG_OUT_REQUEST = "LOG_OUT_REQUEST"; export const LOG_OUT_SUCCESS = "LOG_OUT_SUCCESS"; export const LOG_OUT_FAILURE = "LOG_OUT_FAILURE"; export const loginRequestAction = (data) => ({ type: LOG_IN_REQUEST, value: data, }); export const logoutRequestAction = () => ({ type: LOG_OUT_REQUEST, }); const reducer = (state = initialState, action) => { // prettier-ignore switch(action.type) { case LOG_OUT_REQUEST : return {...state, isLoggingIn : true}; case LOG_IN_SUCCESS : return {...state, isLoggingIn : false, isLoggedIn:true, meUser:{...action.value, nickName:"Jay"}}; case LOG_IN_FAILURE : return {...state, isLoggingIn : false, isLoggedIn:false }; case "LOG_OUT_REQUEST" : return {...state, isLoggingOut:true}; case "LOG_OUT_SUCCESS" : return {...state, isLoggingOut:false, isLoggedIn:true, meUser:null}; case "LOG_OUT_FAILURE" : return {...state, isLoggingOut:false}; default: return state; } }; export default reducer;sagas/index.jsimport { all, fork, call } from "redux-saga/effects"; import userSaga from "./user"; export default function* rootSaga() { yield all([fork(userSaga)]); } sagas/user.js import { all, fork, put, delay, takeLatest } from "redux-saga/effects"; import { LOG_IN_FAILURE, LOG_IN_REQUEST, LOG_IN_SUCCESS, } from "../reducers/user"; function* logIn(action) { try { console.log("saga logIn"); // const result = yield call(logInAPI); yield delay(1000); yield put({ type: LOG_IN_SUCCESS, value: action.value, }); } catch (err) { console.error(err); yield put({ type: LOG_IN_FAILURE, error: err.response.data, }); } } function* watchLogIn() { yield takeLatest(LOG_IN_REQUEST, logIn); } function* watchLogOut() { yield takeLatest("LOG_OUT_REQUEST"); } export default function* userSaga() { yield all([fork(watchLogIn), fork(watchLogOut)]); }

event.target에 왜 id 가 없다 나오는지 알고 싶습니다

리트윗 에러시, alert를 띄워주실 때, 게시글 . 수만큼 리렌더링이 발생하셔서 index.js 상위 페이지로 에러를 올려주셨는데, 설명하실떄 리트윗 에러에다가, 게시글 id까지 같이 넣어서, 그. 포스트 카드에만 에러메시지가 나오게 해서 해결하실 수있다고 하셨습니다. 어떤식으로 코드를 작성하면 되는지 해당 부분에 대한 코드 작성법도 알고싶습니다.어떤식으로 postId를 넘겨주고 useEffect를 활용할 수 있는지 알고 싶습니다.function retweetAPI(data) { return axios.post(`/post/${data}/retweet`); } function* retweet(action) { try { const result = yield call(retweetAPI, action.data); yield put({ type: RETWEET_SUCCESS, data: result.data, }); } catch (err) { console.error(err); yield put({ type: RETWEET_FAILURE, error: err.response.data, }); } }

섹션 13의 본문 파트는 잘 따라 갔는데 혼자 freeboard에 진행하려 하니 계속 오류가 나네요..답변주신대로 설치 명령어의 오타를 수정해서 yarn add -D @graphql-codegen/typescript로 한 뒤 yarn generate를 실행하니 type.ts 이 안생기고 error Command failed with exit code 127. 라는 에러가 발생하네요ㅠㅠ 설치 파트에서 계속 막히니 힘드네요.. 확인 한번 해주실 수 있으실까요?

SyntaxError: Cannot use import statement outside a module이란 에러가 발생하는데 왜그런걸까요 stackoverflow찾다보니 nextjs 바벨설정이 src 하위를 보게되있어서 es6문법을 변환못해준다고 next.config.js 파일에 아래 transpilePackages 설정을 저렇게 넣어주면 해당 오류가 사라지긴하는대 매번 이렇게 해야되는건지... 근본적인 해결하려면 어떻게 해야할까요const nextConfig = { reactStrictMode: true, transpilePackages: [ 'antd', '@ant-design', 'rc-util', 'kitchen-flow-editor', '@ant-design/pro-editor', 'zustand', 'leva', 'rc-pagination', 'rc-picker', 'rc-notification', 'rc-tooltip' ], }

styles.js 자동완성이 안되는데 익스텐션 뭐 설치해야되나요?

다음 부분과 같이 아주 작게 이상한 위치에 나오는데 이를 옮기는 방법을 알고 싶습니다

아래코드를 입력했는데, newLi dblclick했을때 삭제처리가 되지 않습니다. 문제가 뭘까요? const todoInput = document.querySelector("#todo-input"); const createTodo = function () { const todoList = document.querySelector("#todo-list"); //List자체를 받아오기 const newLi = document.createElement("li"); const newSpan = document.createElement("span"); /** * pseudo: (addEventListner) * 할일이 완료가 된지 안된 일인지 알 수가 없음 -> EventListner를 추가 * 버튼태그와 함께 온클릭 이벤트를 생성 */ //02-addEventListner파트: 버튼태그 추가 및 Event속성(onClick 추가) const newBtn = document.createElement("button"); newBtn.addEventListener("click", () => { //클릭을 했을 때 어떻게 할지에 대한 내용을 익명 함수로 지정 newLi.classList.toggle("complete"); //버튼을 눌렀을 때 새로운 클래스를 추가해준다 }); //02-addEventListner: 당연히 삭제도 되어야할텐데... (더블클릭 -> 삭제) newLi.addEventListener("dblclick", () => { newLi.remove(); }); newSpan.textContent = todoInput.value; newLi.append(newBtn); newLi.appendChild(newSpan); todoList.appendChild(newLi); //왜 굳이 span태그를 만들고 span 태그를 List에 추가한 건지는 알 수가 없으나.. 나중에 알려주겠지.. todoInput.value = " "; console.log(newLi); }; //여기까지만 했을때는 기능상 부족한 부분이 상당히 많음 const keyCodeCheck = function () { if (window.event.keyCode === 13 && todoInput.value) { //만약 키보드값에 대해 enter값이 눌리면 -> createTodo(); } };

안녕하세요 과제 중 궁금한 점이 있어 질문 남깁니다 pages - index 파일export default function DetailBoardPage(): JSX.Element { return ( <> <DetailBoard></DetailBoard> <CommentWrite></CommentWrite> <CommentList></CommentList> </> ); }board list presenter 파일export default function CommentListItemUI( props: ICommentListItemUI ): JSX.Element { // 수정 아이콘 클릭 시 수정 화면으로 전환 const [isEdit, setIsEdit] = useState(false); const onClickUpdateIcon = (): void => { setIsEdit(true); return ( <> {!isEdit && ( . . . )} {isEdit && ( <CommentWrite item={props.item} isEdit={true} setIsEdit={setIsEdit} ></CommentWrite> )} </> ); } CommentWrite 컴포넌트를 두 곳에서 사용하고 있습니다1번에서는 아무런 props 인자를 넘겨주지 않고 있고요2번에서는 3가지 props 인자를 넘겨주고 있습니다 types 파일export interface ICommentWrite { item?: IBoardComment; isEdit?: boolean; setIsEdit?: Dispatch<SetStateAction<boolean>>; }이에 맞춰 작성한 interface 입니다setIsEdit state에 ? 기호를 붙이니CommentWrite 파일(바로 아래 파일)의 props.setIsEdit state 사용 구간에서 '정의되지 않음'일 수 있는 개체를 호출할 수 없다는 오류가 뜹니다 export default function CommentWrite(props: ICommentWrite): JSX.Element { const onClickUpdate = async (): Promise<void> => { . . . props.setIsEdit(false); }; const onClickCancel = (): void => { props.setIsEdit(false); }; return ( . . . ); } 찾아보니 undefined / null 값을 제대로 다루지 못할 때 생기는 오류라고 하는데요해당 state는 한 곳에서만 props 인자로 전달하고 있기 때문에 undefined 값이 나오는 경우가 필연적입니다이런 경우 해결할 수 있는 방법이 있을까요? 만약 타입 지정과 관련된 방법으로 해결할 수 없는 문제라면 props 인자를 한 곳에서만 받도록 파일을 합칠까 합니다

Github 연결하려 하는데 마지막 단계에서 오류가 자꾸 떠요ㅜㅠ 홈페이지에서 precamp 파일을 지웠다가 다시 만들어도 보고 했는데 계속 저런 알 수 없는 오류가 뜨네요,, 어떻게 다시 연결할 수 있을까요? ㅜㅅㅜ

안녕하세요쇼핑몰 레퍼런스 css 코드 104줄에 있는 .item .imgBox img는 왜 들어가있는지 알수있을까요?transition하고 아무 상관 없지 않나요?

상품등록 페이지를 cypress 를 통해 test 해보던 도중 kakao map 을 사용해 주소입력 하는 부분에서 문제가 발생하고 있습니다. 개발자 도구를 사용해서 kakao map 의 input 의 class 확인해 해당 class name 으로 get()요청을 했지만 인식을 못하고 있습니다

FAIL __test__/test/index.test.ts ● Test suite failed to run ReferenceError: TextEncoder is not defined 1 | // 하드코딩된 미니 백엔드 > 2 | import { graphql } from "msw"; | ^다음과 같은 에러가 뜨는 이유가 뭘까요?찾아보니 node 18을 사용하지 않아 발생하는 문제라는데 node -v 을 확인해보면 제대로 18버전을 이용하고 있습니다

안녕하세요,슬랙 채널에서 Next 14 강의 업로드 예정이시라는 글을 봤습니다. 해당 강좌의 리뉴얼 버전이라고 보면 될까요? 차이점이 궁금합니다.감사합니다.

//app.js app.use('/', express.static(path.join(__dirname, 'uploads'))); //PostForm.js import { Button, Form, Input } from 'antd'; import React, { useCallback, useEffect, useRef } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import styled from 'styled-components'; import useInput from '../hooks/useInput'; import { ADD_POST_REQUEST, REMOVE_IMAGE, UPLOAD_IMAGES_REQUEST, addPost, } from '../reducers/post'; const FormWrapper = styled(Form)` margin: 10px 0 20px; `; const ButtonStyle = styled(Button)` float: 'right'; `; const PostForm = () => { const { imagePaths, addPostLoading, addPostDone } = useSelector( (state) => state.post ); const dispatch = useDispatch(); const imageInput = useRef(); const [text, onChangeText, setText] = useInput(''); useEffect(() => { if (addPostDone) { setText(''); } }, [addPostDone]); const onSubmitForm = useCallback(() => { if (!text || !text.trim()) { return alert('게시글을 작성하세요.'); } const formData = new FormData(); imagePaths.forEach((p) => { formData.append('image', p); }); formData.append('content', text); return dispatch({ type: ADD_POST_REQUEST, data: formData, }); }, [text, imagePaths]); const onClickImageUpload = useCallback(() => { imageInput.current.click(); }, [imageInput.current]); const onChangeImages = useCallback((e) => { console.log('images', e.target.files); //배열모양을 띄는 객체 const imageFormData = new FormData(); [].forEach.call(e.target.files, (f) => { imageFormData.append('image', f); }); dispatch({ type: UPLOAD_IMAGES_REQUEST, data: imageFormData, }); }, []); const onRemoveImage = useCallback( (index) => () => { dispatch({ type: REMOVE_IMAGE, data: index, }); }, [] ); return ( <FormWrapper encType='multipart/form-data' onFinish={onSubmitForm}> <Input.TextArea value={text} onChange={onChangeText} maxLength={140} placeholder='어떤 신기한 일이 있었나요?' /> <div> <input onChange={onChangeImages} type='file' name='image' hidden multiple ref={imageInput} /> <Button onClick={onClickImageUpload}>이미지 업로드</Button> <ButtonStyle type='primary' htmlType='submit'> Twit </ButtonStyle> </div> <div> {imagePaths.map((item, i) => ( <div key={item} style={{ display: 'inline-block' }}> <img src={`http://localhost:3065/${item}`} style={{ width: '200px' }} alt={item} /> <div> <Button onClick={onRemoveImage(i)}>제거</Button> </div> </div> ))} </div> </FormWrapper> ); }; export default PostForm; //post.js const multer = require('multer'); const path = require('path'); const fs = require('fs'); const { Post, Image, Comment, User } = require('../models'); const { isLoggedIn } = require('./middlewares'); const router = express.Router(); try { fs.accessSync('uploads'); } catch (error) { console.log('uploads 폴더가 없으므로 생성합니다.'); fs.mkdirSync('uploads'); } //이미지나 동영상처리는 웬만하면 프론트에서 클라우드로 바로 올리는게 좋다. const upload = multer({ storage: multer.diskStorage({ destination(req, file, done) { done(null, 'uploads'); }, //배포때는 s3로 , 개발에는 드라이브에 filename(req, file, done) { const ext = path.extname(file.originalname); //확장자 추출 const basename = path.basename(file.originalname, ext); done(null, basename + '_' + new Date().getTime() + ext); //이나당151817842.png }, }), limits: { fileSize: 20 * 1024 * 1024 }, //20MB }); router.post('/', isLoggedIn, upload.none(), async (req, res, next) => { // POST /post try { const post = await Post.create({ content: req.body.content, UserId: req.user.id, }); if (req.body.image) { if (Array.isArray(req.body.image)) { const images = await Promise.all( req.body.image.map((image) => Image.create({ src: image })) ); await post.addImages(images); } else { const image = await Image.create({ src: req.body.image }); await post.addImages(image); } } console.log('POST', post); const fullPost = await Post.findOne({ where: post.id, include: [ { model: Image, }, { model: Comment, include: [{ model: User, attributes: ['id', 'nickname'] }], }, { model: User, //작성자 attributes: ['id', 'nickname'], }, { model: User, //좋아요 누른 사람 as: 'Likers', attributes: ['id'], }, ], }); res.status(201).json(fullPost); } catch (error) { console.error(error); next(error); } }); router.post( '/images', isLoggedIn, upload.array('image'), async (req, res, next) => { //POST /post/images try { console.log(req.files); res.json(req.files.map((v) => v.filename)); } catch (error) { console.error(error); next(error); } } );   안녕하세요 제로초님! 질문이 있습니다.. 파일은 제대로 올라가서 uploads 폴더안에 있는데 화면에서 이미지를 가져오지 못하고있습니다.. 프론트-백 api통신도 잘 되는데, 왜 개발자도구-네트워크에서 이미지를 가져올 수 없는지 이유를 모르겠습니다 ㅠㅠ