setCount((count) => count + 1) 여기에서 콜백함수로 집어넣은 매개변수 count는 prevState인거 같은데 이 prevState라는 개념이 실습문제 하기전에 책에서 어디쪽에 나오는 개념인가요?그리고 useCounter 커스텀 훅 내부에 있는 increaseCount 함수와 decreaseCount 함수는 위 사진처럼 연결 되는건가요? 이건 무슨 개념인가요? 구조 분해 할당인가요?구조분해할당은 배열기반과 객체기반으로 나뉘어질텐데 저건 뭔가요?

 안녕하세요리액트 01-02 emotion 강의를 들을때 styles 폴더 안에 만든 emotion.js 입니다.강사님과 다르게 백틱 안에서의 문법이 문자열 처리된 것처럼 나오고 있습니다.제가 사용하는 윈도우, 맥 모두 이러한 증상이 나타나는데 윈도우는 문법 적용이 안되고 맥은 적용이되네요..자동완성도 안되니까 많이 불편한데 vscode 에서 문제인 걸까요?

중고마켓으로 포트폴리오를 만드는중인데 혹시 제 게시물이 사라질 수도 있을 것같아서 유효기간같은게 있는지 궁금합니다. 아니면 계정당 상품등록 개수에 제한이 있는지 궁금합니다.

6-5 로또 강의에서 useMemo 가르치시기 전에 "hooks의 특성상 전체가 계속 다시 실행된다"라는 말씀을 하셨고, useState(초기값)도 불필요하게 계속 재실행되기에 함수 결과값으로 기억하기 위해 useMemo를 쓴다는 것인데그 말씀대로라면 강의 초반 구구단 챕터에서const [first, setFirst] = React.useState(Math.ceil(Math.random() * 9)) const [second, setSecond] = React.useState(Math.ceil(Math.random()*9)) const [value, setValue] = React.useState('') const [result, setResult] = React.useState('') const inputRef = React.useRef() const submit = (e) => { e.preventDefault() if(Number(value)===first * second) { setResult('정답') setValue('') setFirst(Math.ceil(Math.random()*9)) setSecond(Math.ceil(Math.random()*9)) } else { setResult('땡') setValue('') } inputRef.current.focus() }submit함수에 setFirst(Math.ceil(Math.random()*9)), setSecond(Math.ceil(Math.random()*9))를 안써도 되지 않나요?가장 위에 useState(Math.ceil(Math.random() * 9)) 으로 초기값을 지정해놨으니까 어차피 렌더링 될 때마다 useState가 재실행 되니까 setFirst와 setSecond는 필요 없는 것 아닌가요? 

const onSubmitForm = useCallback( (e) => { e.preventDefault(); if (chat?.trim() && chatData) { const savedChat = chat; mutateChat((prevChatData) => { prevChatData?.[0].unshift({ id: (chatData[0][0]?.id || 0) + 1, content: savedChat, SenderId: myData.id, Sender: myData, ReceiverId: userData.id, Receiver: userData, createdAt: new Date(), }); return prevChatData; }, false).then(() => { localStorage.setItem(`${workspace}-${id}`, new Date().getTime().toString()); setChat(''); if (scrollbarRef.current) { console.log('scrollToBottom!', scrollbarRef.current?.getValues()); scrollbarRef.current.scrollToBottom(); } }); axios .post(`/api/workspaces/${workspace}/dms/${id}/chats`, { content: chat, }) .then(() => console.log('first')) .catch(console.error); } }, [chat, workspace, id, myData, userData, chatData, mutateChat, setChat], ); const onMessage = useCallback( (data: IDM) => { if (data.SenderId === Number(id) && myData.id !== Number(id)) { mutateChat((chatData) => { chatData?.[0].unshift(data); return chatData; }, false) 이부분은 socket?.on('dm', onMessage)  dm보내는 페이지에서 디엠을 보낼 때 onSubmitForm에서 mutate가 먼저 실행돼서 화면 데이터를 먼저 바꿔주고 그 다음 서버로 데이터를 보낸 뒤 처리하는 과정에서 socket.emit()이 실행되고 onMessage가 실행되는 걸로 이해했는데요. onMessage가 받는 데이터가 onSumbitForm의 mutate가 인자로 받는 함수랑 똑같아서 중복작업이 아닌가 싶어서 onMessage mutate 안의 chat.Data?.[0].unshift(data)를 지우고 실행해봐도 똑같은 결과가 나오는데 이 코드는 왜 있는 건가요? 

시간 부분이 안뜨네요.. Clock.jsximport React from "react"; function Clock(props){ return( <div> <h1>안녕, 리액트!</h1> <h2>현재 시간 : {new Date().toLocaleDateString()}</h2> </div> ); } export default Clock; index.jsimport React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import Clock from './chapter_04/Clock'; const root = ReactDOM.createRoot(document.getElementById('root')); setInterval(() => { root.render( <React.StrictMode> <Clock /> </React.StrictMode> ); },1000); reportWebVitals();   

안녕하세요 강의중에 DM 내용 표시 하기 강의에서 map을 활용해 DM내용을 표시하는 부분인데 DM을 클릭하고 내용을 확인할 때 TypeError에러가 뜨면서 chatData.map is not a function 이라는 오류가 나오고 있습니다.. 혼자 해결하다 막혀서 질문 남겨 드립니다! DirectMessage.tsx (return 부분)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> );chatList.tsximport React, { VFC, useCallback, useRef } from 'react'; import { ChatZone } from './styles'; import { IDM } from '@typings/db'; import Chat from '@components/Chat'; import { Scrollbars } from 'react-custom-scrollbars'; interface Props { chatData?: IDM[]; } const ChatList: VFC<Props> = ({ chatData }) => { const scrollbarRef = useRef(null); const onScroll = useCallback(() => {}, []); return ( <ChatZone> <Scrollbars autoHide ref={scrollbarRef} onScrollFrame={onScroll}> {chatData?.map((chat) => ( <Chat key={chat.id} data={chat} /> ))} </Scrollbars> </ChatZone> ); }; export default ChatList; chat.tsximport { IDM, IChat } from '@typings/db'; import React, { VFC, memo, useMemo } from 'react'; import gravatar from 'gravatar'; import { ChatWrapper } from './styles'; interface Props { data: IDM; } const Chat: VFC<Props> = ({ data }) => { const user = data.Sender; return ( <ChatWrapper> <div className="chat-img"> <img src={gravatar.url(user.email, { s: '36px', d: 'retro' })} alt={user.nickname} /> </div> <div className="chat-text"> <div className="chat-user"> <b>{user.nickname}</b> <span>{data.createdAt}</span> </div> <p>{data.content}</p> </div> </ChatWrapper> ); }; export default Chat;오류내용

간단히라도 알려주시면 감사하겠습니다

401 에러가 나서 제가 구글링을 나름 해보니, 토큰인증의 문제가 원인이라고 하는데 아직 토큰발급을 적용하지 않았는데 이런 에러가 나는 이유는 무엇일까요..Signup.js 부분은 선생님의 코드와 완전히 같습니다. import React, { useState } from "react"; import Axios from "axios"; export default function Signup() { const [inputs, setInputs] = useState({}); const onSubmit = e => { e.preventDefault(); Axios.post("http://localhost:8000/accounts/signup/", inputs) .then(response => { console.log("response: ",response); }) .catch(error => { console.log("error: ",error); }); }; const onChange = e => { const {name, value} = e.target; setInputs(prev => ({ ...prev, [name]: value })); }; return ( <div> <form onSubmit={onSubmit}> <input type="text" name="username"onChange={onChange}/> <input type="password" name="password" onChange={onChange}/> <input type="submit" value="회원가입" /> </form> </div> ); }백엔드 단에서는 구조가 약간 다르긴 하지만 accounts 부분은 크게 다르지 않습니다.accounts/models.py from django.db import models class User(models.Model): user_id = models.CharField(max_length=32, unique=True, verbose_name='id') user_pw = models.CharField(max_length=128, verbose_name='password') user_name = models.CharField(max_length=16, unique=True, verbose_name='name') user_Email = models.EmailField(max_length=128, unique=True, verbose_name='email') def __str__(self): return self.user_name #오브젝트 호출시 user_name으로 표시 class Meta: #DB 테이블 명 지정 db_table = 'user' verbose_name = 'user' accounts/serializers.py from rest_framework import serializers from django.contrib.auth import get_user_model User = get_user_model() class SignupSerializer(serializers.ModelSerializer): #pw 보안 password = serializers.CharField(write_only=True) def create(self, validated_data): user = User.objects.create(username=validated_data["username"]) user.set_password(validated_data["password"]) #암호화된 비번 저장 user.save() return user class Meta: model = User fields = ["pk", "username", "password"]from django.urls import path from . import views urlpatterns = [ path('signup/', views.SignupView.as_view(), name='login'), ] from django.contrib.auth import get_user_model from django.shortcuts import render from rest_framework.permissions import AllowAny from rest_framework.generics import CreateAPIView from .serializers import SignupSerializer #회원가입 뷰 #createapiview 이므로 get 메소드 허용X class SignupView(CreateAPIView): model = get_user_model() serializer_class = SignupSerializer Permission_classes = [ AllowAny,#실제로 회원가입할 때는 로그인은 되면 안됨 ] 혹시 뭐가 원인일지 추측이라도 해주시면 감사하겠습니다..혹시 버전문제일 수도 있을까요? 현재 장고는 3.2 리액트는 18이긴합니다

포트폴리오/퀴즈가 과거 강의와 달라진 것 같은데 해당 과제를 구현한 깃 레포를 찾을수 없어서 적절한 도움을 받기 어렵습니다. 현재 과제 풀이는 어디서 확인할 수 있을까요?

.get("http://localhost:8080/products")로 바꾸고 새로고침하면 상품목록이 안 받아오는데이유가server.js에서 app.use(express.json()); app.use(cors());가 지워졌기 때문이네요.노션에 올라와 있는 코드에 조금 안 맞는 부분이 있어서 카피해서 쓸 경우 제대로 처리하지 못하는거같아요깃헙 소스보니까 아래와 같이 되어 있는걸 보고 알았네요app.use(express.json()); app.use(cors()); app.get("/products", (req, res) => { res.send({ products: [ ..... 결론 깃헙소스와 노션소스가 조금 달라서 전부카피하면 안된다는!깃헙소스가 맞고노션소스가 틀리므로 노션 수정하면 좋겠다는 생각!

안녕하세요. 강사님완강하고 코드 복습하다가 context 관련해서 헷갈리는 점이 생겨서 질문드립니다.!이전에 간단한 일기장 만들기에서는 state를 핸들링하는 함수들(onCreate, onRemove, onEdit)을 전달하는 DispatchContext에 value Props으로 이 함수들을 넘겨줄 때, useMemo를 사용해서 함수들을 감싼 메모이제이션된 객체를 넘겨줘서state가 바껴서 App 컴포넌트가 재랜더링되어도 최적화가 풀리지 않도록 했던 걸로 기억합니다.이번 감정 일기장에서는 DispatchContext의 value Props로 함수들을 넘겨주실 때 함수를 담은 객체를 메모이져이션하지 않고 넘겨주셨습니다. 1) 이 경우, App에서 data state가 바뀌면 결국 onCreate, onRemove, onEdit 함수가 재생성되고 DispatchContext의 value로 넘겨주는 객체도 재생성되어 Context컴포넌트의 하위 컴포넌트(최적화 안한)도 재랜더링되는게 맞나요?2) 감정일기장에서 이 부분은 최적화 안한 것은 이번에는 그냥 간단하게 진행하시려고 해서 그런건가요?

interval componentDidMount() { this.interval = setInterval(this.changeHand, 100) } componentDidUpdate() { } componentWillUnmount() { clearInterval(this.interval) } onClickBtn = (choice) => { clearInterval(this.interval) const {imgCoord} = this.state const myScore = scores[choice] const cpuScore = scores[computerChoice(imgCoord)] const diff = myScore - cpuScore if (diff === 0) { this.setState({ result: '비겼습니다!' }) } else if ([-1, 2].includes(diff)) { this.setState((prevState) => { return { result:'이겼습니다!', score: prevState.score + 1, } }) } else { this.setState((prevState) => { return { result: '졌습니다.', score: prevState.score - 1 } }) } setTimeout(() => { this.interval = setInterval(this.changeHand, 100); }, 2000); } render() { const {result, score, imgCoord} = this.state; return ( <> <div id="computer" style={{ background: `url(https://en.pimg.jp/023/182/267/1/23182267.jpg) ${imgCoord} 0px` }} /> <div> <button id="rock" className="btn" onClick={()=>this.onClickBtn('바위')}>바위</button> <button id="scissor" className="btn" onClick={()=>this.onClickBtn('가위')}>가위</button> <button id="paper" className="btn" onClick={()=>this.onClickBtn('보')}>보</button> </div> <div>{result}</div> <div>현재 {score}점</div> </>강의에서 제로초님이 가위바위보 컴포넌트는 제거를 안하기 때문에 componentWillUnmount()를 넣으나 안넣으나 상관이 없다는식으로 얘기를 했습니다.그러나 componentWillUnmount()에 clearInterval를 안넣게되면 componentDidMount()에서 생성된 this.interval라는 비동기작업이 onClickBtn 함수에서 clearInterval로 해제가 안됩니다.왜 그런지 이유가 궁금합니다.

안녕하세요 제로초님!최근 다시한번 노드버드를 참고하여 따로 사이드 프로젝트를 진행중에 있습니다.진행은 nginx 설정까지 마무리 하고 배포까지 성공적으로 진행이 되었습니다. 실제 사용도 했었고, 어제까지만 해도 큰 문제가 없었습니다. 다만 오늘 이미지를 로드해오는 과정에서 gateout 에러가 좀 발생하는것 같아 방법을 찾아보면서 pm2의 ecosystem.config.js 설정 등을 하다가 잘 안되는것 같아 다시 지우고 재 실행을 했습니다.실행을 다시 하니 로그인은 유지가 되는데, 데이터를 가져오려니 401 인증 에러가 발생하여 질문 드립니다..오류가 뜨는 이유가 무엇일까 생각했었는데, 우선 쿠키가 관련이 있겠다 생각해서 application - cookie 탭에서 확인을 해봤습니다.실제 도메인 주소, secure 설정까지 다 맞춰서 들어와있음을 확인했고, 그렇기에 새로고침을 했을 시 로그인은 유지가 되었습니다.네트워크 쪽을 살펴보니분명 쿠키가 같이 request 되고 있었습니다. 근데 이상하게도 쿠키가 application 에 저장된 문자와 다름을 확인했고 request 의 cookie 탭을 확인해보니이렇게 2가지 도메인으로 쿠키가 생성되어 전달되고 있음을 확인했습니다.하나는 api. 가 붙어있었고 하나는 실제 로그인을 유지시켜주는 도메인이었습니다.계속 고민을 해봐도 왜 request 에 위와같이 2개의 쿠키가 전달이 되는지 이유를 알 수 없어서 질문드립니다..도메인은 강의처럼 .주소 형식으로 했습니다.백엔드 nginx.conf 입니다프론트 nginx.conf 입니다프론트 pm2 list 입니다백엔드 pm2 list 입니다.답변 부탁드리겠습니다 ㅜㅜ...

`http://localhost:3095/ws-${workspace}`위 주소로는 잘 되는데 `/api/ws-${workspace}`로는 연결이 안됩니다.  웹소켓은 프록시 못쓰는건지,못쓴다면 혹시 왜 안되는건지 이유를 여쭈워도 괜찮을까요?

 useRef() 훅을 쓰는 케이스는 값은 자주 바뀌지만 화면은 자동으로 렌더링 되지 않게 하고 싶을 때 사용해야된다고 하셨는데, useRef같은 훅을 쓰지 않고 let 같은 일반 변수를 사용하면 안되는건가요? 2. 함수 컴포넌트는 import React from 'react' 안써도 되나요?

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.안녕하세요 강의 도중 데이터베이스 연결 설정 후 에러가 나서 질문 드립니다!혹시 뭐 터미널이 달라서 그럴까요?

안녕하세요 제로초님 혹시 백엔드도 /etc/nginx/nginx.conf 이것만 따로 설정해주고 /etc/nginx/sites-enabled/default 이건 프론트랑 똑같이 설정해주면 되는건가요?

pages 폴더랑 styles폴더가 없는상태로 초기 설정이 되는데 어떻게 설정해야 할까요?? ㅜㅜ

styles.tsx파일을 보면& img {...}& > div {...}이렇게 있던데 '>' 기호가 있고 없고의 차이점은 뭔가요?