만약 앱라우터에서 로컬 스토리지 사용 시, 클라이언트 컴포넌트에서 사용할 것이고 서버에는 없는 데이터가 클라이언트인 브라우저에는 있을수도 있을 것 같은데 이 경우 어떻게 해결하는게 보편적인가요? 생각나는건 하이드레이션 에러를 무시하는 프로퍼티가 있었던 것 같은데 이 방법은 안좋을 것 같고, 동적으로 클라이언트에서만 렌더링 하던가 같은 방법으로 Suspense로 묶어서 클라이언트에서만 렌더링 되게 하는 방법이 있을 것 같은데 강사님 생각이 궁금해 질문 드립니다. 항상 감사합니다!

안녕하세요 질문드릴게 있습니다.'/compose/tweet' 모달창은 인터셉팅 라우트 + 페럴렐 라우트로 CSR 통한 접속은 잘 모달이 뜹니다.->(버튼을 클릭해서 모달창 뜨는 것을 말합니다.)하지만 만약 바로 URL직접 입력했을 때 (혹은 새로고침) 할 때는 뜨지 않습니다. 인터셉팅이 되지 않으니import Home from "@/app/(afterLogin)/home/page"; // (afterLogin)/compose/tweet export default function Page() { return <Home />; } 아마 여기서 Home에서 구현한 것만 뜨고, 모달로 구현한 것은 뜨지 않는 것 같습니다.하지만 실제 트위터에서는 바로 모달창이 뜨는 형태로 됩니다.어떻게 하면 새로고침/바로URL접속 에도 compose/tweet/ 모달창이 뜨게 할 지 조언을 구해봅니다.(직접 뒤에 배경 + 별도의 모달창을 바로 띄우는 생각은 했지만 다른 방식이 있는지 궁금합니다)import Home from "@/app/(afterLogin)/home/page"; import TweetModal from "../../@modal/(.)compose/tweet/page"; export default function Page() { return ( <> <Home /> <TweetModal /> </> ); } 버전은 15.3.0 입니다. 현재 사용하고 있는 폴더 구조는 아래와 같습니다.📦src ┣ 📂app ┃ ┣ 📂(afterLogin) ┃ ┃ ┣ 📂@modal ┃ ┃ ┃ ┣ 📂(.)compose ┃ ┃ ┃ ┃ ┗ 📂tweet ┃ ┃ ┃ ┃ ┃ ┣ 📜modal.module.css ┃ ┃ ┃ ┃ ┃ ┗ 📜page.tsx ┃ ┃ ┃ ┣ 📂[username] ┃ ┃ ┃ ┃ ┣ 📂status ┃ ┃ ┃ ┃ ┃ ┗ 📂[id] ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂photo ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┗ 📂[photoId] ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂_component ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📜page.tsx ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┗ 📜photoModal.module.css ┃ ┃ ┃ ┃ ┃ ┃ ┗ 📜default.tsx ┃ ┃ ┃ ┃ ┗ 📜default.tsx ┃ ┃ ┃ ┗ 📜default.tsx ┃ ┃ ┣ 📂[username] ┃ ┃ ┃ ┣ 📂status ┃ ┃ ┃ ┃ ┗ 📂[id] ┃ ┃ ┃ ┃ ┃ ┣ 📂_component ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📜CommentForm.tsx ┃ ┃ ┃ ┃ ┃ ┃ ┗ 📜commentForm.module.css ┃ ┃ ┃ ┃ ┃ ┣ 📂photo ┃ ┃ ┃ ┃ ┃ ┃ ┗ 📂[photoId] ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┗ 📜page.tsx ┃ ┃ ┃ ┃ ┃ ┣ 📜page.tsx ┃ ┃ ┃ ┃ ┃ ┗ 📜singlePost.module.css ┃ ┃ ┃ ┣ 📜page.tsx ┃ ┃ ┃ ┗ 📜profile.module.css ┃ ┃ ┣ 📂_components ┃ ┃ ┃ ┣ 📜ActionButtons.tsx ┃ ┃ ┃ ┣ 📜BackButton.tsx ┃ ┃ ┃ ┣ 📜FollowRecommand.tsx ┃ ┃ ┃ ┣ 📜LogoutButton.tsx ┃ ┃ ┃ ┣ 📜NavMenu.tsx ┃ ┃ ┃ ┣ 📜Post.tsx ┃ ┃ ┃ ┣ 📜PostArticle.tsx ┃ ┃ ┃ ┣ 📜PostImages.tsx ┃ ┃ ┃ ┣ 📜RightSearchZone.tsx ┃ ┃ ┃ ┣ 📜SearchForm.tsx ┃ ┃ ┃ ┣ 📜Trend.tsx ┃ ┃ ┃ ┣ 📜TrendSection.tsx ┃ ┃ ┃ ┣ 📜followRecommend.module.css ┃ ┃ ┃ ┣ 📜logout.module.css ┃ ┃ ┃ ┣ 📜navMenu.module.css ┃ ┃ ┃ ┣ 📜post.module.css ┃ ┃ ┃ ┣ 📜rightSearchZone.module.css ┃ ┃ ┃ ┣ 📜trend.module.css ┃ ┃ ┃ ┗ 📜trendSection.module.css ┃ ┃ ┣ 📂compose ┃ ┃ ┃ ┗ 📂tweet ┃ ┃ ┃ ┃ ┗ 📜page.tsx ┃ ┃ ┣ 📂explore ┃ ┃ ┃ ┣ 📜explore.module.css ┃ ┃ ┃ ┗ 📜page.tsx ┃ ┃ ┣ 📂home ┃ ┃ ┃ ┣ 📂_components ┃ ┃ ┃ ┃ ┣ 📜PostForm.tsx ┃ ┃ ┃ ┃ ┣ 📜Tab.tsx ┃ ┃ ┃ ┃ ┣ 📜TabProvider.tsx ┃ ┃ ┃ ┃ ┣ 📜postForm.module.css ┃ ┃ ┃ ┃ ┗ 📜tab.module.css ┃ ┃ ┃ ┣ 📜home.module.css ┃ ┃ ┃ ┗ 📜page.tsx ┃ ┃ ┣ 📂messages ┃ ┃ ┃ ┗ 📜page.tsx ┃ ┃ ┣ 📂search ┃ ┃ ┃ ┣ 📂_component ┃ ┃ ┃ ┃ ┗ 📜Tab.tsx ┃ ┃ ┃ ┣ 📜page.tsx ┃ ┃ ┃ ┗ 📜search.module.css ┃ ┃ ┣ 📜layout.module.css ┃ ┃ ┗ 📜layout.tsx ┃ ┣ 📂(beforeLogin) ┃ ┃ ┣ 📂@modal ┃ ┃ ┃ ┣ 📂(.)i ┃ ┃ ┃ ┃ ┗ 📂flow ┃ ┃ ┃ ┃ ┃ ┣ 📂login ┃ ┃ ┃ ┃ ┃ ┃ ┗ 📜page.tsx ┃ ┃ ┃ ┃ ┃ ┗ 📂signup ┃ ┃ ┃ ┃ ┃ ┃ ┗ 📜page.tsx ┃ ┃ ┃ ┗ 📜default.tsx ┃ ┃ ┣ 📂_component ┃ ┃ ┃ ┣ 📜LoginModal.tsx ┃ ┃ ┃ ┣ 📜Main.tsx ┃ ┃ ┃ ┣ 📜SignupModal.tsx ┃ ┃ ┃ ┣ 📜login.module.css ┃ ┃ ┃ ┣ 📜main.module.css ┃ ┃ ┃ ┗ 📜signup.module.css ┃ ┃ ┣ 📂i ┃ ┃ ┃ ┗ 📂flow ┃ ┃ ┃ ┃ ┣ 📂login ┃ ┃ ┃ ┃ ┃ ┗ 📜page.tsx ┃ ┃ ┃ ┃ ┗ 📂signup ┃ ┃ ┃ ┃ ┃ ┗ 📜page.tsx ┃ ┃ ┣ 📂login ┃ ┃ ┃ ┗ 📜page.tsx ┃ ┃ ┣ 📜layout.tsx ┃ ┃ ┣ 📜page.module.css ┃ ┃ ┗ 📜page.tsx ┃ ┣ 📜favicon.ico ┃ ┣ 📜globals.css ┃ ┣ 📜layout.tsx ┃ ┗ 📜not-found.tsx ┣ 📂components ┃ ┗ 📜RecordChangePathComponent.tsx ┗ 📂util ┃ ┗ 📜getBeforePath.ts

훤@□□□□ MINGW64 /c/LeeHwon/FlameGuard/FlameGuard/frontend (main)$ pnpm installbash: pnpm: command not found 이렇게 안 뜨는 이유가 무엇일까요..

js 공부중인데 여기서 aa 와 "aa"결과값이 다르게 나오는데 1.이유가 뭔가요? 2.둘 차이점이 뭔가요?자세하게 부탁드립니다 ㅠㅠ

수업 노트 보기에서 노션에 들어가면 따로 즐겨찾기를 할 수 있는 기능이 없는데 어떻게 해야 되나요?

동영상 강의에 있는 내용대로 ProductController에서 @GetMapping("/list")에 @PreAuthorize("hasAnyRole('ROLE_USER','ROLE_ADMIN')")를 작성하고나서 postman에 login 후 accessToken을 가져와서 get방식으로 토큰을 넣어서 입력하면 status : 500, "error": Interner Server Error가 뜹니다.. @PreAuthorize부분을 주석처리하고 실행해보면 list값이 잘 나오네요.. 어디부분이 잘못 된걸까요?? 참고로 CustomSecurityConfig클래스에 @EnableMethodSecurity추가도 했습니다.@PreAuthorize("hasAnyRole('ROLE_USER','ROLE_ADMIN')") @GetMapping("/list") public PageResponseDTO<ProductDTO> list(PageRequestDTO pageRequestDTO){ return productService.getList(pageRequestDTO); } 여기가 ProductController 클래스 package org.zerock.apiserver.security.filter; import com.google.gson.Gson; import jakarta.servlet.FilterChain; import jakarta.servlet.ServletException; import jakarta.servlet.http.HttpServletRequest; import jakarta.servlet.http.HttpServletResponse; import lombok.extern.log4j.Log4j2; import org.springframework.security.authentication.UsernamePasswordAuthenticationToken; import org.springframework.security.core.context.SecurityContextHolder; import org.springframework.web.filter.OncePerRequestFilter; import org.zerock.apiserver.dto.MemberDTO; import org.zerock.apiserver.util.JWTUtil; import java.io.IOException; import java.io.PrintWriter; import java.util.List; import java.util.Map; @Log4j2 public class JWTCheckFilter extends OncePerRequestFilter { @Override protected boolean shouldNotFilter(HttpServletRequest request) throws ServletException { //true == not check String path = request.getRequestURI(); log.info("------check uri---------"+path); if(path.startsWith("/api/member/")){ return true; } //false == check return false; } @Override protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException { log.info("----------------------"); log.info("----------------------"); log.info("----------------------"); String autoHeaderStr = request.getHeader("Authorization"); //bearer // 7개 후 JWT 문자열 try { String accessToken = autoHeaderStr.substring(7); Map<String, Object> claims = JWTUtil.validateToken(accessToken); log.info("JWT claims: " + claims); // filterChain.doFilter(request, response); String email = (String) claims.get("email"); String pw = (String) claims.get("pw"); String nickname = (String) claims.get("nickname"); Boolean social = (Boolean) claims.get("social"); List<String> roleNames = (List<String>) claims.get("roleNames"); MemberDTO memberDTO = new MemberDTO(email, pw, nickname, social.booleanValue(), roleNames); log.info("---------------------------------"); log.info(memberDTO); log.info(memberDTO.getAuthorities()); UsernamePasswordAuthenticationToken authenticationToken = new UsernamePasswordAuthenticationToken(memberDTO, pw, memberDTO.getAuthorities()); SecurityContextHolder.getContext().setAuthentication(authenticationToken); filterChain.doFilter(request, response); }catch(Exception e){ log.error("JWT Check Error --------------------"); log.error(e.getMessage()); Gson gson = new Gson(); String msg = gson.toJson(Map.of("error", "ERROR_ACCESS_TOKEN")); response.setContentType("application/json"); PrintWriter printWriter = response.getWriter(); printWriter.println(msg); printWriter.close(); } //destination filterChain.doFilter(request, response); } } 여기가 JWTCheckFilter부분입니다.

npm run dev시 새로운 에러가 발생하여 재질문 드립니다.http://localhost:3090/Login 연결시, 크롬에서 Failed to compile. 가 발생하였습니다.Module not found: Can't resolve '@utils/fetcher' in '/Users/kanghyun/Desktop/study/react/zerocho/sleact/setting/front/layouts' layouts/workspace.tsx터미널 메세지입니다.ERROR in ./pages/Login/index.tsx 17:0-39Module not found: Error: Can't resolve '@hooks/useInput' in '/Users/kanghyun/Desktop/study/react/zerocho/sleact/setting/front/pages/Login'@ ./layouts/App.tsx 7:9-31@ ./client.tsx 9:0-32 12:95-98ERROR in ./pages/Login/index.tsx 19:0-37Module not found: Error: Can't resolve '@utils/fetcher' in '/Users/kanghyun/Desktop/study/react/zerocho/sleact/setting/front/pages/Login'@ ./layouts/App.tsx 7:9-31@ ./client.tsx 9:0-32 12:95-98ERROR in ./pages/SignUp/index.tsx 17:0-39Module not found: Error: Can't resolve '@hooks/useInput' in '/Users/kanghyun/Desktop/study/react/zerocho/sleact/setting/front/pages/SignUp'@ ./layouts/App.tsx 11:9-32@ ./client.tsx 9:0-32 12:95-98ERROR in ./pages/SignUp/index.tsx 23:0-37Module not found: Error: Can't resolve '@utils/fetcher' in '/Users/kanghyun/Desktop/study/react/zerocho/sleact/setting/front/pages/SignUp'@ ./layouts/App.tsx 11:9-32@ ./client.tsx 9:0-32 12:95-98 ㅡtsconfig.json 파일입니다"paths": { "@hooks/*": ["hooks/*"], "@components/*": ["components/*"], "@layouts/*": ["layouts/*"], "@pages/*": ["pages/*"], "@utils/*": ["utils/*"], "@typings/*": ["typings/*"] }ㅡwebpack.config.ts 파일입니다resolve: { extensions: ['.js', '.jsx', '.front', '.tsx', '.json'], alias: { '@hooks': path.resolve(__dirname, 'hooks'), '@components': path.resolve(__dirname, 'components'), '@layouts': path.resolve(__dirname, 'layouts'), '@pages': path.resolve(__dirname, 'pages'), '@utils': path.resolve(__dirname, 'utils'), '@typings': path.resolve(__dirname, 'typings'), // 경로 폴더들 }, },ㅡ현재 터미널 경로입니다/Desktop/study/react/zerocho/sleact/setting/frontts 폴더에서 설정 후, front 라는 폴더명으로 바꾸어서 진행중입니다. 감사합니다

제공해주신 수업을 잘 들었습니다.마지막 수파베이스 강의에서 구글 Oauth와 연동할때 이용 약관 코드를 제공해 주신다는 언급이 있었던것 같은데, 어디에 올라가 있는지 여쭤보고 싶습니다.

안녕하세요 설치된 익스텐션이 궁금하여 질문드립니다.17:20에 return문에 h1태그를 추가하고 저장하시니까 ()가 자동으로 감싸지는데어떤 익스텐션을 설치해야하나요? 아니면 어떤 설정을 해야하나요?

import style from "./page.module.css"; // 변경 후: import Image from 'next/image'; import { notFound } from "next/navigation"; import { BookData } from "@/types"; export const dynamicParams = true; export async function generateStaticParams() { return [{id: "1"}, {id: "2"}, {id: "3"}]; } async function BookDetail({bookId}:{bookId:string}){ // params가 Promise이므로 먼저 await로 해결(resolve)해야 합니다 const response = await fetch(`${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/${bookId}`) ; if (!response.ok){ if (response.status === 404) { notFound(); } return <section>Failed to fetch books</section>; } const book = await response.json(); const { id, title, subTitle, description, author, publisher, coverImgUrl } = book; return ( <section> <div className={style.cover_img_container} style={{ backgroundImage: `url('${coverImgUrl}')` }} > <img src={coverImgUrl} alt={title || "책 표지"} /> </div> <div className={style.title}>{title}</div> <div className={style.subTitle}>{subTitle}</div> <div className={style.author}> {author} | {publisher} </div> <div className={style.description}>{description}</div> </section> ); } function ReviewEditForm() { async function createReviewAction(formData: FormData) { "use server"; //console.log("server action called"); const content = formData.get("content")?.toString(); const author = formData.get("author")?.toString(); console.log("server action called", { content, author }); } return ( <section > <h2>리뷰 작성</h2> <form action={createReviewAction}> <textarea name="content" placeholder="리뷰를 작성해주세요" ></textarea> <input name="author" placeholder="작성자" /> <button type="submit">리뷰 작성</button> </form> </section> ); } export default function Page({ params }: { params: { id: string } }) { // const bookId = params.id; // 미리 params 처리 return ( <div className={style.container}> <BookDetail bookId={params.id}/> <ReviewEditForm/> </div> ) } 에서 Error: Route "/book/[id]" used `params.id`. `params` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis at Page (src\app\book\[id]\page.tsx:79:33) 77 | return ( 78 | <div className={style.container}> > 79 | <BookDetail bookId={params.id}/> | ^ 80 | <ReviewEditForm/> 81 | </div> 82 | )이에러가 계속 나는데 chatgpt랑 계속 풀어 보려고 해도 쉽지 않네요 params 쓰는 시점 문제인거 같은데 강의 내용을 봐서는 잘모르겠네요 export default function Page({ params }: { params: { id: string } }) { // const bookId = params.id; // 미리 params 처리 return ( <div className={style.container}> <BookDetail bookId={params.id}/> <ReviewEditForm/> </div> ) }bookId 이 부분이 계속 async 어쩌구 하는데

안녕하세요!강의 듣다가 최종 배포에서 질문이 있습니다. 강의에서는 vite.config.js 파일 내용 수정은 없는 것 같은데요아래 순서로 했는데 홈페이지 메인화면에서Blocked request. This host ("5d39-218-159-221-155.ngrok-free.app") is not allowed.To allow this host, add "5d39-218-159-221-155.ngrok-free.app" to server.allowedHosts in vite.config.js.에러가 뜨는데요vite.config.js 파일 수정을 해야되나요? 프론트, 백앤드 서버 실행cmd 창에서 ngrok http 5173 입력index.js 파일에서 아래와 같이 수정 app.use(cors({ //origin: "http://localhost:5173", origin: "https://5d39-218-159-221-155.ngrok-free.app", credentials: true, })); ngrok 에러는 아래와 같아요 08:36:45.923 KST GET /favicon.ico 403 Forbidden

3.5) 리액트 서버 컴포넌트 주의사항강의의 12분 쯤- 서버 컴포넌트를 클라이언트 컴포넌트의 children props로 사용하면, 브라우저에서 서버컴포넌트가 렌더링 되지 않는 걸 보여주는 예시에서요.(with-searchbar)/page.tsx1 (with-searchbar)/client-component.tsx  (with-searchbar)/server-component.tsx현재 잘 따라한거 같은데, 서버 컴포넌트가 브라우저에 출력이 되더라구요. 서버 컴포넌트로서 출력이 된거 같긴한데. 브라우저에서 서버 컴포넌트가 보이면 안되는 거 아닌가 싶은데, 현재 next 15.3 이라서 그런건가 싶기도 하구요!

안녕하세요. 강사님. tailwind v4에서 hsl 대신 oklch를 사용한다고 하는데,,, 이에 대한 안내도 있을까요? 아직 강의를 다 들은건 아니라서 커스텀 색상을 얼마나 추가할지는 모르겠는데 혹시 몰라서요!   

 선생님! useState()에 intialState 라고 표시되는건 어떻게 하는건가요?

퍼블리셔로 일하고 있는데..설정하는 부분이 녹록치 않아 이렇게 질문드립니다.제가 하고자 하는 것은 라이트,다크 테마시 주요 컬러와 기타 색상등을 변경하려고 하는데요..css 변수 처리 예는 아래와 같습니다./* root 라이트테마 기본 변수 */ :root { --text-color: #000; --bg-color: #fff; } /* 다크 테마 기본변수 */ .dark { --text-color: #fff; --bg-color: #000; }테마 설정은 다음과 같이 진행했습니다.preivew.tsx 에 decorators 배열로 추가함.import { withThemeByClassName } from '@storybook/addon-themes';이렇게 하니까 dark 클래스는 잘 붙고 있는데..문제는 상단 패널에 기본적으로 레이어로 떠서 클릭할수 있는 라이트,다크테마는 컴포넌트 화면의 배경컬러가 변경되지만 제가 애드온한 것은 토글버튼은 라이트,다크버튼이 나오더라구요.. 근데 문제는 애드온 한것은 클래스만 제어되고 있고 컴포넌트의 배경컬러를 제어하려니까 잘 안되더라구요..상단 기본 패널의 테마설정 부분과 애드온 한 부분의 싱크가 안맞는 부분도 있구요..이것을 어떤 식으로 처리해야하는지..조언을 구하고 싶습니다.강의 잘 듣고 있습니다. 감사합니다.

// MyClock.js import MyClockImage from "./MyClockImage"; import MyClockTime from "./MyClockTime"; import './MyClock.css'; function MyClock() { return( <div className="c1"> <MyClockImage/> <MyClockTime/> </div> ); } export default MyClock; MyClockImage.jsimport clock from './clock.png' function MyClockImage() { return( <div className="c2"> <img src={clock} alt='clock'/> </div> ); } export default MyClockImage; MyClockTime.js function MyClockTime() { return( <div className="c3"> 현재 시각 : {new Date().toLocaleTimeString() } </div> ); } export default MyClockTime;  MyClock.css// c1 클래스의 스타일 .c1 { width: 100% ; height: 100% ; display: flex; flex-direction:column; justify-content: center; align-items: center; background-color: #282c34; } .c2, .c3 { display:flex; justify-content:center; align-items:center; } // 이미지 .c2 { width: 100%; height: 60%; } // 글자 .c3 { width: 100%; height: 40%; color:white; }  App.jsimport logo from './logo.svg'; // svg image file import './App.css'; // 전역 css (모듈 css는 import styles ... module.css) import { FaMapMarked } from "react-icons/fa"; // icon import MapView from './MapView'; import Hello from './01_Hello_Component/Hello'; import MyClock from './02_MyClock/MyClock'; import { BiHomeHeart } from "react-icons/bi"; import MyDiv1 from './03_Probs/MyDiv1'; import MyList from './04_Probs_Advanced/MyList'; import Lotto from './05_Lottery_UseState_Hook/Lotto'; // flex-col : 수직 배치 // w-full : 화면 전체 너비 // h-screen : 화면 전체 높이 // mx-auto : 컴포넌트 내부 수평 중앙 정렬 // justify-between : flex 컨테이너 안 항목 양끝 정렬 + 사이 공간 자동 설정 // text-xl : 텍스트 크기 XL // p-10 : padding, bg: background color // grow : 헤더, 푸터 사용하고 남은 너비를 main이 사용하겠다. // overflow-y-auto: 수직으로 내용 많아지면, 자동 스크롤 생성된다. function App() { return ( <div className="flex flex-col w-full h-screen mx-auto"> <header className='flex justify-between items-center text-xl font-bold h-20 p-10 bg-slate-200'> <p>리액트 기초 : probs</p> <p><BiHomeHeart/></p> </header> <main className='grow w-full flex justify-center items-center overflow-y-auto'> <MyClock/> {/* <MyDiv1/> */} {/* <MyList/> */} {/* <Lotto/> */} </main> <footer className='flex justify-center items-center h-20 bg-black text-slate-100'> ⓒ Joo </footer> {/* <MapView/> */} </div> // <div className="App" style={{height: '100vh'}}><MapView/></div> ); } export default App; // 외부에서 import할 수 있도록, 무료 양질의 강의에 감사드립니다.

안녕하세요 강의 너무 잘 보고 있습니다. 공부를 하다가 궁금한점이 생겨서 질문을 드립니다.메모를 추가 삭제 기능에서 처음에는 추가같은 경우에는....const handleAddNote = () => { setNotes([...notes, {id: "", content: ""}]) }이런식으로 ...notes로 기존 값에다가 id, content로 새로운 메모를 추가하는 기능으로 알고 있는데 나중에는...// 새로운 캔버스 export function createCanvas() { const newCanvas = { title: uuid().substring(0, 4) + '새로운 린 캔버스', lastModified: dayjs().format('YYYY-MM-DD HH:mm:ss'), category: '신규', }; return canvases.post('/', newCanvas);이런식으로 추가기능을 만들고 삭제도 filter를 이용을 하는데 나중에는 export async function deleteCanvas() { await canvases.delete(`/${id}`); } 이런식으로 삭제 기능을 작성이 되었더라구요. 첫번째 코드들은 처음에는 추가, 삭제기능이 되지만 새로고침 후에는 다시 원래대로 나오고 두번째 코드들은 서버에서 추가, 삭제 기능을 만들어서 새로고침을 하면 실제로도 추가, 삭제 기능을 하게 되는 것인가요? 만약 그렇다면 첫번째 코드들은 새로고침을 하면 원대대로 되는데 왜 사용이 되는건지 궁금합니다.

안녕하세요 제로초님next 15버전으로 바뀌고나서 새로 처음부터 다시 강의를 들으면서 만들어 보고 있습니다. next 15버전으로 바뀌고 나서 옛날꺼랑 msw 설정이 바뀌었더라구요그런데 강의대로 msw 설정을 하니 ssr 적용이 제대로 안되는 것 같습니다.msw 설정 후 페이지의 network 탭에 localhost document의 미리보기 내용이 없습니다. ssr이 된다면 document에 미리보기에 내용이 넘어와야 하는데 msw 설정 후에 없습니다. 옛날에 만들어 놓았던, next14 버전으로 했었던 프로젝트에서는 미리보기에 내용이 잘 담겨 ssr이 잘되고 있고,15버전으로 진행한 프로젝트에서layout에 있는 mswprovider 컴포넌트를 없애주니 다시 미리보기에 내용이 생기는 것으로 보아 msw 설정에서 문제가 생긴 것으로 추측됩니다. 아래는 옛날 14 버전으로 진행했던 코드입니다. msw 2.1 버전입니다."use client"; import { useEffect } from "react"; export const MSWComponent = () => { useEffect(() => { if (typeof window !== "undefined") { if (process.env.NEXT_PUBLIC_API_MOCKING === "enabled") { require("@/mocks/browser"); } } }, []); return null; }; 아래는 지금 하고있는 코드입니다. msw 2.7.3 버전입니다."use client"; import { Suspense, use } from "react"; import { handlers } from "@/mocks/handlers"; const mockingEnabledPromise = typeof window !== "undefined" // browser일 때 ? import("@/mocks/browser").then(async ({ default: worker }) => { if (process.env.NODE_ENV === "production") { return; } await worker.start({ // msw가 처리할 수 없는 요청이 들어왔을 때 onUnhandledRequest(request, print) { if (request.url.includes("_next")) { // next가 내부적으로 처리하는 url이기 때문에 msw가 처리할 필요 없음 그래서 return return; } print.warning(); }, }); worker.use(...handlers); (module as any).hot?.dispose(() => { worker.stop(); }); console.log(worker.listHandlers()); }) : Promise.resolve(); export function MSWProvider({ children, }: Readonly<{ children: React.ReactNode; }>) { // If MSW is enabled, we need to wait for the worker to start, // so we wrap the children in a Suspense boundary until it's ready. return ( <Suspense fallback={null}> <MSWProviderWrapper>{children}</MSWProviderWrapper> </Suspense> ); } function MSWProviderWrapper({ children, }: Readonly<{ children: React.ReactNode; }>) { // use 사용해서 promise 실행 기다리고 children return use(mockingEnabledPromise); return children; }  제 추측으로는 MSWProvider에 있는 Suspense때문에 ssr 이 안되는 것 같은데, 맞는지 궁금합니다.그리고 맞다면 next 사용시 msw로 데이터를 mocking 하게 되면 ssr 확인을 어떻게 해야 할까요??

어떤 사이트들을 보면 스크롤 하면 그 화면에 맡게 자동으로 그 다음 리스트들이 로딩해서 보여주던데요 이방식은 상호 작용이 있는것인지상호 작용이 없다고 봐야 하는지 궁금하네요

2.20 배포하기를 하다 보니현재 api 서버를 미리 만들어 주셔서 테스트 했는데사실상 section2 프로젝트 안에서 db 연결해서 진행되게 allinone으로 개발하는게 더 초보 입장에서 이해하기 쉬운데 원래 이렇게 구분해서 작업해야 하나요