묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
JavaScript & jQuery - 검색창 확장하기(3)에서
<body> <div class="container"> <header> <div class="logo"> <img src="logo.png" href="#none"> </div> <div class="search active"> <!-- x버튼 --> <span class="clear"><i class="xi-close-thin"></i></span> <!-- 돋보기 --> <div class="icon"><i class="xi-search"></i></div> <div class="input-frame"> <input type="text" id="searchInput" placeholder="Type Here..."> </div> </div> </header> <section> <h1>This is Section #01</h1> <p> Lorem </p> </section> <section> <h1>This is Section #02</h1> <p> Lorem </p> </section> </div> <script> var icon = document.querySelector('.icon'), search = document.querySelector('.search'), clear = document.querySelector('.clear'), searchInput = document.querySelector('.searchInput'); icon.onclick = function(){ search.classList.toggle('active') } clear.onclick = function(){ searchInput.value = '' } </script> </body>돋보기까지는 실행이 되는데텍스트 작성후 x버튼 눌렀을때 지워지지 않아요. searchInput.value = '' <<여기서 자꾸 에러가 뜨는데...뭐가 문제일까요?
-
미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
PM2 EADDRINUSE 에러
강의 보면서 PM2 배포를 따라해보았습니다. 5999번 포트를 사용했고, 몇 번 API 요청을 하면 EADDRINUSE 에러가 뜹니다. 0|index | Error: listen EADDRINUSE: address already in use :::5999 0|index | at Server.setupListenHandle [as listen2] (node:net:1872:16) 0|index | at listenInCluster (node:net:1920:12) 0|index | at Server.listen (node:net:2008:7) 0|index | at Function.listen (/home/ubuntu/hyerim-resume/server/nodemodules/express/lib/application.js:635:24) 0|index | at Object.<anonymous> (/home/ubuntu/hyerim-resume/server/index.js:6:11) 0|index | at Module._compile (node:internal/modules/cjs/loader:1376:14) 0|index | at Module._extensions..js (node:internal/modules/cjs/loader:1435:10) 0|index | at Module.load (node:internal/modules/cjs/loader:1207:32) 0|index | at Module._load (node:internal/modules/cjs/loader:1023:12) 0|index | at Object.<anonymous> (/home/ubuntu/.nvm/versions/node/v21.2.0/lib/node_modules/pm2/lib/ProcessContainerFork.js:33:23) { 0|index | code: 'EADDRINUSE', 0|index | errno: -98, 0|index | syscall: 'listen', 0|index | address: '::', 0|index | port: 5999 0|index | } 이 에러가 이미 사용중인 포트로 실행하려고 하는 문제라고 해서 매번 sudo lsof -i :5999, sudo kill -9 ~~ 로 서버를 껐다 키면 또 금방 해당 에러가 발생합니다. sudo lsof -i :5999 로 실행중인 프로세스를 확인하면 다음과 같습니다. COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME node\x20/ 1396 root 25u IPv6 451174 0t0 TCP ip-172-31-39-74.ap-northeast-2.compute.internal:5999->121.143.65.200:56521 (ESTABLISHED) node\x20/ 1396 root 26u IPv6 20785 0t0 TCP *:5999 (LISTEN) node\x20/ 1396 root 30u IPv6 451237 0t0 TCP ip-172-31-39-74.ap-northeast-2.compute.internal:5999->121.143.65.200:56645 (ESTABLISHED) Mac M2 로 서버에 접근해서 PM2를 실행하는데, Mac에서 AirPlay 모드를 꺼야 한다는 Stack Overflow 내용도 보고 꺼봤지만 역시나 에러가 뜹니다. pm2 start index.js —watch 로 pm2 인스턴스를 실행했더니 몇번 재시작을 자동으로 해주는 것 같지만 결국 재시작이 너무 잦다며 더이상 재시작이 되지 않는 것 같아요. 해결 방법이 궁금합니다 ㅠㅠ 아래는 제 서버의 package.json, index.js입니다. Package.json{ "name": "server", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "node index.js" }, "author": "", "license": "ISC", "dependencies": { "compression": "^1.7.4", "cors": "^2.8.5", "express": "^4.18.2", "jsonwebtoken": "^9.0.2", "method-override": "^3.0.0", "mysql2": "^3.6.3", "nodemon": "^3.0.1", "socket.io": "^4.7.2", "winston": "^3.11.0", "winston-daily-rotate-file": "^4.7.1" } } index.jsconst express = require("./config/express"); const { logger } = require("./config/winston"); //log const port = 5999; express().listen(port); logger.info(`API Server Start At Port ${port}`);
-
미해결SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
SCSS
질문 주실 때 항상 2가지를 지켜주세요.오류가 나는 부분이나 궁금한 부분의 브라우저 화면 캡쳐해서 올리기HTML+SCSS+JS 코드 캡쳐 말고 텍스트로 붙여넣기 하기만약 코드를 캡쳐해서 올리시면 제가 코드의 오류를 찾는게 너무 어렵습니다. 반드시 텍스트로 붙여넣기 해주세요.비쥬얼 스튜디오 코드에서 라이브 서버를 키면 에러가 뜨네요 근데 그냥 파일로 들어가면 HTML이 제대로 나오네요.
-
미해결SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
scss
질문 주실 때 항상 2가지를 지켜주세요.오류가 나는 부분이나 궁금한 부분의 브라우저 화면 캡쳐해서 올리기HTML+SCSS+JS 코드 캡쳐 말고 텍스트로 붙여넣기 하기만약 코드를 캡쳐해서 올리시면 제가 코드의 오류를 찾는게 너무 어렵습니다. 반드시 텍스트로 붙여넣기 해주세요. scss에서 watch sass를 누르고, whatching이 되잖아요.근데 저는 . css만 생기지 .css.map은 안 생기는데 이유가 뭐죠?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
npx create-react-app ./ 사용
npx create-react-app simplediray 를 통해 만들고 파일을 옮기는 것과 create-react-app ./을 사용하는게 동일한건가요 ?
-
미해결자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
다음과 같이 풀었는데 괜찮은가요
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키<html> <head> <meta charset="UTF-8"> <title>출력결과</title> </head> <body> <script> function solution(arr){ let answer=0 ; let max =0; for(let i=0; i<arr.length; i++){ if(arr[i]>max){ max=arr[i] answer++ } } return answer; } let arr=[130, 135, 148, 140, 145, 150, 150, 153]; console.log(solution(arr)); </script> </body> </html>며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
상품수정 API 질문
상품 수정 api 질문합니다. 지금 보시면 update에는 async,await가 붙어있는데 데이터베이스를 거쳐 resolver로 가져오면 굳이 안붙어도 된다고 하셨는데 왜 붙어있는지 궁금합니다async update( {product,updateProductsService }:IProductsServiceUpdate):promise<Product> { const product=await this.findOne({productId}) this.checkSoldout({product}) }
-
미해결Do it! Node.js 프로그래밍 입문
thunder client 문제
thunder client 설치 후 당일은 문제 없이 사용했으나 다음 날 사용시 "Connection was forcibly closed by a peer." 메시지가 뜨면서 정상적으로 작동 하지 않음.12강 익스프레스 라우팅의 예제 파일로 실습 중이고 브라우저에서 'get'을 활용한 실습은 정상 작동함. thunder는 get, post,put 모두 작동 오류 발생.확장을 삭제 후 재설치하여도 동일 오류 발생VSC 버전: 1.84.2윈도우 버전: 10.0.19044.1288Thunder Client: 2.26.3
-
미해결자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
안녕하세요 질문입니다
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 다음과 같이 작성하였는데 이상이 없을까요?<html> <head> <meta charset="UTF-8" /> <title>출력결과</title> </head> <body> <script> function solution(s) { let answer = ""; for (let i = 0; i < s.length - 1; i++) { if (s[i].length > s[i + 1].length) { answer = s[i]; } else { answer = s[i + 1]; } } return answer; } let str = ["teacher", "time", "student", "beautiful", "good"]; console.log(solution(str)); </script> </body> </html>
-
미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
UserView에 id 속성만 undefined로 넘어오는데 이유를 모르겠습니다..
위 스샷처럼 id만 undefined로 넘어옵니다..https://api.hnpwa.com/v0/user/titaniumtown.json해당 주소로 요청을 보내면 제대로 id까지 나오는데.. 이유를 도저히 모르겠습니다... 해당 위치에서 console을 찍었을 때 이미 id는 undefined로 받은 상태입니다
-
미해결자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
코드 리뷰 부탁드립니다 :)
안녕하세요 선생님 😀강의 잘 보고 있습니다.저는 count 변수를 두고 값을 저장하고 i값을 변경하여 사용하였는데 이렇게 작성해도 되는지 궁금하여 질문을 올리게 되었습니다. 또 아래와 같이 for문 안에 있는 i 값을 변경해도 괜찮은지도 궁금합니다! function solution(k: number, arr: number[]): number { let sum: number = 0; let count: number = 0; let max: number = 0; for (let i = 0; i < arr.length; i++) { if (count < k) { sum += arr[i]; count++; } else { if (max < sum) { max = sum; } i = i - count; count = 0; sum = 0; } } return max; }감사합니다
-
미해결자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
코드 평가 부탁드립니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.function solution(m,input){ var count=0 for(let lt=0; lt<input.length; lt++){ var sum=0 for(let rt=lt; rt<input.length; rt++){ sum+=input[rt] if (sum>m) break count++ } } document.write(count) } solution(5,[1, 3, 1, 2, 3]);
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
조회 시, select로 일부 필드만 가져올 때 GraphQL 처리
안녕하세요 :)아래 코드와 같이 상품 조회할 때 select를 통해 일부 필드만 가져오도록 해봤습니다.service의 findAll 메서드에서는 유틸리티 타입으로 반환하도록 하였고,resolver에서는 Query 데코레이터에 GraphQL에서 제공하는 PickType으로 반환하게 했는데, 에러가 발생합니다.. (적절한 값이 아니라는 에러 내용)이런 상황에서는 메서드 반환 타입과 GraphQL 타입 처리를 어떻게 해주는 것이 좋은지 감이 잘 안 잡혀서 질문드려요! // products.resolver.ts @Query(() => [PickType(Product, ['id', 'name', 'description'])]) fetchProducts(): Promise<Pick<Product, 'id' | 'name' | 'description'>[]> { return this.productsService.findAll(); }// products.service.ts findAll(): Promise<Pick<Product, 'id' | 'name' | 'description'>[]> { return this.productsRepository.find({ select: ['id', 'name', 'description'], }); }
-
미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
인스턴스 중단 후 재시작
프로젝트를 완성하고 aws 인스턴스 프리티어 사용량이 제한량에 거의 도달해서 항상 켜놓으면 안되겠다고 생각해서 잠깐 중단시켰다가 며칠후에 재시작 시켰는데 재시작 한 이후로 지도상에 핀이 안 보이는데 어떻게 해야할까요? pm2도 해놔서 인스턴스를 중단했다가 재시작한것 때문인거 같은데... mysql을 접속하려 했을때 이런 창이 뜹니다.
-
해결됨[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
섹션 26. 이미지 업로드 - 클래식 방법에서 질문이 있습니다!
안녕하세요!이미지 업로드 클래식 방법을 듣다 막히는 부분이 있어 질문 드립니다! @Post() @UseGuards(AccessTokenGuard) @UseInterceptors(FileInterceptor('image')) postPosts( @User('id') userId: number, @Body() body: CreatePostDto, @UploadedFile() file?: Express.Multer.File, console.log(userId); return this.postsService.createPost(userId, body, file?.filename); }컨트롤러에 해당 셋팅까지 마무리하고 postman으로 요청을 보내려고 시도를 했습니다. 하지만 400에러가 발생하더라고요 ㅠㅠ에러 message는 "Multipart : Malformed part header" 라고 표출이 됩니다. postman의 헤더 설정 문제인가해서 header셋팅하는 쪽 살펴보니 자동으로 header 설정이 되고 있어서 문제는 없는 것 같습니다.. 일단 컨트롤러에 요청자체가 걸리지 않는 것 같습니다ㅠ혹시 어떤 이유 일까요?
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
청개구리 기질로 npm을 쓰는 분들을 위한 launch.json 파일 공유
청개구리 기질로 npm으로 하고 싶어서 강의를 따라오다 여기서 막혀서 구글링 삽질로 해결 했던 정보를 공유 해요~// launch.json{ // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "node", // 세팅의 타입 "request": "launch", // launch 실행하는거, attach 실행되있는거에 붙는거 "name": "Debug NestJS", // 어떤 이름으로 부를건지 "runtimeExecutable": "npm", // 어떤걸로 실행 할건지 node, yarn ... "runtimeArgs": ["run", "start:debug"], // npm run start:dev 에서 npm이 runtime이고 run start:dev가 Args임 "console": "integratedTerminal", // intergratedTerminal은 vscode에서 실행하는 터미널임 "restart": true, // 자동 연결 할건지 "port": 9229, "autoAttachChildProcesses": true // 디버거를 자동으로 process에 붙을지 말지 결정 } ] }
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
vscode의 디버거를 덕분에 알게 되었는데
강의를 다 보고 나니 너무 좋은 기능인것 같고, 실제로 해당 기능을 개발 단계에서 사용 할때는 따로 winston이나 내장 logger나 console.log 필요 없이(production에선 사용) 해당 디버거를 이용해서 하는게 훨씬 좋아 보이는데, 실무에서도 자주 사용 하시나요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
상품 등록 API 오류 납니다
ERROR [TypeOrmModule] Unable to connect to the database Retrying (2)... QueryFailedError: Incorrect datetime value: '0000-00-00 00:00:00' for column 'meetingTime' at row 1라고 오류납니다 product.resolver.tsimport { Args, Mutation, Query, Resolver } from '@nestjs/graphql'; import { ProductsService } from './product.service'; import { CreateBoardInput } from '../boards/dto/create-board.input'; import { CreateProductInput } from './dto/create-product.input'; import { Product } from './entities/product.entity'; @Resolver() export class ProductsResolver { constructor( private readonly productsService: ProductsService, // ) {} @Query(() => [Product]) fetchProducts(): Promise<Product[]> { return this.productsService.findAll(); } @Query(() => Product) fetchProduct( @Args('productId') productId: string, // ): Promise<Product> { return this.productsService.findOne({ productId }); } @Mutation(() => Product) createProduct( @Args('createProductInput') createProductInput: CreateProductInput, ): Promise<Product> { // << 브라우저에 결과 보내주는 2가지 방법>> // 1. 등록된 내용이 담긴 객체를 그대로 브라우저에 보내주기 return this.productsService.create({ createProductInput }); // 이걸 선호. 조회 api 요청을 안해도 된다 // 2.결과에서만 간단히 보내주기 // return '정상적으로 상품이 등록되었습니다' } } product.service.tsimport { Args, Mutation, Query, Resolver } from '@nestjs/graphql'; import { ProductsService } from './product.service'; import { CreateBoardInput } from '../boards/dto/create-board.input'; import { CreateProductInput } from './dto/create-product.input'; import { Product } from './entities/product.entity'; @Resolver() export class ProductsResolver { constructor( private readonly productsService: ProductsService, // ) {} @Query(() => [Product]) fetchProducts(): Promise<Product[]> { return this.productsService.findAll(); } @Query(() => Product) fetchProduct( @Args('productId') productId: string, // ): Promise<Product> { return this.productsService.findOne({ productId }); } @Mutation(() => Product) createProduct( @Args('createProductInput') createProductInput: CreateProductInput, ): Promise<Product> { // << 브라우저에 결과 보내주는 2가지 방법>> // 1. 등록된 내용이 담긴 객체를 그대로 브라우저에 보내주기 return this.productsService.create({ createProductInput }); // 이걸 선호. 조회 api 요청을 안해도 된다 // 2.결과에서만 간단히 보내주기 // return '정상적으로 상품이 등록되었습니다' } } productSaleslocation.entity.tsimport { Field, Float, ObjectType } from '@nestjs/graphql'; import { Column, Entity, PrimaryGeneratedColumn } from 'typeorm'; @Entity() @ObjectType() export class ProductSaleslocation { @PrimaryGeneratedColumn('uuid') @Field(() => String) id: string; @Column() @Field(() => String) address: string; @Column() @Field(() => String) addressDetail: string; // // 9자리 중에서 6자리가 소수점 @Column({ type: 'decimal', precision: 9, scale: 6 }) @Field(() => Float) lat: number; @Column({ type: 'decimal', precision: 9, scale: 6 }) @Field(() => Float) lng: number; @Column() @Field(() => Date) meetingTime: Date; } meetingTime graphlql 타입을 맞게 해났는데 왜 오류나는지 모르곘습니다
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
3분50초쯤에 오버라이드라고 말씀 하셨는데
Column().d.ts에서 declare로 정의 되어 있는것들을 오버라이드라고 말씀 하셨는데, 인자값에 따라 다른 호출을 하는건 오버로딩이 아닌가해서요!
-
해결됨Vue 3 시작하기
제공파일문의
깃허브로 제공해주신 learn-vue-js 소스를 다운받으니수업내용이 이미 다있는데, 부분적으로 지우고 진행 하면 될까요?
