혹시 저처럼 초보분들을 위해서 남깁니다.저 혼자 삽질할께요 여러분들은 빠르게 세팅하고 빠르게 강의를 들어요✨혹시나 이 글을 강의 처럼 install 다해주고나서 발견하셨다면간편하게 패키지.json에서 관련된거 다 지워주고 yarn.lock를 지워주시고 yarn install 입력해주세요yarn instlal @nestjs/cache-manager cache-manager-redis-store@2.0.0 yarn install -D @types/cache-manager @types/cache-manager-redis-storecache-manager-redis-store만큼은 2.0.0으로 설치해주셔야 합니다. 그래야 redisStore에대한 타입에러가 안납니다.출처: https://4sii.tistory.com/689이 아래부터는 그냥 제 코드 복붙입니다.아래 코드는 위의 출처 사이트를 가보시면 다 적혀있으니 제 코드를 복붙하셔도되고 출처 사이트가셔서 코드 복붙하셔도됩니다.app.module.tsimport { ApolloDriver, ApolloDriverConfig } from '@nestjs/apollo'; import { Module } from '@nestjs/common'; import { CacheModule } from '@nestjs/cache-manager'; import { ConfigModule } from '@nestjs/config'; import { GraphQLModule } from '@nestjs/graphql'; import { TypeOrmModule } from '@nestjs/typeorm'; import { AuthModule } from './apis/auth/auth.module'; import { BoardsModule } from './apis/boards/boards.module'; import { FilesModule } from './apis/files/files.module'; import { PaymentsModule } from './apis/payments/payments.module'; import { PointsTransactionsModule } from './apis/pointsTransactions/pointsTransactions.module'; import { ProductsModule } from './apis/products/products.module'; import { ProductsCategoriesModule } from './apis/productsCategories/productsCategories.module'; import { UsersModule } from './apis/users/users.module'; import { CacheConfigService } from './cacheConfig.service'; @Module({ imports: [ AuthModule, BoardsModule, // FilesModule, PaymentsModule, PointsTransactionsModule, ProductsModule, ProductsCategoriesModule, UsersModule, ConfigModule.forRoot(), // env를 사용할 수 있게 해줌 GraphQLModule.forRoot<ApolloDriverConfig>({ driver: ApolloDriver, autoSchemaFile: 'src/commons/graphql/schema.gql', // context 부분이있어야~ resolver나 다른데에서 // @Context() context:IContext, context.res 등등으로 사용가능함 // req는 기본적으로 들어오지만, res는 이걸 작성해야 들어옴 context: ({ req, res }) => ({ req, res }), }), // https://docs.nestjs.com/techniques/database 참고 TypeOrmModule.forRoot({ type: process.env.DATABASE_TYPE as 'mysql', host: process.env.DATABASE_HOST, port: Number(process.env.DATABASE_PORT), username: process.env.DATABASE_USERNAME, password: process.env.DATABASE_PASSWORD, database: process.env.DATABASE_DATABASE, entities: [__dirname + '/apis/**/*.entity.*'], synchronize: true, logging: true, }), CacheModule.registerAsync({ isGlobal: true, useClass: CacheConfigService }), ], }) export class AppModule {} cache-config.service.tsimport { CacheModuleOptions, CacheOptionsFactory } from '@nestjs/cache-manager'; import { Injectable } from '@nestjs/common'; import redisStore from 'cache-manager-redis-store'; @Injectable() export class CacheConfigService implements CacheOptionsFactory { createCacheOptions(): CacheModuleOptions { const config: CacheModuleOptions = { store: redisStore, host: 'localhost', port: 6379, ttl: 60, }; return config; } }

template lang=""> <ItemList></ItemList> {{ users[0] }} </template> <script lang="ts"> import ItemList from '../components/lists/ItemList.vue' import {fetchNewsList, User} from '../api/news' export default { data() { return { users: [] as User[] } },vue3에 타입스크립트 적용해서 하는 중입니다.위 코드처럼 interface 만들어서 타입을 사용해보고 있는데{{ users[0] }}에 .id .title 등 ide에서 제공되는 타입추론이 안됩니다. vue는 방법이 없을까요??

안녕하세요, 알찬 수업 무료로 열어주셔서 감사한 마음으로 배우고 있습니다.이번 강의에서 단축 평가 패턴에 대해 알려주셨습니다.제가 기존에 이해하고 있던 단축 평가 패턴은, false && ... 은 항상 false 이므로 ... 에 대한 확인은 하지 않는다true || ... 은 항상 true 이므로 ... 에 대한 확인은 하지 않는다확인하지 않음으로서 조금의 성능 향상을 얻는다.정도 였습니다.강의 내용에는 console.log(true && '아이브') // 아이브라는 내용이 있습니다.관련하여 이해가 되지 않아 정보를 찾다보니, 이러한 패턴을 이용해서 값이 들어 있는 변수 혹은 값이 들어있지 않은 변수를 찾아내는 데 사용하더라고요.(https://wondev.tistory.com/17)그럼에도 '왜'의 굴레에서 벗어나지 못하고 있습니다..ㅎ..단축 평가 패턴과 관련하여 조금 더 깊은 설명을 들어볼 수 있을까요?혹은 제가 참고하면 좋을 자료를 공유받을 수 있을까요?감사합니다.

강의 듣는 시점인 현재http://localhost:3000/customers?name_like=${name}위와같은 like 구문은 이름입력& 조회 버튼 클릭시 에러는 안나지만 검색은 안되네요 ^^;;->http://localhost:3000/customers?name=${name}이런식으로 like 검색을 빼면 이름을 대소문자 정확히 입력하면 검색이 됩니다.관련하여 검색해 봤지만 like 검색 관련해선 안나오는데 like 검색을 어떻게 처리 해야 하나요?

vue peek 설치 없이는 컴포넌트 위에 컨트롤 마우스로 올려놔도 링크 생성이 안되네요..

안녕하세요의존성 주입을 하기 위해 @Injectable 하는걸로 이해했습니다.BearerTokenGuard 을 만들때 @Injectable 을 선언 하지 않는 이유는 BearerTokenGuard은 직접 사용하지 않고 RefreshTokenGuard, AccessTokenGuard 에서 상속을 받아 상속을 받는곳에서 @Injectable 을 하고 super로 실행시키는 거여서 그런건가요??

volar 와 vue language features 로 검색해봤지만, 영상에 나오는 플러그인은 검색이 안됩니다. 다른걸 설치해야할까요?

안녕하세요. Payment테스트 코드 작성 부분에서 몇가지 궁금한점이 생겨 질문 드립니다. 1. 실제 Payment 컴포넌트에서는 useCouponList훅으로부터 selectedCoupon데이터를 받아와서 사용하는데 테스트 코드에서는 쿠폰 정보를 prop으로 전달하는 이유가 무엇인가요?2. 실제 구현 동작을 보면 ShippingInformationForm에서 쿠폰을 선택하면 Payment 쿠폰란에 곧바로 반영되는데 이런 부분까지는 통합테스트에서 검증하지 않아도 되나요?

안녕하세요.지금 챕터5 네비게이션바 테스트 코드 작성 부분을 보고 있는데 테스트 속도가 너무 느린 문제가 발생합니다ㅜ 테스트 항목 하나를 테스트 할때마다 21초씩 걸립니다... 생각보니 이 전 챕터에서도 테스트 시간이 조금 오래 걸리긴 했던거 같긴 해요. 이건 제 컴퓨터 문제일까요, 아니면 속도 저하의 원인을 파악하는 방법이라도 있을지 조언을 구해 봅니다ㅠㅠ

import { Column, Entity, PrimaryGeneratedColumn } from 'typeorm'; import { RolesEnum } from '../const/roles.const'; @Entity() export class UserModel { @PrimaryGeneratedColumn() id: number; @Column({ length: 20, unique: true, }) nickname: string; @Column({ unique: true, }) email: string; @Column() password: string; @Column({ enum: Object.values(RolesEnum), default: RolesEnum.USER, }) role: RolesEnum; }

이벤트 강의를 듣고 나서 addEventListener를 이용하여 여러 장의 사진이 있으면 슬라이더처럼 하나씩 넘겨서 볼 수 있는 이벤트를 만들 수 있을 것 같아 혼자 코드를 직접 짜봤는데요,body 부분은 아래처럼 작성하고, <body> <div class="container"> <div class="slider" id="slider-01"></div> <div class="slider" id="slider-02"></div> <div class="slider" id="slider-03"></div> </div> </body>css는 아래처럼 작성했고,.container { position: relative; width: 660px; height: 440px; overflow: hidden; } .slider { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: contain; background-repeat: no-repeat; transform: translateX(100%); } #slider-01 { background-image: url(./images/cat/cat-01.png); z-index: 3; } #slider-02 { background-image: url(./images/cat/cat-02.webp); z-index: 2; } #slider-03 { background-image: url(./images/cat/cat-03.webp); z-index: 1; } .sliderMove { transform: translateX(0%); transition: 1s; }js코드를 아래와 같이 작성했습니다.<script> window.addEventListener("load", function sliderHandler() { const sliderGroup = document.querySelectorAll(".slider"); let currentSlider; function activate(elem) { elem.classList.add("sliderMove"); currentSlider = elem; } function inactivate(elem) { elem.classList.remove("sliderMove"); } for (i = 0; i < sliderGroup.length; i++) { if (currentSlider) { inactivate(currentSlider); } activate(sliderGroup[i]); } }); </script>후에 실행을 해보니 사진이 슬라이더처럼 작동이 안돼서요.. 작동이 안되는 이유와 어느 부분을 수정해야 하는지 알려주시면 감사하겠습니다!혹 수업 내용과는 조금 벗어난 질문을 한 거라면 정말 죄송합니다ㅜㅜ..

web api인 IntersectionObserver을 활용한 훅이 있는데요, 훅은 독립적으로 동작되기 때문에 단위 테스트 대상이라고 말씀하셨는데, 궁금한점은 web api를 활용한 훅은 단위테스트 대상일까요?테스트 환경이 다르고 web api는 이미 검증된 api이기 때문에 단위테스트 대상에서 제외 했거든요만약 단위 테스트 대상이라면 web api를 모킹해서 훅을 통해 반환한 값들을 확인 하면될까요?단위테스트 대상이 아니라면 통합테스트에서 해당 훅을 제대로 호출해서 사용하는지만 확인하면 될까요?

https://github.com/heeyoung123/OneBite안녕하세요 감정일기장 부분에서 문제가 2가지 생겨서 질문 남깁니다. 일기 작성 후 리스트에 렌더링이 되지않습니다.임시일기데이터에서 정렬을 최신순,오래된순을 바꿔도 적용이 안됩니다.무엇이 문제일까요..

const solve = (a,b) => { let left = 0, right = 0 const n = a.length + b.length; const answer = []; for (let i = 0; i < n; i++) { if (a[left] < b[right]) { answer.push(a[left]); left ++ } else { answer.push(b[right]) right ++ } } console.log(answer) } const a = [1,3,5]; const b = [2,3,6,7,9] console.log(solve(a,b));반례가 있을까요?

tempYOffset을 통해서 스크롤 위치를 저장하고 있다가 총 100px을 이동하는 것으로 이해하였는데요.tempYOffset의 초기값, 즉 yOffset이 0으로 출력됩니다.이게 바로 밑에 있는 window.addEventListener('scroll', () => { }가 아직 실행되지 않아서 yOffset이 초기화 되지 않아 0으로 나오나? 라고 생각하였는데 막상 강의 코드는 딱히 그런 것을 고려하지 않고도 잘 나오는 것 같더라구요.혹시 어떤 문제일지 알 수 있을까요?일단 당장에는 window.scrollY를 사용해서 임시조치로 해결했습니다. // 새로고침 등으로 스크롤을 처음부터 하지 않는 경우 시작하는 경우 해결을 위해 window.addEventListener('load', () => { setLayout(); sceneInfo[0].objs.context.drawImage(sceneInfo[0].objs.videoImages[0], 0, 0); document.body.classList.remove('before-load'); // 특정 위치에서 새로 고침 하면 화면이 나오지 않는 문제를 해결 let tempYOffset = yOffset; let tempScrollCount = 0; // 스크롤 몇 번 했는지 저장 console.log(tempYOffset); console.log(yOffset); let siId = setInterval(() => { window.scrollTo(0, tempYOffset); tempYOffset += 5; tempScrollCount++; if (tempScrollCount > 20) { clearInterval(siId); } }, 20); // ..............

안녕하세요 배포를 마쳐서 이런식으로 떠서 Production 링크를 누르면 저는 잘 들어가지는데 이 링크를 공유를 하면 다른사람들은 Vercel에 로그인을 하라는 창이 뜨더라고요,,, 어떤 해결방안이 있을까요,,,

안녕하세요.효율적인 테스트를 위해 상태 관리는 상위 컴포넌트에 응집해서 관리하는것이 좋다고 하셨는데컴포넌트가 캡슐화 되어있으면 서로 상호 작용하는 컴포넌트지만 동일한 상태 조회를 각 컴포넌트에서 독립적으로 하게되는 경우도 있을거 같습니다.이런 경우는 테스트에 용이하도록 구현 코드를 수정해야하는지, 아니면 번거롭더라도 그대로 테스트 코드를 작성해야 하는지 궁금합니다.애초에 컴포넌트 설계를 잘못했다고 판단해야 할까요?

데이터는 어디에 저장이될까요?도커컨테이너에 저장이되는걸까요?만약에 이 강의를 완강하고 제 컴퓨터로 서버를 만들어 돌린다고했을때 보통 데이터는 어디에 저장하는걸 추천하시나요?도커컨테이너에 저장하드디스크에 저장하고 주기적으로 aws s3에 업로더해준다.

안녕하세요.vercel를 통한 배포를 위해 설정을 하던 중 In which directory is your code located? ./이 부분에서 엔터를 눌러서 넘어가려 했는데 엔터를 누르자Error: Your Team encountered an unknown problem. Please reach out to our support team for details.이런 에러가 뜨면서 진행이 막히고 있습니다.혹시 해결 방법을 알려 주실 수 있으신가요?

퀴즈 - 중복된 숫자 방지 조건문 (빈 객체 사용) const duplicateNumbers = {}; for (let number of myNumbers) { if (duplicateNumbers[number]) { return alert('중복된 숫자를 입력했습니다.'); } duplicateNumbers[number] = true; }>> 이게 정답일까요?아직 수업순서대로는 객체를 안배운 상태여서ㅠㅠfor(let i =0; i<myNumbers.length; i++) { if(!myNumbers.includes(myNumbers[i])) { return alert("중복된 숫자를 입력했습니다."); } }이렇게 해봤는데 자기를 포함한 상태여서 계속 true로 되서중복 검사가 안됩니다ㅠ6강 말고 7강을 먼저 듣고 6강을 들어야 될까요?