*우분투안쓰고 윈도우로 이용중입니다.   질문1.강의자료 보면서 따라하는 중인데요.강의자료에 나온 화면과 다르게 저는 style.thirteen도 없고 삭제부분을 삭제하면오류가 많습니다. 마찬가지로 첫번째 div인 container가 저는 애초에 존재하지않고 <>형식으로 되어있는데따로 타이핑해서 만들어줘야하나요? 질문2:버전: 강의자료에 나온것 외에도 전부 no하는게 맞나요?잘따라가고 있는지 모르겠습니다 ㅠ 질문3:저는 yarn dev를 해서 페이지에 접속하니 컴파일 실패가 뜨네요.. 질문4:혹시나 powershell로 설치한게 문제인건가 싶어서 폴더를 다 삭제하고 재생성후gitBash를 사용해봤는데 yarn설치 명령어가 안먹히네요그리고 powershell에선 먹히던 기본 명령어들이 Gitbash에선 안먹힙니다어디서 부터 잘못된건지 막혀서 진도를 못나가고 있습니다. 도와주십쇼..+ 실무에서 설치할때는 이런일이 발생하지 않으려면 신경써야 하는 것들이어떤게 있을까요?

javascript문서를 확인했을때는 배열을 객체로쓴다던가 함수를 부를수없는곳에 작성했다는등의 오류라고 나와있는데 아무리 찾아봐도 그오류가 어디에서 나오는지 왜나오는지를 알수없어서 질문올립니다.// index.jsimport express from "express"; import { options, dataCoffee, dataUsers } from "./swagger/config.js"; import cors from "cors"; const app = express(); import swaggerUi from "swagger-ui-express"; import swaggerJSDoc from "swagger-jsdoc"; app.use(express.json()); const swaggerSpec = swaggerJSDoc(options); app.use(cors()); app.use("/api-docs", swaggerUi.serve, swaggerUi.setup(swaggerSpec)); app.get("/users", (req, res) => { res.send(dataUsers); }); app.get("/starbucks", function (req, res) { res.send(dataCoffee); }); app.listen(3001); // config.jsexport const options = { definition: { openapi: "3.0.0", info: { title: "swagger-test", version: "1.0.0", }, }, apis: ["./swagger/*-swagger.js"], // files containing annotations as above }; export const dataCoffee = [ { name: "아메리카노", kcal: 5 }, { name: "카푸치노", kcal: 125 }, { name: "헤이즐넛", kcal: 85 }, { name: "카라멜마키아또", kcal: 225 }, { name: "휘핑크림추가", kcal: 115 }, { name: "아메리카노", kcal: 5 }, { name: "아메리카노", kcal: 5 }, { name: "아메리카노", kcal: 5 }, { name: "아메리카노", kcal: 5 }, { name: "아메리카노", kcal: 5 }, { name: "아메리카노", kcal: 5 }, { name: "아메리카노", kcal: 5 }, { name: "아메리카노", kcal: 5 }, { name: "아메리카노", kcal: 5 }, ]; export const dataUsers = [ { email: "aaa@gmail.com", name: "짱구", phone: "010-2293-3333", personal: "222012-2210392", prefer: "https://google.com", }, { email: "aaa@gmail.com", name: "짱구2", phone: "010-2293-3333", personal: "222012-2210392", prefer: "https://google.com", }, { email: "aaa@gmail.com", name: "짱구3", phone: "010-2293-3333", personal: "222012-2210392", prefer: "https://google.com", }, { email: "aaa@gmail.com", name: "짱구4", phone: "010-2293-3333", personal: "222012-2210392", prefer: "https://google.com", }, { email: "aaa@gmail.com", name: "짱구5", phone: "010-2293-3333", personal: "222012-2210392", prefer: "https://google.com", }, { email: "aaa@gmail.com", name: "짱구6", phone: "010-2293-3333", personal: "222012-2210392", prefer: "https://google.com", }, ];// all-swagger.js/** * @swagger * /starbucks: * get: * summary: 커피 * tags: [Coffee] * parameters: * name: String * kcal: int * responses: * 200: * description: 성공 * content: * application/json: * schema: * type: array * items: * properties: * name: * type: String * example: 아메리카노 * kcal: * type: int * example: 5 */ /** * @swagger * /users: * get: * summary: 유저검색 * tags: [Users] * parameters: * name: String * kcal: int * responses: * 200: * description: 성공 * content: * application/json: * schema: * type: array * items: * properties: * name: * type: String * example: 아메리카노 * kcal: * type: int * example: 5 */

다음과 같은 양식으로 남겨주세요.질문을 한 배경 :질문내용 :code sandbox에서 promise 메소드가 실행이 안되네요 ㅠㅠ터미널에서 npm install mysql2 로 설치하고 db에서 데이터 조회도 잘되요근데 createPool 메소드에 체인해서 promise()를 사용하는건 안되네요도와주세요!   

안녕하세요 그랩님! 바로 아래 질문과 같이 axios error가 콘솔창에 뜨는데 포스트맨으로 다른 api 연결 확인 다 되었고 app.use(cors()); 역시 서버의 index.js 에 기재되어 있는데도 여전히 오류가 뜨고 있어 혹시 이런경우엔 어떻게 해결이 가능할지 문의드리고자 합니다!

안녕하세요, jwt토큰을 입력하여 사용자 인가를 받고 싶은데 그 과정에서 계속 오류가 나서 문의드립니다. 제가 확인하기로는 코드도 정확히 입력하고, HTTP HEADERS로 보내주는 토큰도 문제 없어서요. 에러 강의에서 jwt를 넣어주지 않았을 때 발생한다는 에러가 발생합니다. 제가 보기에는 토큰값이 잘못된것 같은데, login으로 받아온 토큰을 바로 넣는거라 만료가 되지도 않았을텐데 해결이 안되네요. 제 코드는 아래와 같습니다. users.resolver.ts// users.resolver.ts import { Args, Int, Mutation, Query, Resolver } from '@nestjs/graphql'; import { User } from './entities/user.entity'; import { UsersService } from './users.service'; import * as bcrypt from 'bcrypt'; import { UseGuards } from '@nestjs/common'; import { GqlAuthAccessGuard } from '../auth/guards/gql-auth.guard'; // import { AuthGuard } from '@nestjs/passport'; // 추가 @Resolver() export class UsersResolver { constructor( private readonly usersService: UsersService, // ) {} @UseGuards(GqlAuthAccessGuard) // 수정 @Query(() => String) fetchUser(): string { console.log('인가에 성공하였습니다'); return '인가에 성공하였습니다.'; } @Mutation(() => User) async createUser( @Args('email') email: string, @Args('password') password: string, @Args('name') name: string, @Args({ name: 'age', type: () => Int }) age: number, ): Promise<User> { // const hashedPassword = await bcrypt.hash(password, 10); // return this.usersService.create({ email, hashedPassword, name, age }); // } return this.usersService.create({ email, password, name, age }); } }  gql-auth.guard.ts import { ExecutionContext } from '@nestjs/common'; import { GqlExecutionContext } from '@nestjs/graphql'; import { AuthGuard } from '@nestjs/passport'; export class GqlAuthAccessGuard extends AuthGuard('access') { getRequest(context: ExecutionContext) { const gqlContext = GqlExecutionContext.create(context); return gqlContext.getContext().req; } }  jwt-access.strategy.ts import { PassportStrategy } from '@nestjs/passport'; import { ExtractJwt, Strategy } from 'passport-jwt'; export class JwtAccessStrategy extends PassportStrategy(Strategy, 'access') { constructor() { super({ jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(), secretOrKey: '나의비밀번호', }); } validate(payload) { console.log('페이로드', payload); return { id: payload.sub, }; } } auth.module.tsimport { Module } from '@nestjs/common'; import { AuthResolver } from './auth.resolver'; import { AuthService } from './auth.service'; import { UsersModule } from '../users/users.module'; import { JwtModule } from '@nestjs/jwt'; import { JwtAccessStrategy } from './strategy/jwt-access.strategy'; @Module({ imports: [ JwtModule.register({}), UsersModule, // 서비스를 각각 불러오기보다는 module을 통으로 불러오는게 낫다. 원래는 import 에 TypeOrmModule.forFeature([Users])& providers에 UsersServie가 있었음. ], providers: [ JwtAccessStrategy, AuthResolver, // AuthService, // ], }) export class AuthModule {}

로그아웃 버튼 클릭후에setAccessToken을통해 accessToken이 공백으로 바뀌고 로그아웃 mutation 결과값 true 반환까지 확인되는데쿠키의 refreshtoken 값이 사라지지않습니다ㅜㅜ도와주세요

훈훈한 자바스크립트 강의 중에 D-Day 사이트 만들기 강의가 있는데, 설명 복잡한 건 그렇다 쳐도, 최종적으로 코드에 오류가 있더라고요. 새로 고침을 하게 되면 사이트 로컬 스토리지 에서, 데이터가 사라져 있는 걸 볼 수가 있어요. 해결 방법 알려주세요.

왜 강의와 다르게 이렇게 표시되는게 맞는지 굼금해서 올려봅니다.아니라면 왜 이런지 알려주시면 감사하겠습니다.밑에는 App.css입니다.@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&family=Yeon+Sung&display=swap'); body { background-color: #f6f6f6; display: flex; justify-content: center; align-items: center; font-family: 'Nanum Pen Script'; min-height: 100vh; margin: 0px; } @media (min-width: 650px) { .App { width: 640px; } } @media (max-width: 650px) { .APP { width: 90vw; } } #root { background-color: white; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; } .App { min-width: 100vh; padding-left: 20px; padding-left: 20px; } /* my button */ .MyButton { cursor: pointer; border: none; border-radius: 5px; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 20px; font-size: 18px; white-space: nowrap; font-family: 'Nanum Pen Script'; } .MyButton_default { background-color: #ececec; color: black; } .MyButton_positive { background-color: #64c964; color: white; } .MyButton_negative { background-color: #fd565f; color: white; } /* header */ header { padding-top: 20px; padding-bottom: 20px; display: flex; align-items: center; border-bottom: 1px solid #e2e2e2; } header > div { display: flex; } header .head_text { width: 50%; font-size: 25px; justify-content: center; } header .head_btn_left { width: 25%; justify-content: start; } header .head_btn_right { width: 25%; border-left: 25px; justify-content: end; } header button { font-family: 'Nanum Pen Script'; } /* DiaryList */ .DiaryList .menu_wrapper { margin-top: 20px; margin-bottom: 30px; display: flex; justify-content: space-between; } .DiaryList .menu_wrapper .right_col { flex-grow: 1; } .DiaryList .menu_wrapper .right_col button { width: 100%; } .DiaryList .ControlMenu { margin-right: 10px; border: none; border-radius: 5px; background-color: #ececec; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 20px; cursor: pointer; font-family: 'Nanum Pen Script'; font-size: 18px; } /* DiaryItem */ .DiaryItem { padding-top: 15px; padding-bottom: 15px; border-bottom: 1px solid #e2e2e2; display: flex; justify-content: space-between; } .DiaryItem .emotion_img_wrapper { cursor: pointer; min-width: 120px; height: 80px; border-radius: 5px; display: flex; justify-content: center; } .DiaryItem .emotion_img_wrapper_1 { background-color: #64c964; } .DiaryItem .emotion_img_wrapper_2 { background-color: #9dd772; } .DiaryItem .emotion_img_wrapper_3 { background-color: #fdce17; } .DiaryItem .emotion_img_wrapper_4 { background-color: #fd8446; } .DiaryItem .emotion_img_wrapper_5 { background-color: #fd565f; } .DiaryItem .emotion_img_wrapper img { width: 50%; } .DiaryItem .info_wrapper { flex-grow: 1; margin-left: 20px; cursor: pointer; } .DiaryItem .diary_date { font-weight: bold; font-size: 25px; margin-bottom: 5px; } .DiaryItem .diary_centent_preview { font-size: 18px; } .DiaryItem .btn_wrapper { min-width: 70px; } /* DirayEditor */ .DirayEditor textarea { font-family: 'Nanum Pen Script'; font-size: 20px; box-sizing: border-box; width: 100%; min-height: 200px; resize: vertical; border: none; border-radius: 5px; background-color: #ececec; padding: 20px; } .DirayEditor .control_box { display: flex; justify-content: space-between; align-items: center; } .DirayEditor section { margin-bottom: 40px; } .DirayEditor h4 { font-size: 22px; font-weight: bold; } .DirayEditor .input_date { border: none; border-radius: 5px; background-color: #ececec; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 20px; cursor: pointer; font-family: 'Nanum Pen Script'; font-size: 20px; } .DirayEditor .emotion_list_wrapper { display: grid; grid-template-columns: repeat(5, auto); gap: 2%; } /* EmotionItem */ .EmotionItem { cursor: pointer; border-radius: 5px; padding-top: 20px; padding-bottom: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .EmotionItem img { width: 50%; margin-bottom: 10px; } .EmotionItem span { font-size: 18px; } .EmotionItem_off { background-color: #ececec; } .EmotionItem_on_1 { background-color: #64c964; color: white; } .EmotionItem_on_2 { background-color: #9dd772; color: white; } .EmotionItem_on_3 { background-color: #fdce17; color: white; } .EmotionItem_on_4 { background-color: #fd8446; color: white; } .EmotionItem_on_5 { background-color: #fd565f; color: white; }

useForm 이용해서 하고있는데 update_board를 할때 계속 try에서 catch(error)로 넘어가네요 ㅠpresenter.jsimport * as S from "./BoardWriter.styles"; export default function BoardWriteUI(props) { return ( <S.Wrapper onSubmit={props.isEdit? props.handleSubmit(props.onClickUpdate, props.onInValid) : props.handleSubmit(props.onValid, props.onInValid)}> <S.Title>{props.isEdit? "게시글 수정": "게시글 등록"}</S.Title> <S.WriterWrapper> <S.InputWrapper> <S.Label>작성자</S.Label> <S.Writer {...props.register("writer", { validate : (value) => value ? true:"작성자를 작성해주세요."} )} onChange={e => props.onChangeWriter(e)} type="text" placeholder="이름을 적어주세요."/> <S.Error>{props.errors.writer?.message}</S.Error> </S.InputWrapper> <S.InputWrapper> <S.Label>비밀번호</S.Label> <S.Password {...props.register("password", { validate : (value) => value? true: "비밀번호를 작성해주세요."} )} onChange={e => props.onChangePassword(e)} type="password" placeholder="비밀번호를 작성해주세요." /> <S.Error>{props.errors.password?.message}</S.Error> </S.InputWrapper> </S.WriterWrapper> <S.InputWrapper> <S.Label>제목</S.Label> <S.Subject {...props.register("title", { validate : (value) => value? true: "제목을 작성해주세요."} )} onChange = {e => props.onChangeTitle(e)} type="text" placeholder="제목을 작성해주세요." /> <S.Error>{props.errors.title?.message}</S.Error> </S.InputWrapper> <S.InputWrapper> <S.Label>내용</S.Label> <S.Contents {...props.register("contents", { validate : (value) => value? true: "내용을 작성해주세요."} )} onChange={e => props.onChangeContents(e)} placeholder="내용을 작성해주세요." /> <S.Error>{props.errors.contents?.message}</S.Error> </S.InputWrapper> <S.InputWrapper> <S.Label>주소</S.Label> <S.ZipcodeWrapper> <S.Zipcode {...props.register("boardAddress")} placeholder="07250" /> <S.SearchButton>우편번호 검색</S.SearchButton> </S.ZipcodeWrapper> <S.Address /> <S.Address /> </S.InputWrapper> <S.InputWrapper> <S.Label>유튜브</S.Label> <S.Youtube {...props.register("youtubeUrl")} placeholder="링크를 복사해주세요." /> </S.InputWrapper> <S.ImageWrapper> <S.Label>사진첨부</S.Label> <S.UploadButton>+</S.UploadButton> <S.UploadButton>+</S.UploadButton> <S.UploadButton>+</S.UploadButton> </S.ImageWrapper> <S.OptionWrapper> <S.Label>메인설정</S.Label> <S.RadioButton type="radio" id="youtube" name="radio-button" /> <S.RadioLabel htmlFor="youtube">유튜브</S.RadioLabel> <S.RadioButton type="radio" id="image" name="radio-button" /> <S.RadioLabel htmlFor="image">사진</S.RadioLabel> </S.OptionWrapper> <S.ButtonWrapper> <S.SubmitButton isActive={props.isActive} type="submit">{props.isEdit? "수정하기": "등록하기"}</S.SubmitButton> </S.ButtonWrapper> </S.Wrapper> ); } quires.jsimport { gql } from '@apollo/client' export const CREATE_BOARD = gql` mutation createBoard($createBoardInput: CreateBoardInput!) { createBoard(createBoardInput : $createBoardInput){ _id } } ` export const UPDATE_BOARD = gql` mutation updateBoard($updateBoardInput: updateBoardInput!, $password: String, $boardId: ID!) { updateBoard(updateBoardInput: $updateBoardInput, password: $password, boardId: $boardId) { _id } } `container.jsimport { useState } from 'react' import { useForm } from 'react-hook-form'; import { useRouter } from 'next/router'; import { useMutation } from '@apollo/client' import BoardWriteUI from './BoardWriter.presenter'; import { CREATE_BOARD, UPDATE_BOARD } from './BoardWriter.queries'; export default function BoardsWriteContainer(props) { const router = useRouter() const [isActive, setIsActive] = useState(true) const [createBoard] = useMutation(CREATE_BOARD) const [updateBoard] = useMutation(UPDATE_BOARD) const { register, watch, handleSubmit, formState: { errors } } = useForm(); const onChangeWriter = (e) => { e.target.value && watch("password") && watch("title") && watch("contents") ? setIsActive(false) : setIsActive(true) } const onChangePassword = (e) => { e.target.value && watch("writer") && watch("title") && watch("contents") ? setIsActive(false) : setIsActive(true) } const onChangeTitle = (e) => { e.target.value && watch("password") && watch("writer") && watch("contents") ? setIsActive(false) : setIsActive(true) } const onChangeContents = (e) => { e.target.value && watch("password") && watch("title") && watch("writer") ? setIsActive(false) : setIsActive(true) } const onValid = async (data) => { try { const result = await createBoard({ variables: { createBoardInput: { writer: data.writer, title: data.title, password: data.password, contents: data.contents, } } }) console.log(result.data.createBoard._id) alert("게시물이 정상적으로 등록되었습니다.") router.push(`/boards/${result.data.createBoard._id}`) } catch(error) { alert(error.message) } } const onInValid = (error) => { console.log("에러입니다", error) } const onClickUpdate = async (data) => { try { const result = await updateBoard({ variables: { updateBoardInput : { title: data.title, contents: data.contents }, password : data.password, boardId : router.query.boardid, } }) console.log(result) // router.push(`/boards/${router.query.boadid}`) } catch(error) { console.log(error) } } return <BoardWriteUI onValid = {onValid} oninValid = {onInValid} register = {register} handleSubmit = {handleSubmit} errors = {errors} onChangeContents = {onChangeContents} onChangeTitle = {onChangeTitle} onChangePassword = {onChangePassword} onChangeWriter = {onChangeWriter} onClickUpdate = {onClickUpdate} isActive={isActive} isEdit={props.isEdit} /> }

강의 9.3 에서 route/auth.js 파일에서 passport.authenticate('local')부분이 호출되는 것 까지는 이해가 됩니다. 근데 왜 authenticate에서 passport/localStrategy.js(전략코드) 가 실행이 되는건지 모르겠습니다. 'local'이라는 매개변수가 있다고 해도 localStrategy.js를 실행하라는 뜻은 아닐것인데 말이죠. 로그인 구현 흐름 자체는 이해가 되나 이쪽 부분이 어떤 논리로 이어지는건지를 모르겠습니다.

강의를 따라 순서대로 따라했는데마지막에 cannot read property _id 오류가뜹니다ㅠㅠ

현재 저는 국비학원을 마치고 취업을 준비중 현실을 맞닥들이고 다시 공부를 시작하였습니다. 국비는java를 기반으로 수료했지만 저의 적성이 백엔드보다는 프론트가 맞을 것 같아 본 강의를 구매했습니다. 기본적인 html,css는 이해하고있지만 js는 다소 약한 부분이있습니다.강의를 들으려고 보니 새로 시작한 사람은 새셕23부터 시작하면 된다고 설명이 되어있길래 살펴봤더니 바로 리액트부터 시작하는 것 같았더라구요. js가 다소 약하더라도 따라가는데 어려움이 없을지 질문 드립니다.

강의를 보고 error: error.message를 작성했는데 왜 catch(error: any) 를 작성했을 때만 에러표시가 뜨지 않는 건지 궁금합니다..!

sequelize-cli 까지 설치가 된거 같긴 한데... sequelize init 을 누르면 그림과 같이 오류가 떠요~ mac 에서 nvm 도 설치하고, 이것저것 계속 했는데도 잘 안됩니다. 아래 작업도 했는데도, 안돼서 진도를 3시간째 못나가고 있네요. 도움 주시면 감사하겠습니다. ㅠㅠ 정말 열심히 듣고 있는데.. ㅠ

Quiz에 관한 코드는 따로 없을까요?

tailwindCss 꼭 사용해야하나요? 그냥 css로 사용하고 싶은데 tailwindCss를 사용하지 않으면 강의를 듣는데 문제가 생길까요 ?

eslint는 이제 설정하지않아도되는것 아닌가요ㅕ,,?

오타있는지도 확인하고 껐다가 다시 실행시켜봐도 안됩니다 ㅠ 어떻게 해결해야 하나요?

const { data } = useQuery(FETCH_BOARD, { // $: { number: 1 }, // variables: { number: Number(router.query.qqq) }, variables: { number: Number(router.query.number) }, });  const { data } = useQuery(FETCH_BOARD, { variables: { boardId: router.query.boardId }, });포트폴리오에서는 router.query 부분을 문자인데 숫자로 왜 변형을 안 시키는 걸까요 ?05-04 수업에서는 router.query.qqq 를 문자니까 Number 로 변환시켜주어 포트폴리오에서도 똑같이 했는데 안되더라고요!

mongodump로 로컬에 설치된 몽고 db를 백업하려 하는데 아래의 오류가 나옵니다.해결방법을 부탁합니다.- (mongodump.exe)를 별도로 다운받아야 하나요?-최신버전에는 mongodump.exe파일이 설치되어 있지 않습니다.[오류메세지]'mongodump'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다