여기까지 작성하였는데 질문중에 폰트어썸관련질문보고 주신링크인 cdnjs.com에 4.7버전이 없고 다6.대 버전입니다.. 또한 https://fontawesome.bootstrapcheatsheets.com/#보내주셨던 링크에서 복사해서 썼지만 이렇게 아무것도 뜨지 않습니다ㅠㅠ

안녕하세요~데이터베이스 이해와 실습 CRUD 실습을 진행하다가 오류로 인하여 다음차시 진행이 불가하여 질문드립니다. PS C:\Users\폴더이름\Desktop\database> node db.jsError: querySrv ENOTFOUND _mongodb._tcp.cluster0.mongodb.net at QueryReqWrap.onresolve [as oncomplete] (node:internal/dns/promises:291:17) { errno: undefined, code: 'ENOTFOUND', syscall: 'querySrv', hostname: '_mongodb._tcp.cluster0.mongodb.net' 관련하여 챗GPT에 오류 내용을 검색해본 후 원인 및 해결방법에 대해 아래 내용을 얻을 수 있었는데요인터넷 연결 확인:인터넷 연결이 정상적으로 이루어지고 있는지 확인하세요. 특히, 네트워크에 제한이 있거나 프록시 서버를 사용하는 경우 문제가 발생할 수 있습니다.DNS 설정 문제:DNS 설정 문제로 인해 _mongodb._tcp.cluster0.mongodb.net 도메인이 해결되지 않을 수 있습니다. DNS 서버를 Google Public DNS(8.8.8.8, 8.8.4.4)로 변경하여 문제가 해결되는지 확인해보세요.Windows에서 DNS 설정 변경 방법:제어판 > 네트워크 및 인터넷 > 네트워크 및 공유 센터 > 어댑터 설정 변경으로 이동합니다.사용 중인 네트워크 연결을 마우스 오른쪽 버튼으로 클릭하고 속성을 선택합니다.인터넷 프로토콜 버전 4 (TCP/IPv4)를 선택한 후 속성을 클릭합니다.하단에 있는 다음 DNS 서버 주소 사용을 선택하고, 8.8.8.8과 8.8.4.4를 입력합니다.설정을 저장하고 다시 시도해보세요.MongoDB Atlas의 클러스터 주소 확인:cluster0.mongodb.net이 아니라 클러스터의 정확한 호스트명을 사용하고 있는지 확인하세요. MongoDB Atlas에서 클러스터의 연결 문자열을 다시 복사하여 확인하세요.Atlas UI에서 데이터베이스 > Connect > Connect Your Application을 선택하고, 제공된 연결 문자열을 확인하세요. 예를 들어:bash코드 복사mongodb+srv://<username>:<password>@cluster0.mongodb.net/test?retryWrites=true&w=majorityuseUnifiedTopology 옵션 사용:최신 버전의 MongoDB 드라이버를 사용하고 있는지 확인하고, useUnifiedTopology 옵션이 활성화되어 있는지 확인하세요.javascript코드 복사const client = new MongoClient(uri, { useNewUrlParser: true, useUnifiedTopology: true });방화벽 또는 네트워크 제한:회사 네트워크나 특정 ISP에서 DNS 쿼리 또는 MongoDB Atlas에 대한 연결을 제한할 수 있습니다. 이런 경우, 다른 네트워크(예: 휴대폰 핫스팟)에서 시도해보거나, 네트워크 관리자에게 문의하세요.SRV 레코드 대신 표준 연결 문자열 사용:SRV 레코드(mongodb+srv://) 대신 표준 MongoDB 연결 문자열(mongodb://)을 시도해보세요. SRV 레코드를 지원하지 않는 네트워크 환경에서 표준 연결이 문제를 해결할 수 있습니다.현재 회사에서 지급한 노트북으로 진행하여 보안상 문제가 있어 작업이 불가한건지.. 위 내용을 읽어봐도 명확하지 않아 질문드립니다.

Security 부분에 SSL 설정하는 부분이 안보이는데 바뀐건가요? 설정한적에 없는데 설정이 되어있기는 합니다.  

강의 내용은 아니지만 따로 뭔가를 더 하고싶어서 그런데화면은 잘 나왔는데 text-align: center;로 중앙배치 했지만 세로가 위쪽에있는데 세로도 중앙배치 하려면 어떻게 해야하나요?

 // PostListItem.jsx import React from "react"; import styled from "styled-components"; const Wrapper = styled.div` width: calc(100% -32px); padding: 16px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; border: 1px solid grey; border-radius: 8px; cursor: pointer; background: white; :hover { background: lightgrey; } `; const TitleText = styled.p` font-size: 20px; font-weight: 500; `; // 글의 제목만 표시 function PostListItem(props) { const { post, onClick } = props; return ( <Wrapper onClick={onClick}> <TitleText>{post.title}</TitleText> </Wrapper> ); } export default PostListItem; // PostList.jsx import React from "react"; import styled from "styled-components"; import PostListItem from "./PostListItem"; const Wrapper = styled.div` display: flex; flex-direction: column; align-items: flex-start; justify-content: center; :not(:last-child) { margin-bottom: 16px; } `; function PostList(props) { const { posts, onClickItem } = props; return ( <Wrapper> {posts.map((post) => { return ( <PostListItem key={post.id} post={post} onClick={() => { onClickItem(post); }} /> ); })} </Wrapper> ); } export default PostList;   안녕하세요, 소플님. mini-blog 프로젝트 실습 질문합니다.박스 테두리가 강의 영상과 다르게 나오는데 style부분에서 어느 파일을 고쳐야 할지 잘 모르겠습니다.좋은 강의 무료로 해주셔서 감사합니다!

제가 슬릭 슬라이더 pc를 모바일로 바꾸려고 하는데요..제이쿼리에서 바꿀 방법 없을까요???아래 같이 추가햇는데 안먹어서 질문합니다 ㅠㅠ /* product */ $('.sales-presentation').slick({ slidesToShow: 3, slidesToScroll: 1, autoplay: true, autoplaySpeed: 2000, dotsClass : "slick-dots", //아래 나오는 페이지네이션(점) css class 지정 draggable : true, //드래그 가능 여부 responsive: [ // 반응형 웹 구현 옵션 { breakpoint: 960, //화면 사이즈 960px settings: { //위에 옵션이 디폴트 , 여기에 추가하면 그걸로 변경 slidesToShow:3 } }, { breakpoint: 768, //화면 사이즈 768px settings: { //위에 옵션이 디폴트 , 여기에 추가하면 그걸로 변경 slidesToShow:2 } } ] });

안녕하세요강의 재미있게 잘 듣고 있습니다제가 궁금한 것은 예제 삼아 다른 코드를 테스트해보고 있는데 문제는 붙임 코드를 실행하면 4열로 형성된 카드 안에 더미 텍스트와 버튼들이 있어야 하는데 border 밖에 형성되어서 아무리 옵션을 바꿔도 변화가 없습니다강사님의 명쾌한 해답을 듣고 싶어요 <div className="grid grid-cols-12 gap-6"> <div className="col-span-12 lg:col-span-6 xxxl:!col-span-3"> <div className="box border-t-[5px] border-t-danger dark:border-t-danger"> <div className="box-header"> <h5 className="font-semibold text-xl text-danger text-center">New Project <span className="font-normal text-xs text-gray-500 dark:text-white/70">(03)</span></h5> </div> <div className="box-body overflow-auto"> <div className="gap-4 grid" id="task-left"> <div ref={leftContainerRef} onMouseEnter={OnDivChange} className='firstdrag' id="new-tasks-draggable" data-view-btn="new-tasks"> <div className="box task-box"> <div className="box-body space-y-4"> <div className="flex"> <div className="flex space-x-3 rtl:space-x-reverse"> <img src={"../../assets/img/logos/4.png"} className="p-1 h-full avatar avatar-sm bg-gray-100 dark:bg-black/20 rounded-sm" alt="logo" /> <div className="my-auto hidden sm:block"> <h5 className="text-base font-semibold w-44 truncate">Zanex Laravel Project</h5> <p className="text-gray-500 dark:text-white/70 text-xs my-auto flex space-x-1 rtl:space-x-reverse"><i className="ri-calendar-line"></i><span>05-12-2022</span></p> </div> </div> <div className="ltr:ms-auto rtl:mr-auto hs-dropdown ti-dropdown [--placement:left-top]"> <Link aria-label="anchor" href="#!" scroll={false} className="hs-dropdown-toggle ti-dropdown-toggle hover:bg-transparent dark:hover:bg-transparent inline-flex !p-0 flex-shrink-0 justify-center items-center gap-2 w-full rounded-sm border-0 font-medium text-gray-500 shadow-none align-middle focus:outline-none focus:ring-0 focus:ring-offset-0 transition-all dark:text-white/70"> <i className="ri ri-more-2-line text-lg leading-none"></i> </Link> <div className="hs-dropdown-menu w-40 min-w-[10rem] mt-0 transition-none ti-dropdown-menu"> <Link className="ti-dropdown-item" href="#!" scroll={false} ><i className="ri-eye-line"></i>View</Link> <Link className="ti-dropdown-item" href="#!" scroll={false} ><i className="ri-edit-2-line"></i>Edit</Link> <Link className="task-remove ti-dropdown-item" href="#!" scroll={false} ><i className="ri-delete-bin-6-line"></i>Delete</Link> </div> </div> </div> <div> <p className="mb-2">Justo kasd duo sanctus et elitr et, sed diam clita lorem sed eirmod, clita labore tempor et sanctus et ipsum stet, eos.</p>

깃 복붙도 해봤는데 계속 저래요... ㅜㅜ

우선, 강의대로 따라했을 때 index.html 에서는 헤더와 푸터 인클루드가 잘됩니다. 따로 test.html 을 만들어서 인클루드 해봐도 잘 됩니다.  하지만 html/class-detail.html 에 인클루드를 하면 헤더와 푸터가 인클루드 되지 않습니다. custom.js 의 경로를 바꿔봐도 안되네요 ㅜㅜ인클루드가 안되는 이유를 알 수 있을까요 ?

import React, {useState, useEffect} from "react"; import useCounter from "./useCounter"; const MAX_CAPACITY = 10; //최대 카운트 function Accommodate(props){ const [isFull, setIsFull] = useState(false); const [count, increaseCount, decreaseCount] = useCounter(0); useEffect(() => { console.log("===========배열없음"); console.log("useEffect is Called"); console.log(`isFull : ${isFull}`); }); //의존성 배열 없음 useEffect(() => { setIsFull(count >= MAX_CAPACITY); console.log("===========배열있음"); console.log(`Current count value : ${count}`); }, [{count}]); //의존성 배열 있음 return ( <div style={{padding : 16}}> <p>{`총 ${count}명 수용했습니다`}</p> <button onClick={increaseCount} disabled={isFull}>입장</button> <button onClick={decreaseCount}>퇴장</button> {isFull && <p style={{color:"red"}}>정원이 가득찼습니다.</p>} </div> ); } export default Accommodate;import React, { useState } from "react"; //custom Hook //초기 카운트 값을 파라미터로 받아서 카운트라는 이름의 //state를 생성하여 값을 제공하고 증감을 편리하게 할 수 있도록 하는 함수 function useCounter(initialValue){ const [count, setCount] = useState(initialValue); const increaseCount = () => setCount((count) => count+1); const decreaseCount = () => setCount((count) => Math.max(count-1,0)); return [count, increaseCount, decreaseCount]; } export default useCounter;import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import Library from './chapter03_jsx/Library'; //컴포넌트 추가 import Clock from './chapter04_elements/Clock'; import CommentList from './chapter05_component_props/CommentList'; import NotificationList from './chapter06_state/NotificationList'; import Accommodate from './chapter07_hook/Accommodate'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( //<React.StrictMode> <Accommodate /> //</React.StrictMode> ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals(); 위와 같이 Accomodate.jsx를 작성했습니다만 정원을 다 채웠을 경우 배열 있음이 한번 더 출력되는 현상이 나왔습니다.의존성 배열이 있는 부분의 ,{count}만 넣으면 오류 워닝이 떠서 배열 취급하기 위해 []를 추가했습니다.[]를 빼고 실행했을 경우 최대 카운트가 먹히지 않아 무한정으로 들어갑니다.제가 뭔가 잘못 한 걸까요?

별도로 지정하지않은 상호작용이 필요한 모든 콘텐츠는 임시링크를 적용하고 탭키로 이동 선택할수 있어야 한다라는 기술적 준수사항에, 푸터의 패밀리사이트 항목들도 해당되나요?

해당 부분만 흰색으로 양옆에 나오는데, 왜 그런걸까요 ?

레이아웃이 선생님께서 올려주신 영상과 다르게 이렇게 나오네요 무슨 문제일까요 ? @charset "utf-8";/*레이아웃*/#wrap{width:100%;}#header{width:100%; height:325px; background: #111;}#contents{width:100%; height:800px; background: #222;}#footer{width: 100%; height: 200px; background:#333;}

  라이브서버로 열기를 해봐도 웹 브라우저가 열리지 않고 있습니다. 구글링 해서 파일명에 영어나 ., 띄어쓰기 한글 등이 들어가면 안되는 점도 숙지하고 작업했으며 설정도 다음과 같이 수정했고, 브라우저를 열어 직접 ip주소를 쳐 봐도 1번째 사진과 같이 뜨고 실행이 되질 않습니다ㅜㅜ 또 어떤 방법을 써봐야 할까요 선생님?

혹시 수험자 제공텍스트를 끊어써도 될까요?제공된 수업영상에는 줄바꿈으로만 하셨는데한 슬라이드에 제공되는 한 줄의 텍스트를 타입툴 여러개로 끊어써서 이동시켜도 되나하구요.한 단어만 회전시키거나 다른 글씨체로 해도 되는지 궁금합니다!

안녕하세요! 수강을 막 시작하여 학습파일을 다운로드 했습니다.수업에서는 강의자료 폴더명으로 '2023_인프런_포트폴리오메인' 이라는 폴더가 첨부파일로 있다고 하셨는데, 다운받아보니 '학생첨부용_수강학습파일' 폴더 밖에 없어서 문의드립니다.참고할 수 있도록 학습본 말고 완성된 전체본도 받아볼 수 있을까요?

D유형 최종본제작 - D1갤러리 이미지 3개 사용하라고 나와있는데 저렇게 많이 나열하는게 맞나요? 그리고 완성본 화면줄이면 이미지 전부 갤러리 탭보더 밖으로 나와서 배열되는데.. css제대로 된게 맞을까요   

html<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>starUp Mata : App Official Landing</title> <link rel="icon" href="images/logo_a.png"> <!-- jQuery CDN --> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <!-- Slick Slider --> <link rel="stylesheet" href="js/slick/slick-theme.css"> <link rel="stylesheet" href="js/slick/slick.css"> <script src="js/slick/slick.js"></script> <!--Custom csss & js--> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="responsive.css"> <script src="custom.js"></script> </head> <body> <div class="container"> <!-- Header --> <header> <div class="header-inner"> <div class="logo"> <a href="#none"><img src="images/logo_pc.png"></a> </div> <div class="gub"> <a href="#none">아비브소개</a> <a href="#none">제품</a> <a href="#none">이벤트</a> <a href="#none">리뷰</a> <a href="#none">문의하기</a> <!-- <a href="#none"></a> <a href="#none"></a> <a href="#none"></a> --> </div> <div class="login"> <a href="#none">로그인</a> </div> </div> </header> <!-- welcome --> <section class="welcome"> <div class="slideshow"> <img src="images/slide-welcome-01.jpg"> <img src="images/slide-welcome-02.jpg"> <img src="images/slide-welcome-03.jpg"> </div> <div class="welcome-heading"> <span>창의적인 아이디어를 만드는 가장 빠른 방법</span> <h1> An idea solution of startup for your <em>3가지 타이핑 텍스트 자리</em> </h1> <p> 스타트업 메이트 앱이 여러분의 최상의 스타트업 구축을 위해 창의적인 아이디어를 제공하는 데 최선을 다하겠습니다. </p> <div class="welcome-btns"> <a href="#none" class="btn start">CEO 시작하기</a> <a href="#none" class="btn guide">사용자 가이드</a> </div> </div> <div class="mouse"> <span class="wheele"></span> </div> </section> <!-- ceo-access --> <section class="ceo-access"></section> <!-- banner --> <section class="banner"></section> <!-- feature --> <section class="feature"></section> <!-- vision --> <section class="vision"></section> <!-- faq --> <section class="faq"></section> <!-- review --> <section class="review"></section> <!-- focus --> <section class="focus"></section> <!-- guide --> <section class="guide"></section> <!-- news --> <section class="news"></section> <!-- footer --> <footer></footer> </div> </body> </html>1000자 이상 안올라 간다해서 댓글에 남길게요

수강생 참고자료 및 완성본 다운로드 => 다운로드 해도 소스 텍스트가 없습니다. ㅜㅜ 못 찾는건지 모르겠는데...찾지못해서 일일이 치고 있어요. 소스텍스트가 어디있는지 알려주세요.

썸네일 이미지가 뜨지 않습니다!그리고 css도 안먹힙니다.더불어if (!data) { return <DiaryContainer></DiaryContainer>; } 위의 코드가 없으면 화면이 웹드라우저에 뜨지 않습니다. import { DiaryContainer, ResultTitle, Divider, CardContainer, CardTitle, CardContent, ActionListItem, } from "./CommonStyles"; import { LoadingOutlined, CheckCircleTwoTone, HeartTwoTone, SmileTwoTone, MessageTwoTone, SoundTwoTone, } from "@ant-design/icons"; import { Image } from "antd"; import styled from "styled-components"; const ThumbnailImage = styled(Image)` max-width: 100%; height: auto; border-radius: 8px; margin-bottom: 15px; display: block; `; const DiaryDisplay = ({ data, isLoading }) => { if (isLoading) { return ( <DiaryContainer> 불러오는중... <LoadingOutlined /> </DiaryContainer> ); } if (!data) { return <DiaryContainer></DiaryContainer>; } return ( <DiaryContainer> <ResultTitle>{data.title}</ResultTitle> <Divider /> <CardContainer> <CardTitle> <CheckCircleTwoTone twoToneColor="#FF9AA2" style={{ marginRight: "6px" }} /> 요약 </CardTitle> <CardContent>{data.summary}</CardContent> </CardContainer> <ThumbnailImage src={data.thumbnail} alt="Thumbnail" fallback="데이터:image/png;base64,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" /> <Divider /> <CardContainer> <CardTitle> <HeartTwoTone twoToneColor="#FFB7B2" style={{ marginRight: "6px" }} /> 감성일기장 </CardTitle> <CardContent>{data.emotional_content}</CardContent> </CardContainer> <Divider /> <CardContainer> <CardTitle> <SmileTwoTone twoToneColor="#FFDAC1" style={{ marginRight: "6px" }} /> 내가 느낀 감정 </CardTitle> <CardContent>{data.emotional_result}</CardContent> </CardContainer> <Divider /> <CardContainer> <CardTitle> <MessageTwoTone twoToneColor={"#B5EAD7"} style={{ marginRight: "6px" }} /> 심리 분석 </CardTitle> <CardContent>{data.analysis}</CardContent> </CardContainer> <Divider /> <CardContainer> <CardTitle> <SoundTwoTone twoToneColor="#C7CEEA" style={{ marginRight: "6px" }} /> GPT 조언 </CardTitle> <CardContent> {data.action_list.map((action, index) => ( <ActionListItem key={index}>{action}</ActionListItem> ))} </CardContent> </CardContainer> </DiaryContainer> ); }; export default DiaryDisplay; 코드는 이렇습니다.썸네일은 원래 본 강의의 깃허브에서 내려받은 코드로도 안돼서 고친 것입니다. 원래코드도 이미지가 안떳습니다 ㅠㅠ어떻게 문제를 해결할 수 있을까요?