묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
target.cellIndex 확인하는 방법이 있을까요?
const row = target.parentNode.row; const cell = target.cell;const row = target.parentNode.rowIndex; const cell = target.cellIndex;계속 변수명 바꾸면서 왜 안 되나 싶었는데 idex가 메서드였군요.. 혹시 위 사진처럼 cellIndex를 확인 할 수 있는 방법이 있을까요?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
display flex 및 link가 제대로 작동 안합니다...ㅠ
안녕하세요! 두 가지 질문이 있어서 글 남깁니다. display flex가 특정 id에 적용이 안됩니다 ㅠㅠapp.js에서 id=header인 부분에 css를 적용시켰는데 딱 header 부분만 적용이 안됩니다. 코드는 아래와 같습니다. app.js 코드import logo from './logo.svg'; import './App.css'; import MainPageComponent from "./main/index.js" import React, { Component } from 'react'; import {Link, Switch, Route, useHistory} from 'react-router-dom' import UploadPage from './upload/index.js'; import ProductPage from './product/index.js'; import { Button } from 'antd'; import {DownloadOutlined} from '@ant-design/icons' function App() { const history = useHistory(); return ( <div> <div id="header"> <div id="header-area"> <Link to="/"> <img src="/images/icons/logo.png" /> </Link> <Button size="large" onClick={function(){ history.push('/upload'); }} icon={<DownloadOutlined />} > 상품 업로드 </Button> </div> </div> <div id="body"> <Switch> <Route exact={true} path="/"> <MainPageComponent /> </Route> <Route exact={true} path="/products/:id"> <ProductPage /> </Route> <Route exact={true} path="/upload"> <UploadPage /> </Route> </Switch> </div> <div id="footer"></div> </div> ); } export default App; app.css* { margin: 0; padding: 0; line-height: normal; } html, body, #root, #root > div { height: 100%; }; #header { height: 64px; /*가운데 정렬하는 방법*/ display: flex; justify-content: center; border-bottom: 1px solid gray; } #header-area { width: 1024px; height: 100%; display: flex; align-items: center; justify-content: space-between; } #header-area img { width: 128px; height: 36px; } #body { height: 100vh; width: 1024px; margin: 0 auto; /*가운데 정렬하는 방법 중 하나*/ padding: 24px; } #footer { height: 200px; background-color: rgb(230,230,230); }이렇게 했을 때 아래와 같이 header만 적용이 안됩니다...(header-area는 css가 잘 적용이 되네요) Link 제대로 작동 안됨Link 태그를 통해 상품 상세페이지로 넘어가는 코드를 구현했는데 잘 안되는 부분이 있습니다 ㅠㅠ 원래라면 상품 카드를 눌렀을 때 자동으로 상품 상세페이지로 넘어가면서 해당 페이지 내용이 나타나야하는데 저는 카드를 누르면 url 주소만 바뀌고 제가 수동으로 새로고침을 해야 해당 페이지로 넘어갑니다...(그랩마켓 로고를 눌렀을 때 메인페이지로 돌아가는 것도 마찬가지입니다) 위 코드에서 잘못된 부분이 어떤거길래 이렇게 되는걸까요...? 감사합니다!
-
미해결처음 만난 리액트(React)
컴포넌트 추출 관련 질문
function Comment(props) { return ( <div className="comment"> <UserInfo user={props.author} /> <div className="comment-text"> {props.text} </div> <div className="comment-date"> {formatDate(props.date)} </div> </div> ); } props = { author: { name: "소플", avatarUrl: "https://..." }, text: "댓글입니다.", date: Date.now() } // Avatar 컴포넌트 추출 function Avatar(props) { return ( <img className="avatar" src={props.user.avatarUrl} alt={props.user.name} /> ); } // UserInfo 추출 function UserInfo(props) { return ( <div className="user-info"> <Avatar user={props.user}/> <div className="user-info-name"> {props.user.name} </div> </div> ); }안녕하세요. 위의 코드는 Component 합성과 추출 수업 때 썼던 코드입니다. 컴포넌트 추출할 때 author 대신 user를 쓴다고 나와있는데 props 객체에서는 author만 있는데도 컴포넌트 추출할 때 user로 바꿔쓸 수 있는 이유가 궁금합니다.
-
미해결자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
정답인것 같은데 어떤가요?
function solution([n, m], arr) { let answer = Number.MIN_SAFE_INTEGER; function DFS(L, sumScore, sumTime) { if (sumTime > m) return; if (L === n) { answer = Math.max(answer, sumScore); } else { DFS(L + 1, sumScore + arr[L][0], sumTime + arr[L][1]); DFS(L + 1, sumScore, sumTime); } } DFS(0, 0, 0); return answer; } console.log( solution( [5, 20], [ [10, 5], [25, 12], [15, 8], [6, 3], [7, 4], ] ) ); 강사님이 시키는대로 종이에 그려 가보고 그다음 다시 직접 문제를 풀어보는 연습을 하니까 같은 유형의 문제를 이제 직접 풀 수 있게 되었어요.
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
리랜더링 highLight 질문..
10.3) React.memo와 컴포넌트 렌더링 최적화위 강의를 보다보니, 뭔가 이상해서 질문드립니다...여기서 Header컴포넌트에 memo함수로 감싸서최적화된 컴포넌트를 만드셨다고 했는데, 영상으로만 보면item 컴포넌트 변경시에 리랜더링이 안되야 하는 Header 컴폰넌트에 highLight가 들어가는데요..(4:46 경..)아무리 봐도 하이라이트가 들어가는데, 말씀으로는 하이라이트가 더이상 들어가지 않는다고 하는데, 제가 뭘 잘못 이해한걸까요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강의 자료 이름을 바꿔 다운받아도 안받아집니다
압축 파일을 받아서 보면 폴더가 비어있습니다.자료 이름을 바꿔서 받아도 똑같은데 해결 방법이 있을까요?
-
미해결Do it! Node.js 프로그래밍 입문
delete 부분에서 13:28 질문있습니다
13:28 delete 부분에서 강의를 보면 const contact = await Contact.findById(id);를 통해서 정보를 contact 변수에 할당하고막상 deleteOne함수는 Contact에서 합니다 contact에서 deleteOne을 사용하면 안되나요?Contact에서와 contact에서 deleteOne을 사용했을 때의 차이가 궁금하고 Contact에서 delete를 할 것이면 왜 굳이 새로운 변수에 할당을 해주는 것인지 궁금합니다
-
미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
강의를 잘 활용하는 법 추천 부탁드립니다.
부트캠프로 java 백엔드를 공부하고있는 취준생입니다.웹사이트 전반을 개발하는 과정을 경험하고싶어 해당 강의를 수강하고있습니다.해당 강의를 수강하고 추가적인 활용방법을 추천해주시면 감사하겠습니다. 현재는 강의를 클론 코딩하며 개발 과정을 학습중입니다.이후 node.js로 되어있는 서버를 spring으로 대체하며 부트캠프에서 배운 개념을 해당 프로젝트에 녹여내는 식으로 뜯어고쳐보며 학습하려합니다. 추가적으로 해당 강의에서 만든 프로젝트를 가지고 이런식으로 학습해봐라하는 조언을 듣고싶습니다.
-
미해결[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
스코프 질문
안녕하세요. 스코프 부분을 좀 더 공부하다가 헷갈려서 질문드립니다. 강의에서 예시로 들어주신 for(var i=0; i<winBalls.length;i++){ console.log("for문 돌아가는 중",i); setTimeout(()=>{ console.log(winBalls[i],i); drawBall(winBalls[i],$result) },(i+1)*1000); }이 코드에서는 for문이 먼저 돌아가서 i의 값이 6이 된 이후 setTimeout이 각각 1초, 2초, 3초, 4초, 5초 후 실행되기 때문에 이미 for문이 돌아가고 i값이 6이되어 console.log(winBalls[i],i); 의 결과로 출력되는 값이 강의와 같이 전부 undefined와 6이 되는 것으로 이해했습니다. 제가 아직 뒷강의를 듣지 못했지만 이번 강의 내용을 듣고 스코프 부분을 더 찾아보면서 함수는 렉시컬스코프가 적용된다는 것을 알게되었습니다. 그래서 아래 코드를 테스트 해보았는데요.var arr=[]; for(var i=0; i<5; i++){ arr[i] = function(){ console.log("function 내부", i); return i; } } for(var func of arr){ console.log(func()); }결과로function 내부 55가 다섯번 출력되었습니다. 저는 for문이 돌아가는 과정이1) i=0일 때,for 문 내부에서 전역변수인 i=0이고, arr[0]=function() {..}으로 함수의 표현식이 나오는데, 렉시컬 스코프에 의해 함수 내부에서는 현재 전역변수 i에 할당되어있는 값인 0을 참조.2) i=1일 때,for 문 내부에서 전역변수인 i=1이고, arr[1]=function() {..}으로 함수의 표현식이 나오는데, 렉시컬 스코프에 의해 함수 내부에서는 현재 전역변수 i에 할당되어있는 값인 1을 참조. 이후, 각각 i=2,3,4일 때도 마찬가지일거라고 생각했습니다. 그런데, 생각과 다르게 출력되어서 제가 렉시컬 스코프와 블록스코프를 잘못 이해하고 있는 것인지 궁금합니다. 감사합니다!
-
미해결Do it! Node.js 프로그래밍 입문
에러 도와주세요
6:26 기준 똑같이 따라했는데 TypeError: Cannot use 'in' operator to search for 'pluralization' in undefined at Mongoose._model (/Users/leooh/Desktop/doit-node-main/myContacts/node_modules/mongoose/lib/mongoose.js:612:43) at Mongoose.model (/Users/leooh/Desktop/doit-node-main/myContacts/node_modules/mongoose/lib/mongoose.js:581:27) at Object.<anonymous> (/Users/leooh/Desktop/doit-node-main/myContacts/models/contactModel.js:20:26) at Module._compile (node:internal/modules/cjs/loader:1376:14) at Module._extensions..js (node:internal/modules/cjs/loader:1435:10) at Module.load (node:internal/modules/cjs/loader:1207:32) at Module._load (node:internal/modules/cjs/loader:1023:12) at Module.require (node:internal/modules/cjs/loader:1235:19) at require (node:internal/modules/helpers:176:18) at Object.<anonymous> (/Users/leooh/Desktop/doit-node-main/myContacts/controllers/contactController.js:2:17) 오류가 나옵니다 무엇이 문제일까요??
-
미해결처음 배우는 리액트 네이티브
expo 사용하지 않고 앱 실행 시, 데이터 불러오기
useEffect(() => { const getData = async () => { try { const loadedData = await AsyncStorage.getItem('tasks'); setTasks(JSON.parse(loadedData || '{}')); } catch (e) {} }; getData(); // getData 함수 호출 }, []);
-
미해결Do it! Node.js 프로그래밍 입문
status 작성 이유가 궁금합니다
controller1을 참고하라고 하셔서 혼자 코드를 작성한 후 코드를 봤는데 원래는 없는 status함수가 추가 되어 있습니다 서칭을 해본결과 status(200)은 request가 완료된 것을 알리는 상태 코드라고 하는데 그 목적으로 사용한 것인가요? status 함수 없이 작성해도 상관없던데 추가하신 이유가 궁금합니다!
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
toLowerCase is not a function 오류
코드를 동일하게 작성했는데 왼쪽과 같은 오류가 발생했습니다. toLoewrCase를 작성하기 전까지는 모두 정상 동작하였습니다.인터넷을 찾아보니 해당 함수가 붙는 변수를 문자열로 변환하면 된다 라는 글이 있기에 console.log, typeof를 통해 todo.content와 search가 문자열이 아닌가?? 하고 보려고 했지만 console.log구문을 어디에 넣어도 오류가 발생하여 확인을 할 수 없었습니다.이 오류에 대한 이유를 알 수 있을까요??
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Date Picker로 날짜를 찍으면, 이전 날짜가 나옵니다..
그래서 콘솔에 찍어봤는데, 날짜를 넣으면 애초에 전날 날짜로 입력이 되는 것 같아요.어떻게 해야할까요?ㅜㅜ
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
vscode postgresql extension이 실행되지 않습니다.
강사님께서 설명해주신대로 입력해서 vscode extension 설치 후에 진행하려고 하는데 role "postgres" does not exist 라는 오류와 함께 extentsion 진행이 되지 않습니다. 혹시 무엇이 문제인지 알 수 있을까요?
-
미해결자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
코드 리뷰 부탁드립니다.
영상 안 보고 풀어봤는데 while문 하나로만 풀었습니다. 부탁드려요// N일 동안 매출기록을 주고 연속된 K일 동안의 최대 매출액이 얼마인지 구하라. function solution(n = 0, k = 0, arr = []) { let answer = 0; let left = 0; let right = 0; let sum = 0; while (right < n) { // 0~k-1 까지 right로만 움직임. if (right < k) { sum += arr[right++]; answer = sum; } else if (right >= k) { sum -= arr[left++]; sum += arr[right++]; if (sum > answer) answer = sum; } } return answer; } console.log(solution(10, 3, [12, 15, 11, 20, 25, 10, 20, 19, 13, 15])); // 56 // 11 20 25 => 56
-
미해결[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
중복 검사 (메소드 활용)
for문으로 구현하고나서 문득 메소드로 중복검사를 구현할 수 있을 거 같은 느낌이 들었습니다.전체 숫자에서 하나의 값을 저장하고 모든 숫자를 한번씩 검색 하면은 find(map()) 또는 map(find()) 방법으로 구현 할 수 있을까요?아님 find 하나만으로도 구현 할 수 있을까요?
-
해결됨웹 프론트엔드를 위한 자바스크립트 첫걸음
강사님 코드를 똑같이 따라했는데 에러코드로 떠요.
🚨질문 작성법 및 안내사항질문 작성법-'섹션6. 디지털 시계 개발하기 수업' 질문입니다.약 7분 8초 쯤 수업을 따라하고 있는데 setNowDate(month, date, week[day]); }; const setNowDate = (month, date, day) => { dateElement.textContent = `$ {month} 월${date}일 ${day}`; 가자꾸 Uncaught TypeError: Cannot set properties of null (setting 'textContent')오류가 뜨며 아무것도 보여주지 않아 강의 진행에 어려움을 겪고 있습니다. 어떻게 해결을 해야될까요?
-
미해결처음 만난 리액트(React)
챕터 6 Notification 만들기 실습 질문입니다.
Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot교수님 코드르 따라가면서 공부하고 있습니다.Lifecycle method의 호출 확인을 위해 console 창에 들어갔는데 제일 위에 저 경고가 떠있는데 왜 그런건가요??
-
해결됨[JS] Phaser 게임 제작 - 뱀파이어 서바이벌 클론
catnip 이펙트 범위가 이상하네요
디버깅으로 확인했는데, catnip의 써클 범위가 캐릭터가 이동할 때 마다 캐릭터 중심에서 살짝 어긋나는데, 캐릭터의 중심에 고정할 수 있을까요?import Phaser from "phaser"; import Player from "../characters/Player" export default class Catnip extends Phaser.Physics.Arcade.Sprite { // scene의 startingPosition 위치에 데미지 damage와 크기 scale의 Catnip을 생성합니다. constructor(scene, startingPosition, damage, scale) { super(scene, startingPosition[0], startingPosition[1], "catnip"); // 화면 및 물리엔진에 추가합니다. scene.add.existing(this); scene.physics.world.enableBody(this); // Catnip은 static 공격입니다. (플레이어 주변에만 발생하고 몹으로 이동하지 않음) scene.m_weaponStatic.add(this); // 데미지를 멤버 변수로 설정해줍니다. this.m_damage = damage; // 크기, 투명도, depth를 설정해줍니다. this.scale = scale; this.alpha = 0.5; this.setDepth(5); // catnip은 동그랗게 생겼으므로 물리적 영역을 원으로 설정해줍니다. this.setCircle(30); // 애니메이션을 재생합니다. this.play("catnip_anim"); } // 플레이어가 움직이면 Catnip도 따라 움직여야 하므로 move 메서드를 만들어주었습니다. move(vector) { this.x += vector[0] * 4; this.y += vector[1] * 4; } }