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() 메서드가 동작하지 않아 발생하는 에러 같다고 생각하는데요. 해결하는 방법에 대해 알려주시면 감사하겠습니다! 감사합니다 🙂
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
import {Router, Request, Response} from "express"; import {User} from "../entities/User"; import { validate, Validate } from "class-validator"; const register = async (req: Request, res: Response) => { const {email, username, password} = req.body; try{ let errors: any = {}; //이메일/유저이름 단일성 확인 const emailUser = await User.findOneBy({email}); const usernameUser = await User.findOneBy({username}); //이미 있으면 erros 객체에 넣음 if(emailUser) errors.email = "이미 해당 이메일 주소가 사용되었습니다." if(usernameUser) errors.username = "이미 사용자 이름이 사용되었습니다." //에러가 있으면 return으로 에러를 response 보내줌 if(Object.keys(errors).length > 0){ return res.status(400).json(errors) } const user = new User(); user.email = email; user.username = username; user.password = password; //엔터티에 정해 놓은 조건으로 user 데이터 유호성 검사를 해줌 errors = await validate(user); //유저 정보를 user table에 저장 await user.save() return res.json(user); } catch(error){ console.error(error); return res.status(500).json({error}) } } const router = Router(); router.post("/register", register); export default router 맨 위 코드(auth.ts)에서 사진과 같이 overload 에러가 뜹니다. 유저이름/이메일 중복 및 에러 처리하는 코드 중 return으로 응답을 반환하는 중 타입이 맞지 않아서 생기는 오류 같은데 어떻게 해결할 수 있을까요??
배포는 잘 된 것 같은데요...? 계속 데이터 로딩중 페이지만 떠서 여쭤봅니다. 제 생각에는 받아올 데이터가 없어서 빈배열이라서 문제가 되는걸까 싶었지만, 선생님 강의에서도 동일하게 빈배열이지만 Header가 잘 나오는거보면 랜더링이 정상적으로 되는 것 같아서 받아올 데이터가 없는건 문제가 아닌듯하여 질문하게되었습니다. 혹시나 권한 오류일까 싶어 질문답변 글 참고하여 적용해봤으나 아닌 것 같습니다.
Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding 'use client' to a module that was originally written for the server. 이라는 에러가 뜨고 유저리스트가 빈배열 리턴되는데 이런 경우 어떻게 처리해야하나요?
안녕하세요. aws ec2를 통하여 프로젝트를 배포 후 https 설정 시 오류가 발생해 질문 남깁니다. 우선 환경부터 설명 드리겠습니다. 2개의 aws 계정을 사용 중입니다. 계정1은 프론트엔드(리액트) / 계정2는 백엔드(스프링) 배포하였습니다. nginx & let's encrypt를 통하여 certbot으로 https 적용 시도 중입니다. 도메인 구매(예시: test.co.kr) 후 Route53을 통하여 각 인스턴스에 적용시켰습니다. 프론트: www.test.co.kr / 백엔드: api.test.co.kr 각 도메인은 정상적으로 동작하고, 접속도 됩니다. 에러 상황 우선 프론트엔드 서버(www.test.co.kr)에서 우선 인증서 발급 및 https 적용하려 하였습니다. 1. test.co.kr로 인증 수행 초기에는 여러 블로그를 보고 따라하다보니, www.test.co.kr이 아닌 test.co.kr로 인증서 발급을 진행하였습니다. 진행 과정 중에서 다음과 같은 오류가 발생하였습니다. A 레코드가 없다는 것으로 파악해 test.co.kr이 아닌 Route53에 A 레코드로 등록한 www.test.co.kr을 등록해야 되겠다고 생각하여 다음은 www.test.co.kr로 진행하였습니다. 2. www.test.co.kr로 인증 수행 www.test.co.kr로 인증을 진행한 사진입니다. 확인해보면 AAAA 레코드가 없다고 나오는데, Route53에는 A 레코드로 인스턴스에 대한 도메인이 등록되어 있는데 그래서 오류가 발생하는 것 일까요?
결론부터 말하면 검색할 때 페이지네이션 현재 페이지가 1로 안 바뀌어서 바꿔봤습니다. 예를 들어 ‘철’이라는 검색어를 입력했더니 페이지가 2페이지까지 있음. 2페이지를 클릭해 2페이지가 보이는 상태에서 검색어를 ‘철수’로 바꾸니 게시글 수가 1페이지까지밖에 없었는데, 1페이지가 현재 activedPage가 아니게 됨(없어진 2페이지 그대로). 검색한 게시글 목록 refetch는 제대로 이루어지기에 1페이지의 내용이 보이는 것은 맞지만 현재 페이지 숫자가 제대로 표시되지 않음. 또한 ‘안녕하세요’의 12페이지를 보고 있었는데 ‘안녕’으로 검색어를 바꾸니 당연히 refetch를 통해 1페이지 게시글 목록을 보여주지만, 페이지네이션은 그대로 11, 12 , ..., 20임 검색어가 바뀌면 페이지네이션의 activedPage와 startPage를 1로 변경해주도록 Paginations01.container에서 useEffect 실행시켜 해결 useEffect(() => { setStartPage(1); setActivedPage(1); }, [props.count]); 검색어를 바꾸면 검색된 총 게시글 수도 보통 달라질 거라는 생각에 props.count를 의존성으로 써본건데 검색어를 바꿔도 우연히 검색된 총 게시글 수가 똑같을 경우 useEffect 실행 안 되니 정말로 검색어가 달라질 때를 기준으로 하려고 BoardList에 있는 keyword를 pagination 컴포넌트에 props로 넘겨줘서 사용 // BoardList.presenter.tsx <Paginations01 refetch={props.refetch} count={props.count} keyword={props.keyword} /> // keyword 전달 // Paginations01.container.tsx useEffect(() => { setStartPage(1); setActivedPage(1); }, [props.keyword]); // Paginations01.types.ts export interface IPaginations01Props { ... keyword?: string; ... } 고쳐지긴 했는데 일단 useEffect에서 setState를 하고 있다는 점(여기선 크게 상관이 없는건지?)과 페이지네이션 컴포넌트인데 keyword라는 걸 받아온다는 것 자체가 검색 컴포넌트의 영향을 받는다는 뜻 아닌가 싶어서(keyword는 검색 기능이 있을 때만 존재하니까) 제대로 된 컴포넌트 분리에 대한 고민(keyword?로 하면 페이지네이션 컴포넌트 쓸 때 keyword 써도 되고 안 써도 되니까 이대로 해도 괜찮을지...?) 다른 방법은 있는지? 의견 있으시면 알려주시면 감사하겠습니다. 그외 궁금한 점 저는 이거 하는 과정에서 yarn dev 해놓은 상태에서 코드들을 저장 계속 하면서 고쳤는데 그럼 원래 바로바로 반영이 되잖아요. 코드에는 문제가 없어서 제대로 작동해야 했는데 페이지네이션 컴포넌트에서 props.keyword가 자꾸 undefined인 바람에 useEffect도 작동 안해서 코드가 문젠줄 알고 한참 삽질 후 그냥 vscode와 크롬 등등 다 끄고 좀 나중에 그대로 다시 켜보니까 잘 작동하게 됐는데 (yarn dev를 끊었다 다시 하는 거로는 아마 해결 안됐음) 이게 처음이 아니고 저번에도 한 번 포기하고 결국 다음날 켜보니까 코드는 그대로인데 갑자기 잘 되었는데 정확히 무엇때문에 이런 문제가 생기는건지 모르겠네요!!! (캐시? .next? 뭐 그런 거 때문인가요?)
안녕하세요 강사님 바닐라 자바스크립트로 프로젝트를 진행할때 class를 이용해서 이를테면, export default class SearchFormView extends View { constructor(){ super(qs("#search-form-view")) this.resetElement = qs("[type=reset]", this.element) this.showResetButton(false) console.log(this.element, "111") } showResetButton(visible = true){ this.resetElement.style .display = visible ? "block" : "none" } } 와 같이 필요한 속성을 객체의 형태로 저장하고 class를 통해 만들어낸 객체에서 필요한 속성을 꺼내는 방식으로 프로그래밍을 진행하셨는데 이렇게 코딩을 해야하는 이유가 무엇인가요? 직관적으로 와닿지가 않아서 그렇습니다 ㅠㅠ
수업에서 Next.js에서는 클라이언트에 import 되는 서버 컴포넌트를 자동으로 클라이언트 컴포넌트로 변경해주는 동작을 한다. 라고 하셨는데요. 공식문서나 구글 문서를 아무리 찾아봐도 관련 언급이 없던데요. 혹시 출처를 알수 있을까요? 언제 업데이트 된건지 확인해보고 싶어서요
6.5 에러핸들링 24:04 (with-searchbar) 레이아웃을 살리기위해 error.tsx를 app/book/[id] 로 옮겨도 <Searchbar />가 보이지 않는 현상이 있습니다. 그리고 영상에서도 app/book/[id] 가 에러인 상황임에도 검색바 레이아웃이 보이는 장면이 없어서 헷갈리는 것 같습니다!
안녕하세요 강사님 강의는 단일 페이지에 대해서 mvc 패턴을 잡을 때 하나의 페이지를 대상으로 controller views helpers.js, main.js, storage.js, Store.js를 만드셨는데 여러개의 페이지가 연결된 상황에서 여러 페이지를 동시에 작업하는 경우.. 폴더 구조가 어떻게 되는 건지 궁금합니다. 그러니깐.. 하나의 helpers, 하나의 storage, 하나의 Store.js를 만들고 거기 안에 여러 페이지에서 쓰는 로직들을 다 때려박는건지 아니면 각각의 페이지에 대해서 폴더를 만들고 helpers, storage, Store 같은 것을 각각 다 따로 만드는건지 현업에서 프로젝트는 어떻게 진행하는건지 궁금합니다!
import { type NextRequest, NextResponse } from 'next/server'; import { fetchData } from '@/shared/apis/fetch-data'; import type { IAcademyCreateDTO, IPostEnrollAcademyResponse } from '@/shared/types/acadmy'; export async function POST(req: NextRequest) { const body = (await req.json()) as Promise<IAcademyCreateDTO>; const data = await fetchData<IPostEnrollAcademyResponse>('/api/v1/academies', 'POST', body); if (!data.isSuccess) { return NextResponse.json( {}, { status: 500, statusText: data.message, }, ); } return NextResponse.json(data); } 서버에, 에러시 아래와 같은 데이터 구조를 준다고 했을떄 위의 방식처럼, 에러 핸들링을 하는 것이 맞는지 궁금합니다... Route Handler의 보편적인 에러처리 방식이 너무 궁금합니다!! (직접 에러 메시지를 작성하는것이 아닌 서버에서 내려주는 에러메시지를 화면에 표기하고 싶습니다.) export type CommonResponse<T = unknown> = { code: string; isSuccess: boolean; message: string; result: T; };
안녕하세요 next-auth로 토큰 갱신 로직을 개발하는 중에 해결되지 않는 문제가 발생하여 질문 드립니다. 현재 클라이언트에서 api 요청을 하면 middleware에서 const token = await auth(); 이런식으로 세션 정보를 가져와 accessToken을 헤더에 삽입하는 방식을 구현하였습니다. if (request.nextUrl.pathname.startsWith("/gateway")) { const session = await auth(); const accessToken = session?.accessToken; const { device } = userAgent(request); const localeFromCookie = cookieStore.get("dp_lang")?.value as string; const defaultLocale = getLanguageCodeFromLocale(localeFromCookie); request.headers.set("Accept", "*/*"); request.headers.set("Authorization", `Bearer ${accessToken}`); request.headers.set("Access-Control-Allow-Origin", "*"); request.headers.set("deviceType", "1"); request.headers.set("deviceId", getDeviceIdFromCookie(cookieStore)); request.headers.set("osType", getOsTypeFromCookie(cookieStore)); request.headers.set("User-Agent", device.model ?? ""); request.headers.set("locale", localeFromCookie); request.headers.set("language", defaultLocale); const response = NextResponse.next({ request: { headers: request.headers, }, }); return response; } 따라서 미들웨어에서 세션에 접근하는 순간에 jwt콜백이 실행되어 jwt 토큰에 저장되어 있는 토큰 expire 시간을 비교하여 만료여부를 판단 한 뒤에 토큰 갱신이 되도록 구현을 하였습니다. async jwt({ token, account, user }) { // Initial sign in if (account && user) { return { accessToken: user.accessToken, expiresAt: new Date( Date.now() + (user?.expiresIn ?? 0) ).toISOString(), refreshToken: user.refreshToken, serviceAvailable: true, }; } // Return previous token if the access token has not expired yet if ( new Date() < new Date(new Date(token.expiresAt as string).getTime() - 5000) ) { console.log("@@@@@@valid"); return token; } else { if (token.error === "RefreshTokenInvalid") { return token; } // Access token has expired, try tㄴo update it try { console.log("@@@@@@expired"); const refreshedTokens = await authApi.refreshAuthToken({ refreshToken: token.refreshToken as string, accessToken: token.accessToken as string, }); console.log("==========token refreshed========"); // reissue token return { ...token, accessToken: refreshedTokens.accessToken, expiresAt: new Date( Date.now() + (refreshedTokens.expiresIn ?? 18000) ).toISOString(), refreshToken: refreshedTokens.refreshToken ?? token.refreshToken, error: null, }; } catch (error) { console.error("Token refresh failed", error); if (error.status === RestApiErrorType.invalidTokenException) { return { ...token, error: "RefreshTokenInvalid", }; } return { ...token, error: "RefreshAccessTokenError" }; } } }, 기존에는 세션에 접근을 할때 next-auth의 jwt 콜백이 돌고 값이 리턴되면 쿠키의 session-token값에 암호화된 값들이 업데이트 되는 걸로 알고 있었는데 찾아보니 현재 세션에 접근하고 갱신하는 부분이 서버단에 있어서 쿠키가 업데이트 되지 않는다고 합니다. 따라서 현재 토큰이 만료된 후 한번에 3가지의 api 콜을 요청했을때 첫번째 api요청에서는 정상적으로 토큰 refresh가 요청이 되며 middleware에서 세션에 접근해 갱신된 토큰이 가져와져 요청이 성공되나 그 뒤 요청부터는 쿠키에 업데이트가 되지 않아서인지 세션에서 갱신 전 토큰이 가져와지는 현상이 발생하고 있습니다. 클라이언트에서 세션 업데이트 후 세션에 접근을 해야 쿠키값이 갱신이 된다고 하는데 다른 방법이 있는지 문의드립니다.
