묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
where 키워드가 들어가는 메서드와 아닌 메서드
예를들어서 count는 조건을 걸때 where : {} 이런식으로 하는데 sum은 바로 {}만 하더라구요. 이런식으로 where 키워드를 쓰는 메서드와 안쓰는 메서드가 많이 나뉘던데 어떤 기준인지 알 수 있을까요? 헷갈리네요..
-
미해결자바스크립트로 배우는 자료구조 & 알고리즘 (개념+문제풀이)
연결리스트 뒤집기
function solution(arr) { return arr.reverse(); } console.log(solution([1, 2, 3, 4, 5])) console.log(solution([3, 2, 1]))이런식으로 자바스크립트 내장함수사용해서 풀기보다는 연결리스트를 구현해서 한번씩 풀어보고 하는게 학습하는데 더 도움이되는걸까요??
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
콜백 함수의 매개변수로 _를 쓰는 이유가 무엇인가요?
// forEach let arr = [1, 2, 3, 4, 5]; // forEach 콜백 함수 arr.forEach((_, __, array) => { // 콜백 함수의 매개변수로 _, __ 사용 console.log(array) }); 콜백 함수의 매개변수로 _, __ 같이 쓰는 경우가 있던데 왜 이렇게 쓰는지 궁금합니다.
-
미해결자바스크립트로 배우는 자료구조 & 알고리즘 (개념+문제풀이)
공부방법 문의
자료구조 별로 구현하고 문제풀이 하면서 강의 진도 따라가면서 백준 문제풀이도 같이 하고 있는데 스택을 배웠으면 스택 백준 문제 다풀고 넘어가는 게 맞는지 일단 자료구조 강의 개념 다 풀고 넘어가는 게 맞는 게 맞을까요?
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
콜백 함수의 매개변수는 어떻게 구분되나요?
// forEach let arr = [1, 2, 3, 4, 5]; // forEach 콜백 함수 arr.forEach((elm, idx, array) => { // 콜백 함수의 매개변수 console.log(`${idx} 번째 요소는 ${elm} 입니다.`); console.log(array) });// map let arr = [1, 2, 3, 4, 5]; // map 콜백 함수 let newArray = arr.map((elm) => { // 콜백 함수의 매개변수 return elm * 10; }); console.log(newArray);// findIndex let colors = [ { id: 1, color: "green" }, { id: 2, color: "blue" }, { id: 3, color: "purple" } ]; // findIndex 콜백 함수 let idx = colors.findIndex((elm) => elm.color === "purple"); // 콜백 함수의 매개변수 console.log(idx); // 2 map이나 findIndex는 콜백 함수의 매개변수를 elm만 써서 구분할 수 있는데forEach는 콜백 함수의 매개변수가 elm, idx, array가 있으면 각 매개변수를 어떻게 구분하나요? 변수명처럼 할당된 이름이 있어서 해당 이름하고 비슷한 이름을 지으면 콜백 함수의 매개변수로 취급하는건가요?
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
배포후 동일한 url 다른 기기 접속
이렇게 노트북으로 배포한 상태에서 동일한 url을 제 휴대폰으로 검색해서 들어가니까 제 휴대폰으로는 데이터들이 안 보이는데 버그인가요?
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
호이스팅 안쓰는게 좋나요?
호이스팅은 웬만하면 안쓰는게 좋나요?ESLint로 호이스팅 막는 경우도 있고, 호이스팅이 안티 패턴이라는 경우도 있네요.
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
함수 선언식과 함수 표현식은 어떤 경우에 쓰면 좋나요?
// 함수 선언식 function func() { console.log('hello javascript'); } // 함수 표현식 - function 함수 const func = function() { console.log('hello javascript'); }; // 함수 표현식 - 화살표 함수 const func = () => { console.log('hello javascript'); }; 클래스 내부의 메서드는 함수 선언식이 많았던 거 같고,일반 함수는 함수 표현식이 많았던 거 같네요. 함수 선언식과 함수 표현식은 어떤 경우에 쓰면 좋나요?
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
?. 연산자는 자바스크립트 연산자인가요?
const user = { name: "김모씨", address: { city: "서울" } }; // 일반 접근 (에러 위험) console.log(user.address.city); // "서울" console.log(user.phone.number); // 에러! // Optional Chaining (안전) console.log(user.address?.city); // "서울" console.log(user.phone?.number); // undefined (에러 안남!)'7. 연산자'에 ?. 연산자는 따로 언급이 없는거 같네요. ?. 연산자는 자바스크립트 연산자인가요?아니면 타입스크립트 연산자인가요?
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
JS의 논리 연산자 &&, ||가 리액트의 조건부 렌더링 &&, ||인가요?
// && 사용 - "로그인했으면 보여줘" {isLoggedIn && <Profile />} // || 사용 - "로그인 안했으면 보여줘" {!isLoggedIn || <Profile />}리액트에서 조건부 렌더링할 때 &&, ||를 씁니다.이게 자바스크립트의 논리 연산자인 &&, ||와 같은건가요?
-
해결됨포트폴리오 어나더레벨
개발과 상관없는 이력의 경우
안녕하세요 강의 잘 듣고 이력서 작성중인 신입 개발자입니다.제목과 마찬가지로 개발과 상관없는 이력의 경우 쓰는게 좋은가요?인턴이 끝나고 몇개월정도 개발과 상관없는 서비스직을 했었는데 공백기를 설명하기 위해 적는게 좋을까요?아니면 따로 적진않고 공백기를 물어보면 그때 답하는게 좋을까요?
-
미해결만들면서 배우는 리액트: 컴포넌트 설계와 리팩토링
로컬스토리지 에러
3(index):1 Uncaught (in promise) Error: Access to storage is not allowed from this context. 이렇게 뜨는데요.또 로컬 스토리지 보면들어가긴 하거든요? 왜그럴까요
-
미해결포트폴리오 어나더레벨
데이터사이언티스트 석사 포트폴리오 관련
안녕하세요. 강의 잘 들었습니다.덕분에 포트폴리오 작성 방향을 잡는 데 많은 도움을 받았습니다.데이터 사이언티스 포트폴리오 작성과 관련해 몇 가지 질문을 드리고 싶습니다. 프로젝트 대신 논문을 작성해도 괜찮을까요?석사 과정 동안 프로젝트는 수행한 게 없고 논문만 작성하였습니다. (논문 1개 게재완료, 1개는 하위논문)이 경우에는 기존 모델 대비 정확도 개선 등 구체적인 수치 기반 성과로 작성하면 적절할까요?학부 시절 프로젝트가 워드클라우드, 기본적인 시각화 수준이라 프로젝트라고 하기에는 애매합니다. 굉장히 기초적인 데이터 분석이었는데 이런 것도 작성해야할까요?취업 준비 기간 동안 캐글/데이콘 등 대회 참여, 혹은 백준 알고리즘 티어 상승 등 .. 중 어떤 활동이 데이터 사이언스 포트폴리오에 더 효과적인지 궁금합니다. 이외에도 데이터 사이언티스트 직무 포트폴리오에서 강조해야할 부분이 있다면 말씀해주시면 감사하겠습니다!
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
라우터 사용하고부터 모든 컴포넌트에 리액트를 임포트해야 해요
react-router-dom 을 사용한 후부터랜더링되는 하단의 모든 컴포넌트에 react를 import하지 않으면 오류가 발생하거든요그런데 이전에는 분명 안 이랬어서....import를 하면 되니까 개발이 안 되는 건 아닌데강의를 계속 듣다 보니 강사님은 import하지 않으셔도 되는 거 같아서 궁금해서 물어봅니다.버전 차이 때문일까요? 제가 무슨 설정을 잘못한 걸까요? 버전은 아래와 같습니다.. "dependencies": { "react": "^19.2.0", "react-dom": "^19.2.0", "react-router-dom": "^7.10.1" },
-
해결됨[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
BearerTokenGuard에서 db를 조회해서 유저 정보를 불러오는 이유?
BearerTokenGuard에서 db를 조회해서 유저 정보를 불러오는 이유가 궁금합니다.제가 스프링으로 개발했을 때는 role을 jwt에 담고 별도의 db 조회 없이 스프링 시큐리티에서 검증을 했어서요. 유저 엔티티가 필요하다면 서비스 레이어에서 조회를 하구요.NestJs 현업에서 쓰이는 일반적인 패턴이 궁금합니다
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
그랩님의 답변을 기다립니다/102강 전반적인 에러
그랩님, 강의 잘 듣고 있습니다.102강 강의를 듣고 있는데요,react-native-reanimated-carousel 설치를 위해 노션에 링크대로 npm install react-native-reanimated-carousel@3.3.0 명령어로 vs code 터미널에서 설치하고그 이후 한번 더 expo install --npm react-native-reanimated react-native-gesture-handler 를 입력하여 vs code 터미널에서 성공적으로 설치를 완료하였습니다.질문 1.그 이후babel.config.js 파일에 가서 plugins: ["react-native-reanimated/plugin"], 추가 해주려고하는데요, 문제는 babel.config.js 파일이 어디에도 존재하지 않아서 어디에서 플러그인 문구를 입력해 주어야 하는지 모르겠습니다. 아래는 첨부 사진입니다. 어떻게 해야 위 플러그인 문구를 입력 가능할까요?참고로 grab-market-mobile의 package.json에 디펜던시를 보면 아래와 같이 확인 할 수 있습니다."react": "19.1.0", "react-native": "0.81.5", "react-native-reanimated-carousel": "^3.3.0", "react-native-reanimated": "~4.1.1", "react-native-gesture-handler": "~2.28.0"질문 2. Babel 설정을 위해 Cache 초기화 하는 부분도 위에 질문1이 순서대로 정상적으로 진행이 되지 않아스킵하고 강의를 이어갔는데요, babel.config.js에 플러그인 문구부터 저장한 뒤 바벨 설정 캐시초기화 하는 것이 옳은 건가요? 즉 순서대로 해야 하는지도 궁금합니다.질문 3. 102강 시작부터 ~ 18분 56초 까지 타이핑한 grab-market-mobile의 App.jsreact-native-reanimated-carousel 소스 내용이 아래와 같은데요, 이것을 실행하면 첨부한 사진과 같이 안드로이드 스튜디오(runtime not ready)에서 에러가 납니다. 참고로 아래 App.js 소스는 강의 전체 완성본 소스가 아니라 에러가 난 시점까지의 소스 입니다.질문3-1. -->그리고 여기에서 Carousel 부분 살펴보면요, 아래 App.js 소스에서 아래와 같이 작성하는 것 맞나요? 만약 아래 작성 소스가 다르다면, 어떻게 작성 해야하는지 답변 댓글에 소스를 적어주시면 감사하겠습니다.<Carouseldata={banners}width={Dimensions.get("window").width} height={200}autoPlay={true}renderItem={(obj)=>{ return( <TouchableOpacity> <Imagesource={{uri:obj.item.imageUrl}} /> </TouchableOpacity> ) }} /> import { StatusBar } from "expo-status-bar"; import React from "react"; import { StyleSheet, Text, View, Image, ScrollView, Dimensions, TouchableOpacity } from "react-native"; import BasketballImage from "./assets/products/basketball1.jpeg"; import Avatar from "./assets/icons/avatar.png"; import {API_URL} from "./config/constants"; import axios from "axios"; import dayjs from "dayjs"; import relativeTime from "dayjs/plugin/relativeTime"; import "dayjs/locale/ko"; import Carousel from "react-native-reanimated-carousel"; 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)=>{ setProducts(result.data.products); }).catch((error)=>{ console.error(error); }) axios.get(`${API_URL}/banners`).then((result)=>{ setBanners(result.data.banners); }).catch((error)=>{ console.error(error); }) },[]) return ( <View style={styles.container}> <ScrollView> <Carousel data={banners} width={Dimensions.get("window").width} height={200} autoPlay={true} renderItem={(obj)=>{ return( <TouchableOpacity> <Image source={{uri : obj.item.imageUrl}} /> </TouchableOpacity> ) }} /> <Text style={styles.headline}>판매되는 상품들</Text> <View style={styles.productList}> { products.map((product, index)=>{ return (<View style={styles.productCard} key={product.id}> {product.soldout === 1 && <View style={styles.productBlur}/>} <View> <Image style={styles.ProductImage} source={{uri: `${API_URL}/${product.imageUrl}`,}} 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={Avatar} /> <Text style={styles.productSellerName} >{product.seller}</Text> </View> <Text style={styles.productDate}>{dayjs(product.createdAt).fromNow()}</Text> </View> </View> </View>); }) } </View> </ScrollView> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', paddingTop: 32, }, productCard: { width: 320, borderColor: 'rgb(230,230,230)', borderWidth:1, borderRadius: 16, backgroundColor: "white", marginBottom: 8, }, ProductImage :{ width: '100%', height: 210 }, productContents : { padding: 8 }, productSeller : { flexDirection: 'row', alignItems: 'center' }, productAvatar: { width:24, height:24, }, productFooter: { flexDirection: 'row', justifyContent:'space-between', alignItems: 'center', marginTop: 12, }, productName : { fontSize: 16 }, productPrice: { fontSize: 18, fontWeight: '600', marginTop: 8 }, productSellerName: { fontSize: 16, }, productDate: { fontSize: 16, }, productList: { alignItems:"center", }, headline : { fontSize: 24, fontWeight: "800", marginBottom:24 }, productBlur : { position: 'absolute', top: 0, bottom: 0, right: 0, left: 0, backgroundColor: "#ffffffaa", zIndex: 999, }, }); 그랩님께서 진행하시는 강의처럼 에러가 뜨지 않고 제대로 결과값이 나와야 하는데, 아무리 해도 어떻게 에러를 해결해야 하는지 차근차근 알려주셨으면 좋겠습니다. 아직 그랩님의 강의 102강 처음부터 ~ 19분 안되는 정도까지 진행하다 위 에러를 만나게 되어 해결이 안되고 있어서 더 진행을 하지 못하고 있어서 질문을 남깁니다.질문 4.아래 AI 인턴 답변을 보고 vs code의 grab-market-mobile에서 babel.config.js을 프로젝트 루트에 파일을 직접 생성하고 module.exports = {presets: ['babel-preset-expo'],plugins: ['react-native-reanimated/plugin'],};위 소스입력 후 저장을 완료 한 뒤 캐시 초기화를 위해 vs code grab-market-mobile의 터미널에서 expo start -c 까지 차례대로 수행한 후 ngrok과 grab-market-server와 안드로이드 스튜디오 에뮬레이터 실행 후 마지막으로 grab-market-mobile로 연동 실행 후 결과가 위 버전 에러와 다르게 또 새로운 에러가 발생하게 되었습니다. 아래 사진 첨부합니다. 이 점은 어떻게 해결해야 하는지요? 질문 5.그리고 Vs code에서 아래 인턴님이 답변 준대로 질문 2까지 수행 하니 아래와 같은 에러가 발생하여 사진을 첨부합니다.이 에러는 어떤 것을 의미하며 해결하는 방법은 무엇인가요?질문 6. AI 인턴님이 남겨주신 <질문 3 및 질문 3-1>에서는 "package.json에서 관련 패키지를 제거하세요"라고 써있는데요, 이것은 구체적으로 무엇을 어떻게 수행하는 건가요? 예를들면 어떤 명령어를 입력해야 합니다와 같이 알려주시면 좋겠습니다. 질문 7. (확인 차원에서 재 질문 합니다.)Carousel 소스가 궁금한데요, 그랩님께서 강의에서 찍었을 당시 오픈소스인데 오래된 것이라 다른 것으로 변경하여 재 촬영 해주셨다고해서 조금 햇갈린데요,Carousel 부분 살펴보면요, 아래 App.js 소스에서 아래와 같이 작성하는 것 맞나요?만약 아래 작성 소스가 다르다면, 어떻게 작성 해야하는지 답변 댓글에 소스를 적어주시면 감사하겠습니다.<Carouseldata={banners}width={Dimensions.get("window").width} height={200}autoPlay={true}renderItem={(obj)=>{ return( <TouchableOpacity> <Imagesource={{uri:obj.item.imageUrl}} /> </TouchableOpacity> ) }} /> 질문 8. AI 인턴님이 남겨주신 답변에 관한 질문 3 및 3-1은 하라는대로 실행해보면 에러가 더 많이 발생할까봐아직 수행을 안했는데요, 아래 답변대로 명령어 3개를 입력해 줘도 괜찮은건가요?여쭈어보고 하는게 나을 것 같아서 다시한번 작성해 보았습니다.명령어 1: npm uninstall react-native-reanimated-carousel react-native-reanimated 명령어 2:npm install react-native-reanimated-carousel@3.3.0 react-native-reanimated@^2.0.0 명령어 3:expo install react-native-gesture-handler 확인하시면, 그랩님께서 꼭 답변 부탁 드립니다.
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
app.controller app.service 는 지워도되나요?
선생님 강의를 보다 궁금한게 있는데 src최상위 경로 main.ts는 nestjs를 실행시키기 위한 시작점이고async function bootstrap() { const app = await NestFactory.create(AppModule); //앱모듈로 부터 모듈들을 확장해나갔음 await app.listen(process.env.PORT ?? 3000); }//nestjs를 실행하는 함수 시작점 bootstrap(); 통해 app.module.ts에는 다른 (posts)모듈을 적어줘서 루트가되는 모듈 같은데posts폴더안에 posts모듈 관련 컨트롤러 서비스(프로바이더 할 거) 이렇게 순서대로 nest가 처리해 주는 건 알 것 같은데 -app.module.ts에서 각 모듈을 연결해주고 서비스나 기능 만들려면 모듈별로 폴더 관리해서 만드는거구나? 이렇게 이해하고있는데 그러면 app.service.ts,app.controller는 지워도되는거 아닌가 생각이 들어서요. -깃허브 레포지토리에 강의 코드 올려주신 거 봤는데 따로 초반 부분이랑 다른 코드가 추가된 건 아닌 것 같고 동일해서요따로 안지우시고 그대로 두신 이유가 있을까요?(기다리면..뒤에 알려주실것 같지만 궁금함을 못참고 여쭤봅니다)(약간 두서 없이 여쭤보는것 같아 죄송합니다.생각보다 쉽지않네요ㅎㅎ)
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Todo구현중 memo함수에 대해서
todo리스트 구현중 TodoItem.jsx에서 memo에 대해 강의를 보며 공부중입니다.이렇게 console.log로 찍었는데 체크박스를 한 개만 찍어도 3가지 모두 다 console로 찍히는데 제대로 적용된 것 맞나요? 하이라이트를 켜도 색상이 비슷해서 구분이 잘 가지않습니다. 로그는 이렇게 찍힙니다. prev next = {"id":0,"isDone":false,"content":"React 공부하기","date":1764731042079}{"id":0,"isDone":true,"content":"React 공부하기","date":1764731042079}TodoItem.jsx?t=1764729548020:40 prev next = {"id":1,"isDone":false,"content":"빨래하기","date":1764731042079}{"id":1,"isDone":false,"content":"빨래하기","date":1764731042079}TodoItem.jsx?t=1764729548020:40 prev next = {"id":2,"isDone":false,"content":"노래 연습하기","date":1764731042079}{"id":2,"isDone":false,"content":"노래 연습하기","date":1764731042079} import { memo } from 'react'; import './TodoItem.css' function TodoItem({id, isDone, content, date, onUpdate, onDelete}) { const onChangeCheckbox = () => { onUpdate(id); } const onClickDeleteButton = () => { onDelete(id) } return ( <div className="TodoItem"> <input onChange={onChangeCheckbox} readOnly checked={isDone} type="checkbox"/> <div className="content">{content}</div> <div className="date">{new Date(date).toLocaleDateString()}</div> <button onClick={onClickDeleteButton}> 삭제 </button> </div> ); } export default memo(TodoItem, (prevProps, nextProps) => { console.log("prev next = " + JSON.stringify(prevProps) + JSON.stringify(nextProps)) if(prevProps.id !== nextProps.id) return false if(prevProps.isDone !== nextProps.isDone) return false if(prevProps.content !== nextProps.content) return false if(prevProps.date !== nextProps.date) return false return true });
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
플러그인 질문
강사님이 사용하시는 코드에서 오류가 났을때 빨간문자로 보이는 도움말? 은 무슨 플러그인을 사용하시는건가요?
-
미해결만들면서 배우는 리액트 : 기초
고양이 이미지가 엑박이 뜨네요
API 스펙이 변경되었네요! 제보 감사합니다.https://github.com/milooy/cat-jjal-maker/blob/main/answers/29-useEffect.html#L48위 코드를 참고해서 fetchCat 함수를 변경해주세요. 위 답변해주신대로 소스를 변경해도 고양이 이미지가 엑박으로 뜨질 않습니다.