173만명의 커뮤니티!! 함께 토론해봐요.
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. const movieId = request.data.result[Math.floor(Math.random() * request.data .results.length)].id; 부분 작성 후 컴파일 시 리액트에서 Cannot read properties of undefined 에러가 발생합니다. 하나가 아니라 여러개 발생하는데 조치방법이 있을까요?
해결됨
부트캠프에서 알려주지 않는 것들 (리액트) 1편
강의하시는 예제를 코드샌드박스에서 열고싶은데 링크가 어디있나요??
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
안녕하세요! 강의 잘 듣고 있는 학생입니다. 1:1관계등록 강의에서는 product sales location 관계를 등록할 때는 따로 sale location에 대한 모듈 파일과 리졸버 파일은 만들지 않고 서비스 파일만 만들어서 관계를 등록하였는데, 1:다 관계등록 강의에서는 product category에 대한 모듈파일과 리졸버 파일까지 만들어 관계등록을 하는 것으로 가르쳐주셨습니다. 코드 구성은 크게 다르지 않은 것 같은데, 카테고리 관계등록 강의에서는 일대다 관계이기 때문에 리졸버와 모듈파일까지 만들어서 관계등록을 하는 것인가요? 그렇다면 이유를 좀 알 수 있을까요..? 코드 구성은 비슷하고, 차이라고 할 것은 1대1이냐 1대다이냐 밖에 없는 것 같은데 이렇게 모듈파일을 만들어주고 안만들어주고의 차이가 발생하는 이유가 이해가 안가서요 ㅠ
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
ERROR [TypeOrmModule] Unable to connect to the database이 에러가 일어났다 안일어났다가해요. nestjs에서 typeorm으로 mysql에 table entity를 저장해주는 과정에서 db에 접속이 안되었다. 1. TypeOrmModul.forRoot안의 오타확인 -> 없었다 2. Entity에 이상이 있는지확인 -> 없었다 3. 구글링에서는 대부분이 오타문제이거나 데이터베이스를 생성해주지않았다는 문제라고했다 -> 데이터베이스도 켜져있었고 티미널이랑 dbeaver에서도 mysql과 접속이 되고있는것으로 확인 4. 컴퓨터가 버그로 안되는 걸로 예상해 잠시 종료했다가 실행 -> 역시안됐다 5. 비밀번호를 숫자로 입력해서 string이아닌 number형식으로 작성했는데 password는 string 타입만 작성가능하다고 오류가나왔다 - 문제해결 -> root 비밀번호를 string타입으로 변경하니까 오류가 해결되었다 -> 숫자로 입력하니 넘어오는 과정에서 숫자가 string형태로 변경되어 접속오류로 판명 -> 비밀번호는 문자열로..... -> 이게 전날에 연결이 안되어서 해본결과였고 오늘 했을때에는 연결이되었는데 두번째 접속을 하니까 연결이 안되서 dbeaver에서랑 터미널에서 접속을 했을때는 문제가 없었습니다. 왜계속해서 이런오류가 불규칙적으로 일어나는지 모르겠습니다. 그리고 두번째 질문은 nestjs독스에서는 synchronize: true,이부분을 false로 권장하고있는데 그이유로는 데이터 손상?유실이 있을수있다고 써져있는데 수업중에는 true로되어야지 동기화가 된다고 하셔서 이부분도 설명 부탁드릴수있을까요 마지막으로 세번째 질문으로는 dbeaver에서재연결요청을 했을때 Datasource was invalidated Live connection count: 2/2 이렇게 나오는데 이러면 mysql이 켜져있는 상태인건가요? 해당 database는 다볼수있는데 offline인데 그전에 연결이되서 볼수있는건가하는 의심이 들어서질문드렸습니다 import { ApolloDriver, ApolloDriverConfig as ad } from '@nestjs/apollo'; import { Module } from '@nestjs/common'; import { GraphQLModule } from '@nestjs/graphql'; import { BoardsModule } from './apis/boards/boards.module'; import { TypeOrmModule } from '@nestjs/typeorm'; import { Board } from './apis/boards/entities/board.entity'; @Module({ imports: [ BoardsModule, // ProductsModule, // UsersModule, GraphQLModule.forRoot<ad>({ // forRoot의 데이터타입지정 <> -> 제네릭 부분 driver: ApolloDriver, autoSchemaFile: 'src/commons/graphql/schema.gql', // 자동으로 스키마 파일을 생성 .gql로마무리 해주기 // 실행은 package.json이 있는 위치에선 // graphql은 스키마 파일이 있어야 실행이 가능하다 // 자동이든 직접 작성하든 작성해주어야한다. }), TypeOrmModule.forRoot({ type: 'mysql', host: 'localhost', // 도커할때는 네임레졸루션이 들어가야함 port: 3306, username: 'root', password: 'root', database: 'myproject', entities: [Board], // 해당하는 테이블을 작성 logging: true, // 어떻게 변형되어서 넘어가는지 디버깅 synchronize: true, // entity.ts와 db를 동기화 해주는 작업 }), ], // 합치는 부분 }) export class AppModule {}
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
CS는 기본으로 물어볼테고,node 개발자라면 node,자바스크립트 개념,뜻,장점,단점,예시 같은거 알면 되나요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
발생하는 장점을 다음과 같이 설명해주셨는데요. 1. new 한 번으로 모든 곳에서 재사용 가능 2. 의존성 주입으로 몽땅 한꺼번에 변경 가능 다음과 같은 예시를 들어주셨는데, ProductController의 constructor에서 this.cashService = new CashService() 와 같은 사용을 하면 constructor에서 변경점을 가져가고 해당 클래스의 모든 함수에서는 this.cashService를 통해 사용할 수 있고요. class ProductController { cashService constructor() { this.cashService = new CashService() } } CashService 대신 CashService2로 변경하고 싶을때는 다음처럼 변경하면 2번 장점도 동일해지구요. class ProductController { cashService constructor() { //this.cashService = new CashService() this.cashService = new CashService2() } } 의존성 주입을 통해 얻을 수 있는 이점은 위와 같은 재사용이나 변경에 대한 장점보다도 말 그래도 의존성을 없애는 것에 있다고 보는데요. 의존성 주입을 통해 ProductController에서 구현체인 CashService에 대한 의존성을 없애고, 외부에서 CashService에 대한 의존성을 가져갈 수 있게 되니까요. CashService에 대한 코드의 변경으로 인한 ProductController의 코드 변경이 발생하지 않도록 하는 것이 의존성 주입의 핵심이라고 보는데, tight-coupling을 왜 loose-coupling으로 변경해주어야 하는지에 대한 설명은 없었던 거 같아서요. 이 부분에 대해 어떻게 생각하시는지 궁금합니다!
미해결
Practical Testing: 실용적인 테스트 가이드
public void add(Beverage beverage, int count) { if (count <= 0){ throw new IllegalArgumentException("음료는 1잔 이상 주문하실 수 있습니다."); } for (int i = 0; i < count; i ++) { beverages.add(beverage); } } // 위 코드랑 아래 테스트에 대해서 이해가 안되서요 ! @Test void add() { CafeKiosk cafeKiosk = new CafeKiosk(); Beverage latte = new Latte(); cafeKiosk.add(latte); int expectedSize = 1; int actuallySize = cafeKiosk.getBeverages().size(); String expectedName = "라떼"; String actuallyName = cafeKiosk.getBeverages().get(0).getName(); Assertions.assertThat(actuallySize).isEqualTo(expectedSize); Assertions.assertThat(actuallyName).isEqualTo(expectedName); } @Test void addSeveralBeverages() { CafeKiosk cafeKiosk = new CafeKiosk(); Beverage latte = new Latte(); cafeKiosk.add(latte, 2); Assertions.assertThat(cafeKiosk.getBeverages().get(0)).isEqualTo(latte); Assertions.assertThat(cafeKiosk.getBeverages().get(1)).isEqualTo(latte); } 저렇게 add()에 count를 넣어버리면 add()테스트에서 cafeKiosk.add(latte, 1)으로 수정하던지 해야 에러가 안나는 거 아닌가요? 강의에서는 그냥 진행하셔서 여쭤봅니다!
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
TypeORM을 이용한 소프트 삭제에서 softRemove와 softDelete를 이용하는 방법 두가지가 있는데, 강의에서는 softDelete를 이용하는 경우에 대해 설명을 해주셨는데요. softRemove를 하는 경우에도 entity에 똑같이 @DeleteDateColumn 으로 deleteAt을 추가해주면 되나요? @RemoveDateColumn은 내장되어 있지 않은것 겉더라구요.. 그리고 softRemove 에서는 .affected 가 안되던데 true 나 false로 리턴받을 수 있는 방법이 있을까요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
안녕하세요. express 에서 rest 방식에서는 API를 생성할 때, get이나 post 등의 메소드 방식을 정하고 주소를 지정하여 프론트엔드에서 fetch 나 axois 함수에 주소를 기입하여 API 요청을 했었습니다. graphQL 방식의 nestjs에서는 프론트엔드에서 API 요청을 보낼 때 어떤 방식으로 하나요? 따로 주소 같은 것을 지정해주지는 않는 것같은데.. 똑같이 fetch 나 axois 함수를 통해 요청을 하는 건가요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
완강하면 코테,CS 준비하면 되나요? 근데 코테 언어는 어떤 걸로 준비해야 할까요
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
docker rm `docker ps -a- q'라고 입력했는데 unknown shorthand flag: 'a' in -a- 라고 에러 뜹니다
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
안녕하세요 원두멘토님ㅎㅎ 이런 에러가 계속 떠서 docs와 스텍오버플로우에 검색을 해보니 Passport-jwt를 import하는 것이 아닌 passport-local을 import하는 것이라해서 했더니 다행히 실행이 됩니다. 수업내용에서는 passport-jwt로만 해도 작동이 잘되는 것 같은데 왜 이런 문제가 생기는 것일까요? 그리고 passport-local로 하면 실제 배포에서는 사용 못하는 것이 아닌지 질문을 남깁니다. p.s 재작년에 코캠2기 수료하고 백엔드를 많이 기다렸는데 이렇게 인프런에서 다시 인강으로 뵙게 되서 너무 반갑습니다
미해결
Practical Testing: 실용적인 테스트 가이드
안녕하세요 강사님! 질문 드리기에 앞서 항상 좋은 강의 감사드립니다! 제가 강의를 수강하면서 의아한 부분이 있었는데요, 바로 OrderResponse에 List<ProductResponse> 를 추가하신 부분 입니다. 이에 따라 OrderResponse의 of() 메소드 안에서 order.getOrderProducts() 를 호출할 수 밖에 없게 되었는데요, 이때 페치조인을 하지 않는 이상 쿼리가 나가게 될 것 같습니다 (지연로딩) 저는 바로 이 측면이 개인적으로 잘못되었다 고 생각하는데요, JPA는 어떤 쿼리가 어느 타이밍에 나가는지를 파악하기 어려워서, 최대한 이 측면을 명확하게 해주는게 필요하다고 생각합니다. 그래서 저의 경우는 서비스 로직에서 사용되는 repository 메소드 들에서만 쿼리가 나가는 경우로 명확하게 제한을 해주는 편 인데요, 이런식으로 서비스 로직이 아닌(정확히는 그 안에서 사용되는 repository메소드) 다른 곳에서 지연로딩으로 인해 쿼리가 나간다면 - 어느타이밍에 어떤 쿼리가 나가는지를 코드만 보고 명확하게 파악할 수 없게 된다고 생각합니다. 그래서 결론적으로 저는 OrderResponse 안에서 order.getProducts()를 호출하여 List<ProductResponse>를 만드는게 적절하지 않다고 생각하는데요, 이부분에 대해 강사님의 생각을 말씀해주시면 감사하겠습니다! 감사합니다.
미해결
Practical Testing: 실용적인 테스트 가이드
안녕하세요! 먼저 항상 좋은 강의 감사드립니다!\ 다름이 아니라, 저는 제목대로 , 테스트를 위해서 OrderSerivce의 createOrder의 파라미터로 registerDateTime을 파라미터로 받게 추가한 측면이 개인적으로 적절하지 않다고 생각 하여 질문글을 작성하였습니다. 파라미터를 사용하는 이유는 결국 외부로 부터 값을 받는다는 전제가 깔려있다고 생각하고, 이런 측면에서 보았을 때 요청값으로 시간 값을 받는다고 생각할 수 있습니다. 그렇게 생각을 했을때 개인적으로 2가지 정도의 의아한 점이 발생한다고 생각합니다. 클라이언트로 부터 넘겨받는 시간이 과연 등록 시간이라고 할 수 있는가? (network delay가 있을것 이기 때문) 그렇다고 Controller에서 now() 를 호출한 시간이라는 일종의 고정값을 받을거면 - 파라미터를 선언하는 의미가 있는가? 결론적으로 저는 createOrder의 파라미터로 registerDateTime을 선언하는것이 적합하지 않다고 생각합니다. 하지만 우리의 경우는 tdd로써 테스트를 위해 외부로 값을 추출하였는데 - 이러한 문제가 발생하였으므로, tdd 개발론이 과연 적절한 production code를 만드는게 기여하는가? 라는 측면에서 의문이 듭니다. 나아가 당연히 저의 미숙한 탓 이겠지만, 강의를 진행해주신 방식대로 온전한 비즈니스 로직을 작성하지 않고 , 테스트 - 개발 - 테스트 - 개발... 이런 플로우로 개발을 하는것이 과연 도움이 되는가? 도 조금 의아한 것 같습니다. 어쨌든 여기까지는 저의 순수한 개인적 생각인데요, 이런 부분에 대해서 강사님 께서는 어떻게 생각하시는지 말씀해주시면 정말 감사하겠습니다!
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
cheerio로 가져온값을 객체로 만든다음 밖으로 보내서 최종적으로 몽구스로 저장하고싶은데 문제가 생겼던게 저상태로 보내면 [object:object] 로 나오므로 JSON.stringfy()작업으로 문자열 형태로 내보내 주었습니다. 하지만 schema부분을 object로 하여도 object가 가장 상위의 데이터 타입으로 string형태로 저장된다고 여겨졌습니다. 그래서 JSON.stringfy()로 빼내고 저장하는 부분에서 JSON.parse로 하여 다시 저장할려 했지만 다시 [object:object]로 나와서 이부분을 어떻게 해결해야할지 잘찾아봐도 모르겠어서 질문 남겼습니다. // siteInfo.js import axios from "axios"; import cheerio from "cheerio"; export class SiteInfo { siteInfo = async (prefer) => { console.log(prefer); const siteData = await axios .get(prefer) .then() .catch((err) => { console.log("서버 데이터 안받아와짐 오류 : " + err); }); const keys = []; const values = []; const $ = cheerio.load(siteData.data); $("meta").each((index, el) => { if ( $(el).attr("property") && ($(el).attr("property").includes("og:title") || $(el).attr("property").includes("og:description") || $(el).attr("property").includes("og:image")) ) { const content = $(el).attr("content"); const title = $(el).attr("property"); keys.push(title); values.push(content); } }); const arr = []; for (let i = 0; i < keys.length; i++) { arr.push({ [keys[i]]: values[i], }); } console.log("여기 테스트 : " + arr); return arr; }; } // signup.controller.js export class SignupController { siteInfoService; isValueService; saveDataService; emailService; constructor(siteInfoService, isValueService, saveDataService, emailService) { this.siteInfoService = siteInfoService; this.isValueService = isValueService; this.saveDataService = saveDataService; this.emailService = emailService; } singUp = async (req, res) => { const name = req.body.name; const email = req.body.email; const personal = req.body.personal; const prefer = req.body.prefer; const pwd = req.body.pwd; const phone = req.body.phone; console.log(req.body); const hasValue = this.isValueService.checkToken(phone); if (hasValue === false) { res.json("isAuth값이 false입니다"); } const siteInfo = await this.siteInfoService.siteInfo(prefer); const ttt = JSON.parse(siteInfo); console.log("여기 문제 발생 : " + typeof ttt); console.dir("여기 문제 발생 22222: " + ttt); const dataSave = await this.saveDataService.dataSave({ name, email, personal, prefer, pwd, phone, siteInfo, }); const isValue = this.emailService.checkMail(email); if (isValue === false) { res.send("이메일 형식이 잘못되었습니다"); } const template = this.emailService.welcomeMessage({ name, phone, prefer }); this.emailService.sendTemplateToEmail({ template, email, }); res.send("_id : " + dataSave); }; userSearch = async (req, res) => { const searchReault = await this.saveDataService.dataSearch(); console.log(searchReault); res.send(searchReault); }; } // index.js import express from "express"; import mongoose from "mongoose"; import cors from "cors"; // import { Token, User } from "./mvc/model/schema.model.js"; import { TokenController } from "./mvc/controller/token.controller.js"; import { SignupController } from "./mvc/controller/signup.controller.js"; // 사이트 정보 가져오기 import { SiteInfo } from "./mvc/controller/service/siteInfo.js"; // 핸드폰 정보 맞는지 boolean으로 import { CheckToken } from "./mvc/controller/service/token.js"; // db저장하고 리턴값 가져오기 import { UserDb } from "./mvc/controller/service/userDb.js"; // 이메일 확인하고 보내주기 import { EmailService } from "./mvc/controller/service/email.js"; // 핸드폰 문자 보내기 import { PhoneService } from "./mvc/controller/service/phone.js"; const app = express(); const corsOptions = { origin: "http://127.0.0.1:5500", }; app.use(cors(corsOptions)); const siteInfo = new SiteInfo(); const checkToken = new CheckToken(); const userDb = new UserDb(); const emailService = new EmailService(); const phoneService = new PhoneService(); app.use(express.json()); const signUpController = new SignupController( siteInfo, checkToken, userDb, emailService ); app.post("/users", signUpController.singUp); app.get("/users", signUpController.userSearch); const tokenController = new TokenController(phoneService, checkToken); app.post("/tokens/phone", tokenController.insertdata); app.patch("/tokens/phone", tokenController.checkToken); mongoose.set("debug", true); mongoose .connect("mongodb://mongodb-file:27017/dockerconnetor") .then(() => { console.log("connect success"); }) .catch(() => { console.log("fail to connect with db"); }); app.listen(3001, () => { console.log("server open"); }); // userDb.js import { User } from "../../model/schema.model.js"; export class UserDb { dataSave = async ({ name, email, personal, prefer, pwd, phone, siteInfo, }) => { const siteInforesult = JSON.parse(siteInfo); console.log("여기 확인 : " + siteInforesult); const data = new User({ name: name, email: email, personal: personal, prefer: prefer, pwd: pwd, phone: phone, siteInfo: siteInfo, }); await data.save(); const idData = await User.findOne({ phone: phone }, { _id: 1 }).exec(); return idData._id; }; dataSearch = async (name) => { console.log("start datasearch"); const result = await User.find().exec(); return result; }; } // schema.model.js import mongoose from "mongoose"; const tokenSchema = new mongoose.Schema({ phone: String, token: Number, isAuth: Boolean, }); export const Token = mongoose.model("Token", tokenSchema); const userSchema = new mongoose.Schema({ name: String, email: String, personal: String, prefer: String, pwd: String, phone: String, siteInfo: { title: String, content: String, image: String, }, }); export const User = mongoose.model("User", userSchema);
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
docker 빌드하고 이미지를 4시간 전에 만들었는데 방금 또 빌드하고 이미지 했더니 4시간 전에 만든거라고 나왔어요.그리고 IMAGES ID도 똑같네요
해결됨
Practical Testing: 실용적인 테스트 가이드
안녕하세요. 회원 탈퇴 기능을 개발하고 있습니다. 탈퇴하면 Users 테이블의 use_yn 값을 N 변경 후 14일 지나면 스케줄러로 관련 데이터를 다 지우도록 개발하려고 합니다. 스케줄러 작업 중에 있는데 테스트코드를 짜다가 막혀서요. 탈퇴 누를 때 use_yn 값을 변경하기 때문에 BaseEntity에 있는 upd_date가 알아서 변경일을 update 합니다. 근데 그래서 테스트 코드에서 upd_date 조작을 할 수가 없네요 ㅠㅠ 14일 지난 케이스로 만들어보려고 합니다. 스케줄러라 스케줄러에 파라미터를 보낼 수도 없고 이 경우에는 어떻게 테스트 하나요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
지금 nodejs 듣고 있는데 제가 중소기업해서 취업해서 나중에 대기업 가고 싶은데 일단 중소기업 취업 먼저 생각해보면 node만 공부하는게 낫나요
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
vscode에서 명령어 입력하고 docker 실행 명령어도 입력했는데 powershell이나 다른 프로그램에서도 명령어 많이 알아야하나요
해결됨
부트캠프에서 알려주지 않는 것들 (리액트) 1편
vite를 사용하고 있으며 현재 촐더 구조입니다. 현재 jest.setup.ts 파일내용입니다. (챗 gpt에게 물어본 결과 setupTest.ts로 바꿔야한다는 답변을 받았지만 꼭 바꿔야하는지 잘모르겠습니다.) import "@testing-library/jest-dom" import { server } from "./src/mocks/server" beforeAll(() => server.listen()) afterEach(() => server.resetHandlers()) afterAll(() => server.close()) msw를 사용 하기위해 필요한 설정을 해놓았습니다. 다음은 테스팅을 위한 컴포넌트 입니다. import axios from "axios" import React, { useEffect, useState } from "react" const Direction: React.FC = () => { const [data, setData] = useState<any>({}) const [isLoading, setIsLoading] = useState(true) useEffect(() => { void (async () => setData(await (await axios("https://jsonplaceholder.typicode.com/todos/1")).data))() setIsLoading(false) }, []) return ( <> {isLoading ? ( <div>loading...</div> ) : ( <ul> <li>{data.id} / </li> <li>{data.title} /</li> <li>{data.userId} /</li> </ul> )} </> ) } export default Direction 보시는 것처럼 데이터를 불러와서 화면에 표시하는 컴포넌트 입니다. 다음은 테스트 케이스 입니다. import { render, screen } from "@testing-library/react" import Direction from "." test("Direction 컴포넌트가 정상적으로 렌더링되는지 테스트", async () => { render(<Direction />) const result = await screen.findAllByRole("listitem") expect(result).toHaveLength(3) }) 해당 코드를보시면 간단해서 에러없이 깔끔하게 성공합니다. 하지만 프로젝트에서 swr을 사용하기로 했는데 여기서 문제가 발생합니다. import React from "react" import useSWR from "swr" const Direction: React.FC = () => { const { isLoading, data } = useSWR("https://jsonplaceholder.typicode.com/todos/1") return ( <> {isLoading ? ( <div>loading...</div> ) : ( <ul> <li>{data.id} / </li> <li>{data.title} /</li> <li>{data.userId} /</li> </ul> )} </> ) } export default Direction 컴포넌트를 swr을 사용하는 방식으로 바꾸고 테스트를 실행해보면 findAllByRole에서 listitem을 찾을수 없다는 에러가 발생합니다. swr의 특성인거같긴한데 도무지 해결방안이 떠오르지 않습니다. react-query나 swr같은 캐싱라이브러리를 사용하면서 msw를 사용하여 테스트를 하고 싶은데 따로 설정해야하는 것들이나 권장되는 코드 작성 방식이 따로 있나요? 그것이아니라면 어떤부분을 수정해야 제대로 작동할까요?
