묻고 답해요
129만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Svelte.js [Core API] 완벽 가이드
5 라이프사이클 모듈화 - 질문
크게 3가지 정도 동작이 이상해서 문의 드립니다.1) 강의 따라 입력하고 실행하다 보면 내가 입력한 코드가 자동으로 없어 지네요. 에러 나서 살펴보면 그래요주로 import 로 시작하는 문장이구요 다른것두 있는지는 ... 2) 저장 세이브 하면 코드 뒤에 자동으로 세미콜론이 붙네요.삭제해도 또 붙구요, 안 붙는 방법이 없을까요또한 import { aaa, bbb} 라면 지가 맘대로 { bbb, aaa } 순으로 순서가 바뀌구요또한 세로로 정렬이 되네요. 3) App.svelte 파일에서 {#if done} 로 해야 동작하네요강의내용대로 $done 하면 안되구요Something.svelte 파일에서는 $ 붙여야 하구요 세팅이 깨졌나요, 아님 다른 이유가 있는지 모르겠네요.또한 동작이 좀 틀립니다. Hello Lifecycle! 는 변하지 않고 계속 보이구요. 코드가 틀린지 몰라 몇번이나 봐도 그건 아닌거 같구요 4) 올리신 코드는 Trello 코드 같은데 별도로각 강의마다 했던 짧은 코드지만 파일로 올려주셨으면 조겠네요.강의 화면 찾아가면서 비교하기 너무 힘들고 시간이 많이 걸리네요.
-
미해결Svelte.js [Core API] 완벽 가이드
소스코드
라이프 사이클 모듈화 이 단원 코드는 어디서 받나요똑같이 동작 안해서 확인 하려구요
-
해결됨GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]
DISABLE_WEBSOCKETS=true meteor run 실행이 안됩니다.
DISABLE_WEBSOCKETS=true meteor run 이렇게 실행하였으나 . 아래처럼 메세지가 뜹니다. run: You're not in a Meteor project directory. To create a new Meteor project: meteor create <project name>For example: meteor create myapp For more help, see 'meteor --help'.
-
해결됨GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]
git bash 환경에서도 meteor run이 안됩니다.
먼저번에 질문 남겼었는데요nvm으로 node.js 14로 설치하고vscode에서 git bash 환경에서도 meteor run이 안됩니다. DISABLE_WEBSOCKETS=true meteor run이랑DISABLE_WEBSOCKETS=true meteor.bat run 모두 안됩니다. 아래는 vscode에서 git bash에서 실행한 사진이고아래는 윈도우 파워셀에서 실행한 사진입니다.어디를 고쳐야 할까요 ...
-
해결됨GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]
윈도우 meteor run 할 때 에러
노드 v14.21.3 입니다.터미널 git bash에서 실행하였고,npm i -g meteor 하여 설치 한 후에DISABLE_WEBSOCKETS=true meteor run 해도 안되네요. bash: meteor: command not found AppData/Local/.meteor 위치에는 이렇게 있어서meteor 설치, 삭제 다 해봤는데도 안 되네요 .. 이런 오류는 어떻게 고쳐야 할까요..?
-
미해결Svelte.js [Core API] 완벽 가이드
스벨트킷 강의는 안해주시나요?
선생님 안녕하세요.강의 잘 보고 많은 도움 받고있습니다. 감사합니다. 혹시 스벨트킷 강의는 예정에 없나요!?
-
해결됨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.js 입문 가이드
div에 on:click 이벤트 붙일 때 on:key와 관련된 이벤트를 같이 사용해야하나요?
visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress eventdiv에 on:click를 붙일 때 위와 같은 문구가 표시됩니다.on:key와 관련된 이벤트를 붙이니까 해당 문구가 사라지던데 꼭 그렇게 사용해야 하나요? 제가 div에 onclick 이벤트를 자주 쓰는데 div가 아닌 button을 사용해야 할 까요?
-
미해결Svelte.js 입문 가이드
cdn지원과 프론트엔드 프레임워크는 무슨 상관관계가 있나요?
cdn이 네트워크 속도를 빠르게 하기 위해서 물리적으로 가까운 서버를 제공하는 것이라고 알고 있습니다.근데 svelt에서 지원하는 것과 별개로 만들어진 동적, 정적파일의 위치를 조정하는 것에 불과한 것이라고 생각이 듭니다.여기서 svelt가 지원하지 않는다는 게 무슨 의미인지 궁금합니다. 제가 잘못 알고 있는 게 있다면 알려주시면 감사하겠습니다.
-
해결됨Svelte.js 입문 가이드
안녕하세요
안녕하세요 Svelte 공부를 하고 있는 개발자입니다.다름이 아니라 이번에 회사에서 SvelteKit 를 사용하려고 하는데혹시 추천해줄 책이 있을까요??Svelte 기반으로 되어 있다고해도 코드 작성 방식이 다른 식이라 혹시나 공부해보셨다면 SvelteKit 관련 추천을 부탁드립니다. 워낙 정보가 많이 없어서 문의 드립니다.
-
해결됨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.js SPA 영화 검색 프로젝트
snowtemplate 를 설치하는중에 에러가 발생합니다.
안녕하세요 예제를 따라가다 보니 snowtempalte를 npm으로 설치중에 에러가 발생하네요강의 촬영시와 시간이 좀 흘러서 설치에 문제가 있어보이는데 보완할 수 있는 내용을 명시해주시면 좋을 것 같습니다.감사합니다.
-
해결됨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