묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
postman socket io enter_chat
안녕하세요 ㅎ 정상적으로는..동작하는것 같은데 사진처럼 초록색으로 response enter_chat 값이 나오는게 아니라빨간색으로 enter_chat 이 나옵니다.이유가 뭘까요 ?? User 1 /chats -> enter_chat 으로 1번방과 2번방에 들어가고User 2 /chats -> enter_chat 2번User 3 /chats -> enter_chat 1번 이후 send_message 로 1번방에만 message 전달하게 되면User 1/chats , User 3/chats 만 제대로 받아지고 정상적으로 테스트가 됩니다.하지만 강사님과 다르게 저는 enter_chat 에 들어갈때 위 사진과 같이 빨간색이 나오는데 이유가 뭘까요 ?? ㅎㅎ
-
미해결부트스트랩 5(Bootstrap 5) - 기초부터 웹 프로젝트 만들기
부트스트랩 + *.css 함께 사용하는 이유와 분리 기준이 궁금합니다.
안녕하세요. 현재 강의 중 프로젝트 1 단계를 진행중에 궁금점이 생겨 질문 드립니다.index.html 파일 디자인에 부트스트랩 만으로 작업 하지 않고 순수 css 를 함께 이용하시는데요.분류 원칙이 따로 있으신가요? 예를 들면 section 요소에 배경이미지는 *. css 파일에 position : relative, position : absolute 처리도 *.css 에서 처리를 하시네요.
-
해결됨Amazing JavaScript - 입문
코드샌드박스에 들어갔는데 잠금표시가 되어있습니다.
잠금표시가 되어있어 새로운 파일을 생성할 수 없습니다. 강의를 보면서 따라하고싶은데 방법이 있을까요?
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
Token 재발급 관련 궁금증
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요!강의를 잘 듣던 중 궁금한 점이 생겨 질문드립니다. 해당 강의대로 진행하면 access token과 refresh token 모두 만료 전에 재발급받아 token을 연장시키는 개념으로 이해가 됩니다.그러나 각 token의 만료 시간인 300초, 3600초가 지나지 않은 상태에서 token을 재발급하게 되면 1개의 계정에 다수의 token이 존재할 수 있는 상황이 될 수 있다고 생각됩니다.(예를 들어 만료가 3000초 남은 refresh token으로 refresh token을 재발급하게 되면 3000초 남은 refresh token과 3600초 남은 새로운 refresh token 2개가 존재하게 됩니다.) 그래서 궁금한 점은 아래 두가지입니다.실제 production 환경에서도 이렇게 다수의 token이 존재할 가능성을 가지고 있는지.다수의 refresh token이 존재했을때 만약 해당 refresh token이 한번 탈취 당하면 계속해서 만료전에 갱신이 가능해지는 상황인데 이에 대한 대처방법이 따로 있는것인지.(개인적인 생각으로는 user 데이터베이스에 refresh token만 따로 저장하여 유효성 검사를 진행하는 방안도 있을 것 같습니다.)
-
해결됨처음 만난 리액트(React)
Custom Hook에 관해 질문이 있습니다!
안녕하세요. 소플님.Custom Hook에 대해서 질문이 있어 글을 남깁니다.import {useState, useEffect} from 'react'; // 커스텀 훅 function useUserStatus(userId){ const [isOnline, setIsOnline] = useState(null); useEffect(() =>{ function handleStatusChange(status){ setIsOnline(status.isOnline); } ServerAPI.subscribeUserStatus(userId, handleStatusChange); return () =>{ ServerAPI.unsubscribeUserStatus(userId, handleStatusChange); } }); return isOnline; }function UserStatus(props){ // 중복된 로직을 custom hook으로 추출하고 호출하여 간편하게 사용 const isOnline = useUserStatus(props.user.id); if (isOnline == null) return "대기중..."; return isOnline ? '온라인' : '오프라인'; } function UserListItems(props){ // 중복된 로직을 custom hook으로 추출하고 호출하여 간편하게 사용 const isOnline = useUserStatus(props.user.id); return ( <li style={{color: isOnline ? 'green':'black'}} > {props.user.name} </li> ); }위 방식은 강의 내용대로 중복된 로직을 추출하여 Custom Hook을 만들고 함수 컴포넌트 내에서 호출하여 사용하는 방식입니다. 강의 내에서 " 여러 개의 컴포넌트에서 하나의 공통된 Custom Hook을 사용할 때 컴포넌트 내부에 있는 모든 state와 effects는 전부 분리되어 있다." 라고 말씀하셨는데 Custom Hook도 본질은 JS함수이기에 함수의 선언의 parameter와 사용의 argument는 다른 것과 같기 때문으로 이해해도 될까요? 좋은 리액트 강의 감사합니다. 꼭 완강하겠습니다!
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
chatsModel
chatsModel 에 @Entity() export class ChatsModel extends BaseModel { @ManyToMany(() => UsersModel, (user) => user.chats) users: UsersModel[]; @OneToMany(() => MessagesModel, (message) => message.chat) messages: MessagesModel; } 위처럼 적혀있는데one to many 라서 저부분 list 로 하지 않아도 되나요 ??
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
Nestjs의 라이프 사이클 관련 질문입니다.
한참 재미있게 배우고 있습니다!. Guard부분을 배우고 있는데 Middleware > Guard > Interceptor > Pipe > 로직 이런 순서로 이루어 진다고 하는데, Middleware부터 Pipe까지통으로 Express의 Middleware 에서 구현 가능한 하나의 기능과 유사하다고 생각되는데Nestjs에서는 Express의 middleware에서 하던 기능 중 유용하고, 자주 쓰이는 등의 로직을 저렇게 세분화 해서 더 유연하게 사용될 수 있도록 제공 하며 OOP의 장점을 살렸다?? 정도로 이해 해도 될까요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
배포후 다이어리, 수정페이지 새로고침시 404에러
안녕하세요,로컬에서는 새로고침 하여도 페이지가 정상적으로 보여지는데배포후에는 다이어리, 수정페이지 새로고침시 404에러가 뜹니다. isLoading(false) 코드도 잘 작성한것 같은데 뭐가 문제인지 모르겠네요ㅠㅠ 깃허브 :https://github.com/jw118g/ONE-BITE-REACTvercel :https://emotion-diary-woad.vercel.app/
-
미해결처음 만난 리액트(React)
바인딩 시점에 대한 질문입니다
위 소스에서 질문입니다.생성자에서 this.handleClick 에 값을 대입할때 handleClick 함수가 정의되지않은 상태인데 어떻게 접근하는건지 궁금합니다 !
-
해결됨[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
common.service.ts-composeFindOptions
private composeFindOptions<T extends BaseModel>( dto: BasePaginationDto, ): FindManyOptions<T> { /** * where, order, take, skip 반환 * skip-> page based pagination에서만 */ /** * DTO의 현재 생긴 구조는 아래와 같다. * * { * where__id__more_than: 1, * order__createdAt: 'ASC, * } * * 현재는 where__id__more_than / where__id__less_than에 해당하는 where 필터만 사용중이지만 * 나중에 추가적인 where 필터를 넣고싶어졌을 때 모든 where 필터를 자동으로 파싱할 수 있을만한 기능이 * 필요하다.. * * 1) where로 시작한다면 필터 로직을 적용 * 2) order로 시작한다면 정렬 로직을 정용한다. * 3) 필터 로직을 적용한다면 '__' 기준으로 split 했을 때 3개의 값으로 나뉘는지 2개인지 확인한다. * 3-1) 3개의 값으로 나뉜다면 FILTER_MAPPER에서 해당되는 operator 함수를 찾아서 적용한다. * ex) ['where', 'id', 'more_than'] -> more_than을 실제 typeorm-operator로 적용 * 3-2) 2개의 값으로 나뉜다면 정확한 값을 필터하는 것이기 때문에 operator 없이 적용한다. * ex) ['order', 'createdAt'] -> operator 필요 X * 4) order의 경우 3-2와 같이 적용한다. */ let where: FindOptionsWhere<T> = {}; let order: FindOptionsOrder<T> = {}; for (const [key, value] of Object.entries(dto)) { if (key.startsWith('where__')) { where = { ...where, ...this.parseWhereFilter(key, value), }; } else if (key.startsWith('order__')) { order = { ...order, ...this.parseWhereFilter(key, value), }; } } return { where, order, take: dto.take, skip: dto.page ? dto.take * (dto.page - 1) : null, }; }여기서 함수가 실행되면 where, order은 빈 객체로 초기화 되는데 왜 for 문 안에선 ...where, ...order을 해주는건가요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Vite 에서 리액트 앱 생성시 Select a variant: 타입스크립트 선택
안녕하세요 선생님강의 잘 보고 있습니다. 다름이 아니라, 리액트 앱 생성시Vite에서 프레임 워크: React 생성후자바스크립트가 아닌 타입스크립트로 생성해도 강의를 수강하는데는 문제가 없는지 알고 싶습니다..!
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
postgres connection 관련 질문입니다 !
지금 섹션 10?? 정도 듣고 있는데docker-compose.yaml 파일 작성 하고TypeOrmModule imports 해서 연결 하는 중인데궁금한게강의를 듣는 로컬 컴퓨터에도 postgres가설치되어 있어야 하나요??영상에는 설치에 대한 부분이 없던것 같아서요typeorm module 연결 하는 부분에서 database가 존재하지 않는다고 하는데 1번이 맞다면 postgres에서 db를 직접 만들어 준 다음에 typeormmodule 연결 해야 할까요?? << 이게 맞다면 영상이 누락된건가요?ㅠ마침 pgadmin이 깔려 있고 postgres 14버전에마침 postgres 라는 이름을 가진 db가 존재 해서섹션9 POSTGRES_DB: postgres 실습 까지는 마친것 같은데다음섹션에서 typeormstudy쪽은 이상하게 진행이 안되더라구요...연구 결과도커 컴포즈 파일의 ports 5432:5432중 앞의 포트는로컬 컴퓨터의 포트이다.로컬 컴퓨터에 postgres가 설치되어 있지 않다면 강의 영상처럼 따라하면 된다.로컬 컴퓨터에 postgres가 설치되어 있다면 로컬 5432 포트를 postgres가 사용 중일 것이다.3번이라면 5432 외의 다른 포트를 활용해 진행 하는 방법이 있고, postgres 설치 과정이 기억 난다면 app.module에서 typeorm 초기화 할때 설치하며 세팅했던 dbname, user, pwd 입력해 연결하면 된다.끗5432 포트 정보 확인 $ lsof -i tcp:5432// mac기준 윈도우는 검색... ```
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
consol.log설정
안녕하세요 선생님 제가 설정이 뭔가 틀어졌는지consol.log하면 선생님처럼 console창이 안뜨고이렇게 뜨는데 어떻게 해결할 수 있는 방법이 없을까요? 선생님처럼 콘솔창이 떴으면 좋겠습니다.
-
미해결인터랙티브 웹 개발 제대로 시작하기
3d 뒤집기 추가효과
지금 카드를 3d로 뒤집는데 그냥 뒤집히는게아니라카드의 뒷면이 무엇인지 왼쪽아래나 왼쪽면부터 조금씩 뒤집어지는 느낌으로 뒤집기 위해선 animation3에서 이미지를 나눠서 보여준것처럼 효과를 줘야할까요? 그냥 카드가 3d로 휙 뒤집히는게 아닌 책장넘길때처럼 구현하고싶은데 뒷면을 확인할때 긴장감을 주기위해서 혹시 어떤 방법이 있을까요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
2.2)단락 평가 11:28 인수 전달 관련하여 질문드립니다.
안녕하세요, 2.2)단락 평가 11:28 인수 전달 관련하여 질문 드립니다. function printName(person){ const name= person && person.name; // const age = person && person.age; console.log(name || "person의 값이 없습니다.") // console.log(age || "나이를 추정할 수 없습니다.") } printName({name:"이정환"}); 객체 값을 인수로 전달했을 때 name 변수에 인수로 전달받은 객체 값들이 정상적으로 저장되고 콘솔 창을 통해 출력되잖아요. printName함수의 person라는 매개 변수 형식?을 어디에서도 선언, 정의하지 않았는데 객체 타입으로 함수 호출 시 정상 출력되는 점이 혼란스럽습니다. 이전에 학습한 7가지 Truthy 한 값들 중 객체가 속해 있기에 Truthy 가 나오고, 그런 성질을 이용하여 변수에 name : "이정환" 이 저장되어 콘솔창에서 확인 가능한 결과가 나온다고 이해하면 될까요? 친절히 설명해주셔서 감사합니다.
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
테스트코드
강의 너무 잘 보고있습니다. ㅎㅎ혹시 테스트 코드 이번강의에 넣지 않으신 이유가 있나요 ?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
질문드립니다.
<div className="todos_wrapper"> {todos.map((todo) => { return <TodoItem {...todo} />; })} </div>여기서 <TodoItem {...todo} /> <TodoItem todo= {...todo} />두개 차이가 뭘까요 >?import React from "react"; import "../TodoItem.css"; const TodoItem = ({ id, isDone, content, date }) => { return ( <div className="TodoItem"> <input checked={isDone} type="checkbox" /> <div>{id}</div> <div>{content}</div> <div>{isDone}</div> <div>{date}</div> </div> ); }; ({ id, isDone, content, date })여기 {}에 넣는거랑 {}을 뺴고 넣는거랑 차이가 뭔지 모르겠어요..
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
AuthService를 주입 받지 못하는 이유를 모르겠어요
코팩님 강의를 따라서 코드를 작성했는데, 강의 영상을 봐도 BasicTokenGuard에서 AuthService를 주입 못 하는 이유를 모르겠어요.. AuthModule에가 가서 imports이랑 provider에 BasicTokenGuard를 넣어도 해결되지 않네여.. 가드의 위치는 강의랑 똑같이 auth/guard 폴더 안에 위치하고 있어요.. 원인이 대체 뭘까요..?
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
Vue가 인식되지 않는 현상
안녕하세요. 강의 따라서 HelloWorld.vue파일을 브라우저에서 띄워줬을 때vue가 인식되지 않는 현상(Vue.js not detected)이 있는데 왜 그럴까요?
-
해결됨[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
Guard 사용 시 요청과 보안에 대한 질문
현재 Auth module에 있는 AccessTokenGuard 등을 보면 만약 어떤 사용자가 로그인했을 때 그 form에 있는 정보를 email:password로 받고 그것을 인코딩하여 서버로 전달하는 방식일텐데 결국 요청시에 base64로 잘 인코딩을 하여 보냈음에도 결국 Guard를 통과하면 req.user = user로 user에 대한 정보를 요청에 담은 후에 요청을 보내는 방식인 것 같은데 이러면 결국 요청에 user에 대한 정보가 담겨지는 것이고 이러면 보안상 문제가 생기는 것 아닌가요?