27:25초에 나의그래프큐엘셋팅 파일로 바로 이동해지는데 어떻게 하는걸까요

Virtualized List 강의를 보고 궁금증이 생겼습니다. 이 최적화 방식이 레이지 로드 라고 불리는 웹 최적화 기술인 것 같은데, 인터섹션 옵저버를 바닐라 코드로 구현한 방식이라고 이해하면 될까요? 만일 같은 방식이라면 인터섹션 옵저버를 사용하지 않은 이유가 있나요? 제가 깊이가 부족해서 도움을 얻고자 질문 남겨봐요!!(이게 들었던 해당 강의로 질문이 가는건지 모르겠네요 뭐가 뭔지..) 

안녕하세요. 현재 여러개의 select - option으로 게시된 게시글을 필터링을 해보려고 하고 있고 잘 작동하는데 코드가 너무 지저분합니다. 혹시 좀더 효율적으로 짤 수 있는 팁주실수 있으면 감사하겠습니다. ㅠㅠ const coursePosts = useSelector((state) => state.coursePost.coursePosts); const [group, setGroup] = useState("all"); const [subject, setSubject] = useState("all"); const [level, setLevel] = useState("all"); const fillteredCoursePosts = coursePosts.filter((post) => ( //문제의 부분 start group === 'all' && subject === 'all' && level === "all" ? post : subject === 'all' && level === "all" ? (post.group === group) : group === 'all' && level === "all" ? (post.subject === subject) : group === 'all' && subject === "all" ? (post.level === level) : group === "all" ? (post.subject === subject) && (post.level === level) : subject === "all" ? (post.group === group) && (post.level === level) : level === "all" ? (post.group === group) && (post.subject === subject) : (post.group === group) && (post.subject === subject) && (post.level === level) ) //문제의 부분 End ) const handleGroupChange = (e) => { setGroup(e.target.value); } const handleSubjectChange = (e) => { setSubject(e.target.value); } const handleLevelChange = (e) => { setLevel(e.target.value); } return ( <> <main className="width_content"> <div className={styles.course_box_wrap}> <div className={styles.filter_header}> <div className={styles.ft_select}> <select onChange={handleGroupChange}> <option value="all">ALL</option> <option value="Group1">Group 1</option> <option value="Group2">Group 2</option> <option value="Group3">Group 3</option> </select> <select onChange={handleSubjectChange}> <option value="all">ALL</option> <option value="English">English</option> <option value="Korean">Korean</option> </select> <select onChange={handleLevelChange}> <option value="all">ALL</option> <option value="Core">Core</option> <option value="test1">Embed</option> <option value="test2">Test</option> </select> </div> </div> </div> </main> </> ) }

const DiaryList = ({ diaryData }) => { console.log(diaryData); return ( <div className="DiaryList"> <h1>일기 리스트</h1> <h4>{diaryData.length}개의 리스트가 있습니다.</h4> <div> {diaryData.map((diary) => ( <div key={diary.id}> <div>작성자 : {diary.author}</div> <div>일기 : {diary.content}</div> <div>감정 : {diary.emotion}</div> <div>날짜 : {diary.created_date}</div> </div> ))} </div> </div> ); };'리액트에서 배열 사용하기1- 리스트 렌더링' 강의 듣다가 궁금증이 생겨 질문 드립니다!만약, 백엔드로부터 사용자가 작성한 다이어리 데이터를 통신을 통해 불러온다고 했을 때,혹시 백엔드 데이터 구조 상에서 각 다이어리 아이템마다 id를 두지 않는 경우가 있을까요?만약, 백엔드 측에서 각 다이어리 아이템마다 id를 설정해두지 않았다면 프론트엔드 측에서 백엔드에게 id 데이터를 다이어리 데이터와 함께 넘겨달라고 요청드릴 부분일까요? 아니면 프론트 단에서 key에 고유의 아이디를 넘겨주기 위해 uuid 등의 라이브러리를 사용해서 알아서 Id를 처리해야 할 부분일까요???

안녕하세요, 강사님!코드를 치는데 시간이 너무 오래 걸리는데,혹시 소스코드는 제공이 안되는 건가요?

다음과 같은 양식으로 남겨주세요.질문을 한 배경 :정보 부족질문내용 :mui를 설치하는데 어디서 설치하는지, 무엇을 설치하는지 정보가 매우 부족함. 찾지 못하겠음 

포트폴리오 과제 중, 게시물을 등록하고 수정할 때 비밀번호를 똑같이 입력했는데 저런 오류가 뜹니다 ....ㅠ 해결방법을 잘 모르겠습니다!

switch (action.type) { case "INIT": { return action.data; } case "CREATE": { const newItem = { ...action.data, }; newState = [newItem, ...state]; break; } case "DELETE": { newState = state.filter((it) => it.id != action.targetId); break; } case "EDIT": { newState = state.map((id) => it.id === action.data.id ? { ...action.data } : it ); break; } default: return state; } return newState;여기에 보면 ...으로 객체 깊은 복사? 하는거 같은데 만약에 CREATE 쪽 const newItem = { ...action.data, }; newState = [newItem, ...state]; 대신 const newItem = { action.data, }; newState = [newItem, state]; 으로 썼을떄 차이점Edit쪽 newState = state.map((id) => it.id === action.data.id ? { ...action.data } : it 대신 newState = state.map((id) => it.id === action.data.id ? { action.data } : it 으로 썼을떄 차이점  INIT 쪽 return action.data; 왜 이건 action.data를 바로 newState에 저장안시키고 리턴하는지 궁금합니다. 

안녕하세요 다름이 아니라 공유해 주신 소스를 기반으로 코드 리포지토리: https://github.com/things-not-learn-from-bootcamp/form-practice/tree/use-reducer-fancy-typing 의 소스를 실행 시켜 보았는데요 위 와 같은 에러가 계속 발생해서요 아무리 구글 검색을 해도 해결이 안되어 문의 드립니다.또 한가지 더 문의 부탁드립니다 위 동일한 레파지토리 소스를 실행시켰을 빌드해서 실행시켰을 때 위 처럼 빨간줄이 생겨서요 좀처럼 이해가 안되어서 같이 문의 드립니다.바쁘신데 죄송하면 문의 부탁드립니다.감사합니다. 

안녕하세요 소플님 리액트와 리덕스툴킷을 같이 사용 할때 궁금한 점이 있어 질문 드립니다상태관리에서 데이터를 계속 해서 추가 할 때 불변성을 유지하나요?상태관리에서 데이터를 수정, 삭제 할 때 불변성을 유지하나요? 

const errorLink = onError(({ graphQLErrors, operation, forward }) => { //1. 에러 캐치 if (typeof graphQLErrors !== "undefined") { for (const err of graphQLErrors) { //1-2. 해당 에러가 토큰만료 에러인지 체크 if (err.extensions.code === "UNAUTHENTICATED") { return fromPromise( //2. refreshtoken으로 accessToken을 재발급 받기 getAccessToken().then((newAccessToken) => { setAccessToken(newAccessToken ?? ""); //3. 재발급 받은 accesstoken 으로 방금 실패한 쿼리 실행하기 operation.setContext({ header: { ...operation.getContext().headers, //기존의 authorization: Bearer '만료된 토큰' Authorization: `Bearer ${newAccessToken}`, //3-2 authorization 만 바꿔치기 }, }); }) ).flatMap(() => forward(operation)); //3-3 방금 수정한 쿼리 재요청하기 } } } });수업이랑 동일하게 코드를 작성하였으나 버튼을 눌러도 재발급된 accessToken 이 들어가지 않아 error 가 발생하고 2번이상 눌러야지만 accesstoken 이 제대로 수정되서 정상적으로 실행됩니다. 어디가 문제일까요?

선생님 안녕하세요. 좋은 강의 해주셔서 항상 감사합니다. 다름이 아니라 DRF를 이용해서 간단한 로깅 시스템을 만들어보려고 하는데 authentication을 어떤 식으로 하는 게 좋을지 고민되어서 질문드립니다. 연구 프로젝트에서 유저 인터랙션을 보는 목적으로 하는 거라 프론트엔드에서 특정 html element를 클릭하면 별도의 로깅 서버로 간단하게 인터랙션과 관련된 정보, user id, timestamp, 클릭한 element 정보 등을 보내게 하려고 하는데요. 로그를 받아서 저장만 하는 서버이니 굉장히 단순한 형태가 될 것 같기는 한데, 그렇다고 인증절차를 아무 것도 안 하고 그냥 놔두자니 뭔가 좀 불안하기도 해서 어떻게 해야할지 고민입니다. 사용자가 사용하게 될 웹앱과는 아예 다른 클라우드 서버에서 돌아가게 할 예정이어서 internal url을 쓰게 할 수는 없을 것 같고 어쨌든 외부로 url을 열어두기는 해야할 것 같은데 이런 경우 인증 절차나 보안 관련된 부분은 어떤 식으로 설계하는 게 좋을까요? 감사합니다.  

  res.set("Set-Cookie", cookie.serialize("token", token, { httpOnly: true, maxAge: 60 * 60 * 24 * 7, path: "/", }))프론트에 credentials을 true로 하고 cors 부분에도 credentials를 true로 했지만 application/cookie에 저장이 되지 않습니다. header에 response로 토큰은 잘 들어오는데 뭐가 문제일까요?  

리액트 작업을 컴퓨터 이동하면서 하고싶은데 usb론 너무오래걸려서 깃헙으로 하고싶은데 깃헙에 빌드해서 올리면 다시 받을때 어떻게 받아서 작업해야할까요

13강에서 DB에 데이터를 저장할때 타이틀과 바디에 글을 쓴 뒤에 포스트 버튼을 누르면콘솔창과 화면에 이렇게 뜹니다..ㅠㅠ왜이럴까요..?

const onCreate = useCallback((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]); // initial state인 data = [] 로 인한 문제 }, []); 강의 중에서 useCallback 에서 data 값 갱신 문제에 질문이 있습니다.  우선, data 가 일반적인 값 참조처럼 일어나지 않는다는 점을 이해했습니다. 가장 마지막에 onCreate 가 업데이트되는 시점의 data 값을 기억해 두고 사용한다는 점도 이해했습니다.  그런데 왜 이렇게 동작하는지 궁금합니다. 구체적으로 말하면 Memoization이 어떻게 구현됐기에 이런 문제가 발생하는 건가요? 이전 값을 그대로 가지고 있으려면 단순히 참조 주소를 복사하는 식으로는 안 되고 Deep Copy가 일어나야 하지 않나요?  그리고 Deep Copy를 통해 Memo를 구현했다기에는 석연치 않은 부분들도 있습니다. 우선 매번 Deep Copy를 수행하는 식으로 Memo를 구현했다면 성능 문제가 발생하지 않을까요? 게다가 depth에서는 Shallow Compare 가 일어나니까 Deep Copy를 통해 구현하지는 않았을 것 같습니다.  이전 상태를 기억해 둔다는 방식은 이전 상태에 state 변수들을 내부에 따로 복사해서 저장해 둔다는 개념으로 이해되는데, 제가 예상하는 대로 Deep Copy를 통해 이전 값을 저장해 두는 건지 아니면 제가 놓친 부분이 있는지 궁금합니다.

강의를 따라서 어플을 완성한 뒤에 파이어베이스를 만지다가실수로 파이어베이스 파일들을 전부 삭제 시켰습니다.그래서 다시 실행시켜보니 리얼타임 데이터베이스의파일들은 다시 생성이 되어서 채팅기능이 잘 작동하지만storage의 message/ 파일이 다시 생성이 되지않아사진 업로드 기능이 작동되지 않습니다.이거 혹시 해결 방법이 있을까요?밑에는 사진 업로드 눌렀을 때 나오는 오류 코드입니다

<>{content}</> 로 쓰면 에러가 안나고{content} 로쓰면 에러가 나는 이유가 뭘까요 ??? 작성자 : {id} | 감정 : {emotion}<div className="content"> {isEdit ? ( <textarea value={localContent} onChange={(e) => setLocalContent(e.target.value)} /> ) : ( <>{content}</> )} </div>여기서 강의 보면 id,emotion는 <></>을 안쓰는데 content를 쓰는 이유가 뭔지 모르겠습니다. 어차피 const DiaryItem = ({ onEdit, onDelete, author, content, emotion, create_date, id, }) => {전부 List로 부터 받아오는데 누군 <>{content}</>이고 누군 그냥 {id} {emotion}인 이유가 먼지 궁금해요그리고 data.filter((it)=>(it.id!==targetId)); 을 data.filter((it)=>{it.id!==targetId}); 로 바꾸면 왜 에러가 나는걸까요 ?? ?언제 괄호를 쓰고 언제 중괄호를 써야하는지 정확히 알수있을까요 ???   아래는 전체 코드입니다.import { useRef, useState } from "react"; const DiaryItem = ({ onEdit, onDelete, author, content, emotion, create_date, id, }) => { const [isEdit, setIsEdit] = useState(false); const toggleIsEdit = () => setIsEdit(!isEdit); const [localContent, setLocalContent] = useState(content); const handleDelete = () => { console.log(id); if (window.confirm(`${id}번쨰 일기를 삭제하겠습니까?`)) { onDelete(id); } }; const handleQuiteEdit = () => { setIsEdit(false); setLocalContent(content); }; const handleEdit = () => { onEdit(id, localContent); }; return ( <div className="DiaryItem"> <div className="info"> <span className="author_info"> 작성자 : <>{id}</> | 감정 : <>{emotion}</> </span> <br /> <span className="date">날짜: {create_date}</span> </div> <div className="content"> {isEdit ? ( <textarea value={localContent} onChange={(e) => setLocalContent(e.target.value)} /> ) : ( <>{content}</> )} </div> {isEdit ? ( <> <button onClick={handleQuiteEdit}>수정취소</button> <button onClick={handleEdit}>수정완료</button> </> ) : ( <> <button onClick={handleDelete}>삭제하기</button> <button onClick={toggleIsEdit}>수정하기</button> </> )} </div> ); }; export default DiaryItem;

안녕하세요 저는 리액트만 4년차 개발자인데요.. 기존에 리액트 강좌를 무지 많이 수강했음에도 아직도 많이 부족하다 싶어서 강사님의 강좌를 듣게 되었는데 많은 도움이 되고 있어서 너무 감사합니다. 참고로 아래와 같은 과정을 수상신청을 아래와 같이 했습니다. 부트캠프에서 알려주지 않는 것들 (리액트 렌더링 최적화 편) 2편부트캠프에서 알려주지 않는 것들 (리액트) 1편클론코딩에서 알려주지 않는 것들 (시스템 이론과 DB) 1편실전 연습으로 익히는 고급 타입스크립트 기술 다만 부탁이 있어서요 다름이 아니라 좀더 세심하게 코드를 보구 싶어서요혹시 강좌중 부트캠프에서 알려주지 않는 것들 (리액트) 1편 에서 섹션 3. Form 컴포넌트로 배우는 실전 기술 강좌의 소스를 과정별로 브랜치로 구분한 레파지토리는 없는지 해서요..강좌별로 들으면서 분석하면 많은 도움이 될거 같아서 문의 드립니다.정 안되면 최종 소스라도 부탁드립니다. 위에 강좌 신청을 좋게 봐 주셔서 부탁드립니다.공개가 힘드시면 메일이라도 부탁드리면 안될런지요? manhattansky73@gmail.com 입니다.감사합니다. 

저도 강의 따라가다가 세로로 갑자기 변환되어서 답변 내용대로 해봤지만 고쳐지지를 않아서 질의 드립니다 아래 코드는 html코드입니다<html> <head> <title>그랩마켓</title> <link href="index.css" type="text/css" rel="stylesheet" /> <body> <div id="header"> <div id="header-area"> <img src="images/images/icons/logo.png"/> </div> </div> <div id="body"> <div id="banner"> <img src="images/images/banners/banner1.png"/> </div> <h1>판매되는 상품들</h1> <div id="product-list"> <div class="product-card"> <img class="product-img" src="images/images/products/basketball1.jpeg"/> <div class="product-contents"> <span class="product-name">농구공 1호</span> <span class="product-price">50000원</span> <div class="product-seller"> <img class="product-avatar" src="images/images/icons/avatar.png"/> <span>그랩</span> </div> </div> </div> </div> <div class="product-card"> <img class="product-img" src="images/images/products/keyboard1.jpg"/> <div class="product-contents"> <span class="product-name">키보드 1호</span> <span class="product-price">30000원</span> <div class="product-seller"> <img class="product-avatar" src="images/images/icons/avatar.png"/> <span>그랩</span> </div> </div> </div> <div class="product-card"></div> <div class="product-card"></div> </div> <div id="footer"></div> </body> </head> </html>아래는 css코드입니다 * { margin: 0; padding: 0; } #header{ height: 64px; display: flex; justify-content: center; border-bottom: 1px solid gray; } #body{ min-height: 100%; width: 1024px; margin: 0 auto; padding-bottom: 24px; } #footer{ height: 200px; background-color: red; } #banner{ height: 300px; background-color: yellow; } #header-area{ width: 1024px; height: 100%; display: flex; align-items: center; } #header-area > img{ width: 128px; height: 36px; } #body > h1{ margin-top: 16px; } #banner > img{ width: 100%; height: 300px; } #product-list{ display: flex; flex-wrap: wrap; margin-top: 12px; flex-direction: row; } .product-card{ width: 180px; height: 300px; margin-right: 12px; margin-bottom:12px; border: 1px solid rgb(230, 230, 230); border-radius: 12px; } .product-img{ width: 100%; height: 210px; } .product-contents{ display: flex; flex-direction: column; padding: 8px; } .product-name{ font-size: 14px; } .product-price{ font-size: 16px; font-weight: 200px; margin-top: 4px; } .product-seller{ display: flex; align-items: center; margin-top: 12px; } .product-avatar{ width: 24px; }바쁘시겠지만 답변 해주시면 감사하겠습니다!+해당 코드 진행 후 개발자 도구 이용해서 보면 flex에 의해 정해지지않은 보라색 칸이 있는데 해당 칸 처리가 힘들어 추가 질문 올립니다!