묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결mongoDB 기초부터 실무까지(feat. Node.js)
질문이 있습니다
User가 작성한 Blog를 삭제하게 되면 Blog 내부에 있는 Array도 같이 삭제되지 않나요? Blog를 deleteMany를 통해서 삭제한 이후에 추가로 updateMany를 통해서 Blog에 있는 comment를 pull해주는 이유가 궁금합니다
-
해결됨애플 웹사이트 인터랙션 클론!
messageA_opacity_out 글자가 사라지지 않는 문제
강사님 안녕하세요. 특정 타이밍 스크롤 애니메이션 적용하기 2번째 시간 transform 적용하기 전까지 들었습니다. (13분쯤 ) opacity: 1;로 글자가 점점 나타나는 부분까지는 했는데 글자가 사라지지 않아 console 로 messageA_opacity_out을 찍어봤습니다. console 창에서는 messageA_opacity_out 숫자가 제대로 줄어드는데 글자는 사라지지가 않습니다. 앞뒤로 강의를 돌려서 반복해서 다시 들었으나 문제점을 찾지 못하여 질문을 드립니다. 답변해주시면 감사합니다! https://florentine-trombone-82f.notion.site/0398c6579ce64b948fae207605e623ad 따로 파일을 올릴 수 없어 페이지에 올려둡니다
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Context 질문드립니다.
안녕하세요 선생님. 질문이 있어요. 그전까지는 이해가 되었는데 Context강의가 유독 어렵네요... 먼저 DiaryStateContext.Provider의 value로 {data, onCreate, onRemove} 이렇게 넣으면 prop이 바뀌면 재생성된다는 것이 이해가 안되요. onCreate랑 onRemove는 useCallback으로 재생성 되는 것을 막아 놓은 것 아니었나요? 헷갈리네요. 두번째로 중첩으로 하는 이유가 잘 이해가 안 됩니다. 왜 중첩으로 하면 이게 해결이 될까요? 어차피 memoizedDispatches로 useMemo를 썼으면 그냥 DiaryStateContext.Provider에 value로 넣으면 안되는 건가요. 중첩으로 하는 이유가 잘 납득이 안됩니다. DiaryStateContext.Provieder value={data, memoizedDispatches} 이렇게 하면 안되나요? 그리고 useMemo로 묶는 부분도 다시 한번 설명해주실 수 있나요? useCallback으로 막아놨는데 왜 useMemo로 다시 묶어야 할까요 그냥 onCreate, onRemove, onEdit을 묶지 말고 따로따로 DiaryStateContext.Provider의 value로 {data, onCreate, onRemove} 이렇게 보내주면 안될까요? 강의를 두번 반복했는데도 잘 이해가 안되네요..
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
중첩 Context 관련 질문있습니다.
안녕하세요 중첩 Context 관련해서 질문하나 드립니다 <DirayStateContext> 라는 컨텍스트 또한 컴포넌트 이기에 data 값이 바뀌면 하위 컴포넌트 들 또한 재렌더링이 되기에 DirayStateContext 에 상태변경 함수를 넣어주게 되면 함수또한 재생성이되서 전달이 되는것이고 그러면 최적화가 풀려버리기에 그하위에 별도의 컨텍스트를 생성해서 data 라는 상태가 변경되어도 DiaryDispatchContext에 전달한 상태변경 함수는 변동이 없어서 최적화를 유지할 수 있다 제가 이해한게 맞는걸까요? 이부분이 살짝 헷갈립니다.
-
미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
공유하기 위에 따로 어떤 곳으로 가는 링크를 달고싶은데 그건 어떻게 해야할까요?
설명이 있고, 그 아래 또 하나의 사진 그 밑에 어떤 버튼이 있고 누르면 만들어놓은 어떤 링크로 가게 하고싶어요! 그리고 desc부분의 어떤 부분만 강조해서 글자색을 바꾸고싶으면 어떻게 해야할까요?
-
미해결타입스크립트 입문 - 기초부터 실전까지
생성자에서 비동기처리
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요 캡틴판교님, 강의 잘 듣고있습니다. 실습에서 구현한 클래스를 보면 생성자에서 비동기처리를 수행하는 함수가 실행되고(fetchData())있는데요, 다음과같이 만들고 메소드를 실행했을 때 비동기처리때문인지 결과 값이 빈 배열이 나오는 것을 볼 수 있었습니다... 그래서 질문은 해당 실습코드처럼 클래스의 생성자에서 비동기처리를 하는 함수를 실행하는 방식을 많이 이용하나요? 뭔가 제 생각으로는 생성자에서 비동기로 데이터를 받아와 멤버변수에 값을 넣는 경우 멤버함수(메소드)를 외부에서 이용할 경우 위처럼 문제가 생길 것 같아서요. 실습에서 구현한 클래스를 어떻게 잘 사용할 수 있을까요? 제가 이해한 실습코드의 클래스 로직은 이렇습니다. 클래스가 만들어지고(new AddressBook()) 클래스 생성자에서 fetchData() - fetchContracts()실행 -> 비동기로 처리됨 1이 처리되어 멤버변수 contracts에 받아온 데이터가 할당되기 전 외부의 코드 실행됨(위 스샷) 1이 처리되기 전에 실행되었기 때문에 빈배열 출력 --클래스의 메소드를 사용하고 싶은 경우 생성자가 실행된 이후 메소드들을 실행할 수 있도록 async-await나 프로미스를 이용해 처리를 해줘야 할 것으로 생각되는데, 어떻게 구현할 수 있을지 감이 오지 않습니다... 도와주실 수 있으실까요?
-
미해결타입스크립트 입문 - 기초부터 실전까지
특수 문자
판교님, 02: 01에서 특수 문자 vscode extension 을 사용하신 건가요?
-
해결됨[리뉴얼] Node.js 교과서 - 기본부터 프로젝트 실습까지
교재 193p 코드 중 질문드립니다.
강사님 안녕하세요, js와 node를 같이 공부중인데요.. 교재에서 궁금한 부분이 생겨 질문드립니다. const parseCookies = (cookie = '') => cookie .split(';') .map(v=>v.split('=')) ..... 상기 코드에서 (cookie='')를 (cookie) 로 넘겨주어도 되던데, 코드에서 (cookie='')로 작성하신 이유가 궁금합니다. 감사합니다.
-
해결됨자바스크립트로 알아보는 함수형 프로그래밍 (ES5)
10:18 아무래도 클로저가 리스프? 다 보니까
10:18 아무래도 클로저가 리스프? 다 보니까 라는 말씀이 있는데요 검색해보니까 아마도 LISP 이걸 말하는 것 같아요 선생님이 설명해주셨으면 더 좋았눈뎁 ㅠ-ㅠ 이 부분 설명이 없어서 조금 아쉬워요 강의는 정말 감사히 듣고있습니다
-
미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
<html css js를 활용한 반응형 모던 웹페이지 만들기 3> 강의 영상 중 질문입니다.
<html css js를 활용한 반응형 모던 웹페이지 만들기 3> 강의 영상 중 질문입니다. const slidePreviewList = document.getElementsByClassName("slide-prev"); 로 상수를 선언하시고 그후 for문에서 for (let i = 0; i < slidePreviewList.length; i++) { let classList = slidePreviewList[i].parentElement.parentElement.nextElementSibling; let liList = classList.getElementsByTagName("li"); ...~} 여기서 slidePreviewList[i]는 어떤걸 지칭하는건가요? slidePreviewList[1]은 slide-prev라는 클래스 이름을 가지는 첫번재 요소를 가리키고 slidePreviewList[2]는 slide-prev라는 클레스 이름을 가지는 그다음 요소를 가리키는 방식인가요? 좋은강의 항상 감사합니다.
-
미해결Vue.js 시작하기 - Age of Vue.js
vue 라이프사이클 문의 드립니다
책을 참고하면서 강의를 추가로 듣고 있는데, 책에는 라이프 사이클 관련된 내용이 있는데 인터넷 강의에는 별도로 없는 것 같아서 혹시 라이프사이클에 관련된 강의가 있거나 참고할 수 있는 사이트 등 알 수 있을까요??
-
해결됨처음 만난 리액트(React)
NotificationList.jsx 챕터 6장 실습 내용 질문 - 동시에 2개씩 나옴
요약: 3개가 각각 1-1-1 로 1초 간격으로 나와야 하지만, 2-1 로 나옴. 즉 2개가 한번에 나오고 나머지 1개가 나옴, notification 개수를 5개로 늘려봤더니, 1-1-1-1-1이 나와야 하지만 2-2-1로 나옵니다. 어디가 문제일까요.. 1. NotificationList import React from "react"; import Notification from "./Notification"; const reservedNotifications = [ { message: "안녕하세요, 오늘 일정을 알려드립니다.", }, { message: "오전은 피곤합니다", }, { message: "점심식사 시간입니다.", }, { message: "30분 후 잠시 휴식하겠습니다.", }, { message: "퇴근합시다.", }, ]; var timer; class NotificationList extends React.Component { constructor(props){ super(props); this.state = { notifications: [], }; } componentDidMount() { const { notifications } = this.state; timer = setInterval( () => { if (notifications.length < reservedNotifications.length){ const index = notifications.length; notifications.push(reservedNotifications[index]); this.setState({ notifications : notifications }); } else { clearInterval(timer); } }, 5000); } render() { return ( <div> {this.state.notifications.map((notification) => { return <Notification message={notification.message}/>; })} </div> ); } } export default NotificationList; 2. Notification import React from "react"; const styles = { wrapper: { margin: 8, padding: 8, display: "flex", flexDirection: "row", border: "1px solid grey", borderRadius: 16 }, messageText: { color: "black", fontSize: 16 } }; class Notification extends React.Component { constructor(props) { super(props); this.state = {}; } render() { return ( <div style={styles.wrapper}> <span style={styles.messageText}>{this.props.message}</span> </div> ) } } export default Notification; 도와주세요!
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
모달이 부드럽게 뜨지 않습니다.
강의내용과 똑같이 작성하고 실행해 보았고 혹시나 해서 깃헙에서 코드 가져와 실행했음에도 모달이 부드럽게 사라지는 것은 되지만 부드럽게 나타나는 것은 잘 되지 않았습니다. 혹시 어떻게 해결 할 수 있을까요?
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
+ 아이콘 안보이실때2
index.html에 설정하는 Font Awesome 태그는 기존버전태그(5.x) 대신 (<link.... ) 제가 강의를 듣고 있는 시점기준(8월 2일) 현재버전태그(6.1.2) 로 사용하시면 될 듯 싶습니다. (저는 요걸로 해결했습니다.) <script defer src="https://use.fontawesome.com/releases/v6.1.2/js/all.js" integrity="sha384-11X1bEJVFeFtn94r1jlvSC7tlJkV2VJctorjswdLzqOJ6ZvYBSZQkaQVXG0R4Flt" crossorigin="anonymous"></script> <TodoInput.vue> plus icon 태그: <i class="fa-solid fa-plus addBtn"></i> 6버전 CDN에 대한 내용은 아래 공식사이트 주소 들어가서 보시면 됩니다~ https://fontawesome.com/v6/docs/web/use-with/wordpress/install-manually
-
미해결처음 만난 리액트(React)
강의보고 아무리 따라쳐도 안될것임.
/**/ import React from "react"; const styles = { wrapper: { margin : 9, padding : 9, display : "flex", flexDirection: "row", border: "1px solid grey", borderRadius : 15 }, messageText: { color: "black" ,fontSize : 15 }, }; class Notification extends React.Component{ constructor(props){ super(props); this.setState = {}; } render(){ return( <div style={styles.wrapper}> <span style={styles.messageText}>{this.props.message}</span> </div> ); } } export default Notification; /**/ import React from "react"; import Notification from "./Notification" const reservedNotifications = [ { message : "안녕하세요, 오늘 일정을 알려드립니다.", }, { message : "안녕하세요, 오늘 점심을 알려드립니다.", }, { message : "안녕하세요, 오늘 저녁을 알려드립니다.", }, ]; var timer ; class NotificationList extends React.Component{ constructor(props){ super(props) this.state = { notificationarr : [{ message : "안녕하세요 ." }] , } } componentDidMount(){ const { notificationarr } = this.state; timer = setInterval(() => { if(notificationarr && notificationarr.length < reservedNotifications.length){ const index = notificationarr.length; console.log(index); notificationarr.push(reservedNotifications[index]); this.setState({ notification: notificationarr, }); }else{ clearInterval(timer); return; } }, 1000); } render() { return( <div> { this.state.notificationarr.map((notification) => { return<Notification message={notification.message} /> })} </div> ); } } export default NotificationList
-
미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
웹페이지 로딩 시간
안녕하세요, 강의 너무 잘 듣고있습니다. 다름이 아니라 현재 만들고 있는 웹페이지를 열 때 로딩 시간이 너무 오래 걸리는데 혹시 head단의 메타데이터 작성부분에서 로딩을 오래 걸리게 하는 요소가 있는 것인지 궁금합니다. 아니라면 이유를 모르겠어요 ㅠㅠ 제가 따로 html파일을 간단하게 만들어서 브라우저로 열때는 로딩이 길지 않아서요!
-
미해결처음 만난 리액트(React)
styled-components를 적용하려면
styled-components를 적용하려면 꼭 스타일을 위한 component를 만든다음에 그걸로 감싸야하나요? 그렇게 사용하다보면 리액트 콤포넌트와 스타일 콤포넌트가 섞여서 헷갈리지 않을까요?
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
폰트가 이상해요 ㅠㅠ
before , after 의 텍스트 스타일이 다르게 나옵니다 이건 뭐가 문제일까요 ... ?
-
미해결
Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 에러가 발생했습니다.
현재 웹개발중인 초급 개발자입니다. 현재 개발이 마무리 단계에서 웹서버랑 통신?!이 안되는 듯합니다. 로컬서버에서는 오류없이 실행이 되는데 웹서버에서는 현재 실행이 안되고 있습니다. Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 라고 콘솔창에 이렇게 오류가 표시됩니다. 원인을 모르겠습니다. 어디를 수정해야하는지... 현재 apache2로 웹서버를 연동하고 있습니다.
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
안녕하세요! useParams에서 막혀서 질문 남깁니다 ㅠㅠ
우선 웹라이브러리 파트의 Link태그 적용 강의에서 후반부에 useParams 를 사용하게 되는데, 이부분부터 무언가 오류가 발생하네요.. 1. 메인화면 들어갔을때 오류화면 2. 상품클릭했을때 콘솔로그 상품을 클릭했을때 변경된 주소까지는잘 적용 되고, useParams 를 사용하기 전까지는 정상 작동 했는데, product 폴더의 index.js 에 useParams 만 넣으면 위처럼 오류가 발생합니다 이전에 소스에서는 문제가 안생겼군요 ㅠㅠ import { useParams } from "react-router-dom"; function ProductPage() { const { id } = useParams(); return <h1>상품 상세 페이지 {id} 상품</h1>; } export default ProductPage; 오타가 있나 싶어서 소스자료 복붙해도 마찮가지여서 문의로 남깁니다... react-router-dom 설치 할때 버전을 확인 못하고 그냥 설치했다가 나중에 확인해서 5.2 버전으로 다시 설치했는데, package.json 에는 5.2버전으로 정상적으로 보여지긴 하는데 오류내용이 버전이 충돌이 나서 그런건가 싶기도 하고.. 해결 방법이 있을까요? ㅠㅠ
