묻고 답해요
169만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
에뮬레이터에 화면 흰색만나오는 문제
import { API_URL } from "./config/constants.js"; import avatarImg from "./assets/icons/avatar.png"; import React from "react"; import { StyleSheet, Text, View, Image, ScrollView, Dimensions, TouchableOpacity, Alert, } from "react-native"; import { GestureHandlerRootView } from "react-native-gesture-handler"; import Carousel from "react-native-reanimated-carousel"; 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((result) => { const products = result.data.products; setProducts(products); }) .catch((error) => { console.log("error :", error); }); axios .get(`${API_URL}/banners`) .then((result) => { const banners = result.data.banners; setBanners(banners); }) .catch((error) => { console.log("error :", error); }); }, []); return ( <GestureHandlerRootView> <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) => { return ( <TouchableOpacity onPress={() => { Alert.alert("배너 클릭"); }} > <Image style={styles.bannerImage} source={{ uri: `${API_URL}/${obj.item.imageUrl}` }} resizeMode="contain" /> </TouchableOpacity> ); }} /> <Text style={styles.headline}>판매되는 상품들!</Text> <View style={styles.productList}> {products.map((product, index) => { return ( <View key={index} style={styles.productCard}> {product.soldout === 1 && <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> </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, }, }); 어떤 오류메세지도 뜨지않고,에뮬레이터에 화면이 출력되지않는 문제가 발생합니다.Carousel을 적용하기전에는 화면 잘 출력되었는데,Carousel을 적용하니 화면이 출력되지않네요..Error: PanGestureHandler must be used as a descendant of GestureHandlerRootView. Otherwise the gestures will not be recognized. See https://docs.swmansion.com/react-native-gesture-handler/docs/installation for more details.이러한 오류가 발생해서GestureHandlerRootView 태그로 최상단에 묶어주니 저 오류는 사라졌는데,애뮬레이터의 화면이 출력되지 않는 문제가 발생합니다.서버는 잘 연결되어있는걸 확인햇습니다..뭐가문제일까요
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Counter 컴포넌트가 2번씩 호출되는 이유
안녕하세요, Counter 컴포넌트 호출 회수를 디버깅 하기 위해 console.log("counter 호출!"); 구문을 아래와 같이 추가해주었는데, 강사님과는 다르게 저는 처음 렌더링 될 때와 count의 상태 값이 변화할 때 마다 counter 호출이 두 번씩 일어납니다. 이유가 무엇일까요..? 아무리 생각해봐도 이유를 모르겠습니다. 위 브라우저 콘솔 사진은 최초 렌더링 되고나서 개발자도구를 켰을 때 모습입니다. 처음부터 두 번이 호출되어 있고, 그 이후에도 count의 상태를 변화시킬 때 마다 두 번씩 로그에 찍힙니다.
-
해결됨[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
transaction interceptor을 사용할때 validation이 안되는 문제
transaction interceptor을 사용할때 body field validation이 안되는 문제가 발생하여 query runner와 transaction interceptor 두코들 제외 하니 validationdl 다시 되었습니다.혹시 어떤문제인지 알수 있을까요?
-
해결됨[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
자바스크립트 특성상 무시해도 되는 경고일까요?
9장 노드버드 만들기의 두 번째 강의 - 데이터베이스 세팅하기에서 경고가 떠서 질문드립니다.models/user.js 입니다.유니티와 c#으로 게임 개발 하다가 비동기 서버를 공부 하려고 제로초님 강의를 듣고 있는데요, 이번에 자바스크립트를 처음 접했습니다. 보통 다른 언어에서는 함수의 매개변수에 자료형을 명시해주는데, 자바스크립트에서는 변수명만 선언하는 거 같더라구요.그래서 db에 User라는 변수가 있는지 알 수 없어서 경고가 뜨는 거 같은데, 무시해도 되는 경고일까요?아무래도 저런 경고가 뜨면 찝찝해서요 ㅠㅠ그리고 필드 검색이 안 되니 자동 완성도 안 돼서 불편한 점도 있네요. index.js에서 User를 비롯한 model들을 직접 선언해주고 초기화 할 때는 저 경고가 안 떴는데, model들을 자동화하도록 코드 수정하시는 부분 따라한 이후에 위 경고가 뜨게 됐습니다.IDE는 Webstorm이고, npm start는 정상적으로 작동합니다.자바스크립트는 참 신기한 언어군요..
-
미해결만들면서 배우는 리액트 : 기초
https://cataas.com/undefined 로 나오는데 왜그런건가요?
https://cataas.com/undefined 로 나오는데 왜그런건가요?28강 수강하고 있는데 fetch를 사용하려고 하는데 이미지가 안나와요 ㅠㅠㅠ
-
해결됨React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)
프롬프트 명령어 - 입력값과 동일한 언어로 받으려면 어떻게 작성할까요?
좋은 내용 감사합니다.프롬프트 내용중에 "Translate Into Korean~" 이라는 내용으로 답변을 한글로 받게 됩니다.혹시 [events] 밑에 오는 사용자 입력값과 동일한 언어로 결과를 받고 싶다면 어떻게 작성하면 될까요?강의 내용을 기준으로 다국어 서비스를 만들려고 하는데, 영어가 짧아서 질문 드려요
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
find() 에서 password를 숨길때 사용하는 어노테이션 옵션 차이
안녕하세요.아래 두가지 어노테이션 차이가 궁금합니다.@Column({select: false}) password@Exclude() password차이가 뭔가요?둘중 어느것을 써도 find() 에서 password 를 숨겨지는거같은데 용도 차이가 궁금합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
git hub 업로드가 안되서 여쭤봐요
저같은경우 윈도우를 사용하고 있는데 두가지경우가 나오질 않아서 깃허브에 확인해보니 이렇게 프리캠프는 생성이 되었는데 들어가보니 강의에서 본것처럼 파일이 업로드 되있질 않았어요..어떻게 해야할까요?
-
미해결실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
vitest를 설치했는데 이 작업 영역에서 아직 발견된 테스트가 없습니다.라는 문구가 떠서 테스트를 진행할 수 없습니다..
안녕하세요.2.1 단위 테스트란 무엇일까? 강의를 들으며 따라하고 있습니다.강의에서 진행하고 있는 unit-test-example 브랜치에서 TextField.spec.jsx 파일을 따라 치며 테스트를 하려고 하는데 vscode 테스트 메뉴에서 '이 작업 영역에서 아직 발견된 테스트가 없습니다.'라는 문구와 '추가 테스트 확장 설치'라는 버튼만 떠서 테스트 진행을 하지 못하고 있습니다.강의에서 소개해주신 vitest를 설치하고 vscode를 껐다가 다시 켜봐도 테스트를 찾을 수 없다고 뜨고 있는데 제가 어떻게 하면 될까요?
-
미해결자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
코드 리뷰 부탁드립니다 :)
안녕하세요 선생님 😀강의 잘 보고 있습니다.저는 count 변수를 두고 값을 저장하고 i값을 변경하여 사용하였는데 이렇게 작성해도 되는지 궁금하여 질문을 올리게 되었습니다. 또 아래와 같이 for문 안에 있는 i 값을 변경해도 괜찮은지도 궁금합니다! function solution(k: number, arr: number[]): number { let sum: number = 0; let count: number = 0; let max: number = 0; for (let i = 0; i < arr.length; i++) { if (count < k) { sum += arr[i]; count++; } else { if (max < sum) { max = sum; } i = i - count; count = 0; sum = 0; } } return max; }감사합니다
-
미해결비전공자의 전공자 따라잡기 - 자료구조(with JavaScript)
최소힙의 결과값과 최대힙->최소힙 결과값이 다른게 맞나요?
최소 힙 insert#reheapUp(index) { // index 0은 root if (index > 0) { // 부모 노드가 root가 아니면 계속 비교 const parentIndex = Math.floor((index - 1) / 2); if (this.arr[index] < this.arr[parentIndex]) { // 값 바꾸기 const temp = this.arr[index]; this.arr[index] = this.arr[parentIndex]; this.arr[parentIndex] = temp; this.#reheapUp(parentIndex); } } } // O (log n) insert(value) { this.arr.push(value); this.#reheapUp(this.arr.length - 1); }const heap = new MinHeap(); // insert는 큰 값부터 넣고, root가 8이 되는지 확인 heap.insert(78); heap.insert(56); heap.insert(45); heap.insert(32); heap.insert(23); heap.insert(19); heap.insert(8); // [8, 32, 19, 78, 45, 56, 23] heap; 최대 힙 insert#reheapUp(index) { // index 0은 root if (index > 0) { // 부모 노드가 root가 아니면 계속 비교 const parentIndex = Math.floor((index - 1) / 2); if (this.arr[index] > this.arr[parentIndex]) { // 값 바꾸기 const temp = this.arr[index]; this.arr[index] = this.arr[parentIndex]; this.arr[parentIndex] = temp; this.#reheapUp(parentIndex); } } } // O (log n) insert(value) { this.arr.push(value); this.#reheapUp(this.arr.length - 1); }const heap = new MaxHeap(); // insert는 작은 값부터 넣고, root가 78이 되는지 확인 heap.insert(8); heap.insert(19); heap.insert(23); heap.insert(32); heap.insert(45); heap.insert(56); heap.insert(78); // [78, 32, 56, 8, 23, 19, 45] heap; 최대 힙 -> 최소 힙// 최소 힙 유지 함수 #heapifyMin(index) { // 수정, 삭제 const leftIndex = index * 2 + 1; const rightIndex = index * 2 + 2; const smallerIndex = (this.arr[leftIndex] || 0) < (this.arr[rightIndex] || 0) ? leftIndex : rightIndex; if (this.arr[index] > this.arr[smallerIndex]) { // 값 바꾸기 const temp = this.arr[index]; this.arr[index] = this.arr[smallerIndex]; this.arr[smallerIndex] = temp; // 재귀적으로 최소 힙 유지 this.#heapifyMin(smallerIndex); } } toMinHeap() { // O(1/2n) for (let i = Math.floor(this.arr.length / 2 - 1); i >= 0; i--) { this.#heapifyMin(i); } }const heap = new MaxHeap(); // insert는 작은 값부터 넣고, root가 78이 되는지 확인 heap.insert(8); heap.insert(19); heap.insert(23); heap.insert(32); heap.insert(45); heap.insert(56); heap.insert(78); // [78, 32, 56, 8, 23, 19, 45] heap.toMinHeap(); // [8, 23, 19, 32, 78, 56, 45] heap; // 최소 힙 insert 결과 값 [8, 32, 19, 78, 45, 56, 23] // 최대 힙 insert 결과 값 [78, 32, 56, 8, 23, 19, 45] // 최대 힙 -> 최소 힙 결과 값 [8, 23, 19, 32, 78, 56, 45] 최소힙 insert 결과 값과 최대 힙 -> 최소 힙 결과 값은 서로 다른데 최소 힙의 조건은 아래가 크고, 위가 작다. 라고 하셨으니 결과 값은 달라도 최소 힙의 조건이 맞으니 최대 힙 -> 최소 힙 변환 코드가 맞는걸까요?
-
해결됨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 }이걸 추가하라는 글을 보고 추가했는데, 변화가 없길래 서버를 다시 실행 해봤습니다.그런데 오히려 저거 때문에 다른 오류가 발생하여 서버실행이 안됩니다.지우니까 다시 실행은 되는데.. 어떻게 해결해야 하나요? +) 처음 구현때 안되어서 주석처리하고 그대로 진행하다, 리팩토링때 다시 해봤는데, 리팩토링 코드로는 할일완료 기능이 정상 작동합니다. 무슨 차이가 있을까요?
-
미해결SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
spoqa han sans neo
spoqa han sans neo글씨체 다운받았는데 피그마 할 때 text밑에 fonts에서 no matching font로 나오네요.아예 검색자체가 안되는데 무슨 문제인가요??
-
미해결
js 겜블링 게임 클릭횟수, 재시작 질문
html css js 사용하여서 겜블링 게임 만드는 중입니다.click 버튼 눌렀을 때 밑에 횟수가 뜨는게 아니라 버튼 안에서click1, click2 .. 이런 식으로 증가시키고 싶은데 숫자가 자꾸 밑으로 내려갑니다 ㅠㅠ그리고 오류가 있는지 restart 버튼은 눌리지 않습니다..
-
미해결자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
이해되지 않는 부분이 있어서 질문드립니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. rt-lt+1의 값이 왜 카운트 해야 하는 값이랑 일치하는 걸까요?최종적으로 카운트 해야 하는 값이 같다는건 알겠는데 왜 같은지 이해가 안됩니다ㅠㅠ
-
해결됨진짜! 자바스크립트(Javascript) - 기초부터 고급까지
코드샌드박스 화면구성이 달라졌네요.
오늘부터 공부시작하려고 환경설정을 열었다가 바로 막혔습니다.바닐라 자바스크립트 템플릿이 안보여요 ㅠㅠ 해결부탁드립니다.
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
fontawesome의 icon이 제대로 작동하지 않습니다.
위의 화면캡처와 같이 알려주신대로 코딩하였으나 아래 화면캡처와 같이 브라우저에서 정상적으로 표시되지 않습니다.
-
미해결자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
챕터3의 5.문자열 압축
5.문자열 압축에서 s=s+' ' ;을 사용해서 문자열을 하나더 늘려준다는것은 이해했습니다.다만 혼자 문제를 풀당시 해당 작업을 하지않아도 값이 올바르게 나오며 오류가 나지 않았는데 왜 오류가 나지않을까요?
-
해결됨[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
yarn start:dev 이후 에러
docker-compose.yaml 파일 작성하고postgres-data폴더도 생성하고app.module.ts도 똑같이 작성되어 있는 상태입니다도커가 실행되어있고, docker-compose up을 실행한 뒤에다른 터미널에서 yarn start:dev를 하면 ERROR [TypeOrmModule] Unable to connect to the database. Retrying (1)...error: "typeormstudy" �����ͺ��̽� ���� at Parser.parseErrorMessage 이런 에러 메세지가 출력되면서 정상적으로 실행되지 않습니다이전 강의에서 사용하던 프로젝트도 모두 종료가 되어있는 상태입니다제가 어딘가를 놓쳐서 나오는 에러일까요..?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
AccessToken은 잘 만들어지는데 payload에 아무것도 안담겨요
로그인 시 받은 accesstoken을 밑에 /user/test의 헤더에 넣었습니다.처음에는 payload에 값이 담겼는데 갑자기 아무것도 안담기네요ㅜㅜ변경사항이 있었던 건 다 돌려봤는데도 도저히 뭐가 문제인지 모르겠어서 남깁니다.뭐가 문제인지도 모르겠어서 코드도 뭘 보여드려야 할 지 모르겠네요ㅜㅜ accesstoekn은 잘 만들어지는데.. 저 accesstoekn으로 UseGuards(AuthGuard('access')) 이 가드를 통과하는 거 아닌가요?validate()까지 간 거 보면 인가는 됐다고 생각했는데 왜 payload에 아무것도 안담기는지 모르겠네요ㅜㅜ