무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨Svelte REST-API 프로젝트
[npm start 오류나는 분들을 위하여]노드 최신버전 사용하시면 오류가 발생합니다.
v20.x.x 버전 사용중이였는데, npm start로 서버 띄울때 prisma 관련 오류가 발생했습니다. nvm을 사용하여 node 버전을 강사님 버전과 맞추시면 문제없이 서버가 띄워집니다. 그런데.. 이런 오류는 왜 발생하는건가요?원래 버전 오류는 흔한건가요? 개발을 처음해봐서 어렵네요 ㅠㅠ
- 해결됨Svelte REST-API 프로젝트
첫 메인 화면 $isLogin 인증 부분 궁금한점이 있습니다.
처음 화면에서 http://127.0.0.1:3012 을 호출하면 http://127.0.0.1:3012/articles/all 주소로 자동 이동합니다.궁금한 점은 articles/all 화면에서 제일 상단에 인증되면 보이는 입력칸이 보입니다. {#if $isLogin} 으로 조건이 되어도 true 인지 입력칸이 보입니다.로그아웃 버튼을 누르면 로그인을 하지 않은 첫화면인데 작동이 되어 로그아웃으로 해제 됩니다. 이 부분이 궁금합니다. <script> import ArticleHeader from '../components/ArticleHeader.svelte'; import ArticleList from '../components/ArticleList.svelte' import ArticleAddForm from '../components/ArticleAddForm.svelte' import Comments from '../pages/Comments.svelte' import { isLogin } from '../stores' import { Route } from 'tinro' </script> <ArticleHeader /> <main class="slog-main "> {#if $isLogin} <ArticleAddForm /> {/if} <ArticleList /> <Route path="/comments/:id" > <Comments /> </Route> </main> function setIsLogin() { const checkLogin = derived(auth, $auth => $auth.Authorization ? true : false) return checkLogin }
- 해결됨Svelte REST-API 프로젝트
[앱 완성도 높이기3 - URL을 통한 보기모드 변경] 로그인 성공 후 라우팅 문제
현재 강의 내용대로라면, 로그인 성공 후 /articles path로 이동하기 때문에 404 Not Found 페이지가 나타납니다.그러므로 auth 스토어의 login 메소드에서도/articles에서 /articles/all로 router.goto의 path를 변경해야할 것 같습니다.const login = async (email, password) => { try { const options = { path: "/auth/login", data: { email: email, pwd: password, }, }; const result = await postApi(options); set(result); isRefresh.set(true); router.goto("/articles/all"); } catch (error) { throw error; } };
- 해결됨Svelte REST-API 프로젝트
[앱 완성도 높이기2 - 날짜보기] 타임존 관련 설정 문제
23년 05월 9일 22시 32분에 게시글을 작성했지만,아래 이미지를 보면 알 수 있듯이,API로 가져온 createdAt은 UTC 기준 날짜로 DB에 저장되어 있습니다.강의 영상대로 dateView 메소드를 구현한 후게시글 작성날짜를 보면 다음과 같습니다.위 결과를 보면 알 수 있듯이 상대시간 계산이 제대로 이뤄지지 않고 있음을 확인할 수 있습니다.검색을 해보니 day.js에서 utc 플러그인을 사용할 때 timezone 플러그인을 함께 사용해야 하는 것 같습니다. (참고: Dayjs 로 타임존을 다룰 때 주의해야 할 사항 2가지 (velog.io)) 위 내용을 참고하여 dateView 메소드를 다음과 같이 수정했습니다.import dayjs from "dayjs"; import relativeTime from "dayjs/plugin/relativeTime"; import utc from "dayjs/plugin/utc"; import timezone from "dayjs/plugin/timezone"; import ko from "dayjs/locale/ko"; function dateView(date) { dayjs.extend(utc); dayjs.extend(timezone); dayjs.locale(ko); dayjs.extend(relativeTime); return dayjs().to(dayjs(date).tz().format("YYYY-MM-DD HH:mm:ss")); } export default dateView; 그리고 결과를 확인해보면,한국 시간을 기준으로 상대시간이 올바르게 계산되는 것을 확인할 수 있었습니다.
- 해결됨Svelte REST-API 프로젝트
[보기모드 변경 구현] 코멘트 리스트 조회 후 문제
특정 게시글의 코멘트 리스트를 조회하는 화면에서뒤로 가기를 하거나 글 목록 보기를 하면 이전 화면으로 잘 이동합니다. 그러나 코멘트 리스트 조회 화면(게시글 상세조회)에서 보기모드(모두/좋아요/내글)를 클릭해도 화면에 아무 변화가 없습니다. (API는 정상적으로 요청) 그래서 ArticleHeader 컴포넌트에서 onChangeMode 메소드를 다음과 같이 수정하여 정상적으로 동작하는 것을 확인했습니다.[변경 전] const onChangeMode = (mode) => { if ($articlesMode !== mode) articlesMode.changeMode(mode); }; [변경 후] const onChangeMode = (mode) => { if ($articlesMode !== mode) { articlesMode.changeMode(mode); router.goto("/articles"); } }; 위와 같이 수정한 것이 올바른 방법이 맞을까요?
- 해결됨Svelte REST-API 프로젝트
[보기모드 변경 구현] 좋아요 보기 구현에서 문제 발견
user7@user7.com이라는 계정을 만들어서,총 3개의 게시물에 좋아요를 클릭하였습니다.아래 스크린샷을 보면 알 수 있듯이,user1이 작성한 게시물 2개에 좋아요를 클릭했고나머지 1개는 user7이 작성한 게시물에 좋아요를 클릭했습니다.그러면 좋아요 보기를 클릭하면, 3개의 게시물만 화면에 나와야하고 user1이 작성한 게시물 2개 user7이 작성한 게시물이 1개 나와야 합니다.그러나 아래 스크린샷을 보면, 좋아요를 클릭한 게시물의 작성자가 모두 user7인 것을 볼 수 있습니다.확인을 해보니 백엔드 API(GET /likes)에서 날리는 쿼리에 문제가 있었습니다.likeArticles = await db.like.findMany({ where: { userId: userId, }, include: { article: { select: { id: true, content: true, commentCount: true, likeCount: true, createdAt: true, }, }, user: { select: { id: true, name: true, email: true, }, }, }, orderBy: { id: "desc", }, skip: skip, take: pageSize, });위에서 user를 조인하여 정보를 가져오는데해당 user는 article 작성자가 아니라 좋아요를 클릭한 사용자의 정보입니다.그러므로 아래와 같이 article의 작성자 정보를 가져오도록 aritcle 내부에 user를 추가해줘야 합니다. likeArticles = await db.like.findMany({ where: { userId: userId, }, include: { article: { select: { id: true, content: true, commentCount: true, likeCount: true, createdAt: true, user: true, }, }, }, orderBy: { id: "desc", }, skip: skip, take: pageSize, }); 그리고 가져온 정보를 평탄화하는 로직에서 userId, userName, userEmail 부분을 수정해줘야 합니다. flattenArticles = likeArticles.map((article) => { let newArticle = { id: article.article.id, content: article.article.content, commentCount: article.article.commentCount, likeCount: article.article.likeCount, createdAt: article.article.createdAt, userId: article.article.user.id, userName: article.article.user.name, userEmail: article.article.user.email, likeMe: true, }; return newArticle; }); 그럼 다음과 같이 정상적인 결과를 가져올 수 있습니다.
- 해결됨Svelte REST-API 프로젝트
[인증 구현 - 컴포넌트] error 처리 관련 질문
2분 12초인증 컴포넌트를 테스트해보는 과정에서 질문이 생겼습니다.만약 백엔드 서버가 작동하지 하고 있다면,이메일/패스워드 입력 후 로그인 버튼을 클릭하면auth 스토어의 login 메소드에서 에러가 발생합니다.그럼 이때 try/cath로 인해 "오류가 발생했습니다. 로그인을 다시 시도해 주세요."라는 alert 문구를 띄우게 됩니다. 만약에 AuthLogin 컴포넌트에서 정의한 try/catch으로alert를 보여주고 싶다면 Auth 스토어의 login 메소드에서 try/catch를 하지 않으면 되는데, 이는 좋은 방법같지 않은거 같습니다. 아니면 on:click 이벤트 정의 메소드에서는 try/cathc를 안해는게 나을까요? error를 catch 하는 것을 한 곳에서 관리(?)하여 에러 발생시 내가 원하는 동작(화면)을 보여주고 싶다면 어떻게 코드를 작성하는게 좋을까요?
- 해결됨Svelte REST-API 프로젝트
[인증 구현 - store] setAuth 메소드 구현
setAuth 메소드 구현 과정(6분 34초) 중 try/catch문에서resetUserInfo 메소드를 호출할 때왜 resetUserInfo()가 아닌 auth.reserUserInfo()인지 궁금합니다.
- 해결됨Svelte REST-API 프로젝트
[스토어 배치] 강의 내용 중 수정이 필요한 부분
[40초 - src/stores/index.js]service 폴더에 있는 api.js 파일을 임포트 시키는 것이므로상대주소를 다음과 같이 작성해야 합니다."../service/api.js"
- 해결됨Svelte REST-API 프로젝트
[라우터 설정] 강의 내용 중 수정이 필요한 부분
[3분43초 - router.svelte]첫 번째 Route에서 리다이렉트 경로를"/ariticles"가 아닌 "/articles/all"이 맞는 것 같습니다.6분 41초 영상에서 테스트 장면을 보면 리다이렉트 경로가 /articles/all인 것을 볼 수 있습니다. [3분50초 - router.svelte]강의 영상처럼 타이핑을 하고난 후에에디터(vscode)에 다음과 같은 에러가 나타날 수 있습니다.임시로 해결할 수 있는 방법은 node_modules 폴더 내부에 있는 tinro 라이브러리의 타입 정의(index.d.ts)를 수정해주시면 됩니다.참고: https://github.com/AlexxNB/tinro/pull/121/commits/d2251ffed630aac6e76e71856204ead5dd2f6661
- 해결됨Svelte REST-API 프로젝트
아래와 같은 에러가 발생합니다. ㅜㅜ
Cannot find module './App.svelte' or its corresponding type declarations.ts(2307)경로는 문제 없는거 같은데 어떤 부분을 수정해야할가요?