[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
코팩님 강의를 따라서 코드를 작성했는데, 강의 영상을 봐도 BasicTokenGuard 에서 AuthService 를 주입 못 하는 이유를 모르겠어요.. AuthModule에가 가서 imports이랑 provider에 BasicTokenGuard를 넣어도 해결되지 않네여.. 가드의 위치는 강의랑 똑같이 auth/guard 폴더 안에 위치하고 있어요.. 원인이 대체 뭘까요..?
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
현재 Auth module에 있는 AccessTokenGuard 등을 보면 만약 어떤 사용자가 로그인했을 때 그 form에 있는 정보를 email:password로 받고 그것을 인코딩하여 서버로 전달하는 방식일텐데 결국 요청시에 base64로 잘 인코딩을 하여 보냈음에도 결국 Guard를 통과하면 req.user = user로 user에 대한 정보를 요청에 담은 후에 요청을 보내는 방식인 것 같은데 이러면 결국 요청에 user에 대한 정보가 담겨지는 것이고 이러면 보안상 문제가 생기는 것 아닌가요?
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
현 강의에서 postPost에 UserGuard를 하기 위해 posts.module.ts에 UsersModule, AuthModule을 import해주었는데 이 UsersModule은 AuthModule에서 사용하기 때문에 import를 해줘야하는건가요? 그리고 실제로 깃헙에선 AuthModule에서 AuthService를 export했는데 postPost 매서드에서 사용하는 것은 AuthService가 아닌 auth 모듈의 guard 폴더 안에 있는 ts 파일인데 왜 AuthService를 export하는건가요?
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는 요소들을 한줄에 배치하기 위해서 사용 하는데 여기선 요소가 다음 줄 까지 덮도록 쓰여진것 같아 좀 헷갈립니다.
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
socket 은 현업에서 사용해본적이 거의 없다가 개념만 이해하고 이번에 다시 강의로 공부를 하고있습니다. 실제로 사용하게 된다면 조금 더 정리하는게 다가올것같긴한데 그러면 socket.io 로 모든 요청과 응답을 구현해도 될것같은데 ? 라는 생각을 했습니다. 아니면 비용적인 측면때문에 rest api 로 요청때마다 응답을 보내도록하고 socket 은 정말 양방향으로 필요할때만 구현하고 있는걸까요 ??
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
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 로 나옵니다.. 왜그런걸까요?
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 함수들을 넣지 않고 동일한 동작을 하는 함수를 만든다면 어떻게 코드를 작성할까?.... 문법이 이상해서 잘 이해가 되지 않아서 질문드립니다.
안녕하세요. 소플님. 강의 정말 잘 듣고 있습니다. 컴포넌트 합성과 추출에서 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가 굉장히 중요하다고 강조하신 만큼 이 부분은 꼭 집고 넘어가야겠다는 생각이 듭니다. 답변 부탁드립니다!
동일한 폴더 내에 있는 파일 중 style.scss만 css로 컴파일 하고 싶습니다 하단의 Watch Sass 클릭하여 컴파일 진행시 style.scss 뿐 아니라 common.scss도 동시에 css로 컴파일 되어 방법을 찾다 문의 남깁니다 하나의 파일만 컴파일 가능한지 궁금합니다
