172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
코드로 배우는 React 19 with 스프링부트 API서버
todo list 에서 검색어를 입력하여 검색된 결과를 화면에 출력하려면 어떻게 구현해야 하는지요? 예제에는 이런 것이 없는 거 같은데 제가 대충봐서 잘못 이해하고 있는 건가요? 전체적인 흐름으로 설명해주시면 감사하겠습니다.
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
fetchTravelproducts에서 클릭으로 상세 페이지로 들어가면 fetchTravelproduct 의 data 값을 보여주는데 API 요청에서 data 값을 확인하면 seller 값이 들어있는데 data.fetchTravelproduct.seller를 콘솔에 찍으면 null 이 뜹니다. (다른 데이터는 정상적으로 불러옵니다.) fetchTravelproducts에서는 판매자 이름이 잘 출력이 되는데 상세페이지에 들어가면 해당 fetchTravelproduct API 요청으로 가져와도 판매자 데이터가 없는 상태로 뜨는데 문제가 뭘까요? 여기서 상세페이지에서 새로고침을 하면 정상적으로 판매자가 보여집니다. fetchTravelproducts에서 캐싱하는 과정에 문제가 있는 걸 까요? // 상세 페이지 import { Query } from "@/entities/api/graphql"; import { gql, useQuery } from "@apollo/client"; export const TRAVEL_PRODUCT = gql` query fetchTravelproduct($travelproductId: ID!) { fetchTravelproduct(travelproductId: $travelproductId) { _id name remarks contents price tags images pickedCount travelproductAddress { zipcode address addressDetail lat lng } seller { _id name picture } createdAt } } `; export const useFetchTravelProduct = ({ travelId }: { travelId: string }) => { const result = useQuery<Pick<Query, "fetchTravelproduct">>(TRAVEL_PRODUCT, { variables: { travelproductId: travelId }, }); return result; }; // 목록 페이지 import { Query } from "@/entities/api/graphql"; import { gql, useQuery } from "@apollo/client"; const TRAVEL_PRODUCTS = gql` query fetchTravelproducts($isSoldout: Boolean, $search: String, $page: Int) { fetchTravelproducts(isSoldout: $isSoldout, search: $search, page: $page) { _id name remarks contents price tags images pickedCount travelproductAddress { zipcode address addressDetail lat lng } buyer { _id name picture } seller { _id name picture } createdAt } } `; interface UseFetchTravelProductsArgs { isSoldout: boolean; search: string | null; page: number; } export const useFetchTravelProducts = ({ isSoldout, search, page, }: UseFetchTravelProductsArgs) => { const result = useQuery<Pick<Query, "fetchTravelproducts">>(TRAVEL_PRODUCTS, { variables: { isSoldout, search, page, }, }); return result; };
미해결
Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
안녕하세요 선생님! 친절한 설명과 함께 강의 잘 듣고 있습니다. 강의교안에 링크로 남겨주신 것들 Cursor AI 설정에 Docs로 추가시에 add 한 것들이 자꾸만 사라지는 오류가 있습니다. 이전 강의에서도 사라지는 오류가 있을 때 재시도 하면 괜찮다고 하셔서 여러 번 시도했는데, 자꾸만 사라지네요 ㅠㅠ 뭔가 설정상의 문제가 있을까요?
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
여기서 time=time-1 붙였는데 시간1초씩줄어드는거 적용이 안되요 도와주세요 ㅠㅠ
미해결
실무에 바로 적용하는 스토리북과 UI 테스트
강의에 있는 커맨드가 사용되지 않아서 이곳 저곳 돌아다니다가 발견했네요 npx @tailwindcss/cli -i ./src/index.css -o ./src/output.css --watch
미해결
한 입 크기로 잘라먹는 Next.js
안녕하세요! 2-19에서 og태그를 통한 SEO 설정에서 궁금한 점이 생겼습니다. 강의 마지막에 페이지가 fallback 되는 동안 보여줄 컴포넌트에서도 Head컴포넌트를 새로 만들어 og태그를 설정해주라고 설명해주셨는데, 데이터를 못 받아서 book에 null값을 받은 경우에 보여주는 페이지에선 og태그를 설정해줄 필요가 없을까요? 검색엔진에 노출되기 위해 og태그를 페이지마다 입력해줘야 한다면 이런 오류 페이지에도 og태그를 설정해줘야 할 거 같아서요!
미해결
React 완전 끝내기: useHoooooook
name 이 선언되어있지않아서 실행시 에러가납니다
해결됨
한 입 크기로 잘라먹는 Next.js
만약 앱라우터에서 로컬 스토리지 사용 시, 클라이언트 컴포넌트에서 사용할 것이고 서버에는 없는 데이터가 클라이언트인 브라우저에는 있을수도 있을 것 같은데 이 경우 어떻게 해결하는게 보편적인가요? 생각나는건 하이드레이션 에러를 무시하는 프로퍼티가 있었던 것 같은데 이 방법은 안좋을 것 같고, 동적으로 클라이언트에서만 렌더링 하던가 같은 방법으로 Suspense로 묶어서 클라이언트에서만 렌더링 되게 하는 방법이 있을 것 같은데 강사님 생각이 궁금해 질문 드립니다. 항상 감사합니다!
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 질문드릴게 있습니다. '/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
해결됨
Next.js와 yolov11로 화재감지 시스템 구축하기
훤@□□□□ MINGW64 /c/LeeHwon/FlameGuard/FlameGuard/frontend (main) $ pnpm install bash: pnpm: command not found 이렇게 안 뜨는 이유가 무엇일까요..
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
js 공부중인데 여기서 aa 와 "aa"결과값이 다르게 나오는데 1.이유가 뭔가요? 2.둘 차이점이 뭔가요? 자세하게 부탁드립니다 ㅠㅠ
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
수업 노트 보기에서 노션에 들어가면 따로 즐겨찾기를 할 수 있는 기능이 없는데 어떻게 해야 되나요?
미해결
코드로 배우는 React 19 with 스프링부트 API서버
동영상 강의에 있는 내용대로 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부분입니다.
미해결
Slack 클론 코딩[실시간 채팅 with React]
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-39 Module 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-98 ERROR in ./pages/Login/index.tsx 19:0-37 Module 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-98 ERROR in ./pages/SignUp/index.tsx 17:0-39 Module 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-98 ERROR in ./pages/SignUp/index.tsx 23:0-37 Module 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/front ts 폴더에서 설정 후, front 라는 폴더명으로 바꾸어서 진행중입니다. 감사합니다
해결됨
(2025) MBTI 테스트 기반 수익형 웹사이트 만들기 - <코딩 배워 사업하자>
제공해주신 수업을 잘 들었습니다. 마지막 수파베이스 강의에서 구글 Oauth와 연동할때 이용 약관 코드를 제공해 주신다는 언급이 있었던것 같은데, 어디에 올라가 있는지 여쭤보고 싶습니다.
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요 설치된 익스텐션이 궁금하여 질문드립니다. 17:20에 return문에 h1태그를 추가하고 저장하시니까 ()가 자동으로 감싸지는데 어떤 익스텐션을 설치해야하나요? 아니면 어떤 설정을 해야하나요?
해결됨
한 입 크기로 잘라먹는 Next.js
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 어쩌구 하는데
해결됨
React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
안녕하세요! 강의 듣다가 최종 배포에서 질문이 있습니다. 강의에서는 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
해결됨
한 입 크기로 잘라먹는 Next.js
3.5) 리액트 서버 컴포넌트 주의사항 강의의 12분 쯤 - 서버 컴포넌트를 클라이언트 컴포넌트의 children props로 사용하면, 브라우저에서 서버컴포넌트가 렌더링 되지 않는 걸 보여주는 예시에서요. (with-searchbar)/page.tsx1 (with-searchbar)/client-component.tsx (with-searchbar)/server-component.tsx 현재 잘 따라한거 같은데, 서버 컴포넌트가 브라우저에 출력이 되더라구요. 서버 컴포넌트로서 출력이 된거 같긴한데. 브라우저에서 서버 컴포넌트가 보이면 안되는 거 아닌가 싶은데, 현재 next 15.3 이라서 그런건가 싶기도 하구요!
미해결
Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
안녕하세요. 강사님. tailwind v4에서 hsl 대신 oklch를 사용한다고 하는데,,, 이에 대한 안내도 있을까요? 아직 강의를 다 들은건 아니라서 커스텀 색상을 얼마나 추가할지는 모르겠는데 혹시 몰라서요!
