묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결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나 헬퍼 사용 가능하죠?
-
미해결자바스크립트 제대로 배워볼래?
module 질문있습니다.
.js로 아래와 같은 자바스크립트 파일을 작성했습니다. export function log(message) { console.log(message); } export function error(message) { console.error(message); }해당 자바스크립트 파일을 html에 삽입하기 위해 src에 넣고, type을 module로 지정했습니다. 후에 log함수를 이용하려고 아래 코드를 작성했는데,"Uncaught ReferenceError: log is not defined at 3-14.html:9:7" 이라고 에러가 납니다.<!DOCTYPE html> <html> <head> <title>Document</title> </head> <body> <script src="./scripts/3-13.Module.js" type="module"></script> <script> log("메세지 출력"); // Uncaught ReferenceError: log is not defined at 3-14.html:9:7 에러 출력 </script> </body> </html> 여기서 질문이 2가지가 있는데,위의 코드 에러를 해결하려면 어떻게 해야하나요?모듈을 삽입하는 방법으로 script 안에 type을 모듈로 정의하고 import를 통해 삽입하는 방법과, src에 자바스크립트를 사용하여 삽입하는 2가지 방법이 존재한다고 이해했습니다. 그럼 후자의 방법은 단순히 src만 입력해 해당 자바스크립트 안에 있는 모든 함수, 변수를 사용하는 방법을 말하는 걸로 이해하면 될까요? 답변주시면 감사하겠습니다.! 항상 강의 잘 듣고 있습니다. 좋은 강의 내주셔서 정말 감사합니다 . ㅎㅎ 😃
-
미해결처음 만난 리액트(React)
미니블로그 프로젝트 빌드시 오류
안녕하세요 마지막 프로젝트 진행시 오류때문에 질문남겨드립니다. 이러한 오류가 생기는데 해결방법을 잘 모르겟습니다 ㅠㅠ
-
미해결[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
쿵쿵따 추가적인 조건을 붙여서 만들었는데 어떤지 평가 부탁드립니다 ㅠㅠ
제가 추가적으로 구현한건 아래와 같습니다.끝말잇기 단어를 잘못 선택하면 탈락기존에 썼던 단어를 또 사용하면 탈락참가자가 한 명 남으면 게임이 끝남=> 참가자는 number를 배열로 만들어서 틀리면 배열의 숫자를 제거하는걸로 구현했습니다. const number = Number(prompt("몇 명이 참가하나요?")); if (number) { const $order = document.querySelector("#order"); const $word = document.querySelector("#word"); const $input = document.querySelector("input"); const $button = document.querySelector("button"); const numArray = Array(number) .fill() .map((v, i) => i + 1); let word; let newWord; const compareArray = []; let order = Number($order.textContent) - 1; const onClickButton = () => { if ( (!word || word[word.length - 1] === newWord[0]) && newWord.length === 3 ) { if (compareArray.includes(newWord) === false) { word = newWord; $word.textContent = word; compareArray.push(word); console.log(compareArray, numArray); if (numArray[order] + 1 > numArray.length) { $order.textContent = numArray[0]; order = 0; } else { $order.textContent = numArray[order + 1]; order += 1; } } else { alert("이미 있는 단어입니다. 탈락입니다."); numArray.splice(numArray.indexOf(numArray[order]), 1); $order.textContent = numArray[order]; console.log(numArray, order); } } else if (newWord.length !== 3) { alert("작성해야 할 단어는 총 3글자입니다."); } else { alert( `잘못된 단어입니다. ${numArray[order]}번 참가자는 탈락입니다.` ); numArray.splice(numArray.indexOf(numArray[order]), 1); $order.textContent = numArray[order]; console.log(numArray, order); } if (numArray.length === 1) { alert( `게임이 종료되었습니다 승리자는${numArray[0]}번 참가자입니다` ); } $input.value = ""; $input.focus(); console.log(newWord); }; const onInput = (event) => { newWord = event.target.value; }; $button.addEventListener("click", onClickButton); $input.addEventListener("input", onInput); }
-
해결됨자바스크립트 제대로 배워볼래?
clearInterval, setInterval 질문
var i = 0; var fnc = setInterval(function () { if (i == 3) { clearInterval(fnc); } console.log("3초마다 프로그램 실행 - " + i); i++; }, 3000);i가 3일 때 setInterval를 중단하기 위해 해당 코드를 작성했습니다.i가 3일 경우에는 clearInterval에 의해 setInterval이 중단됐기 때문에아래 console.log("3초마다 프로그램 실행 - " + i)도 실행되지 않아콘솔창을 실행했을 때 "3초마다 프로그램 실행 - 2"까지만 나오고 멈출거라고 생각했는데,"3초마다 프로그램 실행 - 3"이 나와 왜 그런지 질문 드립니다.
-
해결됨[코드캠프] 훈훈한 Javascript
ppt 제공
혹시 이 강의 대한 ppt자료 제공은 안하시나요 ?
-
미해결자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
풀이입니다.
<html> <head> <meta charset="UTF-8"> <title>출력결과</title> </head> <body> <script> function solution(a, b, c){ let arr = [a,b,c] let sort = arr.sort((a,b) => a-b); return sort[0] + sort[1] <= sort[2] ? "NO" : "YES" } console.log(solution(13,4, 17)); </script> </body> </html>이런식으로 풀어도 괜찮은가요?
-
미해결자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
이해되지 않는 부분이 있어서 질문드립니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. rt-lt+1의 값이 왜 카운트 해야 하는 값이랑 일치하는 걸까요?최종적으로 카운트 해야 하는 값이 같다는건 알겠는데 왜 같은지 이해가 안됩니다ㅠㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
배열
배열 안에 자료형이 여러가지 된 숫자, 문자열 , 볼린 값들을 저장이 가능합니까?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
반복문 i 질문
for(var i = 0; i < names.length; i++) { var name = names[i] console.log(name); }에서 var name = names[i] 에서 i가 0 임으로 0 값부터 시작한다고 이해 했는데 i 가 아니라 1 을 넣으니까 철수만 3번 반복 되더라구요 i를 넣음으로써 어떻게 순차적으로 진행되는건지 궁금합니다
-
미해결따라하며 배우는 타입스크립트 A-Z
paths 설정 후 import시 동명 함수를 가져올 경우
디렉토리 구조가 이렇게 되어있을때, @src/bar로 src/bar/index.ts에 있는 bar라는 함수를 가져오는 상황이라고 이해했습니다. 제가 이해한 게 맞을까요...? 그리고 이런 경우 만약 bar라는 함수가 만약 다른 디렉토리의 index 파일에 동명의 함수가 있으면, 이런 경우엔 어떻게 되나요? 만약 제가 2번에서 질문한 것이 성립이 되지 않는다면 제가 생각하기엔 "paths":{"@src/*" : ["src/*"] 라고 설정하는 부분이 src 디렉토리 안에 직접 포함되어 있는 파일만 가리키는 것 같은데요... 그렇다고 한다면, 왜 paths를 쓰는건가요? 그냥 절대경로로 써주는게 가독성이나 편의성 면에서 더 좋을 것 같은데, 라는 궁금증이 생겨 질문 남깁니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
노션 링크 어디에 있나요?
아무리 찾아봐도 링크 주소를 찾지 못해서 링크 주소 올려주시면 감사드립니다.
-
미해결Vue.js 시작하기 - Age of Vue.js
수업을 진행하는데 있어서는 vue2로 설치하면 될까요?
현재 vue3, 와 2가 어떤 차이가 있는지 몰라서 질문드립니다!