스프링 기반 서버와 mqtt를 사용하는 프로젝트를 생각하고 있는데해당 강의가 프로젝트를 구현하는데 도움이 될지 여쭤보고 싶습니다

package.json 파일에맨밑 "type": "module"를 삽입하고 npm run start 를 하면강의에는 esm과 js모듈을 같이 사용할 수 없기 때문에 오류난다 하셨는데 정상적으로 작동하는 현상이 발생합니다     

강의 잘 듣고 있습니다.질문이 있는데요,일반적인 css 꾸미기에서 width와 height의 값은 개발자가 아닌웹디자이너가 항상 알려주기도 하나요?즉 만약 vs code에서 파일이 index.html이 있고 index.css가 있다고 한다면, index.html에서 작성한 내용에 index.css에서 꾸며줄 시에 width 값과 height 값이 몇 픽셀인지, 혹은몇 퍼센트인지 정할 때 잘 모르겠다면 어떻게 해야 하나요? 개발자가 width 값과 height 값을 잘 모른다면감으로 크기를 늘렸다가 줄였다가 반복 하면서 적당한 width값과 height값을 찾아나가는 건가요?피그마에서는 보통 디자인이 다 된 결과 값을 보고 vs code에 코딩한다면 상세 정보를 보고 width크기,height크기,폰트 크기, 폰트 weight등등 다양하게 그대로 css에 적어주기만 하면 되는데요, 그랩 선생님 강의에서는 피그마로 볼 수 있게 추가 안내가 없어서, 스스로 강의 들은 이후 강의 없이 복습 할 시에(그랩마켓 웹화면 구현하기 1~3) 혹시나 각각 css로 꾸밀 때 width, height은 외우거나 혹은 보고 css에 적용하는 방식의 공부법 밖에 없는걸까요? 아니면 실무에서는 웹디자이너가 이미지등등의 경우에 width,height,기타 등등을 알려주기에 그대로 css에 코딩해주면 되는 것인지요? 그랩님, 답변 부탁드립니다.

graphql 포트폴리오용 주소는 접속이 되지만graphql practice 주소와 rest-api practice 주소가 접속이 안되는 것 같습니다. http://practice.codebootcamp.co.kr/graphqlhttp://practice.codebootcamp.co.kr/api-docs해당 주소로 접속하였을 때 사이트에 연결할 수 없다고 나옵니다.

안녕하세요! 파이널 과제를 완성하고 레퍼런스 코드를 보며 공부를 하다가 const와 let 사용에 대해 질문이 생겼습니다. 레퍼런스 코드에서는 함수 내에서 값이 변화하는 변수가 아니면 전부 const로 변수 선언을 하였는데, 주로 const를 많이 사용하고 값이 변화하는 경우에만 let으로 선언을 하는 걸까요? const를 주로 쓰는 이유가 따로 존재할까요? 주로 권장되는 스타일인지 궁금합니다. 미리 답변 감사합니다.

강의 내용중 12분 00초 정도에 나옵니다. const filteredToDos = getFilterData();리랜더링 될 때마다, 해당 함수를 호출하여 결과값을 저장하라는데,,,이게 무슨말일까요 ???

1번하고 2번하고 강의가 같아요.

저는 .eslint 파일이 안생기고 eslint.config.mjs 파일이 생기네요.그리고 각 ts 파일에 들어가 보니 줄마다 끝에 에러 표시가 나있더군요. 동작에는 문제가 없으나구글링 해보니 아래를 추가라하고 해서 일단 해결은 했습니다.rules: { 'prettier/prettier': [ 'error', { endOfLine: 'auto', }, ],

app.get("/cats", (req, res) => { try { const cats = Cat; res.status(200).send({ success: true, data: { cats, }, }); } catch (error) { res.status(400).send({ success: false, error: error instanceof Error ? error.message : String(error) }); } });강의에서는 단순히catch (error) { res.status(400).send({ success: false, error: error.message }); }이렇게 나오는데, 저는 이렇게 적으면 error의 타입이 'unknown'이라는 오류 메시지가 뜹니다.상단에 있는 코드처럼 적어야 오류가 해결됩니다. 강의에서는 왜 오류가 나지 않을까요?

리렌더링이 되고 있다고 설명하는 화면 리렌더링이 발생하지 않는다는 화면 제가 보엔 둘 다 하이라이팅이 되고 있는 것 같은데 어느 부분을 봐야 리렌더링이 안된다고 느낄 수 있을까요??

안녕하세요! 이정환님 강의 정말 재미있게 잘 보고 있습니다. 😊 New 페이지 구현하기 2.기능 강의 중에const getStringedDate = (targetDate) => { let year = targetDate.getFullYear(); let month = targetDate.getMonth() + 1; let date = targetDate.getDate(); if(month < 10) { month = `0${month}`; } if(date < 10) { date = `0${date}`; } return `${year}-${month}-${date}`; }로 날짜 변환 함수로 강의에서 언급 해주셨는데요! 혹시 이건 어떨까요?const getStringedDate = (targetDate) => { return `${targetDate.getFullYear()}-${String(targetDate.getMonth() +1).padStart(2,0)}-${String(targetDate.getDate()).padStart(2,0)}`; }결과는 동일하게 나올 수 있을 것 같아 상관은 없지만 보통 저런 경우에는 조건문을 애용하시는 편이실까요? 어떤 방식으로 짜는 것을 더 선호 하시는지 정말 호기심에 질문을 드립니다! 😆

이게 제 console인데요아래 mock data는 자기들끼리 따로 그룹지어서 나오는데 선생님 콘솔에는 그냥 다 개별로 나오거든요...뭐가 문제일까요? import { useReducer, useRef } from "react"; const mockData = [ { id: 1, createDate: new Date().getTime(), emotionId: 1, content: "1번 일기 내용", }, { id: 2, createDate: new Date().getTime(), emotionId: 2, content: "2번 일기 내용", }, ]; function reducer(state, action) { switch (action.type) { case "CREATE": return [action.data, ...state]; } } function App() { const [data, dispatch] = useReducer(reducer, [mockData]); const idRef = useRef(3); const onCreate = (createDate, emotionId, content) => { dispatch({ type: "CREATE", data: { id: idRef.current++, createDate, emotionId, content, }, }); }; return ( <> <button onClick={() => { onCreate(new Date().getTime(), 1, "Hello"); }}> 일기 추가 테스트 </button> </> ); } export default App; 제 코드도 첨부해봅니다,,, 

강의 설명 중 10분06초 부분 에서 설명해주신 " State Lifting (State끌어올리기 ) "이라는 개념이 아직 애매모호해서 좀더 확실하게 설명 부탁드려도 될까요 ?부모컴포넌트에서 state관리 해야하는 건 인지하고 있습니다. ( 단방향으로 흘러가는 React의 특성 때문에 ) 끌어올린다? 라는 키워드가 확실하게 팍! 하고 이해하기가 조금 어렵네요 ...

궁금한 점이 2가지 있는데요1. Header 컴포넌트에 div 말고 애초에 button를 넣으면 안 되나요?Header.jsxconst Header = ({ title, leftChild, rightChild }) => { return ( <header className="Header"> <button className="header_left">{leftChild}</button> <div className="header_center">{title}</div> <button className="header_right">{rightChild}</button> </header> ); };App.jsx<Header title={"Header"} leftChild={"Left"} rightChild={"Right"} />이런 식으로 헤더 컴포에 처음부터 버튼 태그를 넣으면 될 것 같은데 왜 div로 감싸는 건가요?음.. 그냥 css 편의상 이유일까요? 2. 저는 css를 배울 때 처음에 charset "utf-8"; 을 항상 입력하라고 배웠는데 리액트 강의에서는 항상 안 사용하시더라구요. 리액트에서는 원래 안 쓰는건가요, 아니면 그냥 강의에서는 굳이 필요없어서 쓰지 않는건가요?

안녕하세요! 싸이월드 만들기 1탄 피드백 부탁 드립니다. 과제 완성 후 레퍼런스 코드를 참고해서 확인도 하였는데 궁금한 점이 있습니다.figma에 있는 '오늘의 기분' select 박스 화살표 모양을 따라해 보고 싶어 아이콘을 사용했는데 아래 코드에서 select 태그 위에 아이콘이 잘 겹치도록 하는 부분이 어려운 것 같습니다. 이렇게 두 요소를 겹치도록 할 때 크기, 위치 같은 요소를 어떻게 계산하여 맞게 지정할 수 있을까요?<!DOCTYPE html> <html lang="ko"> <head> <title>정현아님의 미니홈피 :: 사이좋은 사람들, 싸이월드</title> <link href="./styles/index.css" rel="stylesheet"> <script src="https://kit.fontawesome.com/f9748babc2.js" crossorigin="anonymous"></script> </head> <body> <div class="background"> <div class="outerbox"> <div class="wrapper"> <div class="wrapper__left"> <div class="wrapper__left__header"> <div class="today"> <!-- 각각의 span 박스를 만들어서 관리 --> <span>TODAY</span> <span>0</span> <span> | TOTAL</span> <span>12345</span> </div> </div> <div class="wrapper__left__body"> <div class="left__body__header"> <div class="left__body__header__gray"></div> <div class="left__body__header__line"></div> </div> <div class="left__body__profile"> <div class="left__body__profile__content"> <i class="fa-regular fa-face-smile"></i> 이름 </div> <div class="left__body__profile__content"> <i class="fa-solid fa-envelope"></i> Phone </div> <div class="left__body__profile__content"> <i class="fa-solid fa-phone"></i> E-mail </div> <div class="left__body__profile__content"> <i class="fa-solid fa-star"></i> 인스타그램 </div> </div> <div class="left__body__body"></div> <div class="left__body__footer"> <div class="left__body__footer__title"> 오늘의 기분 </div> <div class="left__body__footer__box"> <select class="left__body__footer__select"> <option selected="true">기쁨 😊</option> <option>슬픔 😢</option> <option>화남 😠</option> <option>행복 🥰</option> </select> <span class="left__body__footer__icon"><i class="fa-regular fa-square-caret-down"></i></span> </div> </div> </div> </div> <div class="wrapper__right"></div> </div> </div> </div> </body> </html>* { box-sizing: border-box; margin: 0px; /*위 옆 공백 제거*/ } .background { width: 1024px; height: 600px; /* background-color: bisque; */ background-image: url("../images/background.png"); padding: 20px 0px 0px 20px; /*위 오른쪽 아래 왼쪽 - 시계방향*/ } .outerbox { width: 808px; height: 544px; /* background-color: tomato; */ background-image: url("../images/outerbox.png"); } .wrapper{ display: flex; flex-direction: row; /* background-color: rebeccapurple; */ padding: 32px 0px 0px 32px; } .wrapper__left { width: 208px; height: 472px; /* background-color: bisque; */ display: flex; flex-direction: column; } .wrapper__left__header { width: 100%; height: 30px; /* background-color: aqua; */ display: flex; flex-direction: row; justify-content: center; align-items: center; } .today { font-size: 9px; } .wrapper__left__body { width: 100%; height: 100%; /*형제 속성을 제외한 나머지만 가져감*/ /* background-color: steelblue; */ border: 1px solid grey; border-radius: 15px; background-color: white; display: flex; flex-direction: column; align-items: center; padding: 20px 30px; } .left__body__header { width: 100%; display: flex; flex-direction: column; } .left__body__header__gray { width: 148px; height: 133px; background-color: grey; } .left__body__header__line { border-top: 1px dotted black; margin: 12px 0px; /*상하여백 좌우여백*/ } .left__body__profile { width: 100%; display: flex; flex-direction: column; } .left__body__profile__content { height: 12px; font-size: 10px; /* margin: 0px 0px 8px 0px; */ margin-bottom: 10px; color: #999999; } .left__body__footer { /* padding: 110px 0px 0px 0px; */ width: 100%; margin-top: 100px; } .left__body__footer__title, .left__body__footer__select { font-size: 11px; } .left__body__footer__box { position: relative; margin-top: 5px; } .left__body__footer__select { width: 141px; appearance: none; } .left__body__footer__icon { position: absolute; width: 18px; height: 18px; top: 2px; right: 2px; pointer-events: none; /* 아이콘을 클릭해도 뒤의 select가 반응하도록 설정 */ } .wrapper__right { width: 524px; height: 472px; /* background-color: violet; */ }

제로초님 깃헙 소스코드 복사해서 실행한 파일로 크롬에서 실행했는데, input 폼에 id 넣고 등록을 누르면 404 에러 페이지가 뜹니다.사파리 브라우저는 문제 없이 돌아가고 크롬브라우저에서만 이렇게 됩니다. 어떤 문제인가요?에러 메세지도 안떠서 당황스러운데 이런건 구글링 해봐도 잘 안찾아지는데 앞으로 이런 문제는 어떻게 검색해야 찾을 수 있을까요 ? 

userSchema의 timestamps: true를 하면 createdAt과 updatedAt이라는 두 개의 필드가 자동으로 생성된다고 하는데 createdAt 필드를 직접 작성한 이유가 있나요 ?

안녕하세요!회원가입 과제 피드백 부탁 드립니다! 그리고 추가적으로 궁금한 점이 있는데figma 처럼 라디오버튼의 기본 색상을 회색으로 변경할 수 있을까요?css 파일에서 반복되어 사용되는 속성, 값들이 있는데 이런 값들은 공통적으로 사용하는 것이 구조적으로 좋을까요?예) 아래 코드에서 .inputEmail과 .input에 설정하는 css 값들이 유사하지만 분리해서 작성 아래는 과제 관련 코드입니다! 미리 답변 감사합니다.<!DOCTYPE html> <html lang="ko"> <head> <title>회원가입</title> <link href="./02-signup.css" rel="stylesheet"> </head> <body> <div class="background"> <div class="signup"> <h2 id="title">회원 가입을 위해<br>정보를 입력해주세요<br></h2> <div> <span><br>* 이메일<br><br></span> <input class="inputEmail" type="text"> </div> <div> <span><br>* 이름<br><br></span> <input class="input" type="text"> </div> <div> <span><br>* 비밀번호<br><br></span> <input class="input" type="password"> </div> <div> <span><br>* 비밀번호 확인<br><br></span> <input class="input" type="password"> </div> <br><br> <div class="radioGender"> <div> <input type="radio" name="gender">여성 </div> <div> <input type="radio" name="gender">남성 </div> </div> <br><br> <div> <input class="agreement" type="checkbox"> 이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다. </div> <br> <hr id="line"> <br> <div> <button class="signupBtn">가입하기</button> </div> </div> </div> </body> </html>* { box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; } .background { width: 670px; height: 960px; border-radius: 20px; border: 1px solid #AACDFF; box-shadow: 7px 7px 39px 0px #0068FF40; display: flex; justify-content: center; align-items: center; } .signup { width: 470px; display: flex; flex-direction: column; } .signup span { color: #797979; } .inputEmail { width: 100%; border: none; border-bottom: 1px solid #0068FF; } .input { width: 100%; border: none; border-bottom: 1px solid #CFCFCF; } .radioGender { display: flex; justify-content: center; align-items: center; gap: 30px; accent-color: #D2D2D2; } .agreement { font-size: 14px; } .signupBtn { width: 100%; height: 75px; border-radius: 10px; border: 1px solid #0068FF; background: #FFFFFF; color: #0068FF; font-size: 18px; } #title { font-size: 32px; color: #0068FF; } #line { width: 100%; height: 1px; border: none; background-color: #E5E5E5; }

확장프로그램 설치, "vscode-styled-components"ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡimport styled from에서 경로 쓸 때 백틱금지🤬

 entity 등으로 생성된 tpye 에서 강의에서 사용된 코드로 예시를 들면# product.entity.ts @JoinTable() @ManyToMany(() => ProductTag, (productTags) => productTags.products) @Field(() => [ProductTag], { nullable: true }) productTags: ProductTag[];위와같이 nullable 을 사용하여#schema.gql type Product { productId: String productName: String! description: String! productPrice: Int! isSoldout: Boolean! productSalesLocation: ProductSalesLocation productCategory: ProductCategory user: User productTags: [ProductTag!] }productTags: [ProductTag!] 와 같이 할 수 있었습니다.위에서 productTags: [ProductTag!]를 productTags: [ProductTag] 와같이 변경 해보려고합니다.방법이 있나요?@Field(() => [ProductTag, { nullable: true }], { nullable: true })에러는 발생하지 않지만 안됩니다.