DirectMessageimport React, { useCallback, useState } from 'react'; import gravatar from 'gravatar'; import { Container } from 'semantic-ui-react'; import { Header } from './styles'; import useSWR from 'swr'; import { useParams } from 'react-router'; import fetcher from '@utils/fetcher'; import ChatBox from '@components/ChatBox'; import useInput from '@hooks/useinput'; import axios from 'axios'; import { IDM } from '@typings/db'; import ChatList from '@components/ChatList'; const DirectMessage = () => { const { workspace, id } = useParams<{ workspace: string; id: string }>(); const { data: userData } = useSWR(`/api/workspaces/${workspace}/users/${id}`, fetcher); const { data: myData } = useSWR('/api/users', fetcher); const { data: chatData, mutate: mutateChat, revalidate, } = useSWR<IDM[]>(`/api/workspace/${workspace}/dms/${id}/chats?perPage=20&page=1`, fetcher); const [chat, onChangeChat, setChat] = useInput(''); const onSubmitForm = useCallback( (e) => { e.preventDefault(); console.log('chat'); if (chat?.trim()) { axios .post(`/api/workspaces/${workspace}/dms/${id}/chats`, { content: chat, }) .then(() => { revalidate(); setChat(''); }) .catch(console.error); } }, [chat], ); if (!userData || !myData) { return null; } return ( <Container> <Header> <img src={gravatar.url(userData.email, { s: '24px', d: 'retro' })} alt={userData.nicknam} /> <span>{userData.nickname}</span> </Header> <ChatList chatData={chatData} /> <ChatBox chat={chat} onChangeChat={onChangeChat} onSubmitForm={onSubmitForm} /> </Container> ); }; export default DirectMessage;ChatListimport React, { VFC } from 'react'; import { ChatZone, Section } from './styles'; import { IDM } from '@typings/db'; import Chat from '@components/Chat'; interface Props { chatData?: IDM[]; } const ChatList: VFC<Props> = ({ chatData }) => { return ( <ChatZone> {chatData?.map((chat) => { <Chat key={chat.id} data={chat} />; })} </ChatZone> ); }; export default ChatList;  보여드린 코드처럼 chatbox 중간에 chatlist를 넣게 되면 자동으로 아래로 내려갈 수 있게 했습니다.말씀대로 chatlist를 만들고 directmessage사이에 chatlist를 import 했습니다. 그런데 아래로 내려오지 않고 상단으로 그대로 고정되어 있어서 아무리 찾아보려고 해도 답이 안나오는거 같아 질문 남겨드립니다 ㅠ   

안녕하세요 리액트 기초 및 폴더구조와 이모션 듣고있는데 세팅 다 마치고 yarn 데브 쳐서 보니까 이 메세지가 뜨더라고요저는 초기에 아예 저기에 골뱅이가 써져있어서 다시..으로 바꾸고 다시 해봤습니다. 그런데도 이 오류가 떠서 보니까 선생님이 보여준 코드랑제 index.js코드랑 미묘하게 다르더라고요?선생님 코드는이건데 제 초기 코드는이거입니다.. 리액트 버전도 잘 낮췄는데왜 다른 걸까요? 갑자기 난데없는 백틱과 변수표현식도 있고......일일이 지워서 선생님 강의랑 맞게 고쳐야할까요? 혹시 index.js전체 코드를 구할 수 있을까요? 보니까 Home.module.css도 선생님 거랑 달라요ㅠㅠ.title은 없고이런것만 있어요.노션 보고 지울건 지우고 순차대로 깐 게 맞는데왜 제 건 이럴까요ㅠㅠ 현재 제 버전입니다"next": "12.1.0", "react": "17.0.2", "react-dom": "17.0.2"  

안녕하세요~ https://practice.codebootcamp.co.kr/graphql 이 링크로 접속했는데 무한 로딩?이 되면서 접속이 안되는 현상이 발생합니다..! 와이파이도 바꿔보고 핸드폰에서도 접속해보고 했는데 계속 이러더라구요 아까는 잘 접속이 됐었는데... 다른 주소(https://backendonline.codebootcamp.co.kr/graphql) 로 접속을 할땐 잘 되는데 유독 저 주소만 그러네요!!  그래서인지 실습할 때(apollo-client의 사용 및 _app.js 작동원리 수업) 요청하기 버튼을 클릭하면계속 아무 반응이 없다가 기다리다보면 이렇게 뜨더라구요!! 왜그러는지 모르겠어서 진도를 못나가구 있습니다..ㅜ.ㅜ

타입스크립트를 깔때 devdependencies에서 애초에 eslint하고 eslint-config-next가 같이 안까ㅓㄹ려서 수동으로 깔아줬는데 그래도 안되네요. 자꾸 기초적인것들 질문해서 죄송합니다.

모든 사용자가 등록한 상품을 보여주고 거기다 페이지네이션 까지 걸고 싶은데내가 구매한 상품 카운트 api는 있지만전체 상품 구매 api는 없는거 같아서요 ㅜㅜ

안녕하세요postman이 크롬에선 더이상 postman 플러그인을 제공하지 않습니다... 그래서 아예 postman을 프로그램으로 설치를 해야했고 이런것들 때문에 계속 헤매고있어요...ㅠㅠ이런 수정된 부분은 노션에라도 알려주시면 좋을 것 같아요..!! 

항상 수업 잘 듣고있습니다! 질문이 하나 있어서 글 올립니다. 다름이 아니라ver2 section2 듣고 강의 들을때까지는 문제 없었는데 이제 수업 다 듣고 포트폴리오 작성하려고 하는데 yarn dev를 터미널에 쳤는데 에러가 납니다. Error: UNKNOWN: unknown error, readlink 'C:\Users\82109\OneDrive\바탕 화면\codecamp-frontend-mentee\class\.next\server\middleware-manifest.json'] { errno: -4094, code: 'UNKNOWN', syscall: 'readlink', path: 'C:\\Users\\82109\\OneDrive\\바탕 화면\\codecamp-frontend-mentee\\class\\.next\\server\\middleware-manifest.json'error Command failed with exit code 1. 이렇게 에러가 나서 노드모듈 지우고 캐쉬 지우고 다시 시작해 봐라 구글링했더니 저렇게 하라고 해서 했는데도 안되더라구요 ㅠㅠ 근데 강사님 포트폴리오 리뷰 해주시는거는 또 되더라구요 버전 문제 인건지 ㅠㅠ

먼저 제가 작성한 Lists.js의 소스코드는 아래와 같습니다. import React from 'react' import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd'; export default function Lists({ todoData, setTodoData }) { //todo Checkbox 클릭했을때 실행되는 함수 const handleCompletedChange = (id) =>{ let newTodoData = todoData.map((data) =>{ if(data.id === id){ data.completed = !data.completed; } return data; }); setTodoData(newTodoData); }; //X버튼 클릭시 실행되는 함수 const handleClick = (id) => { let newTodoData = todoData.filter((data) => data.id !== id); console.log("newTodoData",newTodoData); setTodoData(newTodoData); }; //Drag가 끝날때 실행되는 함수 const onDragEnd = (result) =>{ console.log("result", result) } return ( <div> <DragDropContext onDragEnd={onDragEnd}> <Droppable droppableId='todo'> {(provided) => ( <div ref={provided.innerRef} {...provided.droppableProps} > {todoData.map((data, index) => ( <Draggable key={data.id} draggableId={data.id.toString()} index={index} > {(provided, snapshot) => { <div key={data.id} {...provided.draggableProps} ref={provided.innerRef} {...provided.dragHandleProps} className={`${snapshot.isDragging ? "bg-gray-300": "bg-gray-200"} flex items-center justify-between w-full px-4 py-1 my-2 text-gray-600 rounded bg-gray-200`} > <div className='items-center'> {/* Checkbox */} <input className='mr-3' type="checkbox" defaultChecked={data.completed} onChange={()=>handleCompletedChange(data.id)} /> {/* Todo Contents */} <span className={data.completed ? "line-through":"none"}>{data.title}</span> </div> {/* + Button */} <div> <button className='px-4 py-2 float-right text-white' onClick={()=>handleClick(data.id)}>X</button> </div> </div> }} </Draggable> ))} {provided.placeholder} </div> )} </Droppable> </DragDropContext> </div> ); } 스타일 관련부분 말고는 강사님이 작성하신 소스코드와 일치합니다. 그런데 실행하면 위와 같은 오류가 발생합니다. 질문 게시판에서 유사한 사례가 있나 싶어서 찾아봤습니다. index.js 파일에서 Restrict 모드를 제거하면 충돌에러를 없앤다고 하는데 지워도 바뀌는게 없습니다. 무엇이 원인인지 github이나 stackoverflow를 찾아봤는데두 마땅히 나오는게 없네요 ref 라는 이름이 문제일 수도 있다는 글을 보고 innerRef라고 변경해서 작성했는데도 똑같은 에러가 발생했습니다. 이유가 뭔지 알려주시면 감사하겠습니다.  혹시 몰라 App.js 의 소스코드는 아래와 같고,import React, { useState } from "react"; import "./App.css"; import List from "./components/Lists"; import Form from "./components/Form"; function App(){ const [todoData, setTodoData] = useState([]); const [value, setValue] = useState(""); //+ 버튼을 눌렀을때 실행되는 함수 const handleSubmit = (e) =>{ //form 안의 input에 값을 입력했을때 페이지 리로드 되는걸 막아줌 e.preventDefault(); //new todo data let newTodo = { id:Date.now(), title:value, completed: false, }; //add new todo data on to the original todo list setTodoData((prev) =>[...prev, newTodo]); setValue(""); } return( <div className="flex items-center justify-center w-screen h-screen bg-blue-100"> <div className="w-full p-6 m-4 bg-white rounded-lg shadow-md lg:w-3/4 lg:max-w-lg"> <div className="flex justify-between mb-3"> <h1 className="text-xl font-mono">Todo-List</h1> </div> {/* Todo List */} <List todoData={todoData} setTodoData={setTodoData}/> {/* Todo List add button*/} <Form handleSubmit={handleSubmit} value={value} setValue={setValue}/> </div> </div> ) } export default App;제가 사용한 react와 react-beautiful-dnd의 버전은 { "name": "todoapp", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-beautiful-dnd": "^13.1.1", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "autoprefixer": "^10.4.14", "postcss": "^8.4.23", "tailwindcss": "^3.3.2" } } 입니다.

새일기를 작성하거나, 수정하게되면 두개씩 렌더링이 이루어 집니다.https://github.com/Byeong-Gwan/React/tree/main/Emotion-Diary

요번에 프로젝트 2를 시작했는데 뭐가 문제인지 모르겠는데 계속 오류가 뜨면서 문제가 발생하네요 분명히 아침에 작성했을때는 오류가 없이 잘 작동되었는데 말이죠... 혹시 프로젝트 1 처럼 관련 코들를 codesandbox에 제공이 가능할까요?

항상 이런데 도대체 뭐가 문제인지 모르겠네요 import {useRouter} from `next/router`에서 오류가나네요

import { useState, useEffect, useRef, useMemo } from "react"; import "./App.css"; import DiaryEditor from "./DiaryEditor"; import DiaryList from "./DiaryList"; import OptimizeTest from "./OptimizeTest"; const App = () => { const [data, setData] = useState([]); const dataId = useRef(0); const getData = async () => { const res = await fetch( "https://jsonplaceholder.typicode.com/comments" ).then((res) => res.json()); const initData = res.slice(0, 10).map((it) => { return { author: it.email, content: it.body, emotion: Math.floor(Math.random() * 5) + 1, created_date: new Date().getTime(), id: dataId.current++, }; }); setData(initData); console.log(initData); }; useEffect(() => { getData(); }, []); const onCreate = (author, content, emotion) => { const created_date = new Date().getTime(); const newItem = { author, content, emotion, created_date, id: dataId.current, }; dataId.current += 1; setData([newItem, ...data]); }; const onRemove = (targetId) => { const newDiaryList = data.filter((it) => it.id !== targetId); console.log(newDiaryList); setData(newDiaryList); }; const onChange = (targetId, newContent) => { for (let i in data) { if (data[i].id === targetId) { data[i].content = newContent; } } setData([...data]); }; const getAnalysis = useMemo(() => { console.log("일기 분석 시작 "); const goodCount = data.filter((it) => it.emotion >= 3).length; const badCount = data.length - goodCount; const goodRatio = (goodCount / data.length) * 100; return { goodCount, badCount, goodRatio }; }, [data.length]); const { goodCount, badCount, goodRatio } = getAnalysis; return ( <div className="App"> <OptimizeTest /> <DiaryEditor onCreate={onCreate} /> <div>전체 일기 : {data.length}</div> <div>좋은 감정 점수 개수: {goodCount}</div> <div>나쁜 감정 점수 개수: {badCount}</div> <div>좋은 감정 점수 비율: {goodRatio}%</div> <DiaryList onRemove={onRemove} onChange={onChange} diaryList={data} /> </div> ); }; export default App;

제로초님 강의를 보면 Rea 만 적어도 React로 바로 자동완성코드가 아래에 뜨는데 저는 직접 다 입력해야 하네요? 즉, 제로초님 IDE는 CDN으로 불러온 react 라이브러리를 IDE에서 함수들을 미리 대기시켜놓고 있는 것 같고제가 쓰는 vscode에서는 react 라이브러리를 불러와도 IDE가 아무것도 모르고 있는 것 같은 느낌이 듭니다또 onClick 이나 onSubmit 이런 함수들도 자동완성이 안됩니다

안녕하세요! 강의를 들으면서 React를 공부 중입니다! 다름이 아니라 리덕스 부분까지 진행을 하였는데 에러가 나면서 UI가 보이지 않습니다ㅠㅠ 강의를 몇번 돌려보면서 다른 부분은 없는거 같은데 어떻게 해야할까요..?에러내용소스코드./store/userSlice.jsimport { createSlice } from "@reduxjs/toolkit"; const initalState = { userData: { id: '', email: '', name: '', role: 0, image: '', }, isAuth: false, isLoading: false, error: '' } const userSlice = createSlice({ name: 'user', initalState, reducers: {}, extraReducers: (buider) => { } }) export default userSlice.reducer; ./store/index.jsimport { combineReducers, configureStore } from "@reduxjs/toolkit"; import userReducer from "./userSlice"; import storage from "redux-persist/lib/storage"; import { FLUSH, PAUSE, PERSIST, PURGE, REGISTER, REHYDRATE, persistStore, persistReducer, } from "redux-persist"; const rootReducer = combineReducers({ user: userReducer }) const persistConfig = { key: 'root', storage, }; const persistedReducer = persistReducer(persistConfig, rootReducer); export const store = configureStore({ reducer: persistedReducer, middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: { ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER], }, }), }); export const persistor = persistStore(store); ./main.jsximport React from "react"; import ReactDOM from "react-dom/client"; import App from "./App.jsx"; import "./index.css"; import { BrowserRouter } from "react-router-dom"; import { Provider } from "react-redux"; import { store, persistor } from "./store"; import { PersistGate } from "redux-persist/integration/react"; ReactDOM.createRoot(document.getElementById("root")).render( <BrowserRouter> <Provider store={store}> <PersistGate loading={null} persistor={persistor}> <App /> </PersistGate> </Provider> </BrowserRouter> );  

사진첨부 부분에 이미지를 넣었는데 오류가 뜨는데 이유가 뭘까요?

sudo service nginx start 할때 마다 Job for nginx.service failed because the control process exited with error code.See "systemctl status nginx.service" and "journalctl -xeu nginx.service" for details.이에러가 뜹니다https://www.zerocho.com/category/NodeJS/post/5ef450a5701d8a001f84baeb 이블로그 보면서 했습니다 ㅠㅠ

배포까지 다 진행을 했는데aws비용이 청구가 되가지구요,제가 설정을 잘못한걸까요??

저는 강사님처럼 빽틱을 쓰면 글자로 "" 안에 글쓴거처럼 글자로 읽는데 상관없는건가요?

위 내용은 select Box에 "선택" 이라는 걸 하나 추가 하고 싶은데 처음은 되지만 두번째가 되면 에러가 납니다. 분기 처리를 해야될 거 같은데 제가 너무 초보라 아무리 생각해도 모르겠네요 ㅠㅠ 알려주시면 감사하겠습니다

getCurrentPosition() 및 watchPosition()은 더 이상 안전하지 않은 출처에서 작동하지 않습니다. 이 기능을 사용하려면 애플리케이션을 HTTPS와 같은 안전한 출처로 전환하는 것을 고려해야 합니다. 자세한 내용은 다음 페이지를 참고하세요코드 입니다 const askForLocation = function () { navigator.geolocation.getCurrentPosition((position) => { console.log(position); }); };.