const [sortType, setSortType] = useState("latest");강사님 하고 똑같이 useState 초기값을 latest로 했는데새로고침 하거나 페이지 이동하고 돌아오면 저는 5번부터 정렬되는데 왜 강사님은 1번부터 정렬되나요?latest니까 5번부터 정렬돼야 하는거 아닌가요?

2:05초에서는 created()에서 getNewsList();함수 호출 하나로 axios.then.catch 코드를 줄일수 있다고 하셨는데,12:00 초에서는 import 후에 fetchNewsList() 호출 후 , then.catch그대로 있어서 결과론적으로 얻는 이점이 뭔지 모르겠습니다! 

강사님 안녕하세요! 유튜브에서 보고 인프런까지 따라와서 강의 잘 듣고 있습니다! 실전사이트A 영상1시간19분쯤에서 유효성검사 엄청 편하게 하시던데 어떤 툴을 사용하면 되나요?  

accept connections 까지 확인 후에도 data 폴더 안에 아무것도 생성되지 않아서요! 질문드립니다!!

후반부 create-react-app 사용을 알려주시면서 components 디렉터리 생성하는 걸 언급해주셨는데요. 모범사례라 할 수 있는 디렉터리 구조가 궁금해서 알려주시면 감사할 것 같아요. 예를 들어 서버로부터 API를 통해 고양이 이미지를 불러오는 함수의 경우 useEffect 함수 및 Form 컴포넌트에서 사용을 위해 재사용 되었는데 이러한 코드 스니펫을 어떤 디렉터리를 생성해서 보관하면 좋을지 궁금하더라고요. 문자열 내 한글이 포함되었는지 파악하는 유틸 개념의 함수도 마찬가지고요. 이러한 디렉터리 구조를 보고 배울 프로젝트를 몇 가지 공유주시면 감사할 것 같습니다! 좋은 강의 감사히 잘 들었습니다.

/src/.env 파일에 VITE_SOME_KEY = 123이렇게 설정하고, App.jsx에 function App() { return(<>{import.meta.env.VITE_SOME_KEY} <Counter/> </> )}export default App;이렇게 설정했습니다. 근데 왜 화면엔 123이 출력이 안되는 걸 까요 ㅠ? 오류 메시지도 없고..강의랑 똑같이 했는데 왜 안나올끼요 ..

안녕하세요 강사님 저는 지금 현재 도커 소개와 도커 설치 강의를 수강하고 있습니다.   window에서는 작업 관리자에 들어가면 가상화를 확인할 수 있지만 제가 사용하고 있는 맥북 프로 14에서는 가상화가 사용되고 있는지 확인 할 수 없습니다. 그래서 구글에도 검색을 해 보았는데 무슨 말인지 정확히 이해하기 힘들어 질문을 남깁니다. 맥북 프로 14 모델에서는 가상화가 사용되고 있는것인가요? 만약 사용되고 있지 않다면 무엇을 어떻게 설치해야 하는지 알려주시면 감사하겠습니다.

안녕하세요 제가 고농축 강의 2개(프론트, 백엔드)를 방금 구매했는데혹시 구글,카카오,네이버 소셜 로그인(oauth2)에 대한 내용을 보려면어느 부분을 보면 될까요?

안녕하세요.EJS 파일 만들어서 EJS 태그를 사용하는데 자동으로 formatting이 안되네요.. Prettier처럼 formatting이 자동으로 되게 하려면 어떻게 해야하나요?

섹션3 prototype 강의에서 Object.setPrototype(ray, IdolModel.prototype);을 실행한 후에도 ray.dance()가 실행됩니다.instanceof를 사용해서 확인한 결과, false가 출력되므로 ray.dance()에서 에러가 발생해야 한다고 생각했는데 제가 잘 못 이해하고 있을까요?Object.setPrototypeOf(ray, IdolModel.prototype); console.log(ray.sayHello()); console.log(ray.dance()); //왜 실행되는지? console.log("ray's type: ",ray instanceof FemaleIdolModel);

강의를 듣고 먼저 배운대로 new 연산과 Date 객체, setInterval 메소드를 활용해서 현재 시간을 반영한 디지털 시계를 만드는 코드를 짜봤는데요. 제 생각으로는 변수 안에 new 연산이 있으니, setInterval로 1초 마다 getTime 함수가 실행될 때마다, new 연산을 하는 변수 hour, min, sec가 실행되어서 1초마다 다시 연산을 해서 현재 시간을 업데이트해 줄 것으로 예상했는데, 실시간으로 업데이트가 안되더라구요.(멈춰있음)그래서, hour, min, sec 변수 선언들을 getTime 함수 안에 넣어서 실행했더니 실시간으로 1초마다 시간이 반영이 되었습니다.똑같은 변수인데, 함수 밖에 있는 것과 안에 있는 것이(전역변수인지 아닌 지에 따라) 차이가 있는건가요?

안녕하세요 또 이렇게 질문을 해서 죄송합니다. 마지막 강의까지 다 듣고 배포까지 했는데 갑자기 홈 화면에 오른 화살표를 클릭을 하면 지금 1월 인데 누르면 3월로 이동 됩니다. 그런데 1월에서 2월 넘어갈때만 그래요 뒤로 가는건 잘 작동합니다. 홈 강의 다시 보고 틀린거 있나 확인했는데 못 찾아서 이렇게 연락드려요 https://github.com/jeain/Diary

다음과 같이 playground에서 mutation한 결과 "Cannot return null for non-nullable field Product.productSalesLocation." 오류 메시지가 뜹니다. mutation안의 반환값으로 product의 column만 받을 때는 오류 없이 작동되었는데 productSalesLocation의 column을 반환하려 하면 다음과 같이 오류가 뜹니다.위 사진을 보시면 DBeaver에 product와 saleslocation에 생성한 값이 잘 입력되었지만product table에서 productSalesLocationID가 NULL값으로 되어있습니다.이 부분에 연관된 코드가 여러 파일로 나뉘어져있어 코드 어느 부분을 확인해야 하는지 알려주시면 해당 코드 캡처본을 보내드리겠습니다.

강의 잘듣고 있습니다. 유투브에서 flutter 영상만 보다가 평소 관심있었던 nest 까지 이어왔습니다(자바스크립트, 타입스크립트 그리고 nestjs까지)토큰 관련 마지막강의해서 refresh token 이 만료되면 다시 ....refresh end point 로 요청을 보내서 다시 refresh 토큰을 받는다 말씀하셨는데요... 기간 만료된 refresh 토큰을 보내도 되는건가요? 아님 그 기능을 따로 구현해야 하는건가요?

강사님 SPA, MPA, SSR , CSR과 리액트 Hooks 등의 개념에 대해 찾다보면 참고 문서와 링크 없고, 내용에 틀린부분도 있어보이는 블로그가 종종 있더라구요. 이러한 경우 강사님은 어디서 주로 찾으시는지 궁금합니다.

 increment(conditions: FindOptionsWhere<Entity>, propertyPath: string, value: number | string)먼저 increment메소드의 propertyPath 부분이 특정 Model의 프로퍼티를 추론 하지 않고 string으로 박혀 있는게 마음에 들지 않아서 대상이 되는 프로퍼티 필드 명을 추론 하게 작성 했습니다.// users.service.ts async incrementFollowerCount( userId: number, fieldName: keyof Pick<UsersModel, 'followerCount' | 'followeeCount'>, incrementCount: number, qr?: QueryRunner, ) { const usersRepository = this.getUsersRepository(qr); await usersRepository.increment( { id: userId, }, fieldName, incrementCount, ); }1. fieldName: 어떤 프로퍼티를 증가, 감소를 할것인지 특정하는 파라미터2. incrementCount : 몇 증가 시킬것인지 증가 value// users.service.ts async decrementFollowerCount( userId: number, fieldName: keyof Pick<UsersModel, 'followerCount' | 'followeeCount'>, decrementCount: number, qr?: QueryRunner, ) { const usersRepository = this.getUsersRepository(qr); await usersRepository.decrement( { id: userId, }, fieldName, decrementCount, ); }contoller에서 사용하기// users.controller.ts @Patch('follow/:id/confirm') @UseInterceptors(TransactionInterceptoer) async patchFollowConfirm( @User() user: UsersModel, @Param('id', ParseIntPipe) followerId: number, @QueryRunnerDecorator() qr: QueryRunner, ) { await this.usersService.confirmFollow(followerId, user.id); await this.usersService.incrementFollowerCount( user.id, 'followerCount', 1, qr, ); await this.usersService.incrementFollowerCount( followerId, 'followeeCount', 1, qr, ); return true; } @Delete('follow/:id') @UseInterceptors(TransactionInterceptoer) async deleteFollow( @User() user: UsersModel, @Param('id', ParseIntPipe) followeeId: number, @QueryRunnerDecorator() qr: QueryRunner, ) { await this.usersService.deleteFollow(user.id, followeeId); await this.usersService.decrementFollowerCount( user.id, 'followerCount', 1, qr, ); await this.usersService.decrementFollowerCount( followeeId, 'followeeCount', 1, qr, ); return true; }filedName 파라미터를 특정 프로퍼티만 올 수 있게 자동완성 잘됩니다.팔로워 confirm 되면 나의 follower 증가 + 상대방 followee 증가팔로워 삭제 되면 나의 follower 감소 + 상대방 followee 감소await this.usersService.incrementFollowerCount( followerId, 'followeeCount', 1, qr, );userId가 오는 파라미터 자리에 user.id가 아닌 followerId가 들어간 이유는 followeeCount를 증가 해야 되기 때문이다. 즉, 팔로워를 수락 했으면 나의 followerCount를 증가 시키고 상대방 followeeCount를 증가 시켜야 되기 때문에, 삭제 했을때도 같은 원리[결과]2번 사용자가 1번 사용자를 팔로워하고, 1번 사용자가 팔로워를 수락 했을때

🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

<template> <transition appear name="modal"> <div class="modal-mask"> <div class="modal-wrapper"> <div class="modal-container"> <!-- Modal Header --> <div class="modal-header"> <slot name="header"> default header </slot> </div> <!-- Modal Body --> <div class="modal-body"> <slot name="body"> default body </slot> </div> <!-- Modal footer --> <!-- <div class="modal-footer"> <slot name="footer"> default footer <button class="modal-default-button" @click="$emit('close')"> OK </button> </slot> </div> --> </div> </div> </div> </transition> </template> <style scoped> .modal-mask { position: fixed; z-index: 9998; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: table; transition: opacity 0.3s ease; } .modal-wrapper { display: table-cell; vertical-align: middle; } .modal-container { width: 300px; margin: 0px auto; padding: 20px 30px; background-color: #fff; border-radius: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33); transition: all 0.3s ease; font-family: Helvetica, Arial, sans-serif; } .modal-header { margin-top: 0; color: #42b983; } .modal-body { margin: 20px 0; } .modal-default-button { float: right; } .modal-enter-from { opacity: 0; } .modal-leave-active { opacity: 0; } .modal-enter-from .modal-container, .modal-leave-active .modal-container { -webkit-transform: scale(1.1); transform: scale(1.1); } </style>vue3인데 모달창 띄울 때 애니매이션 효과가 잘 작동하는데 왜 닫을 때는 작동을 안하는 지 잘 모르겠어요<AlertModal v-if="showModal" @close="showModal = false"> <!-- you can use custom content here to overwrite default content --> <template v-slot:header> <h3>경고! <span class="closeModalBtn" @click="showModal = false">x</span></h3> </template> <template v-slot:body> 아무것도 입력하지 않으셨습니다. </template> <!-- <template v-slot:footer> copy right </template> --> </AlertModal>참고로 vue3에서는 slot을 template 태그 안에 v-slot으로 적어야 한다해서 이렇게 작성했어요

안녕하세요 2.1 class 단위 테스트를 작성하고 `npm run test`로 테스트를 구동 했을 때, 다음과 같이 테스트를 실패하고 있습니다. `nvm use`, 'npm ci'를 모두 마친 상황인데, 어떤 문제를 해결해야 할까요? 혹시나 싶어 스토리북을 구동했을 때는, 문제 없이 scripts 명령어를 입력했을 때 실행이 되는 것을 확인할 수 있었습니다.!github branch의 unit-test-example을 pull 받아서 진행했습니다!운영체제: Windows 11 import { screen } from '@testing-library/react'; import React from 'react'; import TextField from '@/components/TextField'; import render from '@/utils/test/render'; it('className Prop으로 설정한 css class가 적용된다.', async () => { // Arrange - 테스트를 위한 환경 만들기 // -> className을 지닌 컴포넌트 렌더링 await render(<TextField className="my-class" />); // Act - 테스트할 동작 발생 // -> 렌더링에 대한 검증이기 때문에 이 단계는 생략 // -> 클릭이나 메서드 호출, prop 변경 등등에 대한 작업이 여기에 해당 합니다. // Assert - 올바른 동작이 실행되었는지 검증 // -> 렌덩링 이후 DOM에 해당 class가 존재하는지 검증 // TextField는 placeholder 요소가 있습니다. // vitest의 expect 함수를 사용하여 기대 결과를 검증 expect( screen .getByPlaceholderText('텍스트를 입력해 주세요.') .toHaveClass('my-class'), ); });   FAIL src/components/tests/TextField.spec.jsx [ src/components/tests/TextField.spec.jsx ] Error: C:\Users\js953\Desktop\Github\fe-test\test-example-shopping-mall\src\components\tests\TextField.spec.jsx 21:3 error Expect must have a corresponding matcher call vitest/valid-expect ✖ 1 problem (1 error, 0 warnings) ❯ formatError node_modules/vite/dist/node/chunks/dep-abb4f102.js:43916:46 ❯ TransformContext.error node_modules/vite/dist/node/chunks/dep-abb4f102.js:43912:19 ❯ TransformContext.transform node_modules/vite-plugin-eslint/dist/index.mjs:1:1989 ❯ Object.transform node_modules/vite/dist/node/chunks/dep-abb4f102.js:44206:30 ❯ loadAndTransform node_modules/vite/dist/node/chunks/dep-abb4f102.js:54851:29 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯ Test Files 1 failed (1) Tests no tests Start at 12:45:37 Duration 1.63s (transform 743ms, setup 883ms, collect 0ms, tests 0ms, environment 408ms, prepare 109ms) FAIL Tests failed. Watching for file changes... press h to show help, press q to quit ```Test result not found. If you set `vitest.commandLine` please check: Did you set `vitest.commandLine` to `run` mode? (This extension requires `watch` mode to get the results from Vitest api) Does it have the ability to append extra arguments? (For example it should be `yarn test --` rather than `yarn test`) Are there tests with the same name? Can you run vitest successfully on this file? Does it need custom option to run? Vitest output: DEV v0.33.0 C:/Users/js953/Desktop/Github/fe-test/test-example-shopping-mall API started at http://127.0.0.1:60930 ❯ src/components/tests/TextField.spec.jsx (0 test)

안녕하세요 깡코딩님, 다름이 아니라 모바일 뿐만아니라 pc도 반응형이 필요할텐데 맥북프로같은 경우는 해상도가 크더라구요 ..이럴경우 처음부터 크게 작업하고 미디어 쿼리로 점점 작게 진행해야하는걸까요???1920까지만 신경쓰고 최소로 280까지만 신경썼는데 이렇게 큰게 나오니 또 조정을 해야하나 싶습니다.