묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결처음 만난 리액트(React)
npm install을 하면 취약점 문제가 뜹니다.
npm install --save styled-componentsup to date, audited 1782 packages in 5s117 packages are looking for funding run npm fund for details131 vulnerabilities (1 low, 104 moderate, 22 high, 4 critical)To address issues that do not require attention, run: npm audit fixTo address all issues (including breaking changes), run: npm audit fix --forceRun npm audit for details.라고 뜨면서 안되는데 어떻게 해결하나요..?ㅜ
-
미해결[JS] Phaser 게임 제작 - 뱀파이어 서바이벌 클론
npm start 에러나와 문의드립니다.
https://github.com/photonstorm/phaser3-project-template 위 url로 이동해서 다운받았는데 아무래도 지난주에 소스가 수정된 것 같습니다. 다운 후 npm start 시 에러가 발생합니다. 어떻게 해야 할까요?url도 다른 소스로 이동하는 것 같습니다. - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
미해결제주코딩베이스캠프 Code Festival: JavaScript 100제
71번 깊이 우선 탐색 질문드립니다.
안녕하세요. 71번 문제의 출력엔 E D F A C B로 되어 있습니다. 그 앞에 깊이 우선 탐색을 그림으로 해설 하실때에도 E D F A C B로 설명해주시는데 하지만 정답 코드로는 E A B C D F 로 나오는데 해설에는 단지 출발 방향만 다르지 같다고 하시는데 이해가 되질 않아 문의드립니다.
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
@IsPublic 어노테이션으로 RefreshTokenGuard에서 RefreshToken 검증을 하기 위한 코드 공유
// is-public.const.ts export enum IsPublicEnum { ISPUBLIC = 'ISPUBLIC', ISREFRESHTOKEN = 'ISREFRESHTOKEN', }// is-public.decorator.ts import { SetMetadata } from '@nestjs/common'; import { IsPublicEnum } from '../const/is-public.const'; export const ISPUBLIC_KEY = 'is_public'; export const IsPublic = (status: IsPublicEnum) => SetMetadata(ISPUBLIC_KEY, status);// bearer-token.guard.ts @Injectable() export class BearerTokenGuard implements CanActivate { constructor( private readonly authService: AuthService, private readonly usersService: UsersService, public readonly reflector: Reflector, ) {} async canActivate(context: ExecutionContext): Promise<boolean> { const req = context.switchToHttp().getRequest(); const requiredPublic = this.reflector.getAllAndOverride(ISPUBLIC_KEY, [ context.getHandler(), context.getClass, ]); if (requiredPublic) { req.requiredPublic = requiredPublic; } if (requiredPublic === IsPublicEnum.ISPUBLIC) { return true; } const rawToken = req.headers['authorization']; if (!rawToken) throw new UnauthorizedException('토큰이 없습니다!'); const token = this.authService.extractTokenFromHeader(rawToken, true); const result = await this.authService.verifyToken(token); const user = await this.usersService.getUserByEmail(result.email); req.user = user; req.token = token; req.tokenType = result.type; return true; } }추가된 코드if (requiredPublic) { req.requiredPublic = requiredPublic; }requiredPublic 있을때만 req에 담아줌.추가된 코드if (requiredPublic === IsPublicEnum.ISPUBLIC) { return true; }IsPublic일때만 return true 즉, ISREFRESHTOKEN 일때는 아래 로직들이 정상적으로 실행됨.// bearer-token.guard.ts @Injectable() export class AccessTokenGuard extends BearerTokenGuard { async canActivate(context: ExecutionContext): Promise<boolean> { await super.canActivate(context); const req = context.switchToHttp().getRequest(); if ( req.requiredPublic === IsPublicEnum.ISPUBLIC || IsPublicEnum.ISREFRESHTOKEN ) { return true; } if (req.tokenType !== 'access') { throw new UnauthorizedException('Access Token이 아닙니다.'); } return true; } }추가된 코드if (req.requiredPublic === IsPublicEnum.ISPUBLIC || IsPublicEnum.ISREFRESHTOKEN) { return true; }req.requiredPublic이 ISPUBLIC이거나 ISREFRESHTOKEN이면 return true로 global accessTokenGuard return true로 빠져나옴.// bearer-token-guard.ts @Injectable() export class RefreshTokenGuard extends BearerTokenGuard { async canActivate(context: ExecutionContext): Promise<boolean> { await super.canActivate(context); const req = context.switchToHttp().getRequest(); if (req.tokenType !== 'refresh') { throw new UnauthorizedException('Refresh Token이 아닙니다.'); } return true; } }변경 사항 없음. 왜냐하면 위에서 정상적으로 refreshToken을 verify하고 req에 값이 담겼기 때문에 RefreshTokenGuard가 정상적으로 실행 되어야함. auth.controller에 적용하기@Controller('auth') export class AuthController { constructor(private readonly authService: AuthService) {} @IsPublic(IsPublicEnum.ISREFRESHTOKEN) @Post('token/access') @UseGuards(RefreshTokenGuard) postTokenAccess(@Headers('authorization') rawToken: string) { ... } @IsPublic(IsPublicEnum.ISREFRESHTOKEN) @Post('token/refresh') @UseGuards(RefreshTokenGuard) postTokenRefresh(@Headers('authorization') rawToken: string) { ... } @IsPublic(IsPublicEnum.ISPUBLIC) @Post('login/email') @UseGuards(BasicTokenGuard) postLoginEmail(@Headers('authorization') rawToken: string) { ... } @IsPublic(IsPublicEnum.ISPUBLIC) @Post('register/email') postRegisterEmail(@Body() body: RegisterUserDto) { ... } }
-
해결됨Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
깃헙 권한 요청드립니다.
- 인프런 아이디: sju02135@hanmail.net- 인프런 이메일: sju02135@hanmail.net- 깃허브 아이디: sju02135@hanmail.net- 깃허브 username: minsung1129
-
미해결입문자를 위한 자바스크립트 기초 강의
생성자 함수 관련 질문 드립니다
생성자 함수로 객체를 생성하기 위해선, new연산을 통해 객체를 반환해야한다고 하셨는데, 객체를 반환을 해야 객체가 생성이 되는건가요? 아니면 객체가 생성이 되고 반환이 되는건가요? 생성과 반환이라는 개념이 약간 헷갈리는 것 같습니다. Date() 는 함수인가요? 객체인가요? 그냥 생성자 함수를 반환하는 것과 생성자 함수로 객체를 생성해서 반환하는 것의 어떤 차이가 있나요? 아직 제 눈에는 둘이 비슷해보여서요.. 함수를 반환하는 것과 객체를 반환하는 것의 목적이 많이 다른건지 설명해주시면 정말 감사하겠습니다.. Dog 함수를 콘솔로 출력시,console.log(Dog)--> Dog 함수를 반환new 연산 + Dog 함수호출문을 콘솔로 출력시,console.log(new Dog())--> Dog 객체 반환
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
별거 아니긴 한데 nest-cli 로 만들때
nest cli로 resource 만들때 경로를 / 넣어주면 아래에 바로 생성 됩니다.nest g resource posts/comments이렇게 하면 posts폴더 아래에 comments가 생깁니다!
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
가드와 미들웨어 질문드립니다.
안녕하세요.,강의 잘 보고있습니다. 가드랑 미들웨어 용도를 이렇게 이해하면 좋을까요? 1.가드:-특정 컨트롤러로 들어온 파라매터, 혹은 context데이터를 가공하거나 검증하고 싶을때 2.미들웨어:-특정 규칙을 가진 패쓰 혹은 컨트롤러 전체에 데이터를 검증하고 싶을때 아주 맨 처음에 저는 token 을 검증하는 BearerTokenGuard이 가드보다는 middleware 로 가는것이 맞지 않나 싶었는데요.context.user 데이터를 controller 에 내려주기 위해IsCommentMine Guard 처럼 다른 가드로 유저데이터를 넘겨줘야하는 경우가 있어서가드로 사용하는것으로 이해했는데 맞을까요?(그리고 middleware 로는 불가능한걸까요?)
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
update comment 관련
안녕하세요.update comment 관련 두가지 질문이 있습니다.update(patch) 에서는 query runner를사용하지 않아도 되나요?update 시에repository.update 가 아닌 save 를 사용한 이유가 있을까요?항상 강의 잘 보고있습니다.감사합니다!
-
미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
섹션5의 2번째 강의 질문-setMap 비동기 처리 이유
제가 이해한 바가 맞는지 질문드립니다.질문1. 마커를 찍을 시: 1. 주소를 좌표로 변환 2. 해당 좌표를 마커로 지도에 표시의 처리 순서가 보장되어야 하므로, async await를 이용한 비동기처리를 해준 것이 맞나요?질문 2. 비동기처리를 해주기 전에도 마커는 잘 찍혔는데, 그 말은 즉 주소를 좌표로 변환하고-> 좌표를 마커로 표시하는 순서로 코드가 실행되었다는 것 아닌가요? 그렇다면 api가 비동기적으로 이루어진다는 말이 잘 와닿지 않아서 질문드립니다.감사합니다!
-
해결됨Vue 3 시작하기
파일이름을 소문자로시작하는건 어떤경우인가요
파일이름을 소문자로 시작해서 하는건 상관없는건가요?그리고 컴포넌트를 가져올때 상대경로로 보통 가져오신다고했는데 다른폴더에있는 컴포넌트를 가져올때 ../ 이런식으로도 찾는게 맞나요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
새로고침을 하면 작성한 일기가 사라집니다
안녕하세요 새로고침을 하면 작성한 일기가 사라집니다 그런데 뒤로가기나 달을 바꾸면 다시 나옵니다 어디가 잘못됐는지 잘 모르겠습니다.... 부탁드립니다 찾아주세요ㅠㅠhttps://codesandbox.io/p/github/jeain/Diary/main?workspaceId=6483b4dd-e9cf-44d0-9814-c78d2f8b83b4
-
해결됨처음 만난 리액트(React)
컴포넌트 렌더링 과정이 궁금합니다.
안녕하세요 선생님 Char 7 실습 코드를 localhost:3000 포트에서 처음 랜더링 했을 때 그림과 같이 useEffect() 각각 2번씩 (총4번)호출되어 질문드립니다. 코드는 다음과 같습니다. 각각 1번씩 호출되지 않고 2번씩 호출되는 이유가 뭘까요.. ㅠ import React, {useState, useEffect} from "react"; import useCounter from "./useCounter"; const MAX_CAPACITY = 10; function Accommodate(props){ const [isFull, setIsFull] = useState(false); const [count, increaseCount, decreaseCount] = useCounter(0); useEffect(() => { console.log("============"); console.log("useEffect() is called."); console.log(`isFull : ${isFull}`); }); useEffect(() => { setIsFull(count >= MAX_CAPACITY); console.log(`Current count value: ${count}`); }, [count]); return ( <div style={{padding : 16}}> <p>{`총 ${count}명 수용했습니다.`}</p> <button onClick={increaseCount} disabled={isFull}> 입장 </button> <button onClick={decreaseCount}> 퇴장 </button> {isFull && <p style={{color: "red"}}>정원이 가득찼습니다.</p>} </div> ) } export default Accommodate;
-
해결됨[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
docker-compose up 후에 터미널엔 연결 됐다고 떴는데 postgres-data 폴더에 아무것도 들어와 있지 않아요
다 맞게 잘 한 거 같은데 뭐가 문제인 지 모르겠습니다ㅜㅜ
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
섹션5의 Post 요청 만들기에서 질문있습니다.
안녕하세요.섹션5의 Post 요청 만들기 영상을 보다가 궁금증이 생겨 질문드립니다. Q1)새로운 post 생성시 id를 부여할 때배열의 마지막 인덱스 아이템을 꺼내해당 아이템의 id에 1을 더하셨습니다.그런데 배열 안의 아이템 순서가 꼭 id-오름차순으로 정렬되어있을거란 보장이 없기 때문에배열에서 가장 큰 id를 찾은 후, +1을 하여 새로운 id를 부여해줘야하지 않을까 싶은데 제가 잘못 생각하고 있는걸까요? Q2)새로운 post를 기존 배열에 push하지 않고,spread 방식으로 추가해주셨는데특별한 이유가 있는건지도 궁금합니다!
-
해결됨[코드캠프] 시작은 프리캠프
Fiama 링크 찾기
피그마 링크는 인프런 강의실 하단에 (강의실에서 아래로 스크롤)수업자료로 가는 노션링크가 있고, 노션에 피그마로 넘어가는 링크가 있습니다.라고 안내를 받았습니다.그런데 인프런 강의실은 어느 화면을 이야기 하는지요?동영상 강의를 보고 있는데 어디를 찾아가야 하는지 모르겠습니다.세션별 학습 자료 이미지를 보내 주셨는데이런 자료를 찾을 수가 없습니다.자세한 그리고 쉬운 설명을 부탁 드릴께요.
-
미해결자바스크립트 : 기초부터 실전까지 올인원
투두리스트 과제 힌트 좀 주세요 ㅠ
투두리스트 마지막에서 과제로 내주신'끝남' 에서 Delete 버튼을 눌렀을 경우 삭제가 안되는거 어디를 봐야하는건지 모르겠어요 ㅠㅠ
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
Transform이 적용이 안됩니다.
Transform을 적용해도 path값에 public/posts값이 붙지 않은 채로 계속 나옵니다.main.ts파일에 위와 같이 적용을 해도 안되는데 혹시 원인을 알 수 있나요?
-
해결됨React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)
마크다운 이미지가 잘 작동안합니다.
제시해주신 방식대로는 마크다운으로 작성하는 이미지가 링크를 작성하기까지만 하고 나오지 않는 경우가 대부분입니다. 이유는 모르겠네요. 잠깐 나왔었는데.. 또 안나옵니다. 이유가 있을까요. 조건과 지시를 다양하게 걸었더니 제대로 답변을 못하네요. ^^; 특히 일기를 제멋대로 쓰는 부분이 있습니다. 어떤때는 내가쓴것처럼 잘 쓰는데 어떤때는 제멋대로 씁니다. ㅎㅎ 그래도 이런 시도를 해볼수 있어서 좋습니다.
-
해결됨실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
testing api 아이콘(비커)이 뜨지 않습니다.
강의에서 진행하는 브랜치와 동일한 브랜치에서 진행하고 있습니다.의존성 설치도 모두 진행하였고 vitest도 설치했으며 node 버전도 일치합니다.테스트 코드 작성 완료 후에 이 아이콘을 찾아봤는데 도저히 보이질 않습니다.Github 이슈와 stackoverflow 모두 찾아보면서 해답이 될 만한 내용들을 따라해보았으나 위 아이콘은 도저히 찾을 수 없었습니다.혹시 따로 설정을 하신 건가요??