묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
싸이월드 실습 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; }
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
tailwindcss 라이브러리 받은 후 실행이 안됩니다.
npm i -D postcss autoprefixer tailwindnpx tailwindcss init -p 모두 작업을 마치고 /** @type {import('tailwindcss').Config} */ export default { content: [ "./index.html", "./src/**/*.{js,jsx,ts,tsx}" ], theme: { extend: {}, }, plugins: [], } index.css@tailwind base; @tailwind components; @tailwind utilities; npm run dev 를 돌리면,node:internal/process/promises:246triggerUncaughtException(err, true /* fromPromise */);[Failed to load PostCSS config: Failed to load PostCSS config (searchPath: C:/WebStudy/WebDevelement/React/fullstack-react/front): [Error] Loading PostCSS Plugin failed: Cannot find module 'tailwindcss'라는 오류가 뜹니다.원인파악이 어려운데 문의드립니다!
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
이미지가 안떠요...
13분 정도까지 했는데 이미지가 안뜨네요... 이유가 무엇인지 아시나요?
-
미해결Slack 클론 코딩[실시간 채팅 with React]
str.toLowerCase is not a function
예상하지 못한 부분에서 에러가 나와서 질문 남겨드립니다 !ChatBox.tsximport React, { useCallback, useEffect, useRef, VFC } from 'react'; import { ChatArea, EachMention, Form, MentionsTextarea, SendButton, Toolbox } from './styles'; import autosize from 'autosize'; import { Mention, SuggestionDataItem } from 'react-mentions'; import { useParams } from 'react-router'; import useSWR from 'swr'; import { IUser } from '@typings/db'; import fetcher from '@utils/fetcher'; import gravatar from 'gravatar'; interface Props { chat: string; onSubmitForm: (e: any) => void; onChangeChat: (e: any) => void; placeholder?: string; } const ChatBox: VFC<Props> = ({ chat, onSubmitForm, onChangeChat, placeholder }) => { const { workspace } = useParams<{ workspace: string }>(); const { data: userData, error, revalidate, mutate, } = useSWR<IUser | false>('/api/users', fetcher, { dedupingInterval: 2000, // 2초 }); const { data: memberData } = useSWR<IUser[]>(userData ? `/api/workspaces/${workspace}/members` : null, fetcher); const textareaRef = useRef<HTMLTextAreaElement>(null); useEffect(() => { if (textareaRef.current) { autosize(textareaRef.current); } }, []); const onKeydownChat = useCallback( (e) => { if (e.key === 'Enter') { if (!e.shiftKey) { e.preventDefault(); onSubmitForm(e); } } }, [onSubmitForm], ); const renderSuggestion = useCallback( ( suggestion: SuggestionDataItem, search: string, highlightedDisplay: React.ReactNode, index: number, focus: boolean, ): React.ReactNode => { if (!memberData) return; return ( <EachMention focus={focus}> <img src={gravatar.url(memberData[index].email, { s: '20px', d: 'retro' })} alt={memberData[index].nickname} /> <span>{highlightedDisplay}</span> </EachMention> ); }, [memberData], ); return ( <ChatArea> <Form onSubmit={onSubmitForm}> <MentionsTextarea id="editor-chat" value={chat} onChange={onChangeChat} onKeyPress={onKeydownChat} placeholder={placeholder} inputRef={textareaRef} allowSuggestionsAboveCursor > <Mention appendSpaceOnAdd trigger="@" data={memberData?.map((v) => ({ id: v.id, display: v.nickname })) || []} renderSuggestion={renderSuggestion} /> </MentionsTextarea> <Toolbox> <SendButton className={ 'c-button-unstyled c-icon_button c-icon_button--light c-icon_button--size_medium c-texty_input__button c-texty_input__button--send' + (chat?.trim() ? '' : ' c-texty_input__button--disabled') } data-qa="texty_send_button" aria-label="Send message" data-sk="tooltip_parent" type="submit" disabled={!chat?.trim()} > <i className="c-icon c-icon--paperplane-filled" aria-hidden="true" /> </SendButton> </Toolbox> </Form> </ChatArea> ); }; export default ChatBox;혼자서 해결해보려다가 못찾고 있어서 질문 남겨드려요 ㅠㅠ
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
강의자료 pdf에서 우분투에서 도커 다운받는 링크 복사할때
도커 다운받는 링크 복사 할때 공백 생겨서 필요 하신분 쓰시라고 링크 올려 두겠습니다.https://www.digitalocean.com/community/tutorials/how-to-install-and-use-docker-on-ubuntu-22-04
-
미해결
socket.io 실행
안녕하세요채팅을 구현하기위해 socket.io를 썼는데 통신이 안되는 것같습니다 io에 주소를 제대로 넣었고 서버 on 마다 클라이언트에서 emit으로 작성했는데 작동하지 않습니다 이유가 무엇일까요? // server 파일의 코드입니다 require('dotenv').config(); const { createApp } = require('./app'); const { appDataSource } = require('./models/index'); const startServer = async () => { const app = createApp(); const PORT = process.env.PORT; await appDataSource .initialize() .then(() => { const server = app.listen(PORT, () => { console.log(`🟢server is listening on ${PORT}🟢`); }); const io = require('socket.io')(server, { cors: { origin: true, credentials: true, }, }); const { socketMessage } = require('./middlewares/socket.io'); socketMessage(io); }) .catch((err) => { console.log(`❌Failed server connect❌`); appDataSource.destroy(); }); }; startServer(); // server의 socket 파일의 코드입니다 const jwt = require('jsonwebtoken'); const chatDao = require('../models/chatDao'); const { catchAsync } = require('../utils/error'); const socketMessage = (io) => { io.use((socket, next) => { const token = socket.handshake.headers.authorization; if (!token) { return next(new Error('Authentication error')); } jwt.verify(token, process.env.SECRET_KEY, async (err, decoded) => { if (err) { return next(new Error('Authentication error')); } userId = decoded.userId; next(); }); }); io.on('connection', (socket) => { console.log('A User Connected.'); socket.on( 'create_room', catchAsync(async (postId, callback) => { const room = await chatDao.createRoom(userId, postId); socket.join(room.raw.insertId); callback(room.raw.insertId); }) ); socket.on( 'enter_room', catchAsync(async (roomId, callback) => { socket.join(roomId); callback(roomId); }) ); socket.on('new_text', async (content, roomId, callback) => { await chatDao.createChat(userId, content, roomId); socket.to(roomId).emit('new_text', content); callback(content); }); socket.on('disconnect', () => { console.log('접속이 해제되었습니다', socket.id); clearInterval(socket.interval); }); socket.on('error', (error) => { console.error(error); }); socket.on('send', (data) => { console.log(data); socket.emit('reply', { data, }); }); socket.interval = setInterval(() => { socket.emit('news', 'Hello Socket.IO'); }, process.env.SOCKET_INTERVAL || 1000); }); }; module.exports = { socketMessage }; // client 코드입니다import React, { useState, useContext } from 'react'; import io from 'socket.io-client'; import './chat.css'; import { MenuContext } from '../../components/Nav/MenuProvider'; const Token = localStorage.getItem('accessToken'); const socket = io.connect('http://192.168.0.194:4000', { withCredentials: true, extraHeaders: {Authorization: `Bearer ${Token}` } appDataSource.destroy(); }), }); socket.on('connection', () => { console.log('Connected to server'); }); const Chat = () => { const [roomId, setRoomId] = useState([]); const [searchData, setSearchData] = useContext(MenuContext); const handleCreateRoom = event => { event.preventDefault(); socket.emit('create_room', searchData, ({ searchData, roomId }) => { console.log(`Joined room ${roomId}`); setRoomId(roomId); }); }; const handleJoinRoom = roomId => { socket.emit('enter_room', roomId, roomId => { console.log(`Joined room ${roomId}`); setRoomId(roomId); }); }; const handleNewText = content => { socket.emit('new_text', content, roomId, content => { console.log(`Sent message: ${content}`); }); }; const handleNewText = content => { socket.emit('new_text', content, roomId, content => { console.log(`Sent message: ${content}`); }); }; const onCheckEnter = e => {if (e.key === 'Enter') { handleNewText(); } }; return ( <div className="h-screen pt-36"> <button onClick={handleCreateRoom}>테스트</button> <button onClick={() => handleJoinRoom(roomId)}>테스트2</button> <input id="input-text" type="text" onKeyDown={onCheckEnter} /> <button onClick={handleCreateRoom}>제출</button> </div> ); }; export default Chat;
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
새일기를 쓰면 한개가 아닌 두개가 등록이 됩니다ㅠ
윈터로드님 알려주신 덕분에 완강할수잇었습니다ㅠㅠ 인프런 강의 첫 수강완료증을 받앗네요제 프로젝트에 큰오류를 발견했습니다,,,, 새일기쓰면 똑같은게 2개가 만들어지는데 이거 어디서 오류를 수정해야 하는지알수잇을까요?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
tfjs-node 안깔려서
tfjs-node 안깔려서 해보라고 하는거 해보다가잘 되던 nodemon server.js 도 안되고 뭐가 잘못됐는지 모르겠습니다.빨리 마무리하고 싶은데 답답하네요강의 업데이트 좀 해주셨으면 좋겠는데 생각 없으신가요
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
mongoose save() 어쩌구 에러나시는 분들
app.post('/register',(req,res)=>{ //회원가입할 때 필요한 정보들을 client에서 가져오면, //그 정보들을 DB에 넣어준다. const user = new User(req.body); //user모델에 정보가 저장됨 //실패 시, 실패한 정보를 보내줌 user.save().then(()=>{ res.status(200).json({ success:true }) }).catch((err)=>{ return res.json({success:false,err}) }); })
-
해결됨파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
suggestion에서 onFollowUser을 수행할때 에러 질문입니다!
import React from "react"; import { Button, Avatar } from "antd"; import "./Suggestion.scss"; //프레젠테이션 컴포넌트라 할 수 있다 export default function Suggestion({ suggestionUser, onFollowUser }) { const { username, avatar, is_follow } = suggestionUser; return ( <div className="suggestion"> <div className="avatar"> <Avatar icon={<img src={avatar} alt={`${username}'s avatar`} />} /> {/* <UserAddOutlined /> */} </div> <div className="usesrname">{username}</div> <div className="action"> {is_follow && "팔로잉 중"} {!is_follow && ( <Button size="small" onClick={() => onFollowUser(username)}> Follow </Button> )} </div> </div> ); } import React, { useEffect, useState } from "react"; import "./SuggestionList.scss"; import { Card } from "antd"; import Suggestion from "./Suggestion"; import { useAppContext } from "store"; import Axios from "axios"; import useAxios from "axios-hooks"; export default function SuggestionList({ style }) { const { store: { jwtAccessToken }, } = useAppContext(); const [userList, setUserList] = useState([]); //axios을 좀더 일반적으로 쓰기위한 훅을 이용 useAxios hook //useEffect자체가 필요없다 요청자체를 useAxios가 보내게 되니까? //useAxios는 조회를 할때는 유용한다 post을 할때는 코드가 복잡해진다? const headers = { Authorization: `Bearer ${jwtAccessToken}` }; const [{ data: origUserList, loading, error }, refetch] = useAxios({ url: "http://127.0.0.1:8000/accounts/suggestions/", headers, }); useEffect(() => { if (!origUserList) setUserList([]); else setUserList(origUserList.map((user) => ({ ...user, if_follow: false }))); }, [origUserList]); const onFollowUser = (username) => { console.log("성공"); try { Axios.post( "http://127.0.0.1:8000/accounts/follow/", { username }, { headers } ) .then((response) => { setUserList((prevUserList) => { return prevUserList.map((user) => { if (user.username === username) { return { ...user, is_follow: true }; } else return user; }); }); }) .catch((error) => { console.log(error); }); } catch (error) { console.log("여기 에러야 :", error); } }; return ( <div style={style}> {/* 정말 빠르게 지나갈 것이다 */} {loading && <div>Loading...</div>} {error && <div>로딩중에 에러가 발생했습니다.</div>} {/* <button onClick={() => refetch()}>Reload</button> */} <Card size="small" title="Suggestions for you" // extra={<a href="#">More</a>} style={{ width: 300, }} > {userList.map((suggestionUser) => ( <Suggestion key={suggestionUser.username} suggestionUser={suggestionUser} onFollowUser={onFollowUser} //속성값으로 주입함 /> ))} </Card> </div> ); } 첫번째 블럭이 Suggestion.js이고 두번째 블럭은 SuggestionList.js입니다.follow 버튼을 눌렀을때 이러한 에러가 뜨기 시작했는데 왜 그런걸까요ㅠㅠ 분명 원래는 잘 되었는데 학습진도를 더 나가다 보니 어느순간 작동하지 않던데 그 이유를 잘 모르겠습니다 서버쪽으로 요청도 가지 않는거 같은데 서버쪽의 문제일 수 있을까요??
-
미해결너네 백엔드 하고 싶은 거 있으면 얼마든지 해 난 괜찮어 왜냐면 나는 파이어베이스가 있어
next js 에는 browserRouter가 없어서 상태에 맞는 화면을 어떻게 노출하나요?
next js 에는 browserRouter가 없어서 상태에 맞는 화면을 어떻게 노출하나요?로그인 전후에 따라서 표시하는 페이지를 어떻게 비슷하게 만들 수 있는지 궁금합니다.
-
미해결따라하며 배우는 리액트 A-Z[19버전 반영]
오류 질문
검색을 해보니 컴포넌트 명 관련해서 에러 라고 나와져있는데 소스 를 확인해봐도 오타 문제는 아닌거같아 강사님께 여쭤봅니다 ㅠㅜ 무슨문제일까요 ?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
writeHead 부분
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. Location에 /login만 해놓으니까 오류만 뜨고 로그인페이지로 안가고 커뮤니티 페이지로 들어가져서 경로를 아래처럼 바꿔더니 로그인페이지로 잘 가지긴 하는데 단순 경로 문제인가요??오류도 정상적으로 쿠키가 없다고 뜹니다
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
로그인페이지, 회원가입페이지 못들어가게하는 부분
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 이 부분에서 axios.get으로 보내주는 쿠키가 없는데 어떻게 유저가 로그인을 했다는게 인증되는건가요??
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
강의에서 사용하고 있는 next.js 버전으로 설치는 어떻게 하나요?
현재 next.js를 설치하려고 하면 13.2버전으로 설치가 되고 딱히 특정 버전을 설치해주는 기능은 없는 듯 합니다. 13버전과 강의에서 쓰이는 12버전은 사뭇 다르다고 생각이 듭니다.해당 강의에서 쓰고 있는 버전이 정확히 뭔지. 그리고 해당 버전으로 다운그레이드 혹은 설치를 하려면 어떻게 해야하는지 알려주실 수 있나요?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
flyctl 관련 재문의 드립니다.
flyctl deploy가 진행이 안돼서제 컴퓨터에 있는 도커를 삭제하고 다시 실행했더니아래와 같은 상태에서 멈췄습니다.구글링 해봐도 잘 모르겠어요 ㅠㅠ어떻게 해결하면 될까요? C:\Users\dahye\Documents\react-project\d-market-server>flyctl deploy ==> Verifying app config--> Verified app config==> Building imageRemote builder fly-builder-quiet-sunset-984 ready==> Building image with Buildpacks--> docker host: 20.10.12 linux x86_6420: Pulling from heroku/buildpacksDigest: sha256:1dd1a9c5f291b47fed1aed3f4c348fdc878380319c15f0e09753a5898482554eStatus: Image is up to date for heroku/buildpacks:2020-cnb: Pulling from heroku/herokuDigest: sha256:c9d053a463c7cd81672a3b0d5d5e26bdcbdffe2782565ccbedc15867b8cddfb9Status: Image is up to date for heroku/heroku:20-cnbWarning: Platform requested deprecated API '0.6'===> DETECTINGWarning: Buildpack 'heroku/ruby@0.0.0' requests deprecated API '0.4'Warning: Buildpack 'heroku/python@0.0.0' requests deprecated API '0.4'Warning: Buildpack 'heroku/scala@0.0.0' requests deprecated API '0.4'Warning: Buildpack 'heroku/php@0.0.0' requests deprecated API '0.4'Warning: Buildpack 'heroku/go@0.0.0' requests deprecated API '0.4'Warning: Buildpack 'heroku/gradle@0.0.0' requests deprecated API '0.4'2 of 3 buildpacks participatingheroku/nodejs-engine 0.8.16heroku/nodejs-npm 0.5.2===> ANALYZINGPrevious image with name "registry.fly.io/d-market-server:cache" not found===> RESTORING===> BUILDING[Heroku Node.js Engine Buildpack][Checking Node.js version]Detected Node.js version range: *Resolved Node.js version: 19.7.0[Installing Node.js distribution]Downloading Node.js 19.7.0Extracting Node.js 19.7.0Installing Node.js 19.7.0[INFO] Installing toolbox[INFO] - yj[INFO] Using npm v9.5.0 from Node[INFO] Installing node modules from ./package-lock.jsonnpm WARN config production Use --omit=dev instead.WARN failed to finish build in graphql: Post "https://api.fly.io/graphql": context canceledOops, something went wrong! Could you try that again?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Section Quiz7 에서 질문이 있습니다.
퀴즈7에 있는 소주제 : 컴포넌트 재사용성과 수정 프로세스에서 질문이 있습니다.updateProduct로 수정하는 부분인데요.페이지 모두 만들었는데. 여기서 수정이 완료 됐다고 하는데 데이터가 null값으로 들어가네요..밑에는 container페이지와 queries페이지 입니다.어느 부분이 잘못됏는지 모르겠어서 질문드립니다. http://practice.codebootcamp.co.kr/graphql 에서 create부분에선 seller를 바로 받아오는데 밑에서는 productId로 받아옵니다. 이렇게 된다면 수정페이지 에서는 seller 는 수정 못하게 되는건가요?
-
미해결Slack 클론 코딩[실시간 채팅 with React]
[공유] react-mention 항상 커서 위에 나오게 수정
이전 질문을 보면 react-mention 추천이 커서 아래로 나온다고 해서 공식 문서를 확인해봤습니다.결론적으로는 forceSuggestionsAboveCursor을 사용하면 됩니다. 해당 내용은 제로초님 sleact 레파지토리에 pull request 하였습니다.allowSuggestionsAboveCursor는 아래 공간이 부족하면 위에 배치가 '가능'하도록, 즉 워크스페이스 사람이 적으면 아래로 배치forceSuggestionsAboveCursor는 항상 위로 배치allowSuggestionsAboveCursor: Renders the SuggestionList above the cursor if there is not enough space belowforceSuggestionsAboveCursor: Forces the SuggestionList to be rendered above the cursor
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Use 'import type' 에러 및 eslintrc.json
1. 강의를 똑같이 따라했는데 위와같은 메시지가 뜹니다!import 말고 import type을 쓰라는데 멘토님과 다르게 왜 이런 에러가 일어나는건가요?2. 저는 class파일에 eslintrc.json파일이 없어서 화면보고 그냥 따라 적기만 했는데 문제가 없을까요?
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
context에 관해서 질문드립니다.
DiaryStateContext.provider 2중으로 넣는 부분 질문드립니다 .<DiaryStateContext.provider value={data} > 만 써야 되는 이유로 onCreate,onEdit,onRemove 등은 data의 상태가 변경될떄(c,u,d) 마다 리렌더링이 생겨서 최적화가 풀린다고 하셨는데 상태가 변경된다는 말이 onCreate 할떄 data에 실제 생성 ,변경, 삭제 되는 그 로직으로 인한 배열데이터가 변경된다는 말인건가요 ? 그리고. context가 App.js로 부터 data만 받을떄 어차피 onCreate,onEdit,onRemove 함수호출당시에도 data가 변경되고 setData로 변경이 된후에는 어쩃든 data가 추가든 삭제든 수정이든 변경이 될텐데 그러면 app 컴포넌트에서 바뀐 data로 DiaryStateContext 로 데이터를 다시 내려 줄꺼고 그러면 그 하위에 있던 컴포넌트 들은 다시 리렌더링 되지 않을까요 ?
