묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
pinia 사용할려고 하는데 에러가 나옵니다.
import { defineStore } from "pinia"; import { getUserFromCookie, getAuthFromCookie } from "@/utils/cookies"; import { loginUser } from "@/api"; export const usePiniaStore = defineStore("userData", { state: () => { return { storeUsername: getUserFromCookie() || "", token: getAuthFromCookie() || "", }; }, getters: { isLogin: (state) => state.storeUsername !== "", }, actions: {}, });에러 내용Uncaught ReferenceError: Cannot access 'usePiniaStore' before initializationloginUser 요거 불러올때 에러나는거 같은데,왜 그런지 모르겠습니다.
-
미해결자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
shift, splice연산
안녕하세요shift 연산을 사용하면 원소값들이 한칸씩 다 당겨진다고 알고 있는데 맞나요??만약에 맞다면 N이 클경우는 원형큐같이 직접구현해서 사용하는게 시간복잡도상 더 좋은 코드일까요?
-
미해결처음 만난 리액트(React)
Section 13 Card 컴포넌트 실습 스타일링 질문
안녕하세요, 덕분에 재밌게 리액트 공부하고있는 직장인입니다.섹션13 카드 컴포넌트 실습에서 소플님 코드에서는 Inline styling 으로 backgroundColor: backgroundColor || 'white' 라고 적어주셨는데 제가 css.module 스타일파일을 만들어서 style sheet에서 import 해서 쓰고싶으면 prop으로 받은 background 를 style sheet 에 어떻게 넘겨줄수있는지 궁금합니다.
-
미해결Vue.js 시작하기 - Age of Vue.js
{{ num }} 이 <app-content> 아래에 들어가 있을때에는 노출이 안됩니다...
{{ num }}이 <app-content> 위에 있을시에는 {{ num }} 이 보이게 되고 num 값 10이 표출이 되고<app-content> 아래 있을시에는 num 값이 노출이 안됩니다.app-content에서 this.num으로 제어를 하고 있기는 하지만아래에 있다고 해서 노출이 안되는 이유가 이해가 안됩니다...
-
해결됨비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
전체 핀이 조회되지 않습니다.
15개 장소db가 있는데 5개만 조회 됩니다.코드가 잘못된 부분이 있을까요? 아무리 찾아도 잘 모르겠습니다;;function getContent(data) { // 유튜브 섬네일 id 가져오기 console.log(data); let replaceUrl = data.videoUrl; let finUrl = ""; replaceUrl = replaceUrl.replace("https://youtu.be/", ""); replaceUrl = replaceUrl.replace("https://youtube.com/embed", ""); replaceUrl = replaceUrl.replace("https://youtube.com/watch?v=", ""); finUrl = replaceUrl.split("&")[0]; // 인포윈도우 가공하기 return ` <div class="infowindow"> <div class="infowindow-img-container"> <img src="https://img.youtube.com/vi/${finUrl}/mqdefault.jpg" class="infowindow-img" /> </div> <div class="infowindow-body"> <h5 class="infowindow-title">${data.title}</h5> <p class="infowindow-address">${data.address}</p> <a href="${data.videoUrl}" class="infowindow-btn" target="_blank">영상이동</a> </div> </div> `; } // HTML 코드로 바꾸는 함수 function getContent(data) { let videoId = ""; let replaceUrl = data.videoUrl; replaceUrl = replaceUrl.replace("https://youtu.be/", ""); replaceUrl = replaceUrl.replace("https://www.youtube.com/embed/", ""); replaceUrl = replaceUrl.replace("https://www.youtube.com/watch?v=", ""); videoId = replaceUrl.split("&")[0]; const result = `<div class="infowindow"> <div class="infowindow-img-container"> <img src="https://img.youtube.com/vi/${videoId}/mqdefault.jpg" class="infowindow-img" alt="..."> </div> <div class="infowindow-body"> <h5 class="infowindow-title">${data.title}</h5> <p class="infowindow-text">${data.address}</p> <a href="https://youtu.be/${videoId}" target="_blank" class="infowindow-btn">영상이동</a> </div> </div>`; return result; } async function setMap(dataSet) { markerArray = []; infowindowArray = []; for (var i = 0; i < dataSet.length; i ++) { // 마커를 생성합니다 let coords = await getCoordsByAddress(dataSet[i].address) var marker = new kakao.maps.Marker({ map: map, // 마커를 표시할 지도 position: coords, // 마커를 표시할 위치 }); markerArray.push(marker); // 마커에 표시할 인포윈도우를 생성합니다 var infowindow = new kakao.maps.InfoWindow({ content: getContent(dataSet[i]), // 인포윈도우에 표시할 내용 }); infowindowArray.push(infowindow); // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다 // 이벤트 리스너로는 클로저를 만들어 등록합니다 // for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다 kakao.maps.event.addListener( marker, "click", makeOverListener(map, marker, infowindow, coords)); kakao.maps.event.addListener( map, "click", makeOutListener(infowindow)); } } // 인포윈도우를 표시하는 클로저를 만드는 함수입니다W // 1. 클릭시 다른 인포윈도우 닫기 // 2. 클릭한 곳으로 지도 중심 옮기기 function makeOverListener(map, marker, infowindow, coords) { return function() { // 1. 클릭시 다른 인포윈도우 닫기 closeInfoWindow(); infowindow.open(map, marker); // 2. 클릭한 곳으로 지도 중심 옮기기 map.panTo(coords) }; } let infowindowArray = []; function closeInfoWindow(){ for (let infowindow of infowindowArray) { infowindow.close(); } } // 인포윈도우를 닫는 클로저를 만드는 함수입니다 function makeOutListener(infowindow) { return function() { infowindow.close(); }; } /* ********************************************** 5. 카테고리 분류 */ // 카테고리 const categoryMap = { korea: "한식", china: "중식", japan: "일식", america: "양식", wheat: "분식", meat: "구이", sushi: "회/초밥", etc: "기타", }; const categoryList = document.querySelector(".category-list"); categoryList.addEventListener("click", categoryHandler); async function categoryHandler(event) { const categoryId = event.target.id; const category = categoryMap[categoryId]; try { // 데이터 분류 let categorizedDataSet = await getDataSet(category); // 기존 마커 삭제 closeMarker(); // 기존 인포윈도우 닫기 closeInfoWindow(); setMap(categorizedDataSet) } catch (error) { console.error(error); } } let markerArray = []; function closeMarker() { for (marker of markerArray) { marker.setMap(null) } } async function setting() { try { const dataSet = await getDataSet(); setMap(dataSet); } catch (error) { console.error(error); } } setting();
-
미해결Do it! Node.js 프로그래밍 입문
22강 연락처 추가하기 - css 파일 경로 지정
모듈화한 _header.ejs 파일에서 css 지정경로가 왜href="/css/style.css" 가 되는지 궁금합니다. _header.ejs 파일은 views폴더의 하위 폴더인 include안에 저장되어 있는데, 만약 css 파일의 상대경로를 지정하려면href="../../public/css/style.css"가 되어야 하지 않나요?
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
사용자 데이터를 localstorage에 저장해도 되나요??
안녕하세요 선생님!선생님 강의를 정말 잘 듣고 있는데요! 강의에 대한 질문은 아니지만 다른 곳에 물어볼 곳이 없어서 선생님께 여쭤봅니다. 제가 이번에 백앤드분들과 프로젝트를 준비하고 있는데 로그인 과정에서 jwt토큰을 사용한다고 합니다. 그런데 access토큰을 누구나 볼 수 있는 localstorage에 저장해도 되나요? 구글에 찾아보니 쿠키에 담는게 가장 안전하다고 하는데 쿠키에 담으면 서버에 보낼시 쿠키에 담긴 토큰을 꺼내서 헤더에 넣어서 서버에 보내야 되나요?? 강의 2회 반복중인데 처음에는 너무 어려웠지만 지금은 리액트에 대해 많이 배웠습니다. 항상 좋은 강의 감사합니다!!
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - Part 1 NestJS Core
role 을 추가한 후 컨트롤러의 @Patch 코드에서 에러가 발생합니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. role 을 추가하자마자 다음과 같은 에러상황이 발생하였습니다. 강의순서랑 동일하게 따라가서 특별하게 더 한건 없는데요,기존 entity 파일에서 role 생성하고 column 에서 선언해주고나서 저장하자마자 바로 이런 오류가 납니다. 혹시나 불러오기 에러인가 싶어서 강의를 꼼꼼히 보면서 동일한 위치에 따라하면서 해도 강사님쪽에서는 에러가 안나는데 제쪽에서만 에러가 나네요.. 뭐가 문제일까요?에러내용만 보면 role 을 엔티티파일에서만 선언하고 컨트롤러 파일에서는 불러오기가 실패해서 나는 오류같기도 한데, export 할때 유저 엔티티 파일의 UserModel 안에서 했기때문에 이 에러가 나는게 좀 이상한거 같은데 왜 오류가 나는지 모르겠네요..
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useCallBack 강의 질문
이전 강의인 Reacr.memo 에서 리액트가 기존 prop 과 신규 prop 을 얕은비교(주소값 비교)로 진행하기 때문에, 새로운 객체로 업데이트(생성, 수정, 삭제)로 인해서 수정된 객체 값((새로운 주소값))이 state() 값으로 할당되어 다르게 인식하기 때문에 react.memo 에서 직접 사용자가 비교할 수 있게 따로 로직을 만들었습니다.그런데 이번 강의에서는 단순히 생성, 수정, 제거 함수를 useCallback 으로 제어했을때,react.memo에 직접 prop 값을 비교한 로직은 왜 지우는건가요?state 데이터를 핸들링하는 함수들은 변하지 않음으로 mount 할때만 useCallback을 쓰는건 알겠는데, 이게 왜 state 객체 주소값이랑 연관이 있는지 모르겠어요 ㅜㅜ
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
React.memo object props 값 이외에 함수 비교
리액트는 주소값 비교로 object 를 비교 하려면 따로 로직을 짜주어야 하는데,이 강의에서 editor 또한 memo 로 컴포넌트 최적화 하려 했지만 안되던데 따로 이전 prop 값과 이후 prop 값을 비교해줘야 하나요? 만약 그렇다면, 왜 react는 prop 으로 전달된 함수는 변하지 않음에도 변했다고 인식하는지가 궁금하고 어떻게 비교해야하는지 궁금합니다.
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
프로젝트 중간에 프레임워크와 언어를 변경할수 있나요?
안녕하세요.현재 업데이트 된 강의를 보면서 프로젝트를 만들고 있습니다.그런데 중간에 typescript를 사용하기로 해서 잘라먹는 타입스크립트도 같이 결제 해서 들을려고 합니다.하지만 타입스크립트 강의는 vite를 사용하지 않는거 같아서 타스를 적용하기 전에 질문드립니다. vite로 프로젝트 만들고 있는 중간에 타입스크립트를 사용할수 있게 변경할 수 있나요?vite를 안쓰고 잘라먹는 리액트 강의를 들으면 따라가기 불가능 할까요?혹시 타스 강의도 업데이트 할 예정이 있으신가요?
-
미해결자바스크립트 중급 강좌
심볼 관련 질문
안녕하세요.자바스크립트 중급강의 듣다가 질문 드립니다.영상 5:56 부분에서 심볼을 사용하면 user객체에 해당 메소드가 있었는지 고민할 필요가 없다고 말씀해주셨는데요.그 이유가 궁금합니다.다른 개발자가 만들어놓은 프로퍼티를 덮어쓸 위험이 없는 것과는 다른 이유가 또 있을 것 같아서요.답변 부탁드릴게요.
-
미해결처음 만난 리액트(React)
수업을 들으면서 느낀점
아직 리액트쪽 실무경험이 적어 어느 상황에 어느 것을 사용해야할지 머리속에 아직 안그려지는 문제.백엔드까지 연결해서 DB도 연결된 상태로 CRUD를 가져갔으면 더 좋은 내용이지 않았을까 하는 생각이 듭니다.강사님 발음이 정확하셔서 듣는내내 잘들었습니다. 개인적인 리액트 장점 : 재사용성, JSX를 활용한 간소화 문법들, 메타라는 대기업 지원, 최근 많이 사용하는 CSR개발언어 개인적인 리액트 단점 : 머리속에 컴포넌트 설계와 어떤 걸 어떻게 써야하지 라는 생각이 많이듬. 생각보다 비지니스 외 조금은 복잡한 개발방식을 가져서 다른 분이 짜놓은 코드를 볼때 조금은 어려움이 있을것 같다라는 생각.좋은 내용의 강의 감사합니다.
-
미해결처음 만난 리액트(React)
bottom up 방식 방향으로 개발하는게 익숙치가 않네요
기존 SSR개발자입니다.실습따라하다보니 bottom up 방식 방향으로 개발하는게 익숙치가 않네요.thymeleaf나 JSP개발시엔 html 틀은 만들어놓고 기능을 추가하는 방식으로 개발해서 인지 수업순서가 적응이 안되네요. 혹시 bottom up 방식으로 하시는 이유가 있을까요?그냥 궁금해서 여쭤봅니다. 섹션17을 제외한 수업은 전부 완강했습니다.문법이 어려운거 보다 개념이 낯설어 개인적으론 어려웠습니다. 연습을 계속 하다보니 개념은 어느정도 익숙해졌습니다. 그러나 아직 머리속에 그림이 완벽하게 그려지진 않네요.감사합니다.
-
미해결처음 만난 리액트(React)
질문드립니다.
마지막 실습파트 하고 있습니다.create-react-app으로 mini-blog 만들었는데요. react 18점대 버전으로 해도되나여?
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
라이프사이클 질문!
안녕하세요 라이프 사이클에대해서 궁금하게 있어 질문 드립니다.처음에 컴포넌트가 빌드 되었을때(초기랜더링) 마운트 되었다 라고 표현하고, 이미 빌드가 된 컴포넌트에서 반응형 state로 인해 리랜더링이 되면 업데이트,그리고 컴포넌트가 제거되면 언마운트라고 알고 있습니다 !혹시 그렇다면 업데이트가 이루어질때 컴포넌트가 리랜더링 되는데, state가 초기화 되지 않는걸 보면 컴포넌트가 삭제되지 않고 리랜더링 되는것 같다는 추측을 하고 있습니다.만약 그렇다면 컴포넌트가 어떻게 삭제되지 않고 리랜더링을 진행 할 수 있는건가요 ?
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
남겨주신 Counter App 데모사이트
남겨주신 Counter App 데모사이트가 잘못된것 같아요 링크로 이동하면 자바스크립트 강의 자료가 나오네요
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
setCount 안에 count++ 이렇게는 작성하지 못하는 이유
count 값을 변경하기 위해서는 직접 count값을 변경하지 못하는 이유와,setCount에 아규먼츠로 count++ 이렇게 넘겨주었을때 에러나는 이유가 궁금합니다.
-
미해결[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
NestJS 의존성 주입 문제
[Nest] 16188 - 2024. 03. 17. 오후 12:19:06 ERROR [ExceptionHandler] Nest can't resolve dependencies of the UsersService (?). Please make sure that the argument "UserRepository" at index [0] is available in the AuthModule context. Potential solutions: - Is AuthModule a valid NestJS module? - If "UserRepository" is a provider, is it part of the current AuthModule? - If "UserRepository" is exported from a separate @Module, is that module imported within AuthModule? @Module({ imports: [ /* the Module containing "UserRepository" */ ] }) Error: Nest can't resolve dependencies of the UsersService (?). Please make sure that the argument "UserRepository" at index [0] is available in the AuthModule context. Potential solutions: - Is AuthModule a valid NestJS module? - If "UserRepository" is a provider, is it part of the current AuthModule? - If "UserRepository" is exported from a separate @Module, is that module imported within AuthModule? @Module({ imports: [ /* the Module containing "UserRepository" */ ] }) at Injector.lookupComponentInParentModules (D:\BackEnd\class\section11\11-02-login-authentication\node_modules\@nestjs\core\injector\injector.js:254:19) at Injector.resolveComponentInstance (D:\BackEnd\class\section11\11-02-login-authentication\node_modules\@nestjs\core\injector\injector.js:207:33) at resolveParam (D:\BackEnd\class\section11\11-02-login-authentication\node_modules\@nestjs\core\injector\injector.js:128:38) at async Promise.all (index 0) at Injector.resolveConstructorParams (D:\BackEnd\class\section11\11-02-login-authentication\node_modules\@nestjs\core\injector\injector.js:143:27) at Injector.loadInstance (D:\BackEnd\class\section11\11-02-login-authentication\node_modules\@nestjs\core\injector\injector.js:70:13) at Injector.loadProvider (D:\BackEnd\class\section11\11-02-login-authentication\node_modules\@nestjs\core\injector\injector.js:97:9) at D:\BackEnyarn start:dev 실행 시, 위와 같은 오류가 발생하여, users.module.ts 파일의 exports 부분을 아래와 같이 수정하였습니다.exports: [ TypeOrmModule, // 원래는 TypeOrmModule이 아닌 => UsersService(강의 기준) ],이렇게 수정하니, 문제는 해결되었는데, 이렇게 수정해도 괜찮은지, 이유가 무엇인지 잘 모르겠어 여쭤봅니다.
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
input태그에 readOnly 속성이 적용되어 있는데 onChange가 되는 이유가 무엇인가요?
8.5에서 업데이트 기능 구현 전, 오류를 없애기 위해서 readonly 속성을 적용시켰었는데, readonly를 지우지 않고도 onChange가 동작해서 여쭤봅니다.onchange가 값이 변경될 때 실행되는 걸로 알고 있는데, readonly인데 값이 변경될 수 있나요? 8.6) Update 입니다.