현 강의에서 postPost에 UserGuard를 하기 위해 posts.module.ts에 UsersModule, AuthModule을 import해주었는데 이 UsersModule은 AuthModule에서 사용하기 때문에 import를 해줘야하는건가요? 그리고 실제로 깃헙에선 AuthModule에서 AuthService를 export했는데 postPost 매서드에서 사용하는 것은 AuthService가 아닌 auth 모듈의 guard 폴더 안에 있는 ts 파일인데 왜 AuthService를 export하는건가요?

node.js등 설치관련 참고하려는데~ 기초강좌라고 하시는 강의 링크좀 부탁드립니다.

JPA에서는 꼭 필요할 때만 양방향 연관관계를 맺으라고 권고하는 거 같던데 TypeORM은 오히려 양방향 연관관계를 지향하는 입장인 건가요?

import React from "react"; const Viewer = ({ count }) => { return ( <div> <div>현재카운트 : </div> <h1>{count}</h1> </div> ); }; export default Viewer; 이걸 했을떄 ..import React from "react"; const Viewer = ( count ) => { return ( <div> <div>현재카운트 : </div> <h1>{count}</h1> </div> ); }; export default Viewer;두개 차이가 멀까요 계속 해깔리는데 이거.. 구조 분해형태인거 까진 알겠는데부모에서 import logo from "./logo.svg"; import "./App.css"; import Viewer from "./component/Viewer"; import Controller from "./component/Controller"; import { useState } from "react"; function App() { const [count, setCount] = useState(0); const onClickButton = (value) => { setCount(count + value); }; return ( <div className="App"> <h1>Simple Counter</h1> <section> <Viewer count={count} /> </section> <section> <Controller onClickButton={onClickButton} /> </section> </div> ); } export default App; GPT 물어보니({ count }):이 방식은 구조 분해 할당을 사용한 것입니다.함수의 인자로 객체를 받고, 그 객체의 count라는 속성을 변수로 바로 할당합니다.예를 들어, Viewer 컴포넌트가 { count: 5 }라는 객체를 인자로 받으면, count 변수는 바로 5가 됩니다.(count):이 방식은 구조 분해 할당을 사용하지 않은 것입니다.함수의 인자로 객체를 받고, 그 객체를 count라는 이름의 변수로 할당합니다.따라서 count는 객체가 되며, count 객체의 속성에 접근하려면 count.count처럼 접근해야 합니다.이렇게 하면 const [count, setCount] = useState(0); 에서 count는 객체가 아니라 그냥 변수 아닌가요 ???<button onClick={() => { onClickButton(-1); }} > <button onClick={ onClickButton(-1);} >이거 2개의 차이가 멀까요 저는 onClick이 함수니까 함수를 전달해줘야 한다고 생각해서 { } 안에 바로 함수를 넣었거던요 ..후자 .근데 보니까 ()=>{ } 여기다가 함수를 넣는건onclick의 매개 함수의 리턴값으로 함수를 넣는건데 ..두개의 차이가 뭔지좀 궁금합니다.

강의 12.13 마지막에서 메인컨테이너가 화면 끝까지 안내려 오는 문제를 해결하기 위해서 index.css의 body 태그 스타일에 flex 를 주셔서 해결하셨는데요. 그 원리를 조금 더 설명해 주실 수 있나요?flex는 요소들을 한줄에 배치하기 위해서 사용 하는데 여기선 요소가 다음 줄 까지 덮도록 쓰여진것 같아 좀 헷갈립니다.

socket 은 현업에서 사용해본적이 거의 없다가 개념만 이해하고 이번에 다시 강의로 공부를 하고있습니다.실제로 사용하게 된다면 조금 더 정리하는게 다가올것같긴한데그러면 socket.io 로 모든 요청과 응답을 구현해도 될것같은데 ? 라는 생각을 했습니다. 아니면 비용적인 측면때문에 rest api 로 요청때마다 응답을 보내도록하고 socket 은 정말 양방향으로 필요할때만 구현하고 있는걸까요 ??

3000번 포트가 사용중이라고 에러가 나와서 main에서 3001 번으로 바꿔서 사용중 입니다. 코딩을 그대로 진행했고 포스트맨에서 /users [post] 하여Body에서 잘 입력하여  { "nickname": "study", "email": "study@naver.com", "password": "123123", "id": 10, "role": "USER"}로 출력이 됩니다. 그대로 GET 방식으로http://localhost:3001/users 를 입력했는데[] 만 출력이 되고 여태 저장한 값들이 나오지가 않습니다. 오른쪽 위에는 초록색으로 200 OK 로 나옵니다..왜그런걸까요?  

setInterval() 으로 1초가 계속 증가하는건 입력했는데 stop 버튼을 누르면 증가하는 숫자가 멈추게 하는 부분이 도저히 해결이 되지 않습니다. 익명함수로 풀이 하는건 해결을 했는데 이걸 전부 일반함수로 풀이 하는 법을 모르겠어요

import React from 'react'; import Counter from './components/Counter'; // Counter 컴포넌트의 경로를 정확히 입력 function App() { return ( <> <Counter /> </> ); } export default App; 이런 오류가 뜹니다 버전이 달라서일까요?노드는 최신버전을 쓰고있습니다.

선생님 안녕하세요.아래 코드에서 궁금한 점이 있습니다.function user(_name) { var _logged = true; return { get name() { return _name }, set name(v) { _name = v }, login() { _logged = true }, logout() { _logged = false }, get status() { return _logged ? 'login' : 'logout'; } }}var roy = user('재남');[질문 ①]제가 알기로 return 문은 하나의 객체만 리턴할 수 있는 걸로 알고 있습니다. 따라서 return { } 안에 있는 get, set, login, logout 함수들을 임의의 주소값 100번지에 담아서 리턴한다고 생각해도 될까요?[질문 ②] 위와 같은 문법을 객체 리터럴 반환이라고 부르나요?[질문 ③] 만약 return문 안에 있는 get, set, login, logout 함수들을 넣지 않고 동일한 동작을 하는 함수를 만든다면 어떻게 코드를 작성할까?.... 문법이 이상해서 잘 이해가 되지 않아서 질문드립니다.

소스를 저장 후 라이브서버까지 켜서 개발자도구에 들어가보니 어떤소스에서는 Vue탭이 뜨고 어떤탭에서는 Vue탭이 안뜨고 있는데 혹시 이유를 아실까요?

안녕하세요 간단한 질문 하나 하겠습니다.단순하게 궁금증이 생겨서요엑세스토큰이 만료되었을때 서버에서 401을 반환하고클라이언트에서는 코드가 401일때 리프레쉬토큰으로 엑세스토큰을 재발급 받고 다시 요청을 보낸다 까지는 이해가 가는데,리프레쉬로 리프레쉬토큰을 발급받는 것은 어떤상황에 사용하는지 감이 안잡혀서 질문드립니다.

안녕하세요. 소플님. 강의 정말 잘 듣고 있습니다.컴포넌트 합성과 추출에서 props에 관련하여 질문이 있어 질문을 드립니다.// Component 추출 전 function Comment(props){ return ( <div className = "comment"> <div className = "user-info"> <img className = "avatar" src = {props.author.avatarUrl}, alt = {props.author.name} /> <div className = "user-info-name"> {props.author.name} </div> </div> <div className = "comment-text"> {props.text} </div> <div className = "comment-date"> {formatDate(props.date)} </div> </div> ); }첫 코드가 Component를 추출하기 전의 코드이고/* Component 추출 후 */ // 1. Avatar Component 추출 function Avatar(props){ return( <img className = "avatar" src = {props.user.avatarUrl}, alt = {props.user.name} {/* 재사용성을 측면을 높이기 위해 보편적인 단어인 user를 사용 */} /> ); } // 2. UserInfoName Component 추출 function UserInfoName(props){ return( <div className = "user-info-name"> {props.user.name} </div> ); } // 3. UserInfo 추출하기 function UserInfo(props){ return( <div className = "user-info"> {/* 이미 추출한 Avatar Component도 적용 */} <Avatar user = {props.user} /> {/* 이미 추출한 UserInfoName Component도 적용 */} <UserInfoName user = {props.user}/> </div> ); } // 4. CommentText 추출하기 function CommentText(props){ return( <div className = "comment-text"> {props.text} </div> ); } // 5. CommentDate 추출하기 function CommentDate(props){ return( <div className = "comment-date"> {formatDate(props.date)} </div> ); } // 6. 추출한 Component들로 Comment 재합성 function Comment(props){ return( <div className = "comment"> <UserInfo user = {props.user}/> <CommentText text = {props.text}/> <CommentDate date = {props.date}/> </div> ); }이 코드가 강의에서 작성해주신 코드를 제 나름대로 완성한 컴포넌트를 추출한 형태입니다.userData가 아래의 형태라고 가정하겠습니다.const commentData = { user: { avatarUrl: "https://example.com/avatar.jpg", // 아바타 이미지 URL name: "Soaple" // 사용자 이름 }, text: "안녕 리액트!", date: new Date() // 댓글 작성 날짜 };처음 Comment Component에 Props로는 CommentData 자체가 전달될 것이고, 그 다음 UserInfo의 props로는 props.user, 여기서는 아래의 commentData.user가 전달이 되는 것까지는 논리적 흐름대로 이해를 했습니다. // UserInfo가 받은 props(commentData.user) user: { avatarUrl: "https://example.com/avatar.jpg", name: "Soaple" } 그런데 Avatar의 props로는 props.user가 전달되어야 하는데 그렇게 되면 Avatar에 전달하는 props가 commentData.user.user가 되어 전달할 수 없지 않나요? UserInfoName도 commentData.user.user가 되어 이상하다는 생각이 드는데... chatGPT나 뤼튼과 AI에 물어봐도 이상이 없는 정상 코드라는 답변을 받았습니다. React에서 props가 굉장히 중요하다고 강조하신 만큼 이 부분은 꼭 집고 넘어가야겠다는 생각이 듭니다. 답변 부탁드립니다!

강의 내용 pdf가 제공되나요?

인텔리센스 단축키 (Intellisense shortcut)¶https://stackoverflow.com/questions/51341555/visualcode-shortcut-to-display-autocomplete-list-before-typing-in-macos인텔리센스 사용시 한영 전환(ctrl + space)와 스팟라이트(cmd + space) 단축키와 충돌이 발생하므로 (option + esc) 조합을 사용합니다.메인 메뉴 Code > Preferences > Keyboard Shortcuts (cmd + K, cmd + S)에서 단축키(Trigger Suggest)를 (ctrl + .)로 변경할 수 있습니다.

동일한 폴더 내에 있는 파일 중 style.scss만 css로 컴파일 하고 싶습니다하단의 Watch Sass 클릭하여 컴파일 진행시 style.scss 뿐 아니라 common.scss도 동시에 css로 컴파일 되어 방법을 찾다 문의 남깁니다 하나의 파일만 컴파일 가능한지 궁금합니다

- 본 강의 영상 학습 관련 문의에 대해 답변을 드립니다. (어떤 챕터 몇분 몇초를 꼭 기재부탁드립니다)- 이외의 문의등은 평생강의이므로 양해를 부탁드립니다- 현업과 병행하는 관계로 주말/휴가 제외 최대한 3일내로 답변을 드리려 노력하고 있습니다- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.강의 영상에서 알려주신 사이트인데, 자료에서는 서비스 종료로 유사 사이트 안내 되어 있었어요. 제가 궁금해서 구글에서 'properties for the flex container' 로 검색해서 이미지탭에서 발견하여서 링크 공유드립니다. https://codepen.io/osublake/pen/dMLQJr항상 좋은 자료 제공해주시는 강사님 감사합니다~~

안녕하세요 선생님.useNavigate 질문이 있습니다.새 일기쓰기 페이지에서 '취소하기'를 누르면 뒤로 돌아갈때 nav(-1)을 쓰셨는데 사실 nav(-1)도 할 수 있지만 nav('/')를 할 수도 있는데 성능상의 차이가 있을까요?? 반응 이라던지 좀 더 큰 프로젝트라면 어떤걸 쓰는게 안전하다던지 하는 차이가 있는지 궁금합니다. 감사합니다

Azure Function의 메인 파일은 function_app.py이어야 하나요?

다름은 아니고 vue2.7 버젼을 사용하고 있습니다. 오늘 실무에서 업무를 진행하다. 한가지 의구심이 들어서 질문을 여쭈고자 합니다.부모 에서 ref 반응형 데이터가 존재하는데 이 반응형 데이터를 바로 아래 자식으로 props를 넘겨주었고 이 넘긴 props를 watch를 사용해서 변화가 있을때 어떤 로직을 처리하겠다.로 구현을 했습니다. 구현과정에서 컴포넌트를 나눌 필요가 생겨서 자식안에 자식을 하나 더 만들고 최상위 부모로 부터 받은 props를 그 최하위 자식에게 전달 후 최하위 자식에서 watch를 통해 어떤 로직을 처리하겠다. 로 구현을 했을때 최하위 자식에서 watch가 정상적으로 props의 변화를 인지 하지 못하는 이슈가 있었습니다. 하지만 해당 props값을 렌더링 했을때는 최하위 자식에서도 정상적으로 변했습니다. 결국 최하위 자식에서 deep과 immediate 옵션을 설정해 해결했는데 왜 이런식으로 동작했는지 검색을해도 나오지 않아서 궁금해서 여쭙고자 합니다. 여기서 ref 데이터 타입은 object이고 초기값은 null 입니다. 추가적으로 최하위 자식은 항상 렌더링 되는것이 아닌 v-if v-else가 걸려있습니다.