안녕하세요. 우선 강의 너무 잘 보고 있습니다 감사합니다! 강의 내용을 기반으로 NextAuth 관련 작업을 하다가 궁금한 점이 생겼습니다. NextAuth로 signIn 을 할 때 세션 정보가 쿠키에 저장되는데, 이때 max-age 옵션을 따로 설정하지 않으면 기본적으로 1달로 설정되고 있는 것 같습니다. 찾아보니 max-age 값을 최대값으로 설정하려고 해도(예: 4년), NextAuth에서는 자체적으로 최대 1년으로 제한하는 것 같습니다. 여기서 제가 궁금한 것은, NextAuth를 사용하면 쿠키의 max-age 가 최대 1년이고, 그렇다면 1년 후에 세션이 만료되니까 모든 사용자가 로그아웃되는 것인가? 라는 생각이 들었습니다. 세션 저장 기한을 무기한으로 설정하는건 불가능해보이고, 찾아보니 서버 환경에서 세션을 업데이트할 수 있는 unstable_update 라는 함수를 발견했는데 문서에서 해당 함수는 세션 정보를 업데이트하는 것이고 cookie에 저장된 세션 자체의 expire를 조정하는 예시는 나와있지 않아서 이걸 사용하는게 맞는지도 확신이 안드는 상태입니다 ㅠㅠ 지속적으로 접속하는 사용자에 한해서 세션 만료 시간을 연장할 수 있는 방법이 따로 있을까요?
안녕하세요! 강의 잘듣고있습니다. login 폴더가 불필요한 루트 인 것 같아서 바로 인터셉터 라우터를 이용해 @modal로 연결했습니다. <Link href="/i/flow/login" className={styles.login}>로그인</Link> 또 추가로 새로고침 해도 Modal을 유지하고 싶어서 i/flow/login폴더에서 아래와 같이 마운트시에 인터셉터 하도록 유도하였습니다. "use client"; import { useRouter } from "next/navigation"; import { useEffect } from "react"; export default function Login() { const router = useRouter(); useEffect(() => { router.replace("/i/flow/login"); }, [router]); return null; } 기존 유입방식으로 SSR Page에서 i/flow/login으로 이동 시, 인터셉터 라우팅하여 병렬 라우팅 하던것과 달리, 바로유입 -> i/flow/login -> (replace) -> (.)i/flow/login/page.tsx 순으로 @modal이 출력될줄 알았는데 모달이 출력되질 않네요.. 이유가 i/flow/login으로 바로 접속했기에 상위 폴더 영역에서 {modal}을 선언한 layout을 찾지 못하기 때문에 아무것도 뜨지 않는건가요? 제가 이해한 것이 맞을지 검색해도 잘 안나와서 질문드립니다!
이벤트 강의를 듣고 나서 addEventListener를 이용하여 여러 장의 사진이 있으면 슬라이더처럼 하나씩 넘겨서 볼 수 있는 이벤트를 만들 수 있을 것 같아 혼자 코드를 직접 짜봤는데요, body 부분은 아래처럼 작성하고, <body> <div class="container"> <div class="slider" id="slider-01"></div> <div class="slider" id="slider-02"></div> <div class="slider" id="slider-03"></div> </div> </body> css는 아래처럼 작성했고, .container { position: relative; width: 660px; height: 440px; overflow: hidden; } .slider { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: contain; background-repeat: no-repeat; transform: translateX(100%); } #slider-01 { background-image: url(./images/cat/cat-01.png); z-index: 3; } #slider-02 { background-image: url(./images/cat/cat-02.webp); z-index: 2; } #slider-03 { background-image: url(./images/cat/cat-03.webp); z-index: 1; } .sliderMove { transform: translateX(0%); transition: 1s; } js코드를 아래와 같이 작성했습니다. <script> window.addEventListener("load", function sliderHandler() { const sliderGroup = document.querySelectorAll(".slider"); let currentSlider; function activate(elem) { elem.classList.add("sliderMove"); currentSlider = elem; } function inactivate(elem) { elem.classList.remove("sliderMove"); } for (i = 0; i < sliderGroup.length; i++) { if (currentSlider) { inactivate(currentSlider); } activate(sliderGroup[i]); } }); </script> 후에 실행을 해보니 사진이 슬라이더처럼 작동이 안돼서요.. 작동이 안되는 이유와 어느 부분을 수정해야 하는지 알려주시면 감사하겠습니다! 혹 수업 내용과는 조금 벗어난 질문을 한 거라면 정말 죄송합니다ㅜㅜ..
web api인 IntersectionObserver을 활용한 훅이 있는데요, 훅은 독립적으로 동작되기 때문에 단위 테스트 대상이라고 말씀하셨는데, 궁금한점은 web api를 활용한 훅은 단위테스트 대상일까요? 테스트 환경이 다르고 web api는 이미 검증된 api이기 때문에 단위테스트 대상에서 제외 했거든요 만약 단위 테스트 대상이라면 web api를 모킹해서 훅을 통해 반환한 값들을 확인 하면될까요? 단위테스트 대상이 아니라면 통합테스트에서 해당 훅을 제대로 호출해서 사용하는지만 확인하면 될까요?
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
예시 코드 따라하는데 재생버튼이 계속 안 나오고 로딩바만 돌아가서 state를 찍어보니까 buffer랑 time 값이 저렇게 빈 값으로 나옵니다. 그런데 isLoading으로 로딩스피너 구현하는 걸 제거하고 바로 play, pause버튼 나오게 하면 노래 자체는 재생이 됩니다만 여전히 buffered와 time 부분 값은 빈 값으로 찍힙니다ㅜㅜ 무엇이 문제일까 모르겠습니다... 코드는 몇번이고 똑같은 걸 검토했는데...
현재 18강까지 강의를 들었습니다. 수업 방식이 굉장히 효율적이고 짜임새가 있어 독학하기 굉장히 좋다는 느낌을 많이 받았습니다. 근데 저의 공부 방식이 효율적인지 비효율적인지 이 글을 보고 코드캠프 측의 견해를 알려주시면 좋겠다는 생각을 들어 글을 남겨봅니다. 현재 저의 방식은 이렇습니다. ex) 섹션 17, 18강을 듣는다 -> 개념을 노션에 정리하고 이해한다 -> 퀴즈와 포트폴리오를 될 수 있으면 하루에 한개씩 푼다 -> 다 풀기 전에 다음 섹션의 강의를 듣는다 .입니다. 그런데 한 차례의 섹션을 듣고 퀴즈와 포트폴리오를 모두 클리어하고 다음 강의를 듣는게 맞는지, 아님 저처럼 미리미리 들어놓고 다시 한번 재복습 느낌으로 그날그날 해당 섹션의 퀴즈와 포트폴리오를 풀면서찾아보는게 맞는건지 의문이 들어 글을 남겨봅니다.
안녕하세요 선생님 선생님강의 따라서 로그인을 구현했습니다. auth에서 관리해주는 세션으로는 프론트용, 로그인 후 내려주는 connect.id 세션으로는 백엔드용, 으로 사용했습니다. 그런데 궁금한게 로그인을 하고 기간이 지나거나 그런 경우를 대비해서 엑세스토큰, 리프레시 토큰을 많이 사용하는 것을 보았는데 선생님은 넥스트에서 어떤 방식을 사용하시는지, 어떤방식을 추천하시는지 궁금합니다. 검색해보니까 엑세스토큰이 아닌 쿠키세션으로 사용할때에는 일정시간 inter시켜주고 특정시간지나면 쿠키시간을 업데이트해주기도 하더라구요. 선생님 조언이 궁금합니다. 감사합니다.
tempYOffset을 통해서 스크롤 위치를 저장하고 있다가 총 100px을 이동하는 것으로 이해하였는데요. tempYOffset의 초기값, 즉 yOffset이 0으로 출력됩니다. 이게 바로 밑에 있는 window.addEventListener('scroll', () => { } 가 아직 실행되지 않아서 yOffset이 초기화 되지 않아 0으로 나오나? 라고 생각하였는데 막상 강의 코드는 딱히 그런 것을 고려하지 않고도 잘 나오는 것 같더라구요. 혹시 어떤 문제일지 알 수 있을까요? 일단 당장에는 window.scrollY를 사용해서 임시조치로 해결했습니다. // 새로고침 등으로 스크롤을 처음부터 하지 않는 경우 시작하는 경우 해결을 위해 window.addEventListener('load', () => { setLayout(); sceneInfo[0].objs.context.drawImage(sceneInfo[0].objs.videoImages[0], 0, 0); document.body.classList.remove('before-load'); // 특정 위치에서 새로 고침 하면 화면이 나오지 않는 문제를 해결 let tempYOffset = yOffset; let tempScrollCount = 0; // 스크롤 몇 번 했는지 저장 console.log(tempYOffset); console.log(yOffset); let siId = setInterval(() => { window.scrollTo(0, tempYOffset); tempYOffset += 5; tempScrollCount++; if (tempScrollCount > 20) { clearInterval(siId); } }, 20); // ..............
