묻고 답해요
147만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
순위 정보를
불러오고 있어요
-
미해결한 입 크기로 잘라먹는 Next.js(v15)
book/[id] 과 같은 동적경로에 대응하는 페이지가 어떻게 풀라우트캐시가 동작할 수 있죠?
선생님 강의 5-3) 9분 10초를 보다가 궁금한 것이 있습니다~generateStaticParams으로 지정했던 id값이 아닌4번페이지에 접속했을 때 해당 페이지가 실시간으로 다이나믹하게 페이지가 생성되고 풀라우트캐시에 저장된다고 하셨는데요 풀라우트캐시는 static페이지에서만 동작한다고 알고 있고, [id]컴포넌트에서 fetch함수에 캐싱 옵션으로 'force-cache'을 설정한 것도 아닌데 어떻게 풀라우트 캐시가 동작할 수 있나요??
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
타입스크립트 강의 할인 쿠폰 문의
리액트 종강으로 얻은 타입스크립트 할인 쿠폰인데 입력하니까 이렇게 뜨는데 그럼 못받는건가요 ㅜㅜ
-
미해결Next + React Query로 SNS 서비스 만들기
질문
쌤하트나 리포스트를 누를 때 마다가끔씩TypeError: data.pages.map is not a function 이런 에러 PostRecommend 섹션에 뜨는데 이런 경우가 종종 발생할까요 ?
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
리액트 컴포넌트 라이프 사이클 중 update 관련 질문
안녕하세요 강사님! 항상 좋은 강의 감사합니다:)강의를 보던 중 강사님 께서는 update 단계에서 useEffect의 두번째 인수 deps를 생략하라고 하셨는데 아래와 같이 deps에 state값들(count, input)을 주고 변화 시켜도 콘솔에 생략했을 때와 똑같이 update가 출력되는 것을 확인했는데 무슨 차이인지 궁금합니다! <deps 생략 코드> useEffect(() => { if (!isMount.current) { isMount.current = true; return; } console.log("update"); }); <deps 추가 코드>useEffect(() => { if (!isMount.current) { isMount.current = true; return; } console.log("update"); }, [count, input]);
-
미해결코드로 배우는 React with 스프링부트 API서버
moveToList 질문드려요
상품쪽 moveToList에서 page하고 size추가 안해도 useCustomMove 이쪽에const page = getNum(queryParams.get('page'), 1) const size = getNum(queryParams.get('size'), 10)이렇게 되어있어서 따로 moveToList에서page하고 size를 안넣어도 잘 이동이 되던데잘못된걸까요??
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
일기 수정 content 기본 값이 원래 일기 내용으로 안보이고..
제가 1번 일기 수정을 누르고 수정 페이지에 들어가면1번일기의 오늘의 일기 기본값으로 "1번 일기 내용"(원본 content) 있어야 하잖아요? 근데 content 표기는 안되고 placeholder만 보입니다.. 아래는 코드입니다import { useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; import Button from "./Button"; import "./Editor.css"; import EmotionItem from "./EmotionItem"; const emotionList = [ { emotionId: 1, emotionName: "완전 좋음" }, { emotionId: 2, emotionName: "좋음" }, { emotionId: 3, emotionName: "그럭저럭" }, { emotionId: 4, emotionName: "나쁨" }, { emotionId: 5, emotionName: "끔찍함" }, ]; const getStringedDate = (targetDate) => { // 날짜 -> YYYY-MM-DD let year = targetDate.getFullYear(); let month = targetDate.getMonth() + 1; let date = targetDate.getDate(); if (month < 10) { month = `0${month}`; } if (date < 10) { date = `0${date}`; } return `${year}-${month}-${date}`; }; const Editor = ({ initData, onSubmit }) => { const [input, setInput] = useState({ createdDate: new Date(), emotionId: 3, content: "", }); const nav = useNavigate(); useEffect(() => { if (initData) { setInput({ ...initData, createdDate: new Date(Number(initData.createdDate)), }); } }, []); const onChangeInput = (e) => { let name = e.target.name; let value = e.target.value; if (name === "createdDate") { value = new Date(value); } setInput({ ...input, [name]: value, }); }; const onClickSubmitButton = () => { onSubmit(input); }; return ( <div className="Editor"> <section className="date_section"> <h4>오늘의 날짜</h4> <input name="createdDate" onChange={onChangeInput} value={getStringedDate(input.createdDate)} type="date" /> </section> <section className="emotion_section"> <h4>오늘의 감정</h4> <div className="emotion_list_wrapper"> {emotionList.map((item) => ( <EmotionItem onClick={() => onChangeInput({ target: { name: "emotionId", value: item.emotionId, }, }) } key={item.emotionId} {...item} isSelected={item.emotionId === input.emotionId} /> ))} </div> </section> <section className="content_section"> <h4>오늘의 일기</h4> <textarea name="content" value={input.content} onChange={onChangeInput} placeholder="오늘은 어땠나요?" ></textarea> </section> <section className="button_section"> <Button onClick={() => nav(-1)} text={"취소하기"} /> <Button onClick={onClickSubmitButton} text={"작성완료"} type={"POSITIVE"} /> </section> </div> ); }; export default Editor;
-
미해결실무 중심! FE 입문자를 위한 React
[2-1] 강의링크 메모용
https://codesandbox.io/p/sandbox/2-1-29k09?file=%2Fsrc%2Findex.js%3A9%2C1
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
onSubmit 함수안에서 입력 했는지 판별하기
const onSubmit = () => { if (input.name === "") { // 이름을 입력하는 DOM 요소에 포커스 inputRef.current.focus(); } };위 코드는 강사님께서 알려주신 onSubmit함수인데 콘솔에 하나하나 찍어가면서 공부하다 보니까 inputRef.current가 가리키는 것이 input 태그여서 아래와 같이 조건문의 조건을 바꿔서 돌려봐도 잘 나오는데 input.name과 inputRef.current.value가 같은 것을 가리켜서 그런건지 궁금합니다! const onSubmit = () => { if (inputRef.current.value === "") { // 이름을 입력하는 DOM 요소에 포커스 inputRef.current.focus(); } }; 혹시 몰라서 input태그도 올립니다!<div> <input ref={inputRef} name="name" value={input.name} onChange={onChange} placeholder="이름" /> </div>
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
userRef를 활용한 Validation 활용법
특정 요소의 입력검증을 위해 useRef()를 생성하고해당 element tag에 ref={inputRef}를 생성한 이후에onSubmit()에서 강의대로 입력확인 처리를 하였습니다.const onSubmit = (e) => { console.log(input.name, input.birth) if(input.name === "") { console.log(inputRef.current) inputRef.current.focus() return } if(input.birth === "") { console.log(birthRef.current) birthRef.current.focus() return } }질문의 bith에 대한 입력검증을 하고자 하면신규로 birthRef = useRef()를 생성하고element tag에 ref={birthRef}를 추가 /onSubmit에서 해당 로직을 적용해야 하는 건가요? 총 4개 입력항목(이름, 생년월일, 국가, 자소개)이면useRef()를 4개 생성해서 엘리먼트별 입력확인을하는구조로 개발이 되어야 하는건가요?
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
이벤트 객체값 확인관련 - console.log
onChange 이벤트에서 입력값 확인을 console.log에서확인시 아래와 같이 확인이 되어집니다.input(type=date포함), textarea 궁금한 사항은 select 에서 선택된 값은 어떻게 확인해야할까요? 실제 target부분에 아래와 같이 표시가 되어집니다.select와 option의 값이 출력이 되고input의 입력값을 볼수있는 형태가 아닌select tag에서 정의한 값이 보입니다.실제 선택한 값을 어디서 확인할 수 있을까요?
-
미해결Next + React Query로 SNS 서비스 만들기
재게시 관련 궁금한 사항
재게시를 클릭하면 Reposts 부분과 count부분을 수정하고 unShift함수를 사용해서 pages[0]에 글정보를 추가하게 되는데 재게시를 클릭할 때 마다 pages[0]에 {user:{},Original:{}} 부분이 계속 추가되는게 맞나요 ?인피니트쿼리는 한 페이지당 최대 10개의 객체를 받아오는 것으로 알고있는데 인피니트 쿼리랑은 상관 없는건가요 ?
-
미해결[리액트 2부] 고급 주제와 훅
ProductItem에서 onClick = {onClick}을 달지 않아도 되는 이유
안녕하세요 강사님 수업 잘 듣고 있습니다. OrderableProductItem.jsx에서 컨텍스트의 컨슈머 안에 렌더 프롭을 children으로 만들고changePath를 이용해서 주문하기 버튼을 누르면 cart로 이동하지 않습니까?그런데productItem.jsx에서는 {onClick && ( <Button styleType={"brand"} >주문하기</Button> )}1. 이렇게 정의되어서 onClick 메서드를 받기만 하고 직접 활용하지 않습니다. 그럼에도 불구하고 Context를 통해 changePath가 작동할 수 있는 이유가 무엇인가요?코드의 가독성을 위해서는 productItem.jsx에서onClick ={onClick}을 달아주어야 하지 않나요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
CJS & ESM 모듈 관련
제가 front를 잘 몰라서 질문을 드립니다.외부모듈에 사용방식이 CJS, ESM 2가지 말씀하셨는데궁금한 내용은CJS(Common Js) 방식은 현재 javascript 기반에서도 node.js기반하고 상관없이 사용이 가능한가요?ESM ( ES 모듈 시스템) - node.js 기반하에서 동작되는 외부모듈 사용방식으로 이해해도 되는지 문의드립니다.
-
미해결한 입 크기로 잘라먹는 Next.js(v15)
npm run dev 무한 로딩 관련 질문입니다.
안녕하세요 강사님강사님의 내용을 주석으로 남기고 싶어서 내용을 작성하고 저장하여 실행하면 페이지 상태가 무한로딩을 합니다. 이전 시간에 test.tsx 파일을 만들고 _app.tsx 파일에서 header 태그를 생성하는 시간에도 이와 비슷하게 주석을 사용하여 기록하고 저장하여 프로젝트를 실행하면 똑같이 무한로딩을 하게 됩니다.저와 비슷한 사례가 많이 없어 chatGPT에 질문하여 얻은 답변으로는 node 버전과 관련이 있다고 하여 현재 버전 v20.18.1에서 v18으로 낮추기도 했지만 달라지지 않아 다시 원래 버전으로 돌려 놓은 상태 입니다.이번이 두번째로 주석만 사용하면 이렇게 나타나는 현상인지 아니면 다른 설정이 필요한 것인지 잘 모르겠습니다.
-
미해결[리액트 2부] 고급 주제와 훅
replaceState를 쓰지 않는 대안
안녕하세요 강사님 pushState를 작성하고 popState를 쓰는 부분에 있어서 에러가 발생했는데 이는 replaceState를 안써서 초기 상태에 대한 정보가 없어서 그렇다고 이해했습니다. 그런데, replaceState를 안쓰고 event.currentTarget.document.location.pathname 속성을 써도 정상적으로 작동하는듯한데 이 방식은 적절하지 않다고 보시나요? handleChangePath(path){ this.setState({path}) window.history.pushState({}, "", path) onpopstate = (event) => { console.log(this.state.path) this.setState({path : event.currentTarget.document.location.pathname}) }; }
-
미해결Next + React Query로 SNS 서비스 만들기
app/api/auth/[...nextauth].ts 는 next-auth를 사용하려면 무조건 저 경로여야할까요??
안녕하세요! 강의 잘 듣고 있습니다!다름이 아니라, 수강 중 여쭤볼게 있어 질문 드립니다..!5:44초쯤에 app/api/auth/[...nextauth].ts 의 이 경로 폴더명들은 next-auth를 사용하려면 무조건 저 경로여야할까요?예를들어, app/api/login/[...nextauth].ts 등 다른 경로는 불가능한가요?꼭 /api/auth/[...nextauth]의 경로를 바라보도록 설계해야 하는지 궁금합니다!
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
서버액션 오류
서버액션 파트에서 create-review.action 서버액션을 별도 파일로 만들었습니다. 아래 코드를 보면 딜레이가 2초 있습니다.리뷰를 생성할 때만 딜레이를 걸어놨는데 삭제할때도 2초가 걸리는데 왜그런걸까요?"use server"; import { delay } from "@/util/delay"; import { revalidatePath, revalidateTag } from "next/cache"; export async function createReviewAction(_: any, formData: FormData) { const bookId = formData.get("bookId")?.toString(); const content = formData.get("content")?.toString(); //string타입으로 바꾸는 것 const author = formData.get("author")?.toString(); if (!content || !author || !bookId) { //서버에서도 예외 방지 return { state: false, error: "리뷰 내용과 작성자를 입력해주세요", }; } try { await delay(2000); const response = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/review`, { method: "POST", headers: { "Content-Type": "application/json", // JSON 데이터임을 명시 }, body: JSON.stringify({ bookId, content, author }), } ); if (!response.ok) { //실패했다면 throw new Error(response.statusText); } // 5. 태그 기준, 데이터 캐시 재검증 -> 데이터 패칭에 특정 태그를 설정한 패칭만 재검증 revalidateTag(`review-${bookId}`); //book 페이지에 ReviewList 데이터 패칭 재검증 return { state: true, error: "", }; } catch (e) { return { state: false, error: `리뷰 저장에 실패했습니다. ${e}`, }; } }
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
모달창 오류
북 상세페이지에서 모달창이 제대로 작동하지만 다음과 같은 오류가 발생합니다. 왜그런걸까요?Skipping auto-scroll behavior due to position: sticky or position: fixed on element: <dialog class="modal_modal__ocKFE" open>…</dialog>scroll Error Component Stack at InnerScrollAndFocusHandler (layout-router.js:139:9) at ScrollAndFocusHandler (layout-router.js:216:11) at RenderFromTemplateContext (render-from-template-context.js:16:44) at OuterLayoutRouter (layout-router.js:365:11) at body (<anonymous>) at html (<anonymous>) at RootLayout [Server] (<anonymous>) at HTTPAccessFallbackErrorBoundary (error-boundary.js:90:9) at HTTPAccessFallbackBoundary (error-boundary.js:98:11) at RedirectErrorBoundary (redirect-boundary.js:75:9) at RedirectBoundary (redirect-boundary.js:83:11) at HTTPAccessFallbackErrorBoundary (error-boundary.js:90:9) at HTTPAccessFallbackBoundary (error-boundary.js:98:11) at DevRootHTTPAccessFallbackBoundary (dev-root-http-access-fallback-boundary.js:33:11) at ReactDevOverlay (ReactDevOverlay.js:80:9) at HotReload (hot-reloader-client.js:379:11) at Router (app-router.js:183:11) at ErrorBoundaryHandler (error-boundary.js:120:9) at ErrorBoundary (error-boundary.js:166:11) at AppRouter (app-router.js:563:11) at ServerRoot (app-index.js:145:46) at Root (app-index.js:165:11)
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
병렬라우트
패럴렐 & 인터셉터 라우트 강의를 듣는 중입니다."/" 경로 였다가 "/book/1" 과 같이 상세페이지 경로로 들어가게 되면 아래 캡쳐와 같이 RootLayout 컴포넌트에 인자값으로 children에는 기존에 인덱스 페이지가 들어가고 modal 인자값으로는 인터셉터된 book 페이지의 값이 들어갈 것입니다.그런데 이 상태에서 새로고침을 하게 되면 초기에는 인터셉터가 작동하지 않으므로 일반 book 페이지가 children에 들어갈것이고 modal 인자값에는 인터셉터가 작동하지 않는데 어떠한 값이 들어가나요?인터셉터에 default 페이지가 들어가나요?
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
함수 부분에 대해 질문있습니다.
안녕하세요 강사님의 인강을 보고 또 혼자 조금씩 코드를 작성하면서 공부하고 있습니다. 공부를 하면서 질문이 있는데 함수부분에서 함수가 비슷한 작업을 할때 이 코드를 묶어서 사용하고 또 재사용도 가능하다라고 문법으로는 알고 있습니다. 하지만 아직 초보여서 그런지 혼자 코드를 작성해보면서 이런상황에서 함수를 사용해야되나? 아니면 함수 생각조차 나지 않을 때가 있는데 혼자 코드를 작성하면서 이럴땐 함수를 이렇게 사용하면 되겠구나라고 스스로 생각이 나게 하려면 어떻게 해야 좋을까요?
주간 인기글
순위 정보를
불러오고 있어요