따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
auth.ts에서 //비번이 맞으면 토큰 생성 const token = jwt.sign({username}, process.env.JWT_SECRET) console.log(token) //쿠키 저장 res.set("Set-Cookie", cookie.serialize('token', token)); return res.json({user, token}); token은 잘 찍히고 요청 헤더에 포함되어 있는데 TypeError serialize 부분에서 에러가 뜨고 실제 응답 에러가 납니다.... 쿠키 저장이 안되는 것 같습니다. serialize가 undefine 되었다는데 위에 const token으로 제대로 선언되고 출력까지 잘 되는데 이유를 모르겠습니다...
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
아래 질문 관련입니다. server.ts origin 부분을 강사님처럼 다음과 같이 작성하면 header 오류가 납니다. const origin = process.env.ORIGIN; app.use(cors({ origin, credentials: true })) 근데 아래처럼 const origin을 다음과 같이 환경변수를 거치지 않고 명시하면 헤더 오류 대신 500 오류가 나면서 토큰이 생성되지 않습니다. (로그인 페이지에서 로그인 시) const origin = 'http://localhost:3000'; app.use(cors({ origin, credentials: true })) 서버에서 process.env.ORIGIN, process.env.JWT_SECRET을 찍어봤을땐 잘 나오는데... 이 이유로 //비번이 맞으면 토큰 생성 const token = jwt.sign({username}, process.env.JWT_SECRET) 이 명령줄이 제대로 실행되지 않는 걸까 싶어 process.env.JWT_SECRET를 'super_secret'으로 바꿔봐도 똑같은 증상입니다. 확실하진 않지만 이 때문에 토큰 생성에 오류가 생겨서 500 에러가 뜨는 것인가 싶은데 어떻게 해결하면 좋을까요?
우선 강의 잘 봤습니다. nextjs와 관련된 질문들이 있습니다. SSR,CRS,SSG,PPR,ISR 등은 만약 실무에서 투입한다면 개발자들이 렌더링이 어떻게 되어야한다는 도메인 지식이 있는하에 결정하는건가요? 그리고 블로그성 개발 관련 질문입니다. 이 블로그라는게 어떻게 개발하고 만드냐는 여러가지 방법이 있겠지만 현 강의 처럼 mdx 파일에 직접 포스트를 기재를 하고 빌드해서 배포하고 올린다? 가 있고, CRUD를 구현해 블로그성 홈페이지를 만드는 방법이 있겠는데 보통 개발자분들은 어떤 방법으로 블로그를 만드는지 궁금합니다. (개인적인 의견으로 답변주심 감사하겠습니다(_ _). 그리고 만약 mdx파일로 한다고 하면, md파일을 직접 작성해서 올리는것 말고 티스토리와 일반 블로그같은 UI를 생성해서 mdx파일로 올릴수있는지?도 궁금합니다.
안녕하세요 리액트를 공부하기 위해 어제 처음 등록을 했서 잘 듣고 있습니다. 강의에 대한 질문은 아니지만 수업준비관련해서 비주얼스튜디오 부분에 대해 질문이 있는데 제가 현재 맥북으로 사용하고 외장하드를 연결해서 이 외장하드에 폴더를 만들어 사용하고 있는데 어느순간 파일을 만들거나 리액트를 설치할때 파일명앞에 이미지처럼 ._ 이런식으로 붙더라구요. 삭제하면 또 생겨서 구글링을 통해 찾아봤지만 해결이 되지 않았습니다. 혹시 방법이 없을까요?
강의를 들어보니 React Query와 꽤 비슷한 부분이 많다고 생각되서 혹시 대체할 수 있을까 생각이 들었는데요. 정환님은 어떤 생각을 가지고 계신지 궁금하여 질문 드립니다. 만약 App Router로 새로운 프로젝트를 구축해야 한다고 하면 React Query를 사용하실건가요?
Congratulations! Your Docker Container is now running in Elastic Beanstalk on your own dedicated environment in the AWS Cloud. This environment is launched with Elastic Beanstalk Docker Platform Video Tutorials YouTube: Run a Docker Container from the Docker Registry YouTube: Use Private Docker Repositories Sample Apps GitHub: PHP and Amazon RDS GitHub: Python, DynamoDB, and SNS Documentation Deploying Docker with AWS Elastic Beanstalk AWS Elastic Beanstalk overview AWS Elastic Beanstalk concepts 이러한 화면이 나오는데 이것도 성공한 것인가요? 아니면 제가 배포한 화면이 나와야 하지 않나요??
postgres 주소는 오프라인 강의 시에만 제공하고 온라인은 제공을 하지 않는다고 이해했는데요. 해당 부분으로 대체 가능한 방법과 postgres 없이 graphql만 실행하여 강의를 따라가도 지장이 없는지 궁금합니다. 이후 강의에는 데이터 처리하는 부분이 포함되어있는 것 같은데요. 해당부분 확인 바랍니다!
<Image src="/logo.png" alt="로고" width={100} height={100} /> import Logo from "@/public/logo.png"; <Image src={Logo} alt="로고" width={100} height={100} /> 이 두가지 접근 방식의 차이가 있을까요?
안녕하세요 수업 잘 듣고있습니다 dev 브랜치를 만들고 기능브랜치를 거기에 커밋하는 것 까진 이해했습니다 추가로 일전에 만든 기능 브랜치를 쓰고싶어서 일전의 기능브랜치에서 git pull origin 기능브랜치 를 했는데 안불러와집니다 .. 추가로 일전에 머지한 기능브랜치에서 내용을 수정하고 push했는데 깃허브에 풀 리퀘스트가 안뜨고 해당 브랜치에 들어가야지 변경된 게 확인되네요 보통은 브랜치를 한번만 쓰고 삭제하나요? 또 쓰진 않는걸까요?
안녕하세요 서버는 종료한 상태에서 강의대로 (with-searchbar)/error.tsx 파일을 만들고 새로고침을 하면 error.tsx에서 작성한 페이지가 나오지 않습니다. error.tsx 인덱스 페이지 아래 사진처럼 error.tsx페이지가 아닌 핸들링되지 않은 런타임 에러가 발생해버립니다.. 혹시 searchParams를 Promise객체로 타입정의 한것처럼 뭔가 사용방법이 바뀐걸까요..?
안녕하세요 현재 6.4)스켈레톤 UI 적용하기 강의를 듣고나서 궁금한점이 있어 질문 남깁니다. 서버쪽 데이터요청이 오래 걸리는 경우 Suspense를 통해 Skeleton UI를 보여주고 이후 데이터가 적용 된 컴포넌트를 보여주는거로 알고 있습니다. 그래서 사용자경험이 조금 오를 것 같긴한데, 만약 데이터 요청이 빠른 경우(0.5초만에 데이터처리가 이뤄진 경우)에는 오히려 UX 관점에서 불편하지 않을까 싶어서 이럴땐 어떻게 처리하는게 좋을 지 질문 남깁니다! 예시) 책 검색 -> 책 리스트의 skeleton UI 가 잠깐 보였다가(0.5초 등장) -> 책 리스트 나타남 (이와 같은 과정이 이뤄지면 오히려 사용자 경험이 떨어지지 않을까 싶어 궁금합니다)
안녕하세요 강사님, 강의를 듣는 중 문제가 발생해 글 남깁니다. book/id 상세페이지에서 SSG getStaticPaths를 적용중인데, id를 인식을 못해 에러가 발생합니다. Error: A required parameter (id) was not provided as an array received string in getStaticPaths for /book/[[...id]] 강의에 의하면, books/1 은 보여야 하는데 페이지가 보이지 않네요 오타인 것 같아 강사님 깃헙 코드도 복사해서 붙여봤는데 에러가 납니다 혹시 다른 문제가 있을까요? 에러 메세지에는 id가 제공이 안된다고 하는데, 제가 보기에는 staticProps에 맞게 변경한거 같은데, 왜 에러가 날까요??
import "./App.css"; import { Routes, Route } from "react-router-dom"; import Home from "./pages/Home"; import Diary from "./pages/Diary"; import New from "./pages/New"; // 1. "/" : 모든 일기를 조회하는 Home 페이지 // 2. "/new" : 새로운 일기를 작성하는 New 페이지 // 3. "/diary" : 일기를 상세히 조회하는 Diary 페이지 function App() { return ( <Routes> <Route path="/" element={<Home />} /> <Route path="/new" element={<New />} /> <Route path="/diary" element={<Diary />} /> </Routes> ); } export default App; const Home = () => { return <div>Home</div>; }; export default Home; 이렇게 작성했고, 오타도 없는 것 같은데 화면에 home이라는 글자가 안 뜹니다. router도 6.28. 으로 설치됐습니다.
안녕하세요 강사님. 인자로 받는 self는 그 c++의 this 포인터 같은 개념으로 보면 될까요, 그리고 list_display 안에 cover_image를 cover_image_tag로 바꿨는데 처음에 cover_image는 같은 클래스(SongAdmin)에 있는 함수라 list_display에서 사용가능한거고, cover_image_tag는 models 파일 안에 Song 클래스 안에 있는 함수라 list_display에서 사용이 가능한걸까요? 감사합니다.
강사님 안녕하세요, HTMX와 모달을 활용한 댓글 기능을 구현하는 코드 작성 중에 crispy form이 적용이 되지 않고 오류가 발생해서 문의드립니다. 작성하고 있던 코드는 _comment_form.html 파일의 코드입니다 아래 이미지는 발생한 에러 내용입니다. comment_form.html 파일의 코드를 구현하고 로컬호스트에 띄운 개별 Note 페이지의 하단에 '댓글 쓰기' 버튼을 클릭했을 때, crispy form이 렌더링 되지 않고 위와 같은 에러가 발생하는 케이스입니다. 제가 추측하는 것은 context 변수에 담긴 데이터에 문제가 있어서, flatten() 메서드가 동작하지 않아 발생하는 에러 같다고 생각하는데요. 해결하는 방법에 대해 알려주시면 감사하겠습니다! 감사합니다 🙂
