안녕하세요. 수강생 입니다. 좋은 강의 잘 수강하면서 열심히 공부하고 있습니다.노션 페이지 내용 관련으로 문의드립니다.[입문] 시작은 프리캠프 - 섹션 3 CSS의 기본과 싸이월드 실습 1CSS 사용방법 3가지 예시 이미지 중 해당 내용들에 대한 이미지가 이상해문의 남깁니다. 감사합니다. 

[입문] 시작은 프리캠프 - 섹션 2 HTML과 기술스택 이해하기 노션 페이지 내용 중 종속태그 예시 부분의 이미지에 태그 내용은 없고 글자만 표기되어 있습니다. 이 부분이 오류인지 확인 부탁드립니다. 

문의드립니다.

주기적으로 업데이트한다고 강의 소개에 크게 적어놓으셨는데, 왜 2023년 초 이후로 업데이트가 없나요?그리고 새로운 버전 강의가 나왔던데, 이전 버전 수강자들에게는 무료로 제공되나요?이 강의가 저렴한 것도 아니고 몇십만 원이나 하는데, 그 정도 보상은 해주셔야 한다고 생각합니다.

기존에 프론트엔드 강의 수강생들에 대한 혜택은 없는건가요?? 거기는 이제 업데이트 안되는건가요?? 아 너무한데.....

const weatherSearch = function (position) { console.log(position); fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${position.latitude}&lon=${position.longitude}&appid=9756434244216c3d2f9c08591b54bede`) } // 위치 정보를 처리하는 함수 const acessToGeo = function (position) { const positionObj = { latitude: position.coords.latitude, // 위도 longitube: position.coords.longitude // 경도 (오타: longitube → longitude) }; console.log(positionObj); // 위치 정보 출력 console.log(position); // 전체 위치 데이터 출력 weatherSearch(positionObj) }; 2.5로 수정햇는데 오류가 뜨네요 어떠한 오류인 지 모르겠습니다 밑 코드는 // DOM 요소 선택 const todoInput = document.querySelector("#todo-input"); // 할 일 입력 필드 const todoList = document.querySelector("#todo-list"); // 할 일 목록 // localStorage에서 저장된 데이터를 불러오기 const savedTodoList = JSON.parse( localStorage.getItem("saved-items") ); /* 문자열로 저장된 데이터를 JSON.parse를 통해 배열로 변환 */ // 새로운 할 일을 생성하는 함수 const createTodo = function (storageData) { let todoContents = todoInput.value; // 입력 필드에서 가져온 값 if (storageData) { todoContents = storageData.contents; // 저장된 데이터가 있으면 그 내용을 사용 } // 할 일을 나타내는 DOM 요소 생성 const newLi = document.createElement("li"); // li 요소 생성 const newSpan = document.createElement("span"); // span 요소 생성 (할 일 내용 표시) const newBtn = document.createElement("button"); // 완료 버튼 생성 // 완료 버튼 클릭 시 해당 할 일을 완료 상태로 변경 newBtn.addEventListener("click", () => { newLi.classList.toggle("complete"); // 완료된 상태를 토글 saveItemsFn(); // 변경 내용을 저장 }); // 할 일을 더블클릭하면 삭제 newLi.addEventListener("dblclick", () => { newLi.remove(); // li 요소 제거 saveItemsFn(); // 변경 내용을 저장 }); // 저장된 데이터가 완료 상태면 완료 표시 추가 if (storageData?.complete) { // 옵셔널 체이닝 사용 newLi.classList.add("complete"); // 완료 클래스 추가 } // 할 일 내용을 span에 추가 newSpan.textContent = todoContents; // li 요소에 버튼과 span을 자식으로 추가 newLi.appendChild(newBtn); newLi.appendChild(newSpan); // 할 일 목록에 li 추가 todoList.appendChild(newLi); // 입력 필드를 비우기 todoContents.value = ""; // 변경된 목록 저장 saveItemsFn(); }; // Enter 키를 눌렀을 때 할 일 추가 const keyCodeCheck = function () { if (window.event.keyCode === 13 && todoInput.value !== "") { createTodo(); // 입력값이 있으면 할 일을 생성 } }; // 전체 삭제 기능 const deleteAll = function () { const liList = document.querySelectorAll("li"); // 모든 li 요소 선택 for (let i = 0; i < liList.length; i++) { liList[i].remove(); // 모든 할 일 제거 } saveItemsFn(); // 변경 사항 저장 }; // localStorage에 저장하는 함수 const saveItemsFn = function () { const saveItems = []; // 저장할 데이터를 담을 배열 // 현재 목록의 할 일들을 객체로 변환하여 저장 for (let i = 0; i < todoList.children.length; i++) { const todoObj = { contents: todoList.children[i].querySelector("span").textContent, // 할 일 내용 complete: todoList.children[i].classList.contains("complete"), // 완료 상태 }; saveItems.push(todoObj); // 객체를 배열에 추가 } // 배열이 비었으면 localStorage에서 데이터 제거, 아니면 저장 saveItems.length === 0 ? localStorage.removeItem("saved-items") // 데이터가 없으면 키 삭제 : localStorage.setItem( "saved-items", JSON.stringify(saveItems) // 배열을 문자열로 변환 후 저장 ); }; // 저장된 데이터가 있으면 불러와 화면에 표시 if (savedTodoList) { for (let i = 0; i < savedTodoList.length; i++) { createTodo(savedTodoList[i]); // 저장된 데이터로 할 일을 생성 } } const weatherSearch = function (position) { console.log(position); fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${position.latitude}&lon=${position.longitude}&appid=9756434244216c3d2f9c08591b54bede`) } // 위치 정보를 처리하는 함수 const acessToGeo = function (position) { const positionObj = { latitude: position.coords.latitude, // 위도 longitube: position.coords.longitude // 경도 (오타: longitube → longitude) }; console.log(positionObj); // 위치 정보 출력 console.log(position); // 전체 위치 데이터 출력 weatherSearch(positionObj) }; // Geolocation API로 사용자 위치 요청 const askForLocation = function () { navigator.geolocation.getCurrentPosition( acessToGeo, // 위치 정보를 가져오면 실행할 콜백 (err) => { console.log(err); // 에러가 발생하면 에러 정보를 출력 } ); }; // 위치 요청 실행 askForLocation();

 next.config.mjs/** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, trailingSlash: true, generateBuildId: () => "tranme24", // 아래 주소들만 out 폴더에 만들기 exportPathMap: () => ({ "/": {page: "/"}, "/boards": {page: "/boards"}, "/404": {page: "/404"}, }) }; export default nextConfig; 위와같이 설정 경로에서 아래의 이미지와 같이 파일들이 동일한걸 확인했습니다.왜 안되는걸까요.

포트폴리오 강의를 보다가 질문이 생겼습니다.defaultValue 와 value 의 차이가 defaultValue 는 기존값이 수정되고, value 는 수정이 안된다는 것 뿐인가요? 그렇다면 value 는 값을 수정할 수 없으므로 readOnly 라는 코드를 빼도 되는것 아닌가요?그리고 아래의 코드는 삼항연산자로 되어 있는데 (props.address !=="" ) 이 거짓일때는 게시물 수정할 때를 의미하는것이 맞나요?제가 정확히 이해하고 있는지 의심이 들어서 질문 올립니다!그리고 BoardCommentWrite.presenter컴포넌트에서 value={props.writer} 라고 되어 있는데 defaultValue={props.writer} 라고 되어도 문제 없는게 맞나요? <S.Input placeholder="작성자" onChange={props.onChangeWriter} value={props.writer} /> <S.Address readOnly value={ props.address !== "" ? props.address : props.data?.fetchBoard.boardAddress?.address ?? "" } />

eslint 설치할 때 3개 중에 마지막 3번째 선택지가 없어서 수업질문 참고해서 yarn add eslint@8.0.1 설치를 하였습니다. 그다음에 npx eslint --init를 했는데 마지막에 강사님화면에서는 Would you like to install them now? · No / Yes 이렇게 되어있고 여기서 yes하면 Which package manager do you want to use? npm yarn pnpm 이런식으로 뜨는데 저는 Would you like to install them now with npm? · No / Yes 이렇게 바로 떠서 yes를 누르면 바로 설치가 됩니다.(no 눌려도 그냥 설치돼요) 근데 설치하고 나면 이런 사진과 같은 오류가 떠요 안되는 경우 방법으로 1. yarn.lock, node_modules, .eslintrc.js 파일을 지워주시고,2. 다시 한 번 위의 순서로 eslint를 설치해 주세요! 이것도 다 따라했는데 계속 똑같아요  지피티한테 물어보니까주요 경고 및 문제:package-lock.json 감지 경고프로젝트에 yarn.lock과 package-lock.json이 동시에 존재합니다. Yarn과 npm을 섞어 사용하면 의존성 문제나 충돌이 발생할 수 있으므로, 하나의 패키지 매니저만 사용하는 것이 좋습니다.해결책: package-lock.json 파일을 삭제하고 Yarn을 계속 사용하거나, 반대로 Yarn을 포기하고 npm을 사용하세요.의존성 경고 (peer dependency 불일치)예를 들어, @typescript-eslint/eslint-plugin이 eslint 버전 8.57.0 이상을 요구하지만 현재 설치된 버전은 8.0.1입니다.해결책: 경고를 무시하지 않고, 요구 사항에 맞는 최신 버전을 설치하세요 yarn add eslint@^8.57.0eslint@8.0.1 버전 경고설치된 eslint 버전 8.0.1은 더 이상 지원되지 않는 버전입니다. 최신 버전으로 업그레이드하세요.해결책yarn add eslint@latest의존성 중 사용 중단된 모듈예를 들어, glob@7.2.3과 inflight@1.0.6이 더 이상 지원되지 않습니다.이는 주로 간접 의존성에서 발생하며, 해당 모듈의 최신 버전으로 업데이트하거나, 의존성을 최신으로 맞춰야 할 수 있습니다.이런식으로 알려주는데 뭐 아무거나 못건들겠어요 잘못될 것같아서 뭐가 잘못된걸까요 ?

안녕하세요 피그마 접속 하려고 하는데 이런 팝업창이 뜨면서 안열립니다..구글검색 후 webGL 설정하는 것 까지 해보았는데 안열리네요 ㅠㅠ

yarn add --dev husky 명령어를 사용후,npx husky install 명령어를 사용했는데 husky - install command is DEPRECATED 라는 오류가 계속해서 발생합니다. .git도 생성되어 있는데 어떻게 해결해야할지 모르겠어서 질문합니다

postgres 주소는 오프라인 강의 시에만 제공하고 온라인은 제공을 하지 않는다고 이해했는데요.해당 부분으로 대체 가능한 방법과 postgres 없이 graphql만 실행하여 강의를 따라가도 지장이 없는지 궁금합니다.이후 강의에는 데이터 처리하는 부분이 포함되어있는 것 같은데요. 해당부분 확인 바랍니다!

Window 환경에서 meteor 설치하는 부분에 대해 실습 환경 구축 부분에 추가 내용이 없습니다.현재 node 18.20.0 버전을 사용하고 있습니다.window의 경우 설치 시 vscode 내부의 터미널에서 npm install -g meteor 명령 하는 것인가요? 아니면 git bash창에서 설치하는 것인가요? 자세한 설명 부탁드립니다.  

결론부터 말하면 검색할 때 페이지네이션 현재 페이지가 1로 안 바뀌어서 바꿔봤습니다.예를 들어 ‘철’이라는 검색어를 입력했더니 페이지가 2페이지까지 있음. 2페이지를 클릭해 2페이지가 보이는 상태에서 검색어를 ‘철수’로 바꾸니 게시글 수가 1페이지까지밖에 없었는데, 1페이지가 현재 activedPage가 아니게 됨(없어진 2페이지 그대로).검색한 게시글 목록 refetch는 제대로 이루어지기에 1페이지의 내용이 보이는 것은 맞지만 현재 페이지 숫자가 제대로 표시되지 않음. 또한 ‘안녕하세요’의 12페이지를 보고 있었는데 ‘안녕’으로 검색어를 바꾸니 당연히 refetch를 통해 1페이지 게시글 목록을 보여주지만, 페이지네이션은 그대로 11, 12, ..., 20임검색어가 바뀌면 페이지네이션의 activedPage와 startPage를 1로 변경해주도록 Paginations01.container에서 useEffect 실행시켜 해결 useEffect(() => { setStartPage(1); setActivedPage(1); }, [props.count]);검색어를 바꾸면 검색된 총 게시글 수도 보통 달라질 거라는 생각에 props.count를 의존성으로 써본건데 검색어를 바꿔도 우연히 검색된 총 게시글 수가 똑같을 경우 useEffect 실행 안 되니정말로 검색어가 달라질 때를 기준으로 하려고BoardList에 있는 keyword를 pagination 컴포넌트에 props로 넘겨줘서 사용// BoardList.presenter.tsx <Paginations01 refetch={props.refetch} count={props.count} keyword={props.keyword} /> // keyword 전달 // Paginations01.container.tsx useEffect(() => { setStartPage(1); setActivedPage(1); }, [props.keyword]); // Paginations01.types.ts export interface IPaginations01Props { ... keyword?: string; ... } 고쳐지긴 했는데 일단 useEffect에서 setState를 하고 있다는 점(여기선 크게 상관이 없는건지?)과페이지네이션 컴포넌트인데 keyword라는 걸 받아온다는 것 자체가 검색 컴포넌트의 영향을 받는다는 뜻 아닌가 싶어서(keyword는 검색 기능이 있을 때만 존재하니까) 제대로 된 컴포넌트 분리에 대한 고민(keyword?로 하면 페이지네이션 컴포넌트 쓸 때 keyword 써도 되고 안 써도 되니까 이대로 해도 괜찮을지...?)다른 방법은 있는지?의견 있으시면 알려주시면 감사하겠습니다. 그외 궁금한 점저는 이거 하는 과정에서 yarn dev 해놓은 상태에서 코드들을 저장 계속 하면서 고쳤는데 그럼 원래 바로바로 반영이 되잖아요. 코드에는 문제가 없어서 제대로 작동해야 했는데 페이지네이션 컴포넌트에서 props.keyword가 자꾸 undefined인 바람에 useEffect도 작동 안해서코드가 문젠줄 알고 한참 삽질 후 그냥 vscode와 크롬 등등 다 끄고 좀 나중에 그대로 다시 켜보니까 잘 작동하게 됐는데 (yarn dev를 끊었다 다시 하는 거로는 아마 해결 안됐음)이게 처음이 아니고 저번에도 한 번 포기하고 결국 다음날 켜보니까 코드는 그대로인데 갑자기 잘 되었는데정확히 무엇때문에 이런 문제가 생기는건지 모르겠네요!!! (캐시? .next? 뭐 그런 거 때문인가요?)

const messageContainer = document.querySelector("#d-day-message"); const container = document.querySelector("#d-day-container"); container.style.display = 'none' messageContainer.innerHTML = "<h3>D-Day를 입력해 주세요</h3>"; const dateForMaker = function () { const inputYear = document.querySelector("#target-year-input").value; const inputMonth = document.querySelector("#target-month-input").value; const inputDate = document.querySelector("#target-date-input").value; //const dateFormat = inputYear + "-" + inputMonth + "-" + inputDate; const dateFormat = `${inputYear}-${inputMonth}-${inputDate}`; return dateFormat; // console.log(inputYear, inputDate, inputMonth); }; const counterMaker = function () { const targetDateInput = dateForMaker(); // console.log(targetDateInput); const nowDate = new Date(); const targetDate = new Date(targetDateInput).setHours(0, 0, 0, 0); const remaining = (targetDate - nowDate) / 1000; // 만약 remaining이 0이라면 , 타이머가 종료 되었습니다 출력 (수도코드) console.log(remaining); if (remaining === 0 || remaining < 0) { // console.log("타이머가 종료되었습니다"); messageContainer.innerHTML = "<h3>타이머가 종료되었습니다</h3>"; } else if (isNaN(remaining)) { // 만약 잘못된 날짜가 들어왔다면, 유효한 시간대가 아닙니다 출력 // console.log("유효한 시간대가 아닙니다"); messageContainer.innerHTML = "<h3>유효한 시간대가 아닙니다</h3>"; } // const remainingDate = Math.floor(remaining / 3600 / 24); //Math. floor 소숫점 제거 // const remaingHours = Math.floor(remaining / 3600) % 24; // const remaingMin = Math.floor(remaining / 60) % 60; // const remaingSec = Math.floor(remaining) % 60; const remaingObj = { remainingDate: Math.floor(remaining / 3600 / 24), remaingHours: Math.floor(remaining / 3600) % 24, remaingMin: Math.floor(remaining / 60) % 60, remaingSec: Math.floor(remaining) % 60, }; // const days = document.getElementById("days"); // const hours = document.getElementById("hours"); // const min = document.getElementById("min"); // const sec = document.getElementById("sec"); // const documentObj = { // days: document.getElementById("days"), // hours: document.getElementById("hours"), // min: document.getElementById("min"), // sec: document.getElementById("sec"), // }; const documentArr = ['days', 'hours', 'min' , 'sec'] // const docKeys = Object.keys(documentObj); const timeKeys = Object.keys(remaingObj); // Object.keys : 객체의 키를 가져와 배열로 반환f let i = 0; for (let tag of documentArr) { // 배열로 이용한다 document.getElementById(tag).textContent = remaingObj[timeKeys[i]] i++ } const starter = function () { container.style.display ='flex' messageContainer.style.display = 'none' counterMaker() } // for (let i = 0; i < timeKeys.length; i = i + 1) { for문 // documentObj[docKeys[i]].textContent = remaingObj[timeKeys[i]]; // // console.log(timeKeys); // // console.log(timeKeys[i]); // } // let i = 0; // for (let key in documentObj) { // 객체로 이용한다 for in // documentObj[key].textContent = remaingObj[timeKeys [i]] // i++; // } // documentObj['days'].textContent = remaingObj["remainingDate"]; // documentObj['hours'].textContent = remaingObj["remaingHours"]; // documentObj['min'].textContent = remaingObj["remaingMin"]; // documentObj['sec'].textContent = remaingObj["remaingSec"]; // console.log("클릭"); // console.log(remainingDate, remaingHours, remaingMin, remaingSec); };<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="./main.css" /> <!-- <script src="./script.js" defer></script> --> <title>Document</title> </head> <body> <h1>D-Day</h1> <div id="d-day-container"> <div class="d-day-child-container"> <span id="days">0</span> <span>일</span> </div> <div class="d-day-child-container"> <span id="hours">0</span> <span>시간</span> </div> <div class="d-day-child-container"> <span id="min">0</span> <span>분</span> </div> <div class="d-day-child-container"> <span id="sec">0</span> <span>초</span> </div> </div> <div id="d-day-message"></div> <div id="target-selector"> <input type="text" id="target-year-input" class="target-input" / size="5"> <input type="text" id="target-month-input" class="target-input" / size="5"> <input type="text" id="target-date-input" class="target-input" / size="5"> </div> <button onclick="starter()" id="start-btn">카운트 다운 시작</button> <script src="./script.js"></script> </body> </html>아무리 호출하고 수정해도 계속 오류가 납니다 이유 좀 알려주세요 ㅠ

const weatherSearch = function (position) { fetch( `https://api.openweathermap.org/data/2.5/weather?lat=${position.latitude}&lon=${position.longitude}&exclude={part}&appid=b53e0e301571ed81576201a2a4fee23b` ); }; const accessToGeo = function (position) { const positionObj = { latitude: position.coords.latitude, longitude: position.coords.longitude, }; weatherSearch(positionObj); console.log(position.latitude); }; const askForLocation = function () { navigator.geolocation.getCurrentPosition(accessToGeo, (err) => { console.log(err); }); }; askForLocation();위 코드 13번째 줄에서console.log(position.latitude);를 하면저는 undefined가 출력되고,console.log(position.coords.latitude);를 해야위도 값이 나오는데...강사님께서는 console.log(position.latitude); 라고 코드를 작성하셨는데,위도 값이 잘 나오더라고요.. 이게 왜 그런지 별건 아니지만 궁금해서 질문남깁니다!

sass css가 오류나서 sass대신 tailwind css 사용해도 수업 따라가는데 지장 없을까요?

선생님 안녕하세요.. Node.js 프로젝트 생성 및 초기설정 따라하고 있는데 문제가 발생하여 글 남깁니다..  영상 속 코드를 모두 따라친 후 알타이어에 reload Docs를 했는데 Introspection request failed with: 400이러한 에러와 함께 docs가 불러와지지않았습니다.  그래서 수업 노트에 올려주신 코드를 그대로 복붙해 다시 실행해보았는데도 여전히 동작하지 않습니다..  버전이 많이 바뀌면서 강의속 코드가 동작하지 않는것인지.. 구글링도 해보고 여러 방법을 시도해보았는데도 해결되지 않아 혹시 해결 방법을 알 수 있을까 하여 문의남깁니다 ㅠㅠ

안녕하세요~ 포트폴리오 과제하다가 질문 생겨 남겨요 첫번째는 댓글 내용 수정할 때 댓글 내용을 지우다가 다 지워지면 수정 전 원래 댓글 내용으로 도로 바뀌는 문젠데요댓글부분 리팩토링 끝마치고나서 발견해서 처음엔 뭘 잘못했나? 했는데 계속 보니 그냥 value에서 defaultValue를 대체하여 작성해주던 아래 부분 때문인 것 같더라고요value={ props.inputs.contents !== "" ? props.inputs.contents : props.el?.contents ?? "" }수정을 시작할 땐 props.inputs.contents === ""이니까 댓글 내용인 props.el?.contents를 불러와서 띄워주고, 지우는 중엔 state가 빈 문자열이 아니니까 props.inputs.contents대로 표시되다가 댓글 내용을 전부 지우면 props.inputs.contents가 다시 빈 문자열이 되어서 바로 기존 댓글 내용을 띄워버려요아예 댓글 내용을 지우고 싶어도 지울수가 없게 되어버리는데 어떻게 바꾸면 될까요? 좀 생각해봤는데 감이 안와서요 혹시 나중에 고치는 내용이 나오나요  두번째는 이번 포트폴리오 과제의 댓글부분 리팩토링 진행하다가 궁금했던 건데요// BoardCommentWrite.container.tsx // ... const onClickWrite = async (): Promise<void> => { // ... // setWriter(""); // setPassword(""); // setContents(""); setInputs( (prev) => Object.fromEntries( Object.keys(prev).map((key) => [key, ""]), ) as typeof prev, ); // ... }댓글 작성 끝날때 writer, password, contents를 비워줄 수 있도록 빈 문자열로 초기화시켜주던 걸 이런식으로 바꾸었는데 리팩토링 마치고 나서 잘 돌아가긴 했는데요위 부분을 너무 어거지로 바꾼 것 같아서 좀 그래요...사실setInputs({ writer: "", password: "", contents: "" })그냥 이렇게 하는게 여기선 가장 좋은 방법인 것 같긴 한데, 더 많은 state들을 묶는 경우도 있다고 생각하면 것도 좀... 그래서요이번 댓글 부분 코드에서는 setInputs({ writer: "", password: "", contents: "" }) 이렇게 하는게 가장 적당할까요? 그리고 더 많은 걸 초기화해야한다고 치면 어떻게 하는게 좋을까요?

50개의 데이터를 넣는 과정에서 발생한 오류입니다. 임시 데이터라 발생한 오류라 나중에 데이터를 넣으면 해결된다는 답변을 보았는데 그 뒤에 수업을 따라가면서 맞게 코드작성을 하고 있는지 체크가 불가능한 상태여서 임시적으로라도 해결하는 방법이 있을까요?