172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
한 입 크기로 잘라먹는 Next.js
말그대로 입니다. 거의 마지막 강의에서 vercel 프론트엔드 앱에 들어가서 function의 리전을 서울이 아니라 도쿄로 바꾸고 배포했는데, 네트워크탭에 book/[id] 페이지의 문서의 X-Vercel-id는 icn1::~ 이 찍힙니다. 다만 index 페이지의 문서는 icn1::iad1::~~ 으로 찍히는데 그 이유가 무엇일까요? (리전은 도쿄로 하고 배포했습니다.) 또 icn은 인천의 약자인가요?
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
✅ 모든 질문들은 슬랙 채널에서 답변드리고 있습니다. 💡 ”로펀의 인프런 상담소” 슬랙 채널 가입하기 💡 평일중에는 퇴근 이후(저녁 7시)에 답변을 받아보실 수 있고, 주말중에는 상시 답변드리고 있습니다. 강의보고 todolist할때 컴포넌트 분리 안했던 것 같은데... dropbox (선택수강)UI구축에 보면 supabase-todo-list vscode에 컴포넌트폴더에 ui컴포넌트 들이 있네요... 혹시 추가 작업을 하셨던 것일까요??
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요 강사님. 양질의 강의 잘 듣고 있습니다. 다름이 아니라 클라이언트 컴포넌트와 서버 컴포넌트 개념 설명에서, "상호작용(Interaction)이 지속적으로 발생하는 컴포넌트는 클라이언트 컴포넌트로 작성해야 한다" 라고 이해했었습니다. 그런데 리뷰를 작성하는 기능 또한 상호작용이 지속적으로 발생하는 것이 아닌가 하는 의문이 들었습니다. 제가 이해를 잘 못 한 부분이 있는 걸까요? 아니면 서버 컴포넌트에서도 어느정도 상호작용을 처리할 수 있는건가요?
해결됨
한 입 크기로 잘라먹는 Next.js
리엑트를 이어서 넥스트까지 완강~~! 🥳 강의 재밌게 잘 달렸습니다 좋은 강의 감사합니다 🙇♂
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요! 강의 잘 보고있습니다! 사전렌더링시에 해당 페이지에 대한 HTML과 JS bundle을 받고 수화 과정을 통해 상호작용을 하는 건 이해를 하였습니다! 궁금한점은 그럼 해당 페이지가 아닌 다른 페이지의 HTML과 Js파일들은 프리페칭 과정에서 받아 CSR방식으로 동작하는건가요??
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
안녕하세요! next.js 설치 완료후 package.json을 확인해보니 테일윈드가 3.4.1 버전이 아닌 4.0.14 버전이 설치 되어있음을 확인했습니다. 강의 내용과 다른점이 있어 node_modules , yarn lock 삭제후 버전 다운그레이드를 시도해보았지만 자꾸 에러가나서.. 테일윈드 독스를 찾아 새로운 버전을 적용시켰어요 https://tailwindcss.com/docs/installation/framework-guides/nextjs 다만 기존 강의에서는 tailwind.config.js 에서 변수를 설정하는 법을 알려주셨는데.. 그 방법에 대해서는 해결방법을 찾지 못하였습니다. 나만의 변수를 만들어 다양한 컴포넌트에서 재사용하는 방법이 테일윈드의 강의의 쟁점이라고 생각해서. global.css에 변수를 만들어 컴포넌트 스타일에 적용시키는 방법으로 비슷하게는 진행해 보았는데 이렇게 해도 되는 사항 일까요? 또한 강의 후반부에 @layer로 utilities를 만들어 스타일을 적용시키는 부분에서 스타일 자체는 먹지만, 테일윈드 자체에서 제공해주는 반응형 명령어에는 적용이 안돼요 ㅠㅠ 좋은 방법이 있을까요.....
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
학습한 내용 이미지와 코드를 블로그에 올려도 되나요??
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요 강사님 깃헙 파일에서 누락된 코드를 확인하였습니다. https://github.com/winterlood/onebite-next/blob/main/section07/chapter03/src/components/review-editor.tsx [변경 전] <input name="bookId" value={bookId} hidden /> [변경 후] <input name="bookId" value={bookId} hidden readOnly/>
미해결
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
에러나 로딩을 전역적으로 상태로 봐서 에러나 로딩을 띄우는게 아닌, 페이지별로 전부 다 복붙으로 넣는 이유가 따로 있나요..? 일단 따라해보고있긴 한데, 뭔가 좀 아닌것 같아서 질문 드립니다ㅠㅜ
해결됨
Next + React Query로 SNS 서비스 만들기
문제 발생 : npm run start:dev 시 위와 같은 에러 발생 Error: connect ECONNREFUSED ::1:6379 at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1615:16) { errno: -4078, code: 'ECONNREFUSED', syscall: 'connect', address: '::1', port: 6379 } 문제 원인: Redis 연결 실패 → 애플리케이션이 Redis 서버(포트 6379 )에 연결하려 했지만 거부됨. ECONNREFUSED 오류는 Redis가 실행되지 않거나, 접근할 수 없는 상태 일 때 발생. 문제 해결 : Redis 기본 설정은 IPv6 ( ::1 )을 사용함. IPv4( 127.0.0.1 )로 강제 변경해 해결 localhost 가 아닌 127.0.0.1 로 변경 // .env 기존 코드 REDIS_URL=redis://localhost:6379 // .env 변경 코드 REDIS_URL=redis://127.0.0.1:6379 위 에러 만나고 애쓴 부분 공유합니다. 혹시 잘못된 해결 방법이라면 알려주시면 감사하겠습니다!
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
window.scrollTo({ top: 0, behavior: "smooth" }); 제 화면은 왜 부드럽게 스크롤 이동이 안되는걸까요? behavior 빠졌을 때와 차이가 없어보여요.. 사용 브라우저는 크롬입니다
미해결
Next + React Query로 SNS 서비스 만들기
해당 강좌 default.tsx에서 기본 페이지로 사용시킬때 default.tsx를 처리해두고 빈페이지를 구성하는 형태를 사용하는 예제를 따라서 진행해보았는데요. 여기서 궁금한점이 page.tsx를 @modal에 하나더 유지시키고 return null 처리를 하는 컴포넌트를 두어도 똑같이 동작은 되는데, default.tsx 를 좀 더 권장하는 이유가 있을까요?
해결됨
Next + React Query로 SNS 서비스 만들기
아래가 제가 이해한 내용인데 맞을까요? 요청 메모화 ssr 요청 사이클 내 에서만 페치 결과를 캐싱하여 중복 요청 방지 (한 서버 요청 사이클 끝나면 초기화) 예를들어 Home컴포넌트와 자식 컴포넌트인 Header 컴포넌트에서 렌더링 시 에 동일한 요청을 날렸다면 Home컴포넌트의 요청이 캐싱되고 Header 컴포넌트의 요청은 캐싱된 값 사용 데이터 캐시 한 ssr 요청 사이클 내 뿐만 아니라 서버에 전역적으로 유지되는 캐시 요청 메모화와 다르게 서버 요청 끝나도 초기화되지 않고 지속됨 즉, 여러 클라이언트 요청 간에도 유지됨 A가 먼저 페이지 요청 → 백엔드에 요청 후 넥스트 서버에 데이터 캐싱 B가 같은 페이지 요청 → 백엔드 요청 없이 넥스트 서버 캐시에서 데이터 반환 결론 즉, 요청 메모화는 렌더링 최적화 , 데이터 캐시는 네트워크 요청 절약 을 위한 것
미해결
한 입 크기로 잘라먹는 Next.js
프로젝트를 설치하고 npm run dev로 실행하니 > section02@0.1.0 dev > next dev 이 두 줄 나오고 바로 종료되는데 뭐때문에 그런걸까요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
import BoardCommentWriteUI from "./boardCommentWrite.presenter"; import { ChangeEvent, useState } from "react"; import { useMutation } from "@apollo/client"; import { CREATE_BOARD_COMMENT, UPDATE_BOARD_COMMENT, } from "./boardCommentWrite.queries"; import { useRouter } from "next/router"; import { FETCH_BOARD_COMMENTS } from "../list/boardCommentList.queries"; import { IMutation, IMutationCreateBoardCommentArgs, IMutationUpdateBoardCommentArgs, } from "../../../../commons/types/generated/types"; import { IBoardCommentWriteProps } from "./boardCommentWrite.types"; export default function BoardComment(props: IBoardCommentWriteProps) { const [createBoardComment] = useMutation< Pick<IMutation, "createBoardComment">, IMutationCreateBoardCommentArgs >(CREATE_BOARD_COMMENT); const [updateBoardComment] = useMutation< Pick<IMutation, "updateBoardComment">, IMutationUpdateBoardCommentArgs >(UPDATE_BOARD_COMMENT); const [writer, setWriter] = useState(""); const [password, setPassword] = useState(""); const [comment, setComment] = useState(""); const [star, setStar] = useState(0); const router = useRouter(); const handleChangeWriter = (event: ChangeEvent<HTMLInputElement>) => { setWriter(event.target.value); }; const handleChangePassword = (event: ChangeEvent<HTMLInputElement>) => { setPassword(event.target.value); }; const handleChangeComment = (event: ChangeEvent<HTMLTextAreaElement>) => { setComment(event.target.value); }; const updateComment = () => { alert("수정하기 입니다."); }; const onClickSubmitComment = async () => { try { if (typeof router.query.boardId !== "string") { alert("시스템에 문제가 있습니다."); return; } const result = await createBoardComment({ variables: { createBoardCommentInput: { writer, password, contents: comment, rating: star, }, boardId: router.query.boardId, }, refetchQueries: [ { query: FETCH_BOARD_COMMENTS, variables: { boardId: router.query.boardId }, }, ], }); } catch (error) { if (error instanceof Error) { alert(error.message); } } setWriter(""); setComment(""); setPassword(""); setStar(0); }; return ( <BoardCommentWriteUI handleChangeWriter={handleChangeWriter} handleChangePassword={handleChangePassword} handleChangeComment={handleChangeComment} onClickSubmitComment={onClickSubmitComment} updateComment={updateComment} setStar={setStar} writer={writer} comment={comment} password={password} el={props.el} /> ); } boardCommentWriter.container.tsx 에서 updateComment 바인딩이 안된것인지 함수가 작동을 안하는 것인지 updateComment의 "수정하기 입니다. " 알림창이 안뜹니다. 수정/삭제 버튼 onClick 내부에서 해봐도 태그 바깥에서 삼항연산자를 써보아도 적용이.. 안됩니다. onClickSubmitComment 함수는 제대로 작동하는데 말이죠 ㅠㅠ 도저히 왜 안되는지 모르겠어요 import * as S from "../../board/commons/style/style"; import * as Own from "./boardCommentWrite.styles"; import { IBoardCommentWriteProps } from "./boardCommentWrite.types"; export default function BoardCommentWriteUI(props: IBoardCommentWriteProps) { console.log(props.el); return ( <S.BoardWrapper> <S.Row> <Own.Writer placeholder="작성자" onChange={props.handleChangeWriter} value={props.editComment ? props.el?.writer : props.writer} readOnly={props.editComment} /> <Own.Password placeholder="비밀번호" onChange={props.handleChangePassword} value={props.password} /> <Own.RankWrapper> <Own.RateComment value={props.editComment && props.el.rating} onChange={props.setStar} /> </Own.RankWrapper> </S.Row> <Own.Comment onChange={props.handleChangeComment} placeholder="댓글을 입력해주세요." value={props.editComment ? props.el.contents : props.comment} /> <Own.BottomComments> <S.Row> <p>0</p> <div>/</div> <p>100</p> </S.Row> {/* <Own.SubmitButton onClick={ props.editComment ? props.updateComment : props.onClickSubmitComment } > {props.editComment ? "수정하기" : "등록하기"} </Own.SubmitButton> */} {props.editComment ? ( <Own.SubmitButton onClick={props.updateComment}> 수정하기 </Own.SubmitButton> ) : ( <Own.SubmitButton onClick={props.onClickSubmitComment}> 등록하기 </Own.SubmitButton> )} </Own.BottomComments> </S.BoardWrapper> ); }
미해결
Next + React Query로 SNS 서비스 만들기
Next.js에서 서버 컴포넌트는 서버에서 실행되기 때문에, useEffect 없이 컴포넌트 내부에서 직접 fetch 요청을 보낼 수 있는 것으로 알고 있습니다. 또한, 서버 액션은 백엔드 없이 Next.js 풀스택 환경에서 DB에 직접 접근할 때 주로 사용하는 것으로 이해하고 있습니다. 그렇다면, 별도로 백엔드가 존재하는 경우에도 서버 액션을 사용할 필요가 있나요? 그리고 실제로 현업에서도 백엔드가 따로 있을 경우에 서버액션을 사용하나요? 감사합니다!
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
안녕하세요 ~ 수업 듣기 시작하고 싸이월드 만들기 1탄에서 피그마가 나오는데 예제자료를 보면서 할수 있는 피그마 링크가 어디에 있는지요 ?
해결됨
한 입 크기로 잘라먹는 Next.js
next는 자동적으로 캐시 저장기능이 있고 next에서도 DB 데이터가 필요한 페이지에서 직접 불러와서 사용하는 것을 권장한다 라고 말씀해주셨는데요 그러면 next는 보통 zustand, recoli, redux와 같은 상태관리 라이브러리를 사용하지 않는 것을 추천하시나요? 아니면 사용하는 것을 추천하시나요??
미해결
Next + React Query로 SNS 서비스 만들기
useEffect(() => { if (inView) { hasNextPage &&fetchNextPage(); } }, [inView, hasNextPage, fetchNextPage]); 이렇게 useEffect를 작성하셨는데 fetchNextPage를 useEffect의 의존성배열에 넣는 이유가 궁금합니다
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요! 덕분에 nextjs에 대해 깊에 알아가고 있습니다. 제목처럼 page 컴포넌트에 'use client'를 명시하고 빌드 해도 해당 페이지에 대한 rsc_payload가 생성되어서 .next 빌드 파일을 살펴 보았습니다. 페이지를 클라이언트 컴포넌트로 작성하던 서버 컴포넌트로 작성하던 .next 빌드 파일 server, static/chunk/app 폴더에 모두 page.js 파일이 생성되는 것을 확인했습니다. 1. server 폴더에 있는 page.js는 해당 페이지에 필요한 번들 파일에 대한 내용인 거고, static 폴더에 있는 page.js는 해당 페이지에 그려질 내용에 대한 파일인 건가요?? 2. 그래서 page컴포넌트를 클라이언트 컴포넌트로 만들어도 페이지에서 사용할 번들 파일의 주소를 알아야 하기 때문에 rsc_payload를 만들어서 내려주는 건가요??
