안녕하세요. 선생님. todolist를 따라하며 완성하였는데요.todolist의 list들이 많아지면 페이징 처리를 통해 나누어 봐야 할 거 같은데 이 기능은 어떻게 구현하면 좋을까요??(RESTFUL API로 개발하면 프론트, 백엔드 양쪽에서 페이징 처리를 해야 하는지,, )

선생님 안녕하세요선생님 안녕하세요 강의에 나온 내용은 아니지만실습 중에 문법 경고가 안 떠있는데제 의도대로 작동 되지 않은 코드가 있어서이러면 안된다고 부연 설명해주셨지만제가 강의 안보고 혼자 실습하다가 그 안 되는걸 해버렸는데이유가 너무 궁금해서 질문 드립니당심플 카운터 실습 중에 App 컴포넌트에서Count 스태이트를 함수로 만들어서 Controller 컴포넌트에 넘기고컨트롤러 컴포넌트에서 이렇게함수를 호출 했더니버튼 누르지도 않았는데혼자 무한루프 도는걸 봤는데왜 이런건지 궁금해요

안녕하세요 재남님 강의 너무 잘듣고 있습니다제가 지금 캐러셀 공부하면서 궁금한것이캐러셀 각 이미지에 ref를 다 할당한다슬라이드 이벤트 화살표 클릭시 이동할 인덱스를 계산하고 인덱스를 기준으로 current와 next의 ref를 가져온다그럼 가져온 ref에 각각 애니메이션 클래스네임을 할당한다 애니메이션에 따라 translateX만큼 이동 , 마지막으로 이동한 인덱스 상태변화 이렇게 동작원리를 이해를 하였습니다 그래서 일단 animationend는 없어도 될거 같아서 일단 없애고 코드를 작성하니 화면 전환은 되는데 자연스러운 슬라이드가 아니라 그냥 뚝뚝끊기는 이미지 전환이 되고있습니다.. 제 생각엔 handleAnimationEnd함수는 애니메이션 동작완료후 동작하는것이라고 알고있는데 애니메이션이 동작을 안하는 이유를 모르겠습니다 const moveTo = useCallback( (nextIndex: number, direction?: Direction) => { const $current = itemsRef.current![currentIndex] as HTMLLIElement; const $next = itemsRef.current![nextIndex] as HTMLLIElement; if (nextIndex === currentIndex) return; const dir = direction || (nextIndex > currentIndex ? "right" : "left"); // const handleAnimationEnd = () => { // $current.className = cx("item"); // $next.className = cx("item", "current"); // $current.removeEventListener("animationend", handleAnimationEnd); // setCurrentIndex(nextIndex); // }; // $current.addEventListener("animationend", handleAnimationEnd); $current.classList.add(cx(`${dir}_current`)); $next.classList.add(cx(`${dir}_next`)); setCurrentIndex(nextIndex); }, [currentIndex] );

로그인 후에도 로딩 애니메이션만 계속 돌아요.새로 고침을 눌러야만 todo list 가 보입니다.뭐가 잘못 된걸까요

처음부터 쭉 강의를 따라하고 있습니다.9.3 장에서갑자기 serverComponent 라는게 생겼어요.무슨 용도일까요?

안녕하세요, 수업 중 이해가 되지 않는 부분이 있어 질문 드립니다.훈훈한 JS>섹션7>함수,변수의 호이스팅 강의에서 17:43에서 newLi에 complete 클래스를 추가해주는 기능을 설명에 이해가 되지 않습니다.위에 content는 부분에서는 전체 todoInput.value를 가져와서 덮어씌우는 것으로 이해했는데, 아래 클래스를 추가하는 부분에 정의된 newLi는 엔터로 인해 함수 실행될 때마다 새로운 createElment("li") 값을 가진 변수인데, 여기에 어떻게 이전의 데이터를 가진 특정 배열에만 complete를 넣어줄 수 있는걸까요?

안녕하세요 강의 잘 수강하고 있습니다. django_components를 사용할 때template 에서 {% component_js_dependencies %}로 js 로드시 해당 script를 async, defer로 로드할 수 있는 방법이 있을까요?

안녕하세요! 리액트랑 타입스크립트 강의 완강하고 강사님께 더 배우고 싶어서 찾아보다가 타사에 리액트 + next.js 강의가 있더라구요. 그런데 커리큘럼을 보니 리액트 부분은 제가 수강한 리액트 강의랑 거의 흡사한 것 같고 거기에 추가로 next.js 부분만 공부하고 싶은데 강사님이 7월 ~8월 중에 next.js 강의를 낸다고 하신 게 있어서요 ㅠ혹시 next.js 강의가 늦게 나올까요 ㅠ? 미리 강사님의 리액트 + next.js 강의를 들어도 되나요? (현재 리액트 강의나 추후 나올 next.js 강의와 겹치는 부분은 없는지...등)

'Generating TypeScript Types' 강의에서 supabase.ts 생성할 때 나오는 코드 색상이 영상에서 나오는 색상하고 달라요.저는 모두 흰색으로 나와서 가독성이 떨어지더라구요.익스텐션이라던지 테마라던지 등등 구글링해서 나오는건 모두 건드려봤는데 바뀌지 않았습니다.이건 어떻게 하면 되나요?

git username을 먼저 정하고 gitHub에 가서 계정을 만들었는데 유저네임 작명 규정때문에 같은 유저네임을 사용하지 못했습니다. 이게 혹시 문제가 될까요?이미 커밋에 작성자 정보를 입력하고 저장한 상태인데 어떻게 하면 좋을까요?

저는 책이 없이 강의만을 통해 학습중입니다. 강의 중간중간 코드를 복사해서 오시더라구요 ~ js같은 경우는 따라치는것에 대해 어려운 부분이 있는데 혹시 어쩔 수 없는 부분인 걸까요 ?

안녕하세요 제로초님강의 잘 듣고 있습니다. 사실 이 문제가 몇개월동안 계속 해결이 안되어서 강의를 수강한거나 마찬가지인데요. 아무리 스택오버플로우나, next.js issue에 직접 글을 올려도 해결이 안되어서 이렇게 질문 글 올립니다.일단 Next.js 14 + Express 조합으로 배포를 한 상황이고 jwt 토큰을 쿠키에 담아서 로그인 기능을 구현했습니다.또한 next.js Middleware 내부에서 액세스토큰을 재발급 받아주고 있습니다.순서는 이렇습니다. 로그인 시에 사용자가 아이디 + 비밀번호를 입력해서 서버에게 요청한다.서버에서 해당 아이디 값을 받아서 조회 후, 새로운 리프레시 토큰 + 액세스 토큰을 클라이언트로 보내준다.백엔드 내부 코드는 다음과 같습니다.  const newAccessToken = createNewAccessToken(existingUser); const newRefreshToken = createNewRefreshToken(existingUser); const hashedToken = await hashValue(newRefreshToken); await deleteRefreshTokenData(existingUser.id); await createRefreshTokenData(hashedToken, existingUser.id); return res.json({ success: true, accessTokenValue: newAccessToken, refreshTokenValue: newRefreshToken, }); Next.js 측에서 액세스 토큰과 리프레시 토큰을 받아서 API ROUTE로 POST 요청을 날려서 set cookie를 해준다.const sendTokenCookieToHandler = async (accessTokenValue: string, refreshTokenValue: string) => { await fetch('/api/token', { method: 'POST', body: JSON.stringify({ accessTokenValue, refreshTokenValue }), headers: new Headers({ 'Content-Type': 'application/json', }), cache: 'no-store', }); }; export default sendTokenCookieToHandler; ```그 후 액세스 토큰이 만료 되면, Next.js 미들웨어 단에서 리프레시 토큰을 다시 백엔드로 보내서 새로운 액세스 토큰을 받아온다.Next.js 미들웨어 코드는 이렇습니다. export async function middleware(request: NextRequest) { const { accessToken, refreshToken } = getTokenValues(request); if (!accessToken && refreshToken) { const res = await getNewAccessToken(refreshToken); if (res && res.newAccessToken) { const response = NextResponse.next(); const { newAccessToken } = res; response.cookies.set('accessToken', newAccessToken, { expires: new Date(Date.now() + 24 * 60 * 60 * 1000), }); return response; } } return NextResponse.next(); } ``` 받아온 액세스 토큰 값을 아예 middleware 단에서 set cookie 를 통해 쿠키로 설정해준다.근데 여기서 문제는 초기에는 정상적으로 잘 작동합니다.액세스 토큰이 만료 된 후에도 정상적으로 새로운 액세스토큰을 받아오기도 하고요근데 문제는 일정 시간 후에(제가 생각했을때 리프레시토큰이 만료 된 후, 다시 로그인 요청을 보냈을때 같습니다.) 아예 새로운 리프레시 토큰과 액세스 토큰을 제대로 받아오지 못하는거 같습니다.근데 F12 를 켜서 확인해보면 백엔드로 api 콜은 정상적으로 가고 있습니다..  그래서 현재 다시 재배포를 할때마다 초기 상태로 돌아가서 로그인이 정상적으로 작동 하게 되는데요.어디가 문제인걸까요 ? 여러 오픈톡이나 커뮤니티에 물어봤지만, 어떤분은 Next.js 내부에서 같은 라우트 그룹이면 미들웨어를 거치지 않아서 발생하는 문제라고도 하시는데 초기 배포 당시에, 리프레시 토큰을 처음에 잘 받았을때 일부러 액세스 토큰을 삭제하고 다시 새로고침하면 액세스 토큰을 제대로 잘 받아오고 있습니다.. 도저히 아무리 이리저리 수정해봐도 몇개월 동안 고치지 못해서 이렇게 글 남깁니다.  읽어주셔서 감사합니다.

해결되었습니다

질문: 1.ts-node로 이어나가도 괜찮을까요?2. outdated 명령어 쳐보니 버전이 강의에서 한두개 추가설치했지만, 이제 빨간 글씨로 10개 정도 다 버전 업그레이드를 요구했습니다.제가 고쳐나가면서 나아가보면될지 궁금합니다.ㅡㅡㅡㅡㅡㅡㅡㅡ상황: 몇주전 타입스크립트를 다른 강의로 시작했습니다.최근 환경설정에서 ts-node 사용시 오류가 계속 떠서 그 강의가 tsx 사용을 권장했고, tsx로 입문했습니다.그래서 ts-node로 잘돌아갈지 의문입니다.

파일 저장 시 prettier가 의도적으로 줄 바꿈한 문장을 한 줄로 합쳐버립니다. 라고 질문 올렸는데 다른 분이 답 주시고 강사님께서 답을 안 해주셔서 질문드립니다. 사진을 지워서 지난글을 봐주실 수 있나요 슬래쉬 두 번 쓰는거는 불편한데, 설정으로 어떻게 안 되는건가요? 줄바꿈 한거는 합쳐버리고, 한줄로 있던거는 나눠버립니다.

결제를 구현하는 중인데여기 프로젝트에서 결제 과정이 로그인 한 후에 그 아이디로 포인트 충천 API를 날려서 포인트를 충전후상세 페이지에서 결제버튼 클릭시 포인트가 충분하면 성공 포인트가 부족하면 실패 이런식으로 만들어져야 하는 건가요??

const handleClick = ()=>{ localStorage.setItem(inputText, inputText); setInputText(''); }제가 처음 생각한 걸론 저 상태에서도 로컬스토리지에 인풋텍스트가 저장되고 setInputText()로 <App> 엘리먼트가 리렌더링 될테니 할 일을 추가하면 바로 화면에 표시가 될 거라고 생각했거든요?실제로 todos를 state로 관리하기 전까진 그런 방식이었던 것 같고, 그런데 삭제 구현 이후에는 어떤 차이로 디스플레이에 반영이 안되는 건가요?만약 <App> 단위로 리렌더링 되는 게 맞다면 todos랑 <ul> 평가할 때 데이터가 바뀌었을테니 리렌더링 되는 게 맞다고 생각이 들었거든요.

axios요청을 통해 서버에서 데이터를 불러오고 그 데이터를 화면에 보여줄 때 아래와 같은 방식을 사용하고 있습니다. 그런데 이러면 isLoading이 true일때 잠깐 화면에 보이는 loading이 맘에 안들어서요.. 이렇게 안하면 data를 찾을수 없다고 에러가 뜨고.. isLoading state로 관리하는 것 말고는 방법이 없을까요?import { useState, useEffect } from 'react'; import axios from 'axios'; const MyComponent = () => { const [data, setData] = useState(null); const [isLoading, setIsLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchData = async () => { try { const response = await axios.get('https://api.example.com/data'); setData(response.data); } catch (error) { setError(error); } finally { setIsLoading(false); } }; fetchData(); }, []); if (isLoading) return <div>Loading...</div>; if (error) return <div>Error: {error.message}</div>; return ( <div> {data ? ( <div>{data}</div> ) : ( <div>No data available</div> )} </div> ); }; export default MyComponent;

안녕하세요 . 아직 리액트에 빠져살아서 서버컴포넌트와 클라이언트 컴포넌트 사용 구분이 잘 가지 않아 질문드립니다. 1번 질문.예를들어 3개의 페이지가 존재한다고 했을때, 각 페이지는 navbar(하위컴포넌트)를 가지려고 하는데요 navbar의 버튼은 각 페이지 마다 다 다른 함수로 동작하게 된다고 가정하면, 3개의 페이지 컴포넌트는 'use-client'를 사용하여 클라이언트 컴포넌트가 되어야 하는게 맞나요? 그렇다면 페이지의 하위컴포넌트를 서버컴포넌트로 만들면 서버컴포넌트로 사용하면 ssr을 사용하는 이유가 충분할까요? 2번질문. after_login 폴더 안에 _lib폴더에서 'getTrends'함수로 패치를 했는데요, 결국에는 클라이언트 컴포넌트에서 usequery로 데이터를 패치해오고 있습니다. 그러면 데이터 패치도 클라이언트컴포넌트에서 진행하는것인데, 1번상황에 패치도 2번과 같이 한다면 서버사이드렌더링의 장점은 어떤것이라고 볼 수 있을까요?

.Header .header_center { justify-content: center; } .Header .header_left { justify-content: flex-start; } .Header .header_right { justify-content: flex-end; }.Header { justify-content: space-between; }이렇게 해도 같은 결과가 나오는데 두 코드 차이점이 있을까요?