리액트로 작성된 textarea(controlled, uncontrolled 모두 포함) 의 경우에 개발자 도구에서 body 태그를 보면 무한깜빡거리는 현상이 있는데.. 이건 렌더링이 계속 발생하는거 아닌가요?textarea 에 포커스만 가더라도 body 에 무한깜빡현상이 발생하는데 왜 그런걸까요?이전값과 현재값을 비교하기도 해보고 useEffext를 사용하기도 해보고 했는데 해당 현상이 사라지지 않는것 같아요..

현직 개발자입니다. 생각이 많아져서 질문드립니다.SSR(타임리프, JSP), CSR(Vue3) 을 프로젝트 경험하면서.. 이런저런 생각이 드는데요.1.CSR은 SEO문제 해결이 가능한가요?2.CSR은 컴포넌트 재사용이 장점이나 화면복잡도가 높아질 경우 코드 복잡도가 높아진다고 생각되는데 어떻게 생각하시는지요?3.SSR이 화면 깜빡임이 있다고 하는데, 실은 비동기 통신하면 화면 깜빡임은 제어 가능합니다. html자체를 바꿔서 렌더링 하는게 아닌 화면 하나당 html하나로 렌더링하는거죠.(메뉴이동시에만 html이동하니 메뉴이동시 초기화면은 깜빡임은 있음)강의 내용에 있는 Tab은 한화면에 구성하면 깜빡일 일도 없고, 내부 공통 기능들은 공통JS로 빼고 틀은 같이 쓰고, 공통부분은 템플릿관련 JS로 처리하면 크게 다른부분을 모르겠습니다.화면 내에서는 전부 비동기 통신 Ajax로 처리하면 깜빡임은 없더라구요.4.CSR은 SPA기반이라 초기화면이 모바일쪽이 더 심플해서 나을거 같다라는 생각이 듭니다.대형 포털을 CSR기반으로 하면 복잡도도 높아지고, 제 경험엔 초기화면 또는 복잡한 화면들이 많이 느려지더라구요. 어떻게 생각하시는지요?SSR, CSR이 어떤 상황에 적용되는게 나을지에 대한 의문이 항상 있습니다.그냥 강의듣다가 개인적인 질문 드려봅니다.cf. 강의 내용은 아주 잘 듣고 있습니다.^^

AccordionItem에 작성하신 코드를 그대로 따라쳤다고 생각했습니다.닫힌 상태에서 문자열은 찾아지는데 자동으로 아코디언이 열리진 않습니다ㅠ추가적으로 css코드를 넣어야할까요?알려주신 링크를 들어가서 봤는데 setOpen을 useEffect 맨 위에 넣는걸 보고 새로운 상태를 넣어야하는건가 했습니다.

안녕하세요! 마지막 프로젝트 적용만 남았는데 manifest.json 파일 만들고 저렇게 작성했는데 확장 프로그램 로드를 못하는 상황입니다..!

🚨질문 작성법 및 안내사항질문 작성법- 몇 섹션의 어떠한 강의에 대한 질문인지 작성해주세요. (ex. 섹션2 조건문에 대한 질문)- 질문은 최대한 구체적으로 작성해주세요.- 비슷한 질문이 올라와있는지 확인해주세요.- 코드가 포함된 질문은 아래와 같이 코드블록을 사용해주세요.body { margin: 0 auto; width: 100%; font-family: 'Hi Melody'; background-image: url("https://source.unsplash.com/user/hanjw3288/likes"); background-repeat: no-repeat; background-attachment: fixed; background-position: center; background-size: cover; /* color: white; */ /* overflow: hidden; */ }강사님 안녕하세요!마지막 프로젝트 적용하기 전에 background-image 적용할때 unsplash가 적용이 안되는데 어떻게 해결해야 할까요..? 저 url 타고 들어가면 404페이지가 뜹니다..

🚨질문 작성법 및 안내사항질문 작성법- 몇 섹션의 어떠한 강의에 대한 질문인지 작성해주세요. (ex. 섹션2 조건문에 대한 질문)- 질문은 최대한 구체적으로 작성해주세요.- 비슷한 질문이 올라와있는지 확인해주세요.- 코드가 포함된 질문은 아래와 같이 코드블록을 사용해주세요.if (quoteItem) { //localstorage에 quote가 있다면 let { createDate, quoteData } = JSON.parse(quoteItem); if (createDate === `${month}-${date}`) { quoteElement.textContent = `"${quoteData}"`; } else { getQuote(); } } else { //localstorage에 quote가 없다면 getQuote(); }안녕하세요 강사님!api 활용해서 명언 설정하기 강의를 듣는 중에 마지막 로컬스토리지에 조건문을 하고 나서 명언이 나오고 그다음 새로고침을 하면 undefined가 출력이 되는데 어느쪽이 문제 일까요..?혹시 오타가 있나해서 강의 대본에 코드를 복붙해도 결과가 똑같아서 질문드립니다!안내사항- 질문에 대한 답변은 보통 주말, 공휴일을 제외한 평일 오전 시간에 답변해드립니다.

강사님 안녕하세요. 항상 강의 잘 보고 있습니다 🙂완강하고 다시 보다가, scrollSpy 바닐라버전에서 궁금한 점이 있어서 질문 남깁니다! 네비게이션의 버튼을 클릭 했을때, 버튼의 부모인 li의 index 값을 찾기 위해 사용했던 e.composedPath() 대신 closest('li') 메서드 를 사용하는 것은 어떤지 궁금해서요!퍼블리셔로 일하면서, 클릭한 타겟의 가까운 부모를 찾을때 자주 사용했던 메서드인데, e.composedPath()를 사용한 다른이유(강의에서 설명한 이유 외에)가 있으신지 궁금합니다! 

전체 사진 처음 화면은 로딩 되서 잘나오는데 펭귄이나 다른탭을 클릭하면 아래와 같은 오류가 나오는데 TabBar.js onclick 함수가 아니라는데;; 왜이런건지 함수가 맞는데 아래에 제가 작성한 코드 입니다 검토 좀 부탁드립니다.^^;;TabBar.jsexport default function TabBar({ $app, initialState, onClick }) { // TabBar 클래스를 생성합니다. 초기값과 클릭 이벤트를 받습니다. this.state = initialState; // 초기값 설정 this.onClick = onClick; // 클릭 이벤트 설정 this.$target = document.createElement("div"); // 새로운 div 요소를 생성합니다. this.$target.className = "tab-bar"; // div 요소에 클래스 이름을 추가합니다. $app.appendChild(this.$target); // $app 요소에 div 요소를 추가합니다. this.template = () => { let temp = `<div id="all">전체</div><div id="penguin">펭귄</div> <div id ="koala">코알라</div><div id ="panda">판다</div>`; // 전체 탭을 추가합니다. return temp; // temp를 반환합니다. }; this.render = () => { // 렌더링 함수 this.$target.innerHTML = this.template(); // div 요소의 innerHTML을 template 함수의 반환값으로 설정합니다. let $currentTab = document.getElementById(this.state); // 현재 탭을 선택합니다. // $currentTab ? ($currentTab.className = "clicked") : ""; // 현재 탭이 존재하면 clicked 클래스를 추가합니다. 없으면 변화없음. $currentTab && ($currentTab.className = "clicked"); // && 연산자를 사용하여 현재 탭이 존재하면 clicked 클래스를 추가합니다. const $tabBar = this.$target.querySelectorAll("div"); // 모든 div 요소를 tabBar 요소에 담아온다. $tabBar.forEach((elm) => { elm.addEventListener("click", () => { // 각 div 요소에 클릭 이벤트 리스너를 추가합니다. this.onClick(elm.id); // 클릭한 div 요소의 id를 onClick 함수에 전달합니다. }); }); }; this.setState = (newState) => { // state를 변경하는 함수 this.state = newState; // state를 새로 받은 newState로 업데이트합니다. this.render(); // state가 변경되면 렌더링 함수를 다시 호출하여 화면을 업데이트합니다. }; this.render(); // 렌더링 함수를 호출합니다. } App.jsimport TabBar from "./components/TabBar.js"; // TabBar.js 파일을 불러옵니다. import Content from "./components/Content.js"; // Content.js 파일을 불러옵니다. import { request } from "./components/api.js"; // api.js 파일을 불러옵니다. export default function App($app) { // App 생성자 함수를 생성합니다. // $app은 App 컴포넌트가 렌더링될 DOM 요소입니다. this.state = { //state 초기값 설정 currentTab: "all", // 탭 초기값 설정 tabbar 컴포넌트에 전달할 현재 탭 데이터 photos: [], // 사진 초기값 설정 content 컴포넌트에 전달할 사진 데이터 }; const tabbar = new TabBar({ $app, // App 컴포넌트가 렌더링될 DOM 요소를 전달합니다. initialState: "", // 초기값 설정 oncClick: async (name) => { // 클릭 이벤트 설정 변경값을 currentTab에 저장 this.setState({ // 클릭한 탭의 데이터를 state에 저장합니다. ...this.State, // 기존 state를 복사합니다. 스프레드 연산자 currentTab: name, // 클릭한 탭의 이름을 currentTab에 저장합니다. photos: await request(name === "all" ? "" : name), // 클릭한 탭의 새로운 사진을 request 이름으로 함수를 불러와 저장합니다. // request 함수는 비동기 함수로 async await를 사용하여 데이터를 받아옵니다. }); }, }); const content = new Content({ $app, // App 컴포넌트가 렌더링될 DOM 요소를 전달합니다. initialState: [], // 초기값 설정 }); this.setState = (newState) => { // 업데이트 값을 newState로 받습니다. this.state = newState; // state를 새로 받은 newState로 업데이트합니다. tabbar.setState(this.state.currentTab); // tabbar 컴포넌트에 state를 전달합니다. content.setState(this.state.photos); // content 컴포넌트에 state를 전달합니다. }; const init = async () => { //웹페이지가 로드되면 실행되는 함수 try { const initialPhotos = await request(); // request 함수를 불러와 initialPhotos에 저장합니다. this.setState({ // state를 initialPhotos로 업데이트합니다. ...this.state, // 기존 state를 복사합니다. 스프레드 연산자 photos: initialPhotos, // initialPhotos를 photos에 저장합니다. }); } catch (err) { console.log(err); } }; init(); // 웹애플리케이션이 실행될때 init 함수를 실행합니다. } index.jsimport App from "../src/App.js"; const $app = document.getElementById("app"); new App($app); api.jsconst API_URL = "https://animal-api-two.vercel.app"; // 이미지 url을 변수에 저장 // const $content = document.querySelector("div.content"); //(api 불러오는 코드만 남겨놓기 위해 삭제제) // let template = []; // (api 불러오는 코드만 남겨놓기 위해 삭제제) //API export const request = async (name) => { const res = await fetch(name ? `${API_URL}/${name}` : API_URL); // fetch 함수를 사용하여 API_URL을 호출합니다. name이 있으면 name을 호출합니다. 없으면 API_URL을 호출합니다. try { if (res) { let data = await res.json(); return data.photos; } } catch (err) { console.log(err); } }; index.html<!DOCTYPE html> <head> <title>Animal Album</title> <meta charset="UTF-8" /> <link rel="stylesheet" href="../project2/src/style.css" /> <script type="module" src="../project2/src/index.js" defer></script> </head> <body> <div id="app"> <!-- TAB BAR --> <!-- CONTENT --> </div> </body> content.jsexport default function Content({ $app, initialState }) { this.state = initialState; this.$target = document.createElement("div"); this.$target.className = "Content"; $app.appendChild(this.$target); this.template = () => { let temp = []; if (this.state) { this.state.forEach((elm) => { temp += `<img src="${elm.url}"></img>`; }); } return temp; }; this.render = () => { this.$target.innerHTML = this.template(); }; this.setState = (newState) => { this.state = newState; this.render(); }; this.render(); }  콘솔 오류코드 TabBar.js:26 Uncaught TypeError: this.onClick is not a function at HTMLDivElement.<anonymous> (TabBar.js:26:14)

Header에서 total, cost, fun 등 정렬 값이 바뀌는 건 알겠는데, 이 값이 바뀔 때 점수가 높은순으로 정렬이 되는데, 이 정렬을 지정해주는 실행 코드가 어디에 있는지 모르겠어요. <div class="filter"> <select id="sortList" class="sort-list"> <option value="total" ${sortBy === 'total' ? 'selected' : ''}>Total</option> <option value="cost" ${sortBy === 'cost' ? 'selected' : ''}>Cost</option> <option value="fun" ${sortBy === 'fun' ? 'selected' : ''}>Fun</option> <option value="safety" ${sortBy === 'safety' ? 'selected' : ''}>Safety</option> <option value="internet" ${sortBy === 'internet' ? 'selected' : ''}>Internet</option> <option value="air" ${sortBy === 'air' ? 'selected' : ''}>Air Quality</option> <option value="food" ${sortBy === 'food' ? 'selected' : ''}>Food</option> </select> </div> 

안녕하세요 코드 궁금증은 아니구요 이렇게 request로 이미지 불러오기를 했을 때 이미지를 불러오긴 하는거 같은데GET http://127.0.0.1:5500/undefined 404 (Not Found)와 같은 오류가 발생하면서 엑박이 뜨거든요... 도저히 제가 어디서 잘못했는지 발견을 못하겠어서 혹시 해결 방법을 아신다면 알려주시면 감사드리겠습니다...

const workA = () => { return new Promise((resolve) => { setTimeout(() => { resolve(`workA`); }, 5000); }); }; const workB = () => { return new Promise((resolve) => { setTimeout(() => { resolve(`workB`); }, 3000); }); }; const workC = () => { return new Promise((resolve) => { setTimeout(() => { resolve(`workC`); }, 10000); }); }; const start = async () => { try { let results = await Promise.all([workA(), workB(), workC()]); console.log(results); results.forEach((res) => console.log(res)); } catch (err) { console.log(err); } };[10:01] 강의 내용 보면 workA가 5초 workB가 3초, workC가 10초인데, 결국 출력 되는 값을 보면 동시에 출력이 됩니다.그리고 순서도 A, B, C 순입니다.let resultA = await workA(); let resultB = await workB(); let resultC = await workC(); console.log(resultA); console.log(resultB); console.log(resultC);물론 실행시간의 차이는 있지만, 실직적으로 프로그램에 표기 되는 값은 바로 위에 있는 코드예제에서 보여주신 A, B, C랑 같은데, 병령처리라면 시간이 짧은 B가 실행되고 그 다음에 A, 그 다음 C가 아웃풋으로 나와야 하는거 아닌가요??

제네릭을 사용하실 때 콤마는제네릭과 JSX의 혼동방지제네릭 구문을 명확히 해서 코드의 가독성 높임TSX 파일에서 사용할 때 하는 일반적인 관례로 인한 이유가 맞을까요?

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요.  선생님.  덕분에 재밌게 근본을 다지고 있는데요.  혹시, 세 번째 강좌인 cssom에 대한 강좌는 아직 계획이 없으신걸까요? ㅜㅜ  향후 계획이 있으시다면, 언제 오픈하실 지 궁금합니다. ㅎㅎ  모조록 건강하시고, 새해 복 많이 받으세용 감사합니다.

src파일이랑 index.html파일 만드실 때, 문자 앞에 아이콘이있는데, 저는 없습니다. 또한 우측 큰 창에 보면시작, index.js탭은 있는데 html탭이 없네요,,, 또한 test아래 빈공간 우클릭해서 새폴더 만들기로src생성 후 html을 만들경우 html이 src 상단으로 올라가는데 정상적인 상황인가요...? 뭔가 설정이 잘못된 건가요...?스크린샷 파일 첨부 해드립니다ㅠ

안녕하세요 !해당 강의를 듣고 기능은 비슷한데 내용은 조금 다른 홈페이지를 제작해보고 싶어져서 질문 드립니다 !API를 호출하는 기능은 이해했는데, 강사님이 만드신 API 처럼 저도 직접 간단한 정보를 담은 api 를 만들어보고 싶은데 이 부분은 어떻게 제작하는 지 알 수 있을까요?!

 안녕하세요 citiList 에 더보기 버튼이 있는데handleLoadMore 함수가 더보기 버튼을 클릭했을 때 동작하는 함수인 것 이해했습니다. 근데 해당함수는 citiList 컴포넌트에서만 사용하니까 CitiList.js 에 작성할것으로 예상했는데App.js 에 작성하셔서 App.js 에서 작성하고 CitiList 로 전달하는 이유가 궁금합니다!

초기값이 '' 이여서강의에서는 value 값을 맨뒤로 넣고 input 태그에 닫힘을 작성하지 않음으로, 동작하게 하였는데 다른 방법으로는 <input type="text" placeholder="Search" id="search" value="${searchWord}" autocomplete="off"/>로 작성하였습니다, value 를 싱글쿼터나 더블쿼터로 감싼다음 ${} 를 사용하시면, 뒤에다가 다른 속성을 넣거나 닫아도 정상 동작합니다. 참고 하실분 참고하셔도 좋습니다.

혹시나 기본 '/' 경로에서 펭귄눌렀다 popstate 로 뒤로갔을 경우'clicked' css가 먹지않는 현상,  강의 내용에서 저부분이 영상 짤려서 놓치기 쉬울꺼 같습니다. 저도 강의보면서 하다가 || 'all' 하는 부분 제대로 보기힘들어서못 적었다가 나중에 문제생겨서 로직 보다가 발견했습니다,  

코드 관련 질문은 아래와 같이 '코드블럭' 기능을 이용해주세요!+ 오류 메세지도 함께 올려주시면 좋아요 🙂console.log('hello');  이런식으로 구축했는데 프로젝트만 바꾸면 서버가 꺼져서요..

코드 관련 질문은 아래와 같이 '코드블럭' 기능을 이용해주세요!+ 오류 메세지도 함께 올려주시면 좋아요 🙂npm error code ENOENT npm error syscall open npm error path C:\Users\사용자이름\Desktop\animal_album_Main\animal_album-3\package.json npm error errno -4058 npm error enoent ENOENT: no such file or directory, open 'C:\Users\사용자이름\Desktop\animal_album_Main\animal_album-3\package.json' npm error enoent This is related to npm not being able to find a file. npm error enoent npm error A complete log of this run can be found in: C:\Users\사용자이름\AppData\Local\npm-cache\_logs\2024-12-06T08_26_22_967Z-debug-0.log 안녕하세요 질문드립니다몇일동안 npm init 떄문에 질문드립니다 npm 설치시 해당 프로젝트 파일이 c드라이브 안에만 있어야 되는건가요 ?1번 바탕화면에 프로젝트가 있을떄도 실행이 안됩니다2번 c드라이브 -> User -> (사용자이름) -> github-> 해당 폴더 -> 프로젝트 폴더3번 c드라이브 -> 프로젝트 폴더 3번일때만 되고 1,2번일때는 npm init 설치가 안되는데2번도 가능하게 할려면 어떻게 해야하는지 궁금합니다