오늘 강의 시작했는데 실습 예제 다운 받으려고 하니 저렇게 나오고 클릭이 안되네요 ㅜ 해결 방법 있을까요? 엣지 크롬 파이어폭스 셋다 저러네요 브라우저 보안 설정 떄문인가 해서 보안도 끄고 들어가봐도 저래요 아 그리고 실습예제 codepen 링크들어가서 보면 버튼눌러도 애니메이션이 반응이 없던데 .. 왜그런지 이유를 모르겠어요 다 그런건 아닌거같고 처음에 motionpath 예제만 그런거 같더라구요

안녕하세요 강의 완강후 오랜만에 질문드립니다!그동안 클린코드, sql, oop, cs등을 공부해보고 강의도 다시 복습중입니다.다름이 아니라 구현능력에 대한 질문입니다. 강의코드를 이해하거나 복붙, 수정해서 api를 구현하는 것은 가능한데, 백지상태에서 구현하라고 하면  머리가 하얘집니다… 아직 부족하다고 생각돼서 회사에 지원은 안해봤는데 막상 과제테스트를 하게되면 정말 막막할 것 같네요..(어떤 회사들은 과제테스트 할 때 라이브러리를 사용하지 않고 구현해야된다고 하더군요)새로운 api를 구현하려고 하면 일단 강의코드를 참고해서 복붙 ,수정 작업을 반복하는데 이게 맞나하는 생각이 드네요.그래서 코드를 한줄 한줄 따라 치면서 이해하고 외우는 방법으로 구현능력을 키워보려 하는데 괜찮은 방법일까요? 아니면 그냥 코드를 참고하더라도 무작정 구현을 많이 해보는게 좋을까요?그리고 코파일럿을 쓰고있는데 굉장히 편리하긴 하지만 구현능력을 키우려면 쓰지 않는게 좋겠죠?독학으로 하다보니 여러 생각이 많아지는 것 같습니다. 조언 부탁드릴게요!

안녕하세요 정환님, 인프런에 많은 강의를 들어보며 이렇게 만족스러운 강의가 있었나 싶을만큼 좋은 강의 제공해주셔서 감사드립니다. 비동기 처리 과정에 대해 질문드립니다.비동기 처리 결과를 다시 인수로 받아 연이어 사용하는 callback hell을 보여주시면서 실행 순서를 말씀해주셨습니다. 이때 call stack에 쌓이는 function context는 taskA()가 앞서지만 함수의 구현부가 비동기 함수로만 이루어져 WebAPIs에서 대기를 하게되고 이동안 taskA()의 다음 순서인 console.log()가 호출되는걸로 이해하면 될까요? 다시한번 좋은 강의 감사드립니다.

NoPermissions (FileSystemError): Error: EACCES: permission denied 라는 에러가 뜨는데 어떻게 해결해야 되나요?

function solution(s){ let answer = ''; let cnt = 1; for (let i = 1; i <= s.length; i++) { if (s[i - 1] === s[i]) cnt++; else { answer += s[i - 1]; if (cnt > 1) answer += cnt; cnt = 1; } } return answer; } let str="KKHSSSSSSSE"; console.log(solution(str)); 이렇게 풀어도 되나요 ? 

nest.js docker파일을 실행하였는데 정상적으로 돌아가는데 이상하게 매번 [Nest] 42 - 08/13/2023, 7:22:38 AM ERROR [ExceptionHandler] Access denied for user ''@'172.19.0.3' (using password: YES)이 오류가 나더라구요 그래서 확인해보니까 user 권한을 주면된다는데 제가 env파일 root로 두개다 설정을 했는데 왜 저러는지 모르겠는거랑 error에 user부분이 ''이렇게만 나오는 이유를 잘모르겠습니다그리고 페이지에 들어가니 페이지가 작동되지않는다는 오류와 전송된 데이터가 없다는 오류만 나옵니다. FROM node:16 COPY ./package.json /myfolder/ COPY ./yarn.lock /myfolder/ WORKDIR /myfolder/ RUN yarn install # packge.json이 변경되지않았는데 매번 새롭게 다운받는게 비효율적이라서 packge.json과 yarn.lock을 미리 복사 # 캐시에서 확인할때 변경되지않으면 다음부터는 다운받지않고 바로 가져올수있기때문에 # 코드를 변경하면 이부분만 캐시가 깨지기때문에 속도가 더빠르다 COPY . /myfolder/ # WORKDIR /myfolder/ # RUN yarn install # . 했을 당시의 소스코드를 기억함으로 캐시에서의 소스코드와 다르면 다시 카피해서 가져옴 # 한번 캐시가 깨지기 시작하면 그아래부분부터는 전부깨서 전부다시 다운받거나 새로시작 -> 어디가 변경된지 몰라서 영향을 줄수있기때문에 CMD yarn start:devversion: '3.7' # 컴퓨터들 # 들여쓰기가 부모자식관계로 인식해서 중요함 services: # 변수명처럼 자유롭게 작성할수있음 / 컴퓨터명 my-backend: build: # 파일경로 context: . # 파일명 dockerfile: Dockerfile volumes: - ./src:/myfolder/src # 포트포워딩 ports: - 3000:3000 env_file: - ./.env.docker # 도커를 실행할때 사용하는 환경변수파일설정 my-database: # platform: linux/86_64 # cpu등의 문제가있을때 # 설치해서 바로실행되는경우 dockerfile없이 image: mysql:latest # mysql은 비밀번호가 있어야지 작동한다 설치하고 사용할 database도 만들어주어야 작동한다 # mysql에 접속해서 자동적으로 myproject명으로 설정된 데이터베이스를 만들어준다 environment: MYSQL_DATABASE: 'starbucksDB' MYSQL_ROOT_PASSWORD: 'root' # 처음으로 들어갈때 비밀번호를 설정 ports: - 3306:3306 # 하지만 네임리졸루션으로 express에서 접속가능

if(Number(activeLi) < 0){ activeLi = Number(activeLi) + 260; //왼쪽에 있던 카드가 오른쪽으로 갔다면, 다시 왼쪽으로 갈 수 있도록 PREV 버튼 활성화 slidePrev.style.color = '#2f3059'; slidePrev.classList.add('slide-prev-hover'); slidePrev.addEventListener('click',transformPrev); if(Number(activeLi) === 0){ slideNext.style.color = '#cfd8dc'; slideNext.classList.remove('slide-prev-hover'); //이벤트처리. 클릭을 눌러도 더이상 동작하지 않게. slideNext.removeEventListener('click', transformPrev); } }let activeLi = classList.getAttribute('data-position');activeLi에 속성을 가져오고 if문에서 Number를 꼭 써야한다는 것이 정확하게 이해가 잘 안가요... Number()로 형변환을 하지 않으면 어떻게 되나요 ?어차피 index.html에서 data-position의 값으로 숫자를 지정한거 아닌가요? <ul class="class-list" data-position="0">쌍따옴표로 감싸면 다 문자로 인식되는건가요?강의를 띄엄띄엄봐서 ㅠㅠ 헷갈립니다...

프론트,백엔드,몽고db로 api 조회하는게 강의 듣고복습폴더에서 포트번호 똑같이 4000으로 했다가 에러나서 3000으로 바꿨더니 해결됐어요근데 어쩔땐 복습폴더에서 포트번호 4000으로 맞춰놓고 도커 접속했더니 잘만 되더라구요에러나는 기준이 궁금해요 

 그냥 서버만 관리하면 되니까 새로운 아이디어가 떠오르거나 창의성 같은 거는 필요하지 않나요?

강의자료 사이트 접속이 안되네요.

안녕하세요. 강의 잘 듣고 있습니다. scroll-timeline.js 를 사용한 ScrollTimeline 실행 시, 부드러운 모션 효과를 위한 옵션이 있을까요?스크롤 한번 했을 때. 스르륵 멈출 수 있게요.

 안녕하세요 원두멘토님! 13챕터에서 graphql-upload 버전이슈로 버전을 낮춰 대응하셔 작동이 되게 알려주셨습니다.확인을 해보니 apollo server에서 원래 패키지에 포함시켰던 디펜젼시를 csrf문제로 포함시키지 않고 분리를 해서 버전관리가 되지 않아서 생긴 문제인것 같았습니다.제가 궁금한 점은 graphql-upload로 클라이언트에게 업로드 기능을 제공해주는 것이 아닌 다른 방법으로 grpahql에서 upload기능을 제공해 줄수있는지 궁금합니다.보안상 좋지 않고 버전관리가 되지 않는 패키지는 사용하는것이 나중을 생각했을때 더 개발난이도가 올라갈 것 같다 생각이 들었습니다.제가 생각한 방법은 multer를 사용하는 건데 그렇게 하려면 restapi로 제공을 해줘야 하는데 grpahql 과 restapi를 같이 사용해서 api를 제공해줘야하는데 이 또한 가능하거나 추천하시는지 궁금합니다. 

https://www.inflearn.com/questions/961239/%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EB%A5%BC-%EB%A7%88%EC%B9%98%EB%A9%B0-%EB%B0%B0%ED%8F%AC-%ED%8E%98%EC%9D%B4%EC%A7%80%EC%97%90%EC%84%9C-%EC%97%85%EB%A1%9C%EB%93%9C-%EC%9E%91%EB%8F%99%EC%9D%B4-%EC%95%88%EB%90%A8"프로젝트를 마치며 배포 페이지에서 업로드 작동이 안됨"이라는 제목의 질문글의 추가 질문입니다.=====================이전 질문 내용==========================================상품 업로드에 관한 이슈과정을 다 마치고, fly.io와 vercel.com을 통하여 배포한 페이지 중에서 상품 업로드가 제대로 이뤄지지 않습니다.github 주소 :https://github.com/arominddo/Inflearn_full_stack_boot_campvercel을 통해 배포된 web 어플리케이션 url :https://grab-market-client-ashen.vercel.app/ grab_market_web > src > upload > index.js에 코드 내용이 작성되어 있습니다.  배포된 페이지의 DB 초기화 문제프로젝트를 전부 마치면서, 다시 한번 fly.io에 최신 코드로 재배포를 해보고 실험을 해보았는데도, web에서 특정 상품을 업로드하거나(오류가 나지 않았을 당시), 상품 구매하기 기능을 통하여 soldout 값을 1로 바꿔줬음에도,약 5분이 지나면 DB가 배포 됐을 당시의 내용으로 계속 초기화가 됩니다.해결 방안이 궁금합니다.ex) A라는 물건 업로드 -> 5분 지남 -> 새로고침 해보면 A라는 물건이 리스트에서 삭제ex) B라는 물건 구매 하기 버튼 클릭 -> soldout 값 1로 변경 -> 약 5분 지남 -> 다시 soldout 값 0으로 복귀===================================================================================  위와 같은 이전 질문 내용에서 1번에 해당하는 답변으로, 어떤 오류 로그가 뜨냐고 물어보셔서 여기 다시 남겨봅니다. 위 사진은 vercel을 통해 배포 된 Web에서 upload를 시도하면 나오는 오류 로그입니다. upload 시도 시에 fly.io 모니터화면에서 볼 수 있는 오류입니다.참고로, Local 환경에서 같은 코드로 npm start로 실행된 서버와 web에서는 업로드 기능이 잘 작동됩니다.  재부팅에 관련된 로그라고 생각되는 부분 캡쳐해서 보내드립니다. 이와 같은 로그가 뜨면서 배포된 서버의 내용이 배포 시점으로 돌아가는 것 같습니다.그런데 로그를 보자면 reboot라는 것이 단순히 서버를 죽였다가 다시 올리는 것으로 생각 되는데, 배포된 서버가 돌아감에 있어서 업로드 되거나 값이 변했던 내용들이 다 사라지는 것이 이해가 되지 않습니다ㅠㅠ   

 entity.ts파일에서 input으로 사용할 틀을 resolver에서 Mutation쪽 service의 매개변수로 넘겨줄려고 사용했는데Argument of type '{ inputStarbucks: InputStarbucks; }' is not assignable to parameter of type 'InputStarbucks'이러한 오류가 나서 찾아보니 해당 타입으로는 변수타입을 지정할수없어서 변경하라고했는데class틀도 문제가 없는데 왜 오류가 나는지 잘모르겠습니다.import { Args, Mutation, Query, Resolver } from '@nestjs/graphql'; import { StarbucksService } from './starbucks.service'; import { InputStarbucks } from './entities/starbucks.input'; import { Starbucks } from './entities/starbucks.entity'; @Resolver() export class StarbucksResolver { constructor( private readonly starbucksService: StarbucksService, // prettier때문에 아래로 내려쓰기가 안되니까 주석달기 ) {} @Query(() => [Starbucks], { nullable: true }) // graphql에서는 배열을 [Board]식으로 사용 아래에서는 Board[]라고 사용했는데 fetchBoards(): Starbucks[] { return this.starbucksService.findAll(); } @Mutation(() => String) creatBoard( // 한번에 사용하는 방식 @Args('inputStarbucks') inputStarbucks: InputStarbucks, // graphql에서 데이터를 입력받고 변수명과 타입을 지정 // graphql에서 writer로 입력받은값을 writer라는 변수에 받고 데이터 타입은 string으로 지정 ): string { return this.starbucksService.create({ inputStarbucks }); // return을 작성해야 사용한 api쪽 리턴이 module쪽까지 전달됨 } }import { Injectable, Scope } from '@nestjs/common'; import { Starbucks } from './entities/starbucks.entity'; import { InputStarbucks } from './entities/starbucks.input'; @Injectable({ scope: Scope.DEFAULT }) export class StarbucksService { findAll(): Starbucks[] { // entity에서 만든 Board의 배열형태를 가져와서 사용 const result = [ { number: 1, writer: '짱구', title: '제목', contents: '내용이요' }, { number: 2, writer: '짱구2', title: '제목2', contents: '내용이요2' }, { number: 3, writer: '짱구3', title: '제목3', contents: '내용이요3' }, ]; return result; } create({ inputStarbucks }: InputStarbucks): string { console.log(inputStarbucks.writer); // 데이터 타입의 클래스의 명과 동일해야한다 .writer이부분이 console.log(inputStarbucks.title); console.log(inputStarbucks.contents); return '게시물 등록 성공'; } }import { Field, InputType } from '@nestjs/graphql'; // @ObjectType() // 이렇게 작성하면 type으로 나옴 . 리턴타입이 type이었을때 // mutation의 경우에는 input으로 작성했다 @InputType() export class InputStarbucks { @Field(() => String) writer: string; @Field(() => String) title: string; @Field(() => String) contents: string; } // Graphql에서 사용하기위해서 graphql 데이터 타입지정

인프런 아이디 : siwoobaksa@naver.com인프런 이메일 : siwoobaksa@naver.com깃헙 아이디 : lswsepia@gmail.com깃헙 username : lswdev

안녕하세요! useReduce를 사용하고 최적화를 한 단계에서 onReduce() 함수가 어떻게 최적화 되는지 원리에 의문이 생겨 질문 드립니다. const [data, dispatch] = useReducer(reducer, []); //reducer 생략 case "REMOVE": return state.filter((it) => it.id !== action.targetId); 해당 코드에서 REMOVE를 실행하면 data 배열이 새로운 배열로 업데이트가 됨 -> 2. 그러면 data를 prop으로 받고 있는 DiaryList.js에서 이를 감지하고 처음부터 끝까지 DiaryItem.js를 다시 생성함. ->3. 그런데 DiaryItem은 React.memo로 prop를 비교하는데, 얕은 비교를 하기에 data에 새로 생성된 배열과는 주소가 달라 새로운 컴포넌트를 다시 생성. 이 되어야 하지 않을까요? 혹시 저의 논리에서 어디 부분이 잘못되었는지 모르겠어서 질문합니다... ㅠ

안녕하세요!강의 재밌게 잘 보고 있습니다 :Dscroll-timeline.js 파일은 어디서 가져오신 건가요?세팅부터 혼자서 해보려고 했는데scroll-timeline 저장소여기서 아무리 찾아봐도 안 보이네요..!Usage에 보면 import를 dist 폴더에서 scroll-timeline.js를 가져오는 것 같은데 dist 폴더도 안 보이고 src 폴더에 scroll-timeline-base.js도 아닌 것 같아서 질문 남깁니다..!또, scrollOffsets에 넣는 옵션들은 어떻게 확인하나요? README에는 new CSSUnitValue 이것밖에 안 보이는데 강의에서는 target, edge, threshold 속성들도 쓰셔서 어디서 확인하고 쓰시는지 너무 궁금합니다..!

react-create-app이 안돼서 vite를 사용해서 실습하고 있는데 코드를 똑같이 작성했지만 빈화면만 뜹니다. 무엇이 문제인지 모르겠어요

안녕하세요! 좋은 수업 잘 듣고 있습니다 :)props로 컴포넌트를 받는 Container 컴포넌트에 대해 질문이 있습니다!JSX 규칙 중에 모든 컴포넌트는 부모 태그를 가지고 있어야 한다고 말씀해주셨는데 아래 코드처럼 Container는 부모 태그가 없이도 잘 동작하기에 이유가 무엇인지 궁금합니다!function App() { const counterprops = { a : 1, b : 2, c : 3, d : 4, initialVaule : 5, }; return ( // HTML을 반환 <Container> <div className="App"> <Counter {...counterprops}/> </div> </Container> ); }또한 function App() { const counterprops = { a : 1, b : 2, c : 3, d : 4, initialVaule : 5, }; return ( // HTML을 반환 <div className="App"> <Container> <Counter {...counterprops}/> </Container> </div> ); }이렇게 코드를 짜면 동작하지 않더라구요! 왜 첫번째 코드는 동작하고, 두번째 코드는 동작하지 않는지 궁금합니다!감사합니다.

import { ApolloDriver, ApolloDriverAsyncConfig as ad } from '@nestjs/apollo'; import { Module } from '@nestjs/common'; import { GraphQLModule } from '@nestjs/graphql'; import { AppController } from './app.controller'; import { AppService } from './app.service'; @Module({ imports: [ GraphQLModule.forRoot<ad>({ // forRoot의 데이터타입지정 <> -> 제네릭 부분 driver: ApolloDriver, autoSchemaFile: 'src/commons/graphql/schema.gql', }), ], controllers: [AppController], providers: [AppService], }) export class AppModule {} import { Field, Int, ObjectType } from '@nestjs/graphql'; @ObjectType() // graphql에서 type을 의미함 예)type Board export class Board { @Field(() => Int) // Int를 import를 해서 사용해야한다 number: number; // ;을 기준으로 구분함 @Field(() => String) // graphql을 위한 용도 writer: string; @Field(() => String) title: string; @Field(() => String) contents: string; } 단순히 graphql shema를 자동생성 해주는 거만 테스트할려고했는데 경로를 잡아주니 에러가나와서 true도 해보고 playground : true도 추가해보고했는데 계속 해서 오류가 나고 계속해서 오류는 type이 존재하지않는다고해서 이유를 모르겠습니다 Argument of type '{ driver: typeof ApolloDriver; autoSchemaFile: string; }' is not assignable to parameter of type 'ApolloDriverAsyncConfig'.Object literal may only specify known properties, and 'autoSchemaFile' does not exist in type 'GqlModuleAsyncOptions<ApolloDriverConfig, GqlOptionsFactory<ApolloDriverConfig>>'.ts(2345)