묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨프로젝트로 쉽게 배우는 Svelte(SvelteKit + Supabase)
영화목록 component 만들기 에서 질문이 있습니다.
영화목록 컴포넌트 만들기 영상에서 Movies 컴퍼넌트로 분리할때좋아요 버튼 작동이 안되니까 handleLike 함수를프롭스로 넘겨주는데요. 영상에서는 잘 되는데동일하게 소스도 쳐보고 올려주신 github 소스도 가지고 와서 붙여넣어봐도 console창에서는 data 안의 likeCount 값이 버튼을 클릭하면 변경되는게 보이는데 실제로 화면에서는 변경이 되지 않습니다. 왜 그럴까요. 그리고 작동이 되는 게 영상에서도 보이는데, 저한테는 왜 안되는지도 궁금합니다. ;;;; 아래 .toUpperCase() 도 저는 왜 실행이 안될까요.;;
-
해결됨프로젝트로 쉽게 배우는 Svelte(SvelteKit + Supabase)
"hello".toUpperCase() 가 안되는데요.
너무 첫 부분이라 민망하긴 한데요.강의 영상에서는 "hello".toUpperCase() 라고 하니까HELLO로 잘 변환되는데제가 직접해보니 그 부분 값이 아예 공백으로 표시가 됩니다. 개발자모드로 봐도 소스에 아예 비워져서 나가더라구요.스크립트 부분에 let text="hello"로 하고 html 부분에서 text.toUpperCase라고 쓰니까 또 잘되고요.이거 왜 이런가요? 궁금합니다.
-
해결됨프로젝트로 쉽게 배우는 Svelte(SvelteKit + Supabase)
날짜 포매팅 관련 질문
현재 날짜를 포매팅하는 함수는 아래와 같습니다,const formatDate = function() { return new Date().toLocaleDateString('ko-KR', { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long', }); }위 함수는 현재 기준으로 날짜를 포매팅해주기 때문에 db에서 불러온 일기 날짜들이 모두 오늘 날짜로 포맷팅 되는 문제가 발생하는 것으로 이해했습니다. 따라서 파라미터로 받은 날짜를 포맷팅 해주도록(일기 쓰기 부분에선 위 함수가 필요하니 별도의 함수로 구현) 수정해야 할 것 같은데 제가 잘못 이해한 부분이 있을까요??
-
해결됨프로젝트로 쉽게 배우는 Svelte(SvelteKit + Supabase)
삭제 후 홈으로 돌아가는 코드 관련 질문
안녕하세요, "delete로 글 삭제하기" 강의를 듣던 중 궁금한 점이 생겨 질문드립니다. 삭제 후 다시 supabase에서 글 목록을 조회하고, 조회한 글들로 홈 화면의 게시글 목록을 구성하기 위해 goto 대신 location.reload() 함수를 사용하신 내용을 이해했는데요, 홈 화면에서 삭제하는 경우가 아닌 글 조회 후 /read/{diary_id} 경로에서 삭제 버튼을 누르게 되면 해당 경로에서 reload가 되기 때문에 문제가 발생하지 않나요? 따라서 말씀하신 location.reload() 대신 location.href = '/' 만 사용할 수 있는것이 아닌지 여쭤봅니다,감사합니다!
-
해결됨GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]
Window 환경에서 meteor 설치하는 부분에 대해 실습환경 구축 부분에 추가내용이 없습니다.
Window 환경에서 meteor 설치하는 부분에 대해 실습 환경 구축 부분에 추가 내용이 없습니다.현재 node 18.20.0 버전을 사용하고 있습니다.window의 경우 설치 시 vscode 내부의 터미널에서 npm install -g meteor 명령 하는 것인가요? 아니면 git bash창에서 설치하는 것인가요? 자세한 설명 부탁드립니다.
-
미해결Svelte.js [Core API] 완벽 가이드
56강 4. 슬롯 포워딩이 Svelte 5 부터는 적용 불가
56강 4. 슬롯 포워딩이 Svelte 5 부터는 적용이 안되는 것 같아요~!확인 부탁드립니다.
-
해결됨프로젝트로 쉽게 배우는 Svelte(SvelteKit + Supabase)
OnDestroy() 위치 질문
안녕하세요,강의에서 메모리 절약을 위해 인터벌을 제거하는 내용을 듣던 중 궁금한 점이 생겼는데요 만약 이벤트창이 닫혔을 때 인터벌을 종료시키고 싶다면 App.svelte가 아닌 Event.svelte 내에 OnDestroy를 작성해주면 되는거겠죠? App.svelte에 OnDestroy를 작성하신 이유는 이벤트 인덱스를 증가시키는 로직과 이벤트 텍스트 관리를 App.svelte에서 하고있으니 이벤트 창이 열리거나 닫힌 여부와는 상관 없이 App.svelte가 살아있는 동안에는 계속 이벤트배열 인덱스를 증가시키기 위해라고 이해했는데 제가 이해한 내용이 맞을까요??
-
해결됨프로젝트로 쉽게 배우는 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/