173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
윈스턴이던뭐던 로그를 저장하는파트는 따로 없나요? 따라서 만들다보니 로그를 저장할 필요가 있을것같아서 시도중인데 nest는 방법을 잘 모르겠어서 혹시 강의에 포함이된부분이있나해서요.
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. React.memo로 렌더링 최적화 강의를 듣다가 질문이 생겼습니다. React.memo는 props가 변하지 않으면 다시 렌더링 하지 않는다고 알고 있는데요. App.js에서 useState의 결과물인 setState(setTodoData 등)가 List.js의 props로 내려가는데, 이는 변화로 보지 않는 것으로 보았습니다. 아래의 단순화된 useState의 구현을 보면 useState로 나온 state는 클로저를 통해 값이 변경되지 않으면 useState가 같은 값?참조?를 내려주는 것 같은데, setState는 매번 새로 생성되어 참조가 바뀔 것 같다는 생각을 하였습니다. 그래서 React.memo가 매번 새로 생성되는 setState를 보고 props가 바뀌는 것으로 인식하여 렌더링을 해주어야 하지 않을까 했는데... 실제로는 그렇지 않더라고요 물론 단순화된 구현이고 실제 리액트의 구현은 복잡한 과정을 거쳐 같은 참조를 내려줄 것 같다고 생각이 드는데요. 이 마법같은 과정이나 원리, 키워드에 대해서 아무리 찾아도 찾을 수가 없어서 도움을 청하고자 질문을 남깁니다... 감사합니다. const MyReact = (function() { let _val // hold our state in module scope return { render(Component) { const Comp = Component() Comp.render() return Comp }, useState(initialValue) { _val = _val || initialValue function setState(newVal) { _val = newVal } return [_val, setState] } } })() 출처: https://medium.com/hcleedev/web-usestate%EC%9D%98-%EB%8F%99%EC%9E%91-%EC%9B%90%EB%A6%AC%EC%99%80-%ED%95%A8%EC%A0%95-7b4825c16b9
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
안녕하세요. 제가 찾고 기다리던 내용의 강의라 매우 만족하며 수강하고 있는 수강생입니다! ㅎ products.service.ts 파일에서 create와 update 메서드 작성할 때 typescript 에러에 대해 질문드립니다. products.service.ts 파일 create 메서드에서 productTags를 등록하는 과정에 const result2 = [] 부분을 const result2: string[]로 작성하면 await productRepository.save (...) 에서 No overload matches this call이 뜨고 update 메서드에서 updateProductInput에 UpdateProductInput로 타입을 지정하면 위와 마찬가지로 await productRepository.save (newProduct)에서 No overload matches this call이 뜹니다. 두 경우 모두 Type 'string' is not assignable to type 'ProductTag' 문제로 product.entity.ts에서는 productTag를 아래와 같이 등록하고 @Field(() => [ProductTag]) @JoinTable() @ManyToMany(() => ProductTag, (productTags) => productTags.products) productTags: ProductTag[]; createProduct.input.ts에서는 CreateProductInput에서 productTag를 아래와 같이 등록해서 발생하는 문제라고 추측했습니다. @Field(() => [String]) productTags: string[]; 두 경우 모두 타입을 지정하지 않고 any로 두면 문제는 사라지긴 합니다. any로 두고 사용할 수밖에 없는 것인지 아니면 타입 지정을 해서 사용하는 방법이 있는지 궁금합니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
yarn start:dev 실행 하고 나면 아래와 같이 나오면서 에러가 뜨고 있어요 ERROR [TypeOrmModule] Unable to connect to the database. Retrying (1)... 아래 코드도 정상적으로 기입 했는데, 계속 접속 오류로 연결이 되지가 않습니다. import { ApolloDriver, ApolloDriverConfig } from '@nestjs/apollo' import { Module } from '@nestjs/common' import { GraphQLModule } from '@nestjs/graphql' import { TypeOrmModule } from '@nestjs/typeorm' import { BoardsModule } from './apis/boards/boards.module' import { Board } from './apis/boards/entities/board.entity' @Module({ imports: [ BoardsModule, GraphQLModule.forRoot<ApolloDriverConfig>({ driver: ApolloDriver, autoSchemaFile: 'src/commons/graphql/schema.gql', }), TypeOrmModule.forRoot({ type: 'mysql', host: 'localhost', port: 3306, username: 'root', password: 'test1234', database: 'myproject03', entities: [Board], synchronize: true, logging: true, }), ], // controllers: [AppController], // providers: [AppService], }) export class AppModule {} 현재 brew 확인시 Mysql 서버도 정상적으로 켜져 있는것을 확인 할 수 있어요 디비버에서도myproject03 이라고 정확하게 만들었습니다. 선생님의 강의하고 다른부분을 못 찾았는데, 데이터 베이스가 연결이 안될 때는 어느부분을 더 점검 해 봐야 할지요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
http://localhost:3000/graphql 실행 후 query > getHello 시 오류가 있습니다. 코드는 오타 없이 동일 한데, 저는 실행시 http://localhost:3000/graphql 여기서 아래와 같은 오류가 뜨는데 어떤 상황인지 파악이 잘 되지가 않습니다. { "errors": [ { "message": "Cannot return null for non-nullable field Query.getHello.", "locations": [ { "line": 2, "column": 3 } ], "path": [ "getHello" ], "extensions": { "code": "INTERNAL_SERVER_ERROR", "exception": { "stacktrace": [ "Error: Cannot return null for non-nullable field Query.getHello.", " at completeValue (/Users/back/study/20230119_nestjs/class/13-01-nestjs-with-graphql/node_modules/graphql/execution/execute.js:594:13)", " at /Users/back/study/20230119_nestjs/class/13-01-nestjs-with-graphql/node_modules/graphql/execution/execute.js:486:9", " at processTicksAndRejections (node:internal/process/task_queues:95:5)", " at async Promise.all (index 0)", " at execute (/Users/back/study/20230119_nestjs/class/13-01-nestjs-with-graphql/node_modules/apollo-server-core/src/requestPipeline.ts:501:14)", " at processGraphQLRequest (/Users/back/study/20230119_nestjs/class/13-01-nestjs-with-graphql/node_modules/apollo-server-core/src/requestPipeline.ts:407:22)", " at processHTTPRequest (/Users/back/study/20230119_nestjs/class/13-01-nestjs-with-graphql/node_modules/apollo-server-core/src/runHttpQuery.ts:436:24)" ] } } } ], "data": null } app.module.ts 에도 정상적으로 연결 해 두었습니다. import { Module } from '@nestjs/common' // import { AppController } from './app.controller'; // import { AppService } from './app.service'; import { BoardsModule } from './apis/boards/boards.module' import { GraphQLModule } from '@nestjs/graphql' import { ApolloDriver, ApolloDriverConfig } from '@nestjs/apollo' @Module({ imports: [ BoardsModule, GraphQLModule.forRoot<ApolloDriverConfig>({ driver: ApolloDriver, autoSchemaFile: 'src/commons/graphql/schema.gql', }), ], // controllers: [AppController], // providers: [AppService], }) export class AppModule {}
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
안녕하세요, react 도커파일 작성 및 docker run을 해줬는데요, (port 10001:10001) localhost :10001이 들어가지지 않는데,, 별도의 설정이 필요할까요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
제가 잘못 본건지는 모르겠지만, Node.js API구현 중 퍼사드 패턴 47:31초에서 function getToken() { const myconunt =6 if(mycount === undefined){ console.log("에러발생!!! 갯수를 제대로 입력해주세요!!!") return ~~~ } 좌측 인강화면을 보시면 01-04-token-count-api-facade 폴더에 들어있는 index.js파일에서 function getToken() 함수에서 매개변수를 지우고, const mycount = 6 으로 대체하였습니다. 하지만, 우측 노션에 학습자료 퍼사드 패턴에서는 function getToken(count) { ~~} 라고 해서 count매개 변수가 존재합니다. count를 여전히 매개변수로 사용하고 있습니다. 즉 "노션에 있는 자료가 수정되어야 한다고 생각합니다." 노션 자료 중 호출하는 부분에서 createTokenOfPhone('01012345678', 6); 매개변수 6도 삭제되어야 합니다. "REST-API 실습 강의"에서 postman으로 학습시 "휴대폰 번호 전송"이 안되서 순간적으로 당황했습니다. 확인하시고, 답글 달아주시면 감사하겠습니다. 해당강의는 Node.js API구현 중 퍼사드 패턴 47:31초입니다. 노션은 학습 자료 / 퍼사드 패턴 입니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
수업중 나온 깃허브 저장소가 없는 이유가 궁금합니다. 현재 스크린샷처럼 되어 있는 주소가 없어요
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 넷플릭스 실습을 하면서 iframe을 사용해 유튜브에서 동영상이 나오게 하는거 까지는 완료가 되었습니다. 그런데 재생버튼을 누르고 영상이 시작되면 그림처럼 흐릿하게 나오는데 왜 그런걸까요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
현재 Ubuntu 운영체제를 듀얼부팅으로 22.04.01 버전으로 사용하고 있고, 강의를 듣기 위해 mongodb 설치를 진행하려고 합니다. 그러나 현재 강의의 notion에서 올려주신 설치 과정을 그대로 진행했는데 6번 명령어를 실행 후 이와 같은 오류가 발생했습니다. 설치과정 sudo apt-get install gnupg wget -qO - https://www.mongodb.org/static/pgp/server-5.0.asc | sudo apt-key add - lsb_release -dc echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu jammy/mongodb-org/5.0 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-5.0.list (jammy버전이라 fosal에서 jammy로 변경했습니다.) +추가(jammy가 아닌 forsal로도 진행을 해 봤고, 6.0버전으로도 진행해봤는데 같은 에러가 떴습니다...) sudo apt-get update sudo apt-get install -y mongodb-org 오류 메시지 몇몇 패키지를 설치할 수 없습니다. 요청한 상황이 불가능할 수도 있고, 불안정 배포판을 사용해서 일부 필요한 패키지를 아직 만들지 않았거나, 아직 Incoming에서 나오지 않은 경우일 수도 있습니다. 이 상황을 해결하는데 다음 정보가 도움이 될 수도 있습니다: 다음 패키지의 의존성이 맞지 않습니다: mongodb-org-mongos : 의존: libssl1.1 (>= 1.1.1) 하지만 설치할 수 없습니다 mongodb-org-server : 의존: libssl1.1 (>= 1.1.1) 하지만 설치할 수 없습니다 mongodb-org-shell : 의존: libssl1.1 (>= 1.1.1) 하지만 설치할 수 없습니다 E: 문제를 바로잡을 수 없습니다. 망가진 고정 패키지가 있습니다. 구글링 해본 결과 libssl1.1이 깔려있지 않아서 그렇다는 걸 확인했는데 우분투 22.04 버전은 libssl3이 이미 깔려있어 중복 설치는 좋은 해결 방법이 아니라는 것을 확인했습니다. 그래서 또 다르게 설치할 수 있는 방법이 있을지 질문드립니다.
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
tdd 앱 개발 초입 강의에서 질문 있습니다. App.test.js에서는 screen.getByTestId("counter")를 했고, App.js 에서는 <h3> 내부에 data-testid="counter" 라고 되어 있는데요. 어떻게 App.js 내부의 <h3> 태그의 data-testid가 getByTestId로 불릴 수 있는지 궁금합니다..! 그리고 넘어간 정보가 왜 0이 아니라 TextContent가 맞는걸까요?
해결됨
따라하며 배우는 리액트 A-Z[19버전 반영]
next13 학습을 진행하고 있는데 오류가 발생해서 질문드립니다. 기본적으로 이 상태에서는 이런 오류가 발생하고 <Link>를 사용을 하게 되면 이런 오류가 발생합니다.. 어떻게 해야하나요?
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
src/components/Row.js Line 14:7: React Hook useEffect has a missing dependency: 'fetchMovieData'. Either include it or remove the dependency array react-hooks/exhaustive-deps 쌤 그리고 fetchMovieData 가 있습니다. 그것을 포함하거나 종속성 배열 React-hooks/exhausitve deps를 제거하라는게 무슨말인가요??
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
import React, {useState} from "react"; import "./App.css"; export default function App () { const [todoData, setTodoData] = useState([ { id:"1", title:"공부하기", completed: false, }, { id:"2", title:"청소하기", completed: false, } ]); const [Value,setValue] = useState(""); // 첫번째 인수는 변수 두번재 인수는 state를 정하는 변수 const btnStyle ={ color: "#fff", border: "none", padding: "5px 9px", borderRadius: "50%", cursor: "pointer", float:"right", }; const getStyle = (completed) => { return{ padding:"10px", borderBottom:"1px #ccc dotted", textDecoration: completed ? 'line-through' : "none", }; }; const handleClick = (id) =>{ let newTodoData = todoData.filter(data => data.id !== id) console.log("newTodoData",newTodoData) setTodoData(newTodoData); }; const handleChange = (event) => { console.log("event",event.target.Value) setTodoData(event.target.Value); }; const handleSubmit = (event) =>{ console.log("event",event) event.preventDefault(); // reload를 막아줌 // 새로운 할일 데이터 let newTodo ={ id: Date.now(), title : Value, completed: false, }; // 원래 있던 할 일에 새로운 할일을 더해주기 setTodoData(prev => [...prev,newTodo]); setValue(""); }; const handleCompleteChange = (id) => { console.log("todoData",todoData) let newTodoData = todoData.map((data) =>{ if(data.id === id){ data.completed = !data.completed; } return data; }); setTodoData(newTodoData) }; return ( <div className="container"> <div className="todoBlock"> <div className="title"> <h1>할일 목록</h1> </div> {todoData.map((data) => ( <div style={getStyle(data.completed)} key={data.id}> <input type="checkbox" defaultChecked={false} onChange={() => handleCompleteChange(data.id)}/> {data.title} <button style={btnStyle} onClick={() => handleClick(data.id)}>x</button> </div> ))} <form style={{display:'flex'}} onSubmit={handleSubmit}> <input type="text" name="value" style={{flex:'10', pedding:'50'}} placeholder="해야 할 일을 입력하세요." value={Value} onChange={handleChange}/> <input type="submit" value="입력" className="btn" style={{flex:'1'}} /> </form> </div> </div> ); } 아래 코드에서 form에 어떠한 글자를 입력하면 Console 창에 왜 Uncaught TypeError: Cannot read properties of undefined (reading 'map') 에러가 발생하는지 도저히 모르겠습니다. 혹시 아시는분 답변 부탁드립니다. 감사합니다.
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
Re-run all jobs 버튼이 없어서 node.js에서 오류가 발생하는데 혹시 어떻게 해야할까요?
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
따라 치면서 실습하는데 적용이 안 되길래 삽질 하다가 혹시나 싶어서 강의 자료를 다운 받아 npm run start 해 보았는데요 그것도 이렇게 적용이 안 되게 보이네요... 뭐가 문제일까요? ㅜ.ㅜ
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
강의 내용 중 useMemo 부분의 실습이 없어서 질문드립니다. Component.js로 컴포넌트를 작성하고 App.js에서 컴포넌트를 호출해봤는데요. App.js .. <div>{<Component a={1} b={5} />}</div> ... Component.js ... useMemo(() => compute(a,b),[a,b]); ... 이렇게 작성했을 때 useMemo가 제대로 작동하고 있는지 확인하고 싶은데요. useEffect는 console.log로 확인이 됐는데 useMemo는 어떻게 확인을 할 수 있을까요? (useEffect랑 useMemo는 방식이 달라서 useEffect에 로그를 찍어봤자 useMemo를 확인할 수 없었어요...)
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
안녕하세요. 모달창 을 띄우고 스크롤을 하면 모달창 밖에 화면이 스크롤이 되는데 이부분도 useRef를 이용해서 막을 수 있을까요??
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
이러한 API_URL은 어떻게 알 수 있을까요 ? https://www.themoviedb.org 사이트에 정보가 나와있는 걸까요 ?
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
선생님 강좌 하다보니까 스타일 관련이 좀어려운 부분이 있는데요 혹시 스타일 쉽게 구현하는 법이 있나요? 미디어쿼리 z인덱스니 포지션 이런거 한번에 해결해주는 툴은 없는지요?
