여러분들은 음성이 안끊기나요??ㅠㅠ섹션25process 객체를 이용해서 환경변수 불러오기12~20초 사이 한 3번은 끊기네요 ㅜㅜ그런데 저런 일이 전체 영상의 거의 배부분 저래요 ㅜㅜ(브라우져 하드웨어가속 기능 꺼져있어요 ㅠ) 강의 내용은 참 좋은데 말이 끊기니까 진짜 듣기 힘드네요 ㅠㅠ

안녕하세요. App.vue 소스를 보면 아래와 같이 <div id="app"></div> 태그가 있고,public/index.html 에도 <div id="app"></div> 태그가 있습니다.그래서 크롬 개발자 도구를 보면 #app 안에 #app 있는데요. 둘 중 하나만 있어야 하는 건 아닌지요? index.html #app 태크를 지우면 정상적으로 로딩되지 않더라고요. 감사합니다. 

투두리스트를 만들고 있습니다.ui는 디자인은 하지 않았고, 기능만 구현하고 있습니다.사실 원하는 모든기능은 구현했는데 아래 두가지가 중첩되지 않습니다. 코드를 봐주시면 감사하겠습니다. 1. 탭 : (all,active,completed)을 배열 반복문으로 나타나게했고 클릭하면 체크박스 값이 변동됨에에 따라 상단에는 length가 나타 나게되고 ui에도 (all,active,completed)에따라 보여지게 됩니다. 2. 검색 : 인풋 체인지시 하단의 todo추가인풋의 값이 includes.(targetvalue상태)에 맞춰서 ui로 보여집니다. 위 코드는 검색 기능 코드입니다.  위코드는 탭메뉴 코드입니다.  todos라는 최초 배열을 반복문으로 보여주다가 위 함수의 상태를 따로 return해줘서새로운 변수 newArray를 만들어서 ui상으로 다시 반복문으로 나타내고 있습니다 searchFilter와 getFilterdItem 함수를 합칠수가 없는데요,어떻게하면 newArray배열을 이용하여 ui상으로 두개의 함수를 모두 나타낼수 있을까요? 혹은 다른 방법이 있다면 알려주신다면 대단히 감사하겠습니다 ㅠㅠ

vitest 를 통해 실행하면 계속 위와 같은 에러가 나는데, 어떤 이유일까요? 커멘드라인을 이용해서 npm run test 를 입력하면 그 때는 테스트가 잘 이뤄집니다.  

공유해주신 리포지토리 404 뜹니다. private 인거 같네요 ^^

이전 강의인 그랩 마켓 서버 구축하기 에서는 node_modules가 없었는데 이번 강의부터는 생성 되어있습니다.생성 과정을 건너뛰셨다면 어디서 확인할 수 있는지는 강의에 포함시켜주시는게 맞는거 같습니다.

우선 좋은 강의를 무료로 제공해 주신다는 점에 매우 감사드립니다 🙂다름이 아니라 props에 대해 궁금한 점이 있어서 글 남깁니다.function SampleComponent(props) { return ( <div> <div>{props.name}</div> <div>{props.age}</div> </div> ); }만약 위와 같이 코드를 작성했다고 하면, 이 컴포넌트를 사용할 때 아래와 같이 사용할 것으로 예상됩니다.root.render( <React.StrictMode> <SampleComponent name={'kim'} age={12} /> </React.StrictMode> );근데 만약 코드가 매우 길어지고, props로 넘겨야 하는 것들이 많아진다고 가정해 보겠습니다. 예를 들어props.nameprops.ageprops.universityprops.profilePhotoprops.gradeetc...이런 경우에는 도대체 props로 어떤 것들을 넘겨 주어야 하는지 굉장이 헷갈리는 상황이 발생할 것 같은데 이를 해결하기 위한 방법이 있을지 궁금합니다. ++ 제가 찾아본 바로는 아래와 같이 코드를 작성하면 된다고 합니다.function SampleComponent({name, age}) { return ( <div> <div>{name}</div> <div>{age}</div> </div> ); }그런데 이 방식을 사용하게 되면 children은 어떻게 넘겨 줄 수 있는지가 궁금합니다. 그냥 아래와 같이 처리하면 되는 것일까요?function SampleComponent({children, name, age}) { return ( <div> <div>{name}</div> <div>{age}</div> <div>{children}</div> </div> ); }또한, 이 방식이 맞는 방식이라면, 굳이 아래 코드와 같이 props를 사용하시는 이유가 무엇인지도 궁금합니다.function SampleComponent(props) { return ( <div> <div>{props.name}</div> <div>{props.age}</div> </div> ); }

코딩환경설정 강의에서 크롬-> ctrl+shift + I 누르면 저 화면이 나오는데 조금 다릅니다... 강의 화면이랑 똑같은 화면 모습으로 같이 수업을 참여하고 싶은데 어떻게 설명해야 되나요 ?

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.코드팩토리 통합 링크https://links.codefactory.aiFlutter 강의를 구매하시면 코드팩토리 디스코드 서버 플러터 프리미엄 채널에 들어오실 수 있습니다! 디스코드 서버에 들어오시고 저에게 메세지로 강의를 구매하신 이메일을 보내주시면 프리미엄 채널에 등록해드려요! 프리미엄 채널에 들어오시면 모든 질의응답 최우선으로 답변해드립니다! -- 질문강사님은 update 프로퍼티를 false로 설정하고 patch 요청을 보내면 500 에러가 발생하였는데 저는 다시 해봐도 업데이트는 실제로 안되었지만.. 500에러는 발생이 안되네요. 설정을 잘못한것일까요?.

안녕하세요. 실습 따라하는데 리액트 연동이 안된건지 버튼이 페이지에 안뜨는데 코드를 비교해도 뭐가 문제인지 모르겠어요

예제에서 말씀해주신것처럼,result.current.setState() 를 호출해서 act() 를 통해 업데이트 된 상태를 검증하는 방법을 말씀해주셨는데요. 훅 내부 이펙트에서 상태를 업데이트하는 로직을 검증하려면 어떤 식으로 검증해야할까요? export const useDarkMode = (defaultTheme = THEME["LIGHT"]) => { const [theme, setTheme] = useState(defaultTheme); const changeTheme = (type: keyof typeof THEME) => { setTheme(THEME[type]); }; useLayoutEffect(() => { const mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)"); const changeListener = ({ matches }: MediaQueryListEvent) => { setTheme(THEME[matches ? "DARK" : "LIGHT"]); }; mediaQueryList.addEventListener("change", changeListener); return () => { mediaQueryList.removeEventListener("change", changeListener); }; }, []); return { theme, changeTheme, }; }; 위 useDarkMode() 훅 내부 useLayoutEffect() 에서window.matchMedia 의 change 이벤트를 감지하면, setTheme() 하도록 설계되어 있는데요. window.matchMedia 함수의 matches 결과를 true 로 모킹하고,window.matchMedia.dispatchEvent('change') 를 일으켜 검증을 시도해보았는데요.생각처럼 검증이 되지 않는 것 같습니다.ㅠ 혹시 이렇게 검증을 시도하는 것이 맞는지. 검증하는게 맞는지. 여쭤봐도 될까요? 감사합니다.

StopWatch 자료만 있고, Todo App 자료 및 스타일 파일 코드 자료가 없는데, 혹시 어디 있을까요????

강사님꺼에선 refresh라는 로그가 보이는데 제꺼에선 안보이네요ㅠㅠ 4layers라는 검정색 동그라미 버튼 누르니까 log가 찍히는건 다른 레이어에서 확인했으나 mouse에서만 보이지 componet events에서는 나오지 않습니다ㅠㅠ 새로고침 이라고 뜨는 것 보면 잘은 나오는 것 같은데...이 부분 어떻게 해야 해당 refresh log를 볼 수 있을 지 궁금합니다! 코드는 강사님과 똑같히 했다고 생각하는데, 우선 첨부합니다!<div id = "app"> <!-- <app-contents v-on:이벤트이름 = "상위 컴포넌트의 메서드 이름"></app-contents> --> <app-contents v-on:refresh = "showAlert"></app-contents> </div> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script> var appContents={ template:` <p> <button v-on:click = "sendEvent">갱신</button> </p> `, methods:{ sendEvent(){ this.$emit('refresh'); } } } //root 컴포넌트 Vue.createApp({ methods:{ showAlert(){ alert('새로고침'); } }, components:{ //'컴포넌트 이름' : 컴포넌트 내용 'app-contents':appContents } }).mount('#app'); </script> 

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.주소 따라 들어가면 왜 이렇게 되는지 잘 모르겠어요... ㅠㅠ

 제가 알기로 npm의 경우 -g 라는 글로벌 설치 기능이 존재해서현재 위치에 한정되지 않고 사용이 가능한걸로 알고 있습니다. 앞선 강의에서 빠른 속도등의 이유로 yarn을 쓴다고 하셨지만,nodemon 같이 여러 폴더에서 사용하는 경우에는 npm 글로벌 설치를 하는게, 계속 설치를하고 실행문을 설정해주고 하는 번거러움 같은 측면을 따져본다면 더 좋은 방법이지 않나 하는 생각이 듭니다. 이번 강의에서 yarn과 npm을 혼용해서 쓰지 않는게 좋다고 하셨지만, 글로벌 설치를 하는게 유리한 경우는 npm을 써서 글로벌 설치를 하는게 더 나은지, 아니면 그래도 혼용을 해서 쓰면 안되는지, 그렇다면 yarn이 글로벌 설치가 가능한 npm을 안쓰면서 쓸 장점이 속도 말고 다른게 있는지 궁금합니다.

안녕하세요, 강의를 보던 중 궁금한게 있어서 문의 드립니다. 라이브서버를 다운받고 'open with live surver' 를 눌렀는데 크롬에서 영상처럼 연동이 안되네요. 인터넷 찾아보면서 세팅설정도 바꿔보고 했는데도 안되네요. 뭐가 문제인지 알려주실 수 있으신가요?

빌드 폴더가 아닌 오리지널 폴더로 npm start로 확인했을 때에는 알맞게 사진이 불러와집니다. 하지만 빌드 후에 serve 명령으로 실행했을 때에 Diary.js , Edit.js에서 사진을 제대로 불러오고 있지 않습니다.  제가 콘솔로 확인했을 때에 이미지의 상대 주소는 잘 찍히고 있는 것 같은데, 어디에서 빌드 후에 문제가 생기는 건지 잘 모르겠습니다. 깃허브 주소 남깁니다.https://github.com/yminjuu/Emotion-Diary

debug toolbar는 위치 설정 값은 commandCenter, docked, floating, hidden 인데요. 이 설정값의 기본 값은 floating 입니다. 이 위치 상태 기본 값을 변경하기 위해서 다양한 선택지가 있지만 기본적으로 세팅할 수 있는 방법을 알려드립니다. 프로젝트 내 .vscode/settings.json이 있으신 분{ ..., "debug.toolBarLocation": "commandCenter" }작업영역 세팅을 바꾸는 방법command+shift+p 입력 후 Preferences: Open Workspace Settings 입력Debug: Tool Bar Location 입력드롭다운 메뉴에서 원하는 위치 설정

수업 내용 코드는function checkPhone(myphone) { if (myphone.length < 10 || myphone.length > 11) { console.log("에러 발생!!! 핸드폰 번호를 제대로 입력해 주세요!!!"); return false; } else { return true; } } function getToken() { let result = String(Math.floor(Math.random() * 100000)).padStart(6, "0"); console.log(result); return result; } function sendTokenToSMS(myphone, result) { console.log(myphone + "번호로 인증번호" + result + "를 전송합니다."); } function createTokenOfPhone(myphone) { const isValid = checkPhone(myphone); if (isValid === false) return; const mytoken = getToken(); sendTokenToSMS(myphone, mytoken); } createTokenOfPhone("01012345678"); // 01012345678: 인자(argument) 이렇게 되어있는데createTokenOfPhone 함수에서 isValid 상수를 꼭 선언해야하나요?? function checkPhone(myphone) { if (myphone.length < 10 || myphone.length > 11) { console.log("에러 발생!!! 핸드폰 번호를 제대로 입력해 주세요!!!"); return true; } } function getToken() { let result = String(Math.floor(Math.random() * 100000)).padStart(6, "0"); console.log(result); return result; } function sendTokenToSMS(myphone, result) { console.log(myphone + "번호로 인증번호" + result + "를 전송합니다."); } function createTokenOfPhone(myphone) { if (checkPhone(myphone)) return; const mytoken = getToken(); sendTokenToSMS(myphone, mytoken); } createTokenOfPhone("01012345678"); // 01012345678: 인자(argument) 이렇게 checkPhone()이 문제있을 때만 true를 반환하고,checkPhone()이 true일 경우 return 처리하면 코드가 더 짧아지기는 하는데수업에서 말씀하시는 협업의 가독성을 위해서 isValid라는 상수를 선언해줘야 하는지 아니면 제가 생각한 방식으로 코드를 줄여도 괜찮은건지 궁금합니다.

const textField = screen.getByPlaceholderText('텍스트를 입력해 주세요.'); expect(textField).toHaveClass('my-class');이부분에서 className이란 내부 props, state 값을 검증하는 게 아닌가 싶어서 질문을 드렸습니다. 물론, className에 따라 변경되는 DOM을 파악한다는 의미로도 해석이 될 수는 있을 것 같긴 하지만 더 정확한 문맥을 알고 싶어서 질문드렸습니다..!