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

예제에서 말씀해주신것처럼,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을 파악한다는 의미로도 해석이 될 수는 있을 것 같긴 하지만 더 정확한 문맥을 알고 싶어서 질문드렸습니다..!

LocalStorage 사용 강의의 16분 50초 부근 "삭제하기" 버튼 관련 질문입니다.처음에 혼자 구현을 하려고 할 때 originData.id 대신 id를 onRemove에 파라미터로 전달했을 때 작동이 안됐는데 originData.id로 해야 삭제되더라고요. 콘솔로 찍었을 때 둘 다 일기 데이터의 id로 같은 걸 가리키는 것으로 나오는데 제가 잘못 알고 있는 부분이 있을까요? 안되는 이유가 무엇인가요? const handleDelete = () => { if (window.confirm("정말 삭제하시겠습니까?")) { console.log(id); console.log(originData.id); onRemove(originData.id); navigate("/", { replace: true }); } }; 

 앞 강의 끝날때는 지연을 줄이기 위해 로컬스토리지에 저장하는걸 알아보자 하고 끝났는데,해당강의에서는 로컬스토리지 중복체크 내용을 다루고 계셔서 로컬스토리지에 저장하는 장점에 대한 궁금증이 생깁니다.강의 내용을 보면 로컬스토리지 저장된 데이터와 관련된거 먼저 보여주고, 통신 데이터가 로컬스토리지와 다르면 다른 데이터를 로컬에 저장하면서 관련된걸 보여주는식인것 같습니다.제 생각으론 같은 지역 같은 날씨, 그리고 자주 접속하거나 새로고침을 자주 한다면 좋은 방법같은데,다른 지역 이나 다른날씨 라면 처음 데이터가 오히려 잘못된걸 보여주고 늦게 바뀌는거라 그런면에서 보면 해당 기능이 장점인지가 궁금합니다.만약 큰 장점이 아니라면 로컬에 저장하고, 그 정보를 먼저보여주고, 다르다면 로컬정보 바꾸고, 해당 정보 보여주고 하는 과정의 기능이 필요한가 의문이 듭니다.아무래도 지연을 줄이기위해 로컬스토리지를 사용한다길래 무슨 방법이 있나 싶었다가 기대했던것과 다른방향이라 의문이 생겨 질문남겨봅니다.제가 잘못 이해했거나, 놓치고 있는 다른 이유가 있다면 알려주시면 감사하겠습니다.

안녕하세요.강의 잘 듣고 있습니다! TypeOrm으로 OneToMany relation을 추가하려고 하는데 before initialization 에러가 발생하고 있는데 해결이 안되고 있습니다ㅠ확인 부탁드려요!@Entity('new_users') export class UserModel { @PrimaryColumn() id: string; @Column() name: string; @DeleteDateColumn({ name: 'deleted_at' }) deletedAt: Date; @CreateDateColumn({ name: 'created_at' }) createdAt: Date; @UpdateDateColumn({ name: 'updated_at' }) updatedAt: Date; @OneToMany(() => UserSocialModel, (userSocial) => userSocial.user) userSocials: UserSocialModel[]; }@Entity('new_user_socials') export class UserSocialModel { @PrimaryColumn() id: string; @Index() @ManyToOne(() => UserModel, (user) => user.userSocials) user: UserModel; }

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. function solution(arr) { let answer = arr; for (let i = 0; i < arr.length; i++) { for (let j = 1; j < arr.length; j++) { if (arr[j - 1] > arr[j]) { [arr[j - 1], arr[j]] = [arr[j], arr[j - 1]]; } } } return answer; } // test case console.log(solution([11, 7, 5, 6, 10, 9]));

브라우저 개발자도구탭 열면 보이는 쿠키나, 로컬스토리지에 박혀있는 값들도 string인지 궁금합니다.제가 알고 있기로는, 프론트에서 서버로 값 전달할때 string으로 변환해서 보내야 하는것으로 알고있는데 반대로 서버에서 전달받은 값들도 전부 string인지 궁금합니다.

단순하게 값이 없는 변수를 먼저 선언 하는 이유가 궁금합니다.

lists라는 변수를 forEach를 사용하려면 Array로 재할당 한다음에 forEach 사용 할수 있는것을 알았습니다.그런데 사용하기 불편해서 테스트 하다가 알게 됐는데, 변수 지정할 때 querySelectorAll로 선택하니까 forEach 사용 할 수 있는 것을 알게됐어요.그렇다면 get으로 시작하는 메서들 보다 쿼리 선택자를 사용하는게 더 좋은??건가요?좋고 나쁘고의 개념이 아니라면, get메서드와 쿼리 선택자의 쓰임새가 상황에 따라 따로 있는지 궁금하니다.위 질문들은 간략하게 정리 해보면, 쿼리 선택자가 사용하기 더 편한데 업무에서 get 메서드 사용하는지 궁금합니다.

- 본 강의 영상 학습 관련 문의에 대해 답변을 드립니다. (어떤 챕터 몇분 몇초를 꼭 기재부탁드립니다)- 이외의 문의등은 평생강의이므로 양해를 부탁드립니다- 현업과 병행하는 관계로 주말/휴가 제외 최대한 3일내로 답변을 드리려 노력하고 있습니다- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 웬만하면 정상적으로 돌아가는데 누르다보면 한번씩 스크롤이 끝까지 안올라가고 중간에 멈출때가 있는데, 해결 방법이 따로 있는지 궁금합니다 헤더 영역을 처음부터 나타나게 하지 않고, 어느정도 스크롤이 되고 나서 띄우는 사이트들이 많은데 이것 때문에 그렇게 처리하는건지 궁금합니다 

제 프로젝트강사님의 프로젝트 제 프로젝트는 스크롤이 무조건 안되고 일기장 화면이 꽉 찹니다.aspect-ratio도 둘 다 auto로 되어있고 개발자 도구로 확인해보았는데 해결되지 않아 질문 드립니다. 기본 설정에서 빼먹은 게 있을까요?