본 강의에서는 resize 핸들러를 사용해서 구성이 되었는데, (function () { const houseElem = document.querySelector(".house"); window.addEventListener("scroll", function () { const maxScrollValue = document.body.offsetHeight - window.innerHeight; const zIndex = (pageYOffset / maxScrollValue) * 880 - 900; houseElem.style.transform = `translateZ(${zIndex}vw)`; }); })(); 이런식으로 scroll 이벤트 내부에 maxScrollValue를 사용하면 화면이 height이 변경되더라도 문제가 없는게 아닐까 생각이 되서요! 여러가지 방법이 있을 수 있겠지만 scroll 이벤트 안에 넣은게 아닌 resize 이벤트에 넣은 이유가 maxScrollValue이 재사용성될 가능성이 있기 때문일까요??
여기까지 작성하였는데 질문중에 폰트어썸관련질문보고 주신링크인 cdnjs.com 에 4.7버전이 없고 다6.대 버전입니다.. 또한 https://fontawesome.bootstrapcheatsheets.com/# 보내주셨던 링크에서 복사해서 썼지만 이렇게 아무것도 뜨지 않습니다ㅠㅠ
안녕하세요~ 데이터베이스 이해와 실습 CRUD 실습을 진행하다가 오류로 인하여 다음차시 진행이 불가하여 질문드립니다. PS C:\Users\폴더이름\Desktop\database> node db.js Error: 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=majority useUnifiedTopology 옵션 사용: 최신 버전의 MongoDB 드라이버를 사용하고 있는지 확인하고, useUnifiedTopology 옵션이 활성화되어 있는지 확인하세요. javascript 코드 복사 const client = new MongoClient(uri, { useNewUrlParser: true, useUnifiedTopology: true }); 방화벽 또는 네트워크 제한: 회사 네트워크나 특정 ISP에서 DNS 쿼리 또는 MongoDB Atlas에 대한 연결을 제한할 수 있습니다. 이런 경우, 다른 네트워크(예: 휴대폰 핫스팟)에서 시도해보거나, 네트워크 관리자에게 문의하세요. SRV 레코드 대신 표준 연결 문자열 사용: SRV 레코드( mongodb+srv:// ) 대신 표준 MongoDB 연결 문자열( mongodb:// )을 시도해보세요. SRV 레코드를 지원하지 않는 네트워크 환경에서 표준 연결이 문제를 해결할 수 있습니다. 현재 회사에서 지급한 노트북으로 진행하여 보안상 문제가 있어 작업이 불가한건지.. 위 내용을 읽어봐도 명확하지 않아 질문드립니다.
우선, 강의대로 따라했을 때 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}만 넣으면 오류 워닝이 떠서 배열 취급하기 위해 []를 추가했습니다. []를 빼고 실행했을 경우 최대 카운트가 먹히지 않아 무한정으로 들어갑니다. 제가 뭔가 잘못 한 걸까요?
라이브서버로 열기를 해봐도 웹 브라우저가 열리지 않고 있습니다. 구글링 해서 파일명에 영어나 ., 띄어쓰기 한글 등이 들어가면 안되는 점도 숙지하고 작업했으며 설정도 다음과 같이 수정했고, 브라우저를 열어 직접 ip주소를 쳐 봐도 1번째 사진과 같이 뜨고 실행이 되질 않습니다ㅜㅜ 또 어떤 방법을 써봐야 할까요 선생님?
안녕하세요! 수강을 막 시작하여 학습파일을 다운로드 했습니다. 수업에서는 강의자료 폴더명으로 '2023_인프런_포트폴리오메인' 이라는 폴더가 첨부파일로 있다고 하셨는데, 다운받아보니 '학생첨부용_수강학습파일' 폴더 밖에 없어서 문의드립니다. 참고할 수 있도록 학습본 말고 완성된 전체본도 받아볼 수 있을까요?
