묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결자바스크립트 중고급: 엔진 핵심
__proto__ 에 대해 질문드립니다
안녕하세요 ! 강의 듣다가 질문드립니다 prototype이 상속을 위해 설정된 것이라는 건 알겠는데요 __proto__ 에 대해, 그리고 그안에 설정되는 내용에 대해 잘 이해가 안됩니다 ㅠㅠ어떤 객체로부터 상속받는지에 대한 참조..느낌일까요? 설명해주시면 감사드리겠습니다..!!
-
해결됨Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
modal 컨포넌츠 등록 문의
앞서 App.vue에선,import TodoHeader from './components/TodoHeader.vue'하여components: { 'TodoHeader': TodoHeader, },이렇게 컴포넌츠를 등록했습니다. 그런데 왜 모달은 TodoInput.vue 파일에서components: { popModal: popModal, },이렇게 작은따옴표('') or 큰따옴표("")를 사용하지 않고 등록하는건가요? (정상작동은 합니다~!)
-
미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
이미지 부분에 cctv 영상을 넣고 싶은데요.
이미지 부분에 cctv 영상을 구현하고 싶은데, 혹시 .... api를 연동해서 어떻게 연결하면 되는지 알 수 있을까요?
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
postgres DB 연결 이슈
계속 postgres 디비 연결하는데 문제가 발생해서요. 해결 방법 알수 있을까요? 다른 비슷한 질문들 보고 port도 변경해 봤는데 [Nest] 4160 - 2023. 12. 12. 오전 10:14:32 ERROR [ExceptionHandler] Entity metadata for UsersModel#postComments was not found. Check if you specified a correct entity object and if it's connected in the connection options. TypeORMError: Entity metadata for UsersModel#postComments was not found. Check if you specified a correct entity object and if it's connected in the connection options. 계속 이렇게 에러가 나서요. 현재 port ‘5433:5432’ 로 연결하고 있습니다.자세한 방법 부탁드립니다.
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
toggleComplete(todoItem, index)에러
이 부분에서 index에 에러 메세지가 나옵니다.'index' is defined but never used 내용의 메세지가 나오는데, removeTodo(todoItem, index)에는 안나오는데 toggleComplete에만 나와요. <i class="checkBtn fa-solid fa-square-check" v-bind:class="{checkBtnCompleted: todoItem.completed}" v-on:click="toggleComplete(todoItem, index)"></i>toggleComplete: function(todoItem, index){ todoItem.completed = !todoItem.completed; }찾아보다가devServer: { overlay: false }이걸 추가하라는 글을 보고 추가했는데, 변화가 없길래 서버를 다시 실행 해봤습니다.그런데 오히려 저거 때문에 다른 오류가 발생하여 서버실행이 안됩니다.지우니까 다시 실행은 되는데.. 어떻게 해결해야 하나요? +) 처음 구현때 안되어서 주석처리하고 그대로 진행하다, 리팩토링때 다시 해봤는데, 리팩토링 코드로는 할일완료 기능이 정상 작동합니다. 무슨 차이가 있을까요?
-
미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
노션 링크가 어디있나요 ?
노션 링크가 어디있나요 ? 찾기가 어렵네요..
-
미해결따라하며 배우는 타입스크립트 A-Z
tsc -w 명령어 실행 오류
강의 영상을 실습하고 직접 실행해 보려고 tsc -w명령어를 입력했는데 다음과 같은 에러가 발생합니다. error TS18003: No inputs were found in config file '/Users/jihyeon/Documents/study/ts_practice/02.types/tsconfig.json'. Specified 'include' paths were '["./src/**/*.ts"]' and 'exclude' paths were '["./build/js"]'. 현재 제가 작성한 tsconfig.json 파일은 다음과 같습니다.{ "compilerOptions": { "rootDir": "./src", "outDir": "./build/js", "target": "ES2015", "noEmitOnError": true, "module": "ESNext", "moduleResolution": "Node", "esModuleInterop": true, "lib": ["ESNext", "DOM"], "strict": true, "strictNullChecks": true }, "include": [ "./src/**/*.ts" ] } 그리고 현제 디렉토리 구조는 다음과 같습니다. main.ts를 따로 지정해서 컴파일 하는 것은 정상적으로 동작하는거 보면 main.ts에는 문제가 없어 보이는데 왜 계속 이런 에러가 발생하는 걸까요? ㅠㅠㅠㅠㅠ
-
해결됨시나브로 자바스크립트
filter test 마지막 문제 결과값이 이상합니다.
04. Array 메소드 - (2 of 7) Filter====================================filter의 마지막 테스트 중 원하는 결과값이 나오지 않습니다.강사님의 코드와 동일하게 작성하면const tweetsPostedAfter10pm = posts.filter((post) => { const frenchTimestamp = new Date(post.meta.created_at).toLocaleString('fr-FR'); return new Date(frenchTimestamp).getHours() >= 22; }); //결과 // - Expected "5" // + Received "1"이렇게 나옵니다.저는 한국에 있으니 지역이 문제인 것 같아서 한국으로 설정하고 돌리면 const tweetsPostedAfter10pm = posts.filter((post) => { const koreanTimestamp = new Date(post.meta.created_at).toLocaleString('ko-KR'); return new Date(koreanTimestamp).getHours() >= 22; }); //결과 // - Expected "5" // + Received "0"위처럼 나옵니다.. 콘솔로 데이터를 찍어보니 const tweetsPostedAfter10pm = posts.filter((post) => { const frenchTimestamp = new Date(post.meta.created_at).toLocaleString('fr-FR'); console.log(new Date(frenchTimestamp).getHours()); return new Date(frenchTimestamp).getHours() >= 22; }); //console 1 1 6 NaN NaN NaN 8 7 19 18 NaN NaN ...참고로 ko-KR은 모두 NaN으로 나옵니다.동일한 코드인데 왜 저는 이렇게 나오는 걸까요?? 오타라도 있는걸까요..? + 다른 코드로 해봤는데 9개가 나옵니다; const tweetsPostedAfter10pm = posts.filter((post) => { const date = new Date(post.meta.created_at); // UTC 시간을 한국 시간으로 변환 const koreanTime = new Intl.DateTimeFormat('ko-KR', { timeZone: 'Asia/Seoul', hour: '2-digit', hour12: false }).format(date); // '시' 부분만 추출 const koreanHour = koreanTime.split('시')[0]; const toNumber = koreanHour * 1; console.log(toNumber) return koreanHour >= 22;; }); //결과 // - Expected "5" // + Received "9" ++ 영상을 끝까지 보고나니까 오류가 있는게 맞는 것 같네요!? 저처럼 혼자 삽질하고 있을 학생들을 위해 남겨두겠습니다!
-
해결됨Vue 3 시작하기
맥 환경에서 Cmder 대체 툴
Cmder은 윈도우 환경을 위한 툴로 알고 있는데 맥 환경에서는 어떤 툴을 사용하는게 좋을까요? 추천하실만한 툴이 있으실까요? 감사합니다.
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
expo 시작 오류
expo를 global로 설치하고 init까지 한 후npm start를 했을 때 일단 아래처럼 에러가 발생합니다.Unable to find expo in this project - have you run yarn / npm install yet?-> 이건 npm install을 해서 해결 했습니다. 그런데 그 후에도 또 아래와 같은 에러가 발생합니다.PS D:\Programming\study\Inflearn\FullStack\project\grab-market-mobile> npm start> grab-market-mobile@1.0.0 start> expo startStarting project at D:\Programming\study\Inflearn\FullStack\project\grab-market-mobileStarting Metro BundlerFetchError: request to https://api.expo.dev/v2/sdks/49.0.0/native-modules failed, reason: self signed certificate in certificate chainFetchError: request to https://api.expo.dev/v2/sdks/49.0.0/native-modules failed, reason: self signed certificate in certificate chain at ClientRequest.<anonymous> (D:\Programming\study\Inflearn\FullStack\project\grab-market-mobile\node_modules\node-fetch\lib\index.js:1501:11) at ClientRequest.emit (node:events:513:28) at TLSSocket.socketErrorListener (node:_http_client:494:9) at TLSSocket.emit (node:events:513:28) at emitErrorNT (node:internal/streams/destroy:157:8) at emitErrorCloseNT (node:internal/streams/destroy:122:3) at processTicksAndRejections (node:internal/process/task_queues:83:21)이건 어떻게 해결해야 하나요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
코드샌드박스 바닐라 자바스크립트 템플릿 없음
안녕하세요. 4강 듣고있는데 코드샌드박스에서create a sandbox 해서 들어가도템플릿 목록에 vanila codesandbox가 없네요. react, html+css, react typescript, vanila typescript 이렇게 4가지만 보입니다. ㅠㅠ
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
react 개발하는데 nodejs가 사용되는 이유가 궁금해요!
react 할때마다 관성적으로 nodejs를 쓰다보니 갑자기 의문이 생겼어요. 왜 nodejs를 써서 개발해야하는지.react 개발 시 필요한 도구들을 설치하기 위해 npm을 사용하는 것이 좋다는 것은 인지하고 있습니다근데 왜 nodejs까지 쓰는지는 잘 모르겠습니다!
-
미해결SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
spoqa han sans neo
spoqa han sans neo글씨체 다운받았는데 피그마 할 때 text밑에 fonts에서 no matching font로 나오네요.아예 검색자체가 안되는데 무슨 문제인가요??
-
미해결Vue.js 시작하기 - Age of Vue.js
Vue 파일 실행 오류 관련
아래같이 했는데 vue cli 실행결과가 이렇게 나오면 어떻게 해야하는지 궁금합니다
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
width must be speified for horizontal carousels 오류
안녕하세요.react-native-reanimated-carousel 사용 시,carousel의 prop으로 width를 정의했는데도,제목 처럼 "width must be speified for horizontal carousels" 오류가 발생합니다.어떻게 해결할 수 있을까요?? 강의 클론코딩 했는데, 위 오류에 앞서 "PanGestureHandler must be used as a descendant of GestureHandlerRootView" 오류가 발생했었는데, 인터넷 검색 결과로 <SafeAreaView> 바깥에 <GestureHandlerRootView> 선언하여 해결했는데, 이 영향도 일까요?? 코드 첨부합니다.import { StatusBar } from "expo-status-bar"; import { API_URL } from "./config/constant"; import avatarImg from "./assets/icons/avatar.png"; import React from "react"; import { StyleSheet, Text, View, Image, ScrollView, Dimensions, TouchableOpacity, Alert, SafeAreaView, } from "react-native"; import Carousel from "react-native-reanimated-carousel"; import { GestureHandlerRootView } from "react-native-gesture-handler"; import axios from "axios"; import dayjs from "dayjs"; import relativeTime from "dayjs/plugin/relativeTime"; import "dayjs/locale/ko"; dayjs.extend(relativeTime); dayjs.locale("ko"); export default function App() { const [products, setProducts] = React.useState([]); const [banners, setBanners] = React.useState([]); React.useEffect(() => { axios .get(`${API_URL}/products`) .then(function (result) { const products = result.data.products; setProducts(products); }) .catch(function (error) {}); axios .get(`${API_URL}/banners`) .then(function (result) { const banners = result.data.banners; setBanners(banners); }) .catch(function (error) {}); }, []); return ( <GestureHandlerRootView> <SafeAreaView style={styles.safeAreaView}> <View style={styles.container}> <ScrollView> <Carousel> data={banners} width={Dimensions.get("window").width} height={200} autoPlay={true} sliderWidth={Dimensions.get("window").width} itemWidth={Dimensions.get("window").width} itemHeight={200} renderItem= {(obj) => { retrun( <TouchableOpacity onPress={() => { Alert.alert("배너 클릭"); }} > <Image style={styles.bannerImage} source={{ uri: `${API_URL}/${obj.item.img_url}` }} /> </TouchableOpacity> ); }} </Carousel> <Text style={styles.headline}>판매되는 상품들</Text> <View style={styles.productList}> {products.map((product, index) => { return ( <View key={index} style={styles.productCard}> {product.status === "02" && ( <View style={styles.productBlur} /> )} <View> <Image style={styles.productImg} source={{ uri: `${API_URL}/${product.img_url}`, }} resizeMode={"contain"} /> </View> <View style={styles.productContents}> <Text style={styles.productName}>{product.name}</Text> <Text style={styles.productPrice}>{product.price}원</Text> <View style={styles.productFooter}> <View style={styles.productSeller}> <Image style={styles.productAvatar} source={avatarImg} /> <Text style={styles.productSellerName}> {product.seller} </Text> </View> <Text style={styles.productDate}> {dayjs(product.created_at).fromNow()} </Text> </View> </View> </View> ); })} </View> </ScrollView> </View> </SafeAreaView> </GestureHandlerRootView> ); } const styles = StyleSheet.create({ headline: { fontSize: 24, fontWeight: "800", marginTop: 10, marginBottom: 10, }, container: { flex: 1, backgroundColor: "#fff", paddingTop: 32, margin: 10, }, productCard: { width: "100%", borderColor: "rgb(230,230,230)", borderWidth: 1, borderRadius: 16, backgroundColor: "white", marginBottom: 10, }, productBlur: { position: "absolute", top: 0, bottom: 0, right: 0, left: 0, backgroundColor: "#ffffffaa", zIndex: 999, }, productImg: { width: "100%", height: 210, }, productContents: { padding: 8, }, productSeller: { flexDirection: "row", }, productAvatar: { width: 24, height: 24, }, productFooter: { flexDirection: "row", justifyContent: "space-between", alignItems: "center", marginTop: 12, }, productName: { fontSize: 14, }, productPrice: { fontSize: 16, fontWeight: "600", marginTop: 8, }, productSellerName: { fontSize: 14, }, productDate: { fontSize: 14, }, productList: { alignItems: "center", }, bannerImage: { width: "100%", height: 200, }, safeAreaView: { flex: 1, backgroundColor: "#fff", }, });
-
해결됨[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
다중 로그인을 막고 싶다면 추가로 어떻게 구현하는 것이 좋을까요?
안녕하세요!현재 구현된 로직 상에서는 연속으로 여러번 로그인 리퀘스트를 보내더라도 모든 accessToken으로 인증을 통과하는게 가능하던데다중 로그인을 막고 싶은 경우 어떠한 점을 고려하면 좋을 지 강사님께서 추천하시는 방법이 있을까요?
-
해결됨처음 만난 리액트(React)
Contex와 redux같은 전역 상태관리 라이브러리
Contex가 하위 컴포넌트들에서 해당 변수에 바로 접근이 가능하게 만들어주는 것은 이해가 되었습니다.하지만 한 가지 의문점이 있습니다.저의 짧은 지식으로는 redux같은 전역 상태 관리 라이브러리를 이용하면 모든 컴포넌트가 접근할 수 있는 store라는 공간이 생기는 것으로 알고 있습니다. 그래서 redux를 사용한다면 contex는 굳이 사용할 필요가 없는 것으로 생각됩니다. redux같은 전역 상태 관리 라이브러리를 이용할 때에도 context를 사용하는 경우가 있는지 궁금합니다. 그리고 이전 질문에서 엄밀히 말하면 context가 상태 관리는 아니라고 하셨는데 상태 관리와 context의 차이점을 잘 모르겠습니다.. 간략하게나마 차이점을 설명들을 수 있을까요?
-
해결됨처음 만난 리액트(React)
useRef가 잘 이해되지 않습니다.
useRef() Hook의 다음 코드에서 질문이 있습니다.useRef는 DOM에 접근하기 위해 사용하는 Hook으로 이해하면 될까요?예시 코드에서 <input type="text" ref={inputElem} />inputElem을 해당 input태그에 접근하기 위해 useRef를 사용하는 것이 맞나요?useRef() Hook이 데이터 변경을 감지하지 못해서 HTML 코드에 있는 ref의 변경을 감지할 수 있는 useCallback() Hook을 대신 사용하는게 맞나요?그럼 useCallback을 useRef를 대체하여 사용가능한 건가요?
-
미해결
js 겜블링 게임 클릭횟수, 재시작 질문
html css js 사용하여서 겜블링 게임 만드는 중입니다.click 버튼 눌렀을 때 밑에 횟수가 뜨는게 아니라 버튼 안에서click1, click2 .. 이런 식으로 증가시키고 싶은데 숫자가 자꾸 밑으로 내려갑니다 ㅠㅠ그리고 오류가 있는지 restart 버튼은 눌리지 않습니다..
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
vue3 강의 영상보고 여기 왔습니다. Volar로 설치하고 진행중인데요
안녕하세요저는 일단 vue3 기초영상보고 왔습니다그리고 여기 강의 실습하는 상황에 막히는 부분이 있어서 질문 드립니다.설치는 vue3 볼라로 하고 있고요뭔가 웹팩 설치도 막혔지만.. 그냥 넘겼습니다. 우선 11장까지는 잘 따라가고 있는데 12장부터 문제네요todo앱을 vuex로 바꾸는 부분부터 뭔가 잘 안되는거 같아요...volar와 vuter에 대해 vuex랑vuex헬퍼 설치나 사용법 차이가 있나요?vue3에 volar로도 vuex나 헬퍼 사용 가능하죠?