묻고 답해요
138만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨프로젝트로 쉽게 배우는 Svelte(SvelteKit + Supabase)
$(리액티브선언문) 으로 setInterval과 clearInterval 를 작성 시 메모리 관련
영상 마지막 로직에 대해 질문드리려고 문의드립니다.onMount와 onDestory 함수로 setInterval과 clearInterval을 생명주기에 맞게 실행시키게되어 setInerval과 clearInterval을 한번씩만 실행시키는 거 같은데 $(리액티브선언문) 으로 setInterval과 clearInterval 를 작성 시setInterval과 clearInterval이 반복적으로 호출되어 생성되었다 지웠다 하는것 같아 보이는데이 방식이 메모리 영역에서 괜찮은건지 궁금합니다!<script> let intervalEventText; let eventIndex = 0; const eventText = [ "영화 정보 업데이트", "신규 영화 추가", "이벤트 진행중" ] import { onMount, onDestroy } from 'svelte' /** 리액티브 선언문 방식 */ $: { // 이벤트 인터벌 제거 clearInterval(intervalEventText); console.log(eventIndex) // 일정 시간 경과 후 eventIndex를 1 증가 intervalEventText = setInterval(() => { eventIndex += 1; if (eventIndex >= eventText.length) { eventIndex = 0; } }, 1000); } /** onMount & onDestory 방식 */ // onMount(()=>{ // intervalEventText = setInterval(() => { // eventIndex += 1; // if (eventIndex >= eventText.length) { // eventIndex = 0; // } // }, 1000); // }); // onDestroy(()=>{ // console.log(eventIndex) // clearInterval(intervalEventText); // }) </script> <p>{eventText[eventIndex]}</p>
-
해결됨GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]
리액트에서 적용할 때 질문있습니다.
안녕하세요강사님한테 배운 코스를 리액트에 접목시켜보고 싶은데요 바뀌는 부분이 많을까요? 부족한 제 생각으로는리액트는 커스텀훅을 작성해줄수있다보니까로그인, 어드민 관련부분에서도 변경해야하는부분이있을거같고..stores부분 코드를 그대로 복붙하기에는 무리가 있을까요?따로 분류해가면서 작성해줘야할까요?
-
해결됨프로젝트로 쉽게 배우는 Svelte(SvelteKit + Supabase)
스벨트킷에 대해서 질문이 있습니다.
안녕하세요. 현재 공식 문서와 강의를 보고 학습중에 있는데 해당 강의 에서는 session, cookie, middleware, sever hook, cache 기능을 스벨트에서는 어떻게 사용하는지에 대한 예제는 다루지는 않고 있나요??CSR / SSR / SSG 관련한 예제도 있으면 좋을것 같아요.
-
해결됨Svelte.js SPA 영화 검색 프로젝트
에러가 나서 질문올립니다.
template 설치중에 에러가 자꾸떠서질문남깁니다..
-
해결됨GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]
Upload, 파일사이즈 코드 질문있습니다.
안녕하세요import GraphQLUpload from 'graphql-upload' import mutations from './mutations' import queries from './queries' const resolvers = { Upload: GraphQLUpload, Mutation: mutations, Query: queries, } export default resolvers 위에서 Upload: GraphQLUpload, 이 코드가 어디서 쓰이는지 궁금합니다.혹시 뮤테이션문에서 Upload 타입으로 쓰일까요?아래의 Upload 가 위의 코드의 Upload일까요ㅠㅠconst UPLOAD_FILE = gql` mutation ($file: Upload) { uploadFile(file: $file) { fileName fileType filePath } } `스트림으로 파일을 처리하는 방식과 browser-image-compression 라이브러리로 이미지를 압축해서 서버에올리는것과 어떤 차이가 있는지 궁금합니다.스트림으로 파이프 연결해서 하는방식은 처음 써봐서 생소해서그런지 좀 헤매고있습니다 ㅠㅠ..보통 프론트쪽에서 browser-image-compression 라이브러리를 사용해서 이미지를 압축하고 서버에 전송하여 서버에서는 s3에 올리는식으로했었거든요..강사님이 스트림 사용하신이유는 파일전송은 용량이크기때문에 일정크기로 작게나누어 서버로 전송하여 메모리효율성과 성능을 향상시키기위해서 하신걸로 알고있는데요, 그러면 스트림 + browser-image-compression 라이브러리를 같이사용해서 서버에 전송후 s3로 업로드하면 금상첨화일까요?어떻게하는게 좋을까요?.. 최대한 질문을 간소하게하려고했는데 죄송합니다..
-
해결됨GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]
이벤트 함수 on, handle 어떤 기준으로 정하는걸까요?
안녕하세요, 강의랑 조금 동떨어지는 질문일수 있어 조심스럽습니다..보통 submit같은 경우 onSubmit 로 이름을 지로 짓고는하는데요근데 다른 분들의 코드를 보면 submit말고 다른 함수 이름을 지을때handle 랑, on 이랑 섞어서 사용하시더라구요강사님은 이 강의에서 on 이름을 사용하셨지만..이거랑 별개로 강사님은 어떤 기준으로 이름을 짓고 사용하시는지 궁금합니다.
-
해결됨GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]
itemForm에서 Modal바인딩 질문있습니다.
itemForm파일에서<Modal bind:modalActive={$modalActiveItem}> 이렇게 되어있는데요Modal코드를가보면<script> export let modalActive = false const closeModal = () => { modalActive = false } </script> {#if modalActive} <div class="modal-bg" class:show={modalActive === true}> <div class="custom-modal" class:show={modalActive === true}> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <slot name="modal-title"></slot> <button type="button" class="btn-close" on:click={closeModal} ></button> </div> <slot name="modal-body"></slot> <slot name="modal-footer"></slot> </div> </div> </div> </div> {/if} 이런식으로 modalActive가 boolean으로 되어있습니다.하지만 itemForm에서<Modal bind:modalActive={$modalActiveItem}> 여기 코드에서 $modalActiveItem는 store에서 function setModalActiveItem() { const { subscribe, set } = writable(false) const openModal = () => set(true) const closeModal = () => set(false) return { subscribe, set, openModal, closeModal, } } export const modalActiveItem = setModalActiveItem()이런형태의 함수이고, 객체형태로 리턴을해주고있는데블리언 형태로 넣을수가 있는지 궁금합니다.스벨트에서 블리언 타입이란, 바인드로 존재하는 객체를 넣었을때, 그 객체가 존재하면 그게 true가되는걸까요?이것도 저것도 아니라면..함수에 감싸고있지만 const { subscribe, set } = writable(false) 이것때문에 초기값이 false로 리턴이된다는건가요?어떻게 이게 가능한거지 너무어렵습니다..
-
해결됨GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]
css 파일 질문있습니다
선생님 안녕하세요부트스트랩 파일은 말그대로 부트스트랩 코드를 파일로 가져오신거같은데boxicon폴더는 선생님이 따로 만들어두신 폴더를 이번 강의에 사용하고계신걸까요? 넘 유용한거같은데 혹시 스토리북으로 설정해두신게 있으실까요?고수들은 따로 css 스타일폴더를 관리한다고하던데 선생님도 혹시 이런식으로 관리하시나용?
-
해결됨GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]
섹션7 디자인요소배치 이후 흰색화면..
선생님 안녕하세요,섹션7 디자인요소배치 코드를 따라쳤으나흰색 화면이 떠서 문의드렸습니다.https://github.com/jungsikjeong/smart-menu-study제가 여태까지 작성한 코드인데요.. 혹시 실수한 부분이있을까요?..선생님 강의 영상 코드랑 계속 대조해보기도하고,선생님 깃허브 코드랑 비교도해보고있는데..쉽지않네요..
-
해결됨GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]
accessToken과 리프레시토큰 구현
토큰이 만료되면 리프레시토큰을 확인하고,리프레시토큰 기간이 남아있다면 access토큰을 재발급해주고,리프레시토큰도 유효기간이 끝났다면 로그아웃을 시켜주는 기능은어떤식으로 개발할 수 있을까요?..프론트쪽에서 서버에게 통신하는 방법이 궁금합니다..커리큘럼에 로그인 인증관련 제목이있어서 이런방법이있을줄알고 구매후 다섯시간가량 듣고있는데 없는거 같아서 절망스럽습니다ㅠ_ㅠ
-
해결됨Svelte로 시작하는 웹 프런트엔드
hovering 상태값 App.svelte에 전달시 오류
App.svelte<script> import Card from './card.svelte';</script><Card> <span slot="name"> 홍길동 </span> <span slot="address"> 서울특별시<br>여의도동 </span> <span slot="email"> ab@abc.com </span></Card><Card let:hovering> <span slot="email"> {#if hovering} <b>ab@abc.com</b> {:else} ab@abc.com {/if} </span></Card> card.svelte<style> .contact-card { width: 300px; border: 1px solid #aaa; border-radius: 2px; box-shadow: 2px 2px 8px rgba(0,0,0,0.1); padding: 1em; margin: 0 0 1em 0; } h2{ padding: 0 0 0.2em 0; margin: 0 0 1em 0; border-bottom: 1px solid #ff3e00; } .address, .email { padding: 0 0 0 1.5em; background: 0 50% no-repeat; background-size: 1em 1em; margin: 0 0 0.5em 0; line-height: 1.2; } .address { background-image: url(tutorial.icons/map-marker.svg); } .email { background-image: url(tutorial/icons/email.svg); } .missing { color: #999; } .hovering { background-color: #ffed99;}</style><script> let hovering = false; const enter = () => hovering = true; const leave = () => hovering = false;</script><article class="contact-card" class:hovering on:mouseenter={enter} on:mouseleave={leave}> <h2> <slot name="name"> <span class="missing">이름 미입력</span> </slot> </h2> <div class="address"> <slot name="address"> <span class="missing">주소 미입력</span> </slot> </div> {#if $$slots.email} <div class="email"> <slot {hovering} name="email"> <span class="missing">이메일 미입력</span> </slot> </div> {/if}</article> 제가 작성한 코드인데 뭔가 잘못된 것인지 오류 메세지로let:hovering declared on parent component cannot be used inside named slot (App.svelte:21:7)라고 나옵니다. 강의를 제가 잘못 따라한 것인지 궁금합니다. <script> import Card from './card.svelte';</script><Card> <span slot="name"> 홍길동 </span> <span slot="address"> 서울특별시<br>여의도동 </span> <span slot="email"> ab@abc.com </span></Card><Card let:hovering> <span slot="email" let:hovering> {#if hovering} <b>ab@abc.com</b> {:else} ab@abc.com {/if} </span></Card>이렇게 slot 내부에 다시 hovering을 선언하면 작동은 잘 되는데 맞게 작성한지 잘 몰라서 질문드립니다.
-
해결됨GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]
DISABLE_WEBSOCKETS=true meteor run 문제
GraphQL 기본 수업에서 학습용 프로젝트를 런하려고 하는데...DISABLE_WEBSOCKETS=true meteor run 이 안됩니다.'DISABLE_WEBSOCKETS'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.라는 메시지가 뜹니다.README.md 보고 그대로 따라했습니다.어떻게 해야하나요??
-
해결됨GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]
"섹션9 - item 추가" 강의 누락내용 제보, 외 중요오타
섹션 9. Frontend 개발 - item 관련 기능구현 / item 추가를 듣고, 마지막에 서버실행시켜서, item 추가하는 부분을 보았는데,이렇게 메뉴추가를 해도 아무런 반응이 없어서, 오타가 있나 싶어서, 찾아봐도 없길래,뭔가 빠졌나 봤더니,클릭이벤트 시 onAddItem 함수를 실행시켜 주는 내용이강의에서 누락되어있음을 확인했습니다.저부분을 추가해주니, 잘 작동하였습니다. 강의 편집하시면서, 빠뜨리신거 같습니다.중요한 부분이라, 제보합니다.다다음 강의인 item 수정/삭제 강의에서, 앞 강의에서 작성하는 내용이 없었음에도해당부분이 이미 작성되어있는 것도 확인했습니다. 해당 영상 코드 오타입니다.따라치시는 분들이 에러 날수도 있을거 같습니다.resut -> result경로가 잘못나왔습니다. 이렇게 되어야합니다.그리고 중요하지 않은 사소한 오탈자 및 편집 영상이 튀는 것들을 수업 들으면서,이전에 작성했던 글에 답글형식으로 수업들으면서 눈에 뜨일때마다 계속해서 제보드리고 있습니다. (게시판 도배방지목적)강의 개정에 도움이 되셨으면 합니다.영상 튀는 부분 : https://www.inflearn.com/questions/786367/오탈자 : https://www.inflearn.com/questions/785432/
-
해결됨GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]
강의영상 튀는 부분 제보 (update: 2023.2.27)
해당 영상 5:45 에서 편집이 좀 튑니다. 내용이 살짝 반복되네요이전 강의영상들에서도 몇개 있긴했는데, 적어놓진 않았네요.앞으로 수업들으면서 튀는 부분이 또 나오면,추가글을 작성안하고 이글의 답변으로 남겨놓겠습니다.너무 제가 질문게시판 글 도배하는거같은 느낌이 있네요.;
-
해결됨GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]
강의자료 코드 강의와 다른부분 제보
깃허브 자료에 있는 코드에 있는 다른부분? 오탈자? 제보합니다.해당부분 _id : _id가 되어야 하지 않나요?그리고 이부분은 강의영상에서는 const 로 되어있던데강의자료에는 이부분만 let으로 되어있습니다. 상관없는 건가요?error 명령어 출력하는부분, throw 가 없네요 여기는.
-
해결됨GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]
강의 오탈자 제보 (update : 2023.03.06)
오탈자 제보합니다. 해당부분,updateFile 이 아닌uploadFile 이 되어야합니다. 이부분 때문에 계속 playground 가 하얀화면으로 아무것도 안나왔었어요.ㅠㅠ다행히 수업자료 파일은 제대로 나와있었어서 코드하나하나 비교해가면서 겨우 찾았네요..
-
해결됨GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]
강의 오탈자 제보
제보합니다. 경로가 /utils/formatDate 로 되어야합니다.오탈자 입니다.
-
해결됨GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]
m1 meteor 설치 오류!
안녕하세요!meteor 설치 오류로 한참 고통받다 해결한 m1 유저입니다.meteor가 m1에서 호환된다고 공식발표되었지만,여전히 rosetta를 이용한 우회로 설치 가능한 것 같습니다.설치 오류 있으신 분들은 rosetta로 설치해보세요!혹시 저처럼 고통받는 분들이 있으실까봐 공유합니다🥲
-
해결됨Svelte.js SPA 영화 검색 프로젝트
안녕하세요 Vite + Svelte로 프로젝트 시작하려고하는데 prettier + eslint 설정이 잘 안되고 있습니당
안녕하세요 Vite + Svelte로 프로젝트 시작하려고하는데 prettier + eslint 설정이 잘 안되고 있습니다 ㅠㅠ https://github.com/sveltejs/prettier-plugin-svelte#readme 이곳에 가서 prettier 설정하는거 보고 dependency 설치 후 .prettierrc 파일을 root directory에 만들어서 하는데 .svelte file에게만 prettier rules가 적용이 안되고 있습니다. 무슨 영문인지 도대체 모르겠습니다. 미리 답변 감사 드립니다!
-
미해결Svelte.js [Core API] 완벽 가이드
보간한다는 뜻을 무슨 의미로 이해해야 하나요?
강의 중에 보간한다. 보간법이라는 말이 나오는데 보간이라는게 값을 채워넣는다는 뜻인가요? 보간이라는 말이 생소한 말이라 그런지 강의를 들으면서도 어떤 의미인지 와닿지가 않네요.