물질에게 클릭이벤트를 주어 보이는 시점이 바뀌거나 물체가 이동할수있게 하고싶습니다.

안녕하세요! webpack 설정까지 알려주시는 부분이 너무 마음에 들어서 열심히 강의 수강 중입니다. 강의 보는 중에 궁금한 점이 생겨서 질문 드립니다. 1. 요부분에서 entry에서는 상대경로로, output에서는 절대경로로 설정하는 이유가 뭔가요??그냥 webpack은 entry는 상대경로로, output은 절대경로로 설정하게 만들어졌으니까 그러는 건가요? path.join은 절대경로를 사용할 때만 사용하는 거 맞죠?강의 잘 보고 있습니다. 감사합니다 :)

안녕하세요.리덕스 미들웨어 강의를 듣는 중 이런 에러 메시지가 떴습니다.구글링 해보니 매개변수 타입 문제인거 같은데 어떻게 해결해야 할지 모르겠어서 질문 드립니다.

return <LoadingSpinner />어떤 경우에는 () 괄호를 치고 return 을 하고,어떤 경우에는 < /> 태그만 치고 return 을 하는데 그 차이가 뭔가요?

안녕하세요. 질 높은 강의 덕분에 많은 도움 받고 있습니다. 다름이아니라 미니블로그를 학습하며 이해가 되지 않는 부분이 있어서 질문드립니다. 44번째줄의 navigate(`/post/${item.id}`) 에 대한 질문입니다.item.id값으로 data.id의 값이 들어가는 것으로 확인했습니다. 제가 궁금한 것은 어떠한 방식으로 data.id의 값이 item.id값으로 들어가는지 도무지 이해가 되질 않습니다. 관련해서 답변주실 수 있으실까요?

Chapter 06 실습 문제에서 다음과 같은 경고와 함께 콘솔 로그가 나오지 않았습니다. Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot React 18버전에서는 ReactDOM에 렌더링하는 방식이 아니라 root를 먼저 만들고 root의 렌더링을 하는 방식으로 바뀌었다고 합니다..  먼저, 실습 자료에서 따라 작성했던 코드입니다.  import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import reportWebVitals from './reportWebVitals'; import NotificationList from "./chapter_06/NotificationList"; ReactDOM.render( <React.StrictMode> <NotificationList /> </React.StrictMode>, document.getElementById('root') ) reportWebVitals(); Notification element는 순서대로 제대로 출력되는걸 보아서 JSX element는 제대로 작성한 것 같았고  콘솔 로그가 나오지 않으며 위에 작성한 오류만 나와 react 버전 문제인가 해서 공식문서를 참조해 다음과 같이 변경했습니다.  import React from 'react'; import { createRoot } from 'react-dom/client'; import './index.css'; import reportWebVitals from './reportWebVitals'; import NotificationList from "./chapter_06/NotificationList"; const container = document.getElementById('root'); const root = createRoot(container); root.render( <NotificationList /> ); reportWebVitals();  ReactDOM을 직접 사용하지 않고, root를 만든 다음 root에서 렌더링을 하는 방식으로 변경하라고 해서 이렇게 했더니 콘솔 로그가 제대로 나왔습니다. 그런데 문제가 있는게 이전에는 Notification element가 1, 2, 3 순서대로 출력이 되었는데 root에 직접 렌더를 하니 1번과 2번 element가 동시에 출력되는 문제가 생깁니다..  로그를 확인해보니 1번 2번 element는 componentDidMount() 이후 Update()를 실행하지 않고 WillUnmount()가 되어버립니다. WillUnmount() 이후에 한 번 더 DidMount()가 되고, Update()로 넘어가지만, 이 이후에도 1번 2번이 같이 호출되고, 그 다음에 3번이 호출됩니다. 3번 역시 DidMount() 이후 Update() 없이 WillUnmount()되고 다시 DidMount()가 됩니다  3번은 Update()되지 않습니다.. 이 이후에는 공식문서에서 해결책을 찾을수가 없어서 문의드립니다.. 

안녕하세요 강사님 강의 잘 듣고 있습니다! 항상 좋은 강의와 친절한 답변 감사드립니다.스타일 컴포넌트 적용 중에 궁금증이 생겼는데 검색을 통해서는 명쾌한 답변이 나오지 않아서 질문드립니다.아래 첨부 드린 코드와 같이 스타일 컴포넌트를 적용하려면 use client로 하고 page.tsx 에서 import 해서 사용해야 하는데혹시 이렇게 했을때 강사님이 사용하신 CSS Modules에 비해 안 좋은점이 있을까요?use client를 import해서 사용하다 보니 css modules에 비해 속도가 느리다던가서버 컴포넌트에 클라이언트 컴포넌트로 작성된 스타일을 적용시킴으로서 악영향이 있을까 걱정되어서 질문 드립니다.'use client' import styled from "styled-components" export const Container = styled.div` background-color: ${({theme}) => theme.color.blue2}; `;import { Container } from "./home.styles" export default function Home() { return ( <Container>안녕하세요</Container> ) };

안녕하세요 강사님 강의 잘 듣고 있습니다! 항상 좋은 강의와 친절한 답변 감사드립니다.스타일 컴포넌트 적용 중에 궁금증이 생겼는데 검색을 통해서는 명쾌한 답변이 나오지 않아서 질문드립니다.아래 첨부 드린 코드와 같이 스타일 컴포넌트를 적용하려면 use client로 하고 page.tsx 에서 import 해서 사용해야 하는데혹시 이렇게 했을때 강사님이 사용하신 CSS Modules에 비해 안 좋은점이 있을까요?use client를 import해서 사용하다 보니 css modules에 비해 속도가 느리다던가서버 컴포넌트에 클라이언트 컴포넌트로 작성된 스타일을 적용시킴으로서 악영향이 있을까 걱정되어서 질문 드립니다.'use client' import styled from "styled-components" export const Container = styled.div` background-color: ${({theme}) => theme.color.blue2}; `;import { Container } from "./home.styles" export default function Home() { return ( <Container>안녕하세요</Container> ) };

styled-component를 사용해서 코드를 작성했을 때 제 코드는 위와 같이 다 초록색으로 뜨는데 선생님 코드를 보면 CSS코드처럼 색상이 구분되어있습니다. 혹시 어떻게 해야지 색상이 구분이 되는건지 알 수 있을까요?!

const onSubmit = ({email, password, name}) => { const body = { email, password, name, image : `https://via.placeholder.com/600x400?text=no+user+image` }; 생략 <form className="mt-6" onSubmit={handleSubmit(onSubmit)}> <div className="mb-2"> <label htmlFor="email" className="text-sm font-semibold text-gray-800" >Email</label> <input type="email" id="email" className="w-full px-4 py-2 mt-2 bg-white border rounded-md" {...register("email", userEmail)} /> { errors?.email && <div> <span className="text-red-500"> {errors.email.message} </span> </div> } </div> <div className="mb-2"> <label htmlFor="name" className="text-sm font-semibold text-gray-800" >Name</label> <input type="text" id="name" className="w-full px-4 py-2 mt-2 bg-white border rounded-md" {...register("name", userName)} /> { errors?.name && <div> <span className="text-red-500"> {errors.name.message} </span> </div> } </div> <div className="mb-2"> <label htmlFor="password" className="text-sm font-semibold text-gray-800" >Password</label> <input type="password" id="password" className="w-full px-4 py-2 mt-2 bg-white border rounded-md" {...register("password", userPassword)} /> { errors?.password && <div> <span className="text-red-500"> {errors.password.message} </span> </div> } </div> <div className="mt-6"> <button type="submit" className="w-full bg-black text-white px-4 py-2 rounded-md hover:bg-gray-700 duration-200"> 회원가입 </button> </div> <p className="mt-8 text-xs font-light text-center text-gray-700"> 아이디가 있다면? {" "} <a href="/login" className="font-medium hover:underline" > 로그인 </a> </p> </form>   여기서 onSubmit 함수안에 있는 Body 에 email name password는 어떻게 가져오는건가요? htmlFor 로 알고 가져오는건가요? 이부분이 좀 헷갈려서요  가져와서 Thunk로 넘어가는건 알겠는데  저 함수에서 어떻게 body로 담는지를 모르겠어요 ㅠ

클론코딩 무작정 하다보니 이 부분은 제가 제대로 이해하고 있는 기분이 들지 않아서 다 지우고 해당 기능 구현에 대해서 혼자서 코딩해보고 있는데, 막막하네요.제가 막무가내로 짠 코드 고쳐봤자 의미가 없어서 다시 생각해서 짜보려고 하는데, 어떤 어떤 부분을 순서대로 구현해야 하는지 핵심만 힌트로 알려주실 수 있을까요?

피그마 로그인하고, 데브모드로 변경되지 않아 CSS 속성을 확인할 수 없어요

위 코드에서 작성자 부분에서는 defaultValue와 readOnly 속성값 지정시에 명확하게 명시적으로 작성해주어야 했는데,제목 부분에서는 똑같이 text input 요소인데 왜 명시적으로 작성하지 않아도 오류가 발생하지 않는지 궁금합니다.

프론트엔드코스 100% 활용하기 (수업자료,퀴즈,포트폴리오) 이 부분 듣고 있는데 커리큘럼과 수업자료 섹션이 일치한다고 하셨는데 일치 하지 않는 거 같습니다. 그냥 알아서 제목 보고 자료 보면 되는거죠? 위 이미지는 강의 커리큘럼 부분과 노션 자료 캡쳐한 것입니다!

일단 계속 써봐야 할것 같은데, 저 같은 경우 import createUploadLink from "apollo-upload-client/createUploadLink.mjs";이렇게 설정해두니까 error는 뜨지 않았습니다.

LoginModal.tsx 클라이언트 컴포넌트에서 로그인 호출시http://localhost:9090/api/auth/error?error=CallbackRouteError 로 넘어가서 질문드립니다. (9090서버 열린 것 확인했습니다)비슷한 질문에 대한 답변에 버전 문제가 있어서 버전도 다시 설정해보았습니다.그런데도 여전히 로그인 함수 호출 시 http://localhost:9090/api/auth/error?error=CallbackRouteError 로 리턴되고 있어서요.터미널에는 아래와 같은 오류가 나옵니다..ㅜㅜ

3:20모델 값이 갱신이 안되서 그런건가요?모델이 원웨이로 돼어있나요?useState 를 쓰면 모델이 투웨이로 바뀌는건가요?

프로젝트 생성하는 데 오류가 생겨 질문 드립니다

DOM화면의 일부만 찾아서 수정해서 사용자에게 응답해준다고 하였는데 AJAX비동기 통신도 일부 구역만 변경해서 보여주는데 서로 관련이 있나요?? 아직 리액트 처음이라 궁금해서 질문 드려봅니다.

 첫번째처럼 코드 작성했는데, padding을 입력하기 전과 후가 차이가 안 나고 박스1,2,3이 계속 같은 크기예요. 제가 뭘 잘못한 걸까요?ㅠㅠ contentbox와 borderbox 크기 차이가 강의영상처럼 안 나타나서 뭘 잘못했나 싶네요.... 알려주시면 감사하겠습니다!