묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
최적화하기 11분 50초
import React from "react"; import { useNavigate } from "react-router-dom"; import MyButton from "./MyButton"; const DiaryItem = ({ id, emotion, content, date }) => { const navigate = useNavigate(); const goDetail = () => { navigate(`/diary/${id}`); }; const goEdit = () => { navigate(`/edit/${id}`); }; const strDate = new Date(parseInt(date)).toLocaleDateString(); return ( <div className="DiaryItem"> <div onClick={goDetail} className={[ "emotion_img_wrapper", `emotion_img_wrapper_${emotion}`, ].join(" ")} > <img src={process.env.PUBLIC_URL + `assets/emotion${emotion}.png`} /> </div> <div className="info_wrapper" onClick={goDetail}> <div className="diary_date">{strDate}</div> <div className="diary_content_preview">{content.slice(0, 25)}</div> </div> <div className="btn_wrapper"> <MyButton text={"수정하기"} onClick={goEdit} /> </div> </div> ); }; export default React.memo(DiaryItem); // 왜 렌더링 계속 되지?ㅡㅡㅡㅡㅡ 안녕하세요 강사님!최적화 하는 과정에서 DiaryItem 에 React.memo를 적용시켰는데도 렌더링이 계속됩니다ㅜ혹시 useNavigate 부분 코드때문에 그럴까요?구글링해보니까'원인은 react-router가 V6로 업그레이드 되면서 URL이 변경 될 경우 useNavigate함수를 계속 재생성하도록 변경 되었다는것을 알게 되었습니다.'이런 글을 읽어서요,, 답변부탁드립니다! 강의 잘 듣고 있습니다. 좋은 강의 감사합니다!
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
수정하기로 들어가서 작성완료를 누르면 일기가 사라지는 현상
안녕하세요 질문이 있는 데요어플리케이션 툴에서는 이력은 그대로 남아 있는데새로 일기 작성하고 수정화면에서 수정하고 작성완료 누르면 UI적으로 일기가 사라지는 데 문제를 알고 싶습니다.그리고 빌드하고 배포시에 사진첨부처럼 터미널에 이렇게 나오는 현상은 문제가 없는건지요?답변 부탁드립니다.긱에 올리는 중에 긱이 서툴러서 ignore파일과readme파일이 예전거와 충돌? 비슷한게 생긴것 같은데 양해 부탁드립니다.https://github.com/k-songs/Syal
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
docker mysql dbeaver utf-8 error
docker로 mysql server를 띄우고 product_category table 에서 전자제품, uuid 를 등록하고 save를 누르면 한글을 인식할 수 없다는 에러가 납니다. 해결방법이 궁금합니다. ERROR [ExceptionsHandler] Incorrect string value: '\xEC\xA3\xBC\xEC\x86\x8C' for column 'address' at row 1
-
미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
gist 404 에러로 접근 불가.. 일전에 계정은 요청한상태입니다.
안녕하세요. 일전에 gist 등록요청하여 확인 메일까지 받았으나, 해당 레파지토리 접근이 안되고 있습니다.404 에러가 발생합니다..제가 깃허브를 잘몰라서 그런걸수도 있으나,혹시 몰라 확인요청드립니다.한번 더 등록 확인 부탁드립니다.인프런 아이디 : tintinsky6@gmail.com( advanced 요청페이지 계정 검색하시면 찾아보실수 있습니다. )
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
nestjs, graphql 강의중 resolver에서 service 클래스 메서드에 접근을 못 하는듯 합니다.(인젝트가 제대로 안된 듯 합니다.)
안녕하세요. 강사님."Nest.js - GraphQL 연결" 강의중 제목과 같이 resolver에서 service의 메서드로 접근을 못하는듯 합니다. 그럼 인젝트가 안된거 아닌가요? 해결책 문의 드립니다. "yarn start:dev" 오류없이 실행은 됩니다.app.module.ts, boards.module.ts, boards.resolver.ts boards.service.ts 코드 입니다.// app.module.ts import { ApolloDriver, ApolloDriverConfig } from '@nestjs/apollo'; import { Module } from '@nestjs/common'; import { GraphQLModule } from '@nestjs/graphql'; import { BoardModule } from './apis/boards/boards.module'; @Module({ imports: [ BoardModule, GraphQLModule.forRoot<ApolloDriverConfig>({ driver: ApolloDriver, autoSchemaFile: 'src/commons/graphql/schema.gql', }), ], // controllers: [AppController], // providers: [AppService], }) export class AppModule {}// boards.module.ts import { Module } from '@nestjs/common'; import { BoardResolver } from './boards.resolver'; import { BoardService } from './boards.service'; @Module({ // imports: [], // controllers: [], providers: [BoardResolver, BoardService], }) export class BoardModule {}// boards.resolver.ts import { Query, Resolver } from '@nestjs/graphql'; import { BoardService } from './boards.service'; @Resolver() export class BoardResolver { constructor(private readonly boardService: BoardService) {} @Query(() => String) getString(): string { return this.boardService.serviceString(); } @Query(() => Number) getNumber(): number { return this.boardService.serviceNumber(); } @Query(() => Boolean) getOnlyResolver(): boolean { return true; } }// boards.service.ts import { Injectable } from '@nestjs/common'; @Injectable() export class BoardService { serviceString() { return 'Hello World!'; } serviceNumber(): number { return 100; } }"getOnlyResolver" 쿼리는 정상적입니다. Service까지 가지 않도록 테스트 했습니다."getString" 쿼리는 Service의 "serviceString()" 메서드로 접근 합니다. (오류 발생)"getNumber" 쿼리는 Service의 "serviceNumber()" 메서드로 접근 합니다. (오류 발생)"package.json" 정보 입니다.{ "name": "aaa", "version": "0.0.1", "description": "", "author": "", "private": true, "license": "UNLICENSED", "scripts": { "build": "nest build", "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"", "start": "nest start", "start:dev": "nest start --watch", "start:debug": "nest start --debug --watch", "start:prod": "node dist/main", "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix", "test": "jest", "test:watch": "jest --watch", "test:cov": "jest --coverage", "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand", "test:e2e": "jest --config ./test/jest-e2e.json" }, "dependencies": { "@apollo/server": "^4.5.0", "@nestjs/apollo": "^11.0.4", "@nestjs/common": "^9.0.0", "@nestjs/core": "^9.0.0", "@nestjs/graphql": "^11.0.4", "@nestjs/platform-express": "^9.0.0", "graphql": "^16.6.0", "reflect-metadata": "^0.1.13", "rxjs": "^7.2.0" }, "devDependencies": { "@nestjs/cli": "^9.0.0", "@nestjs/schematics": "^9.0.0", "@nestjs/testing": "^9.0.0", "@types/express": "^4.17.13", "@types/jest": "29.2.4", "@types/node": "18.11.18", "@types/supertest": "^2.0.11", "@typescript-eslint/eslint-plugin": "^5.0.0", "@typescript-eslint/parser": "^5.0.0", "eslint": "^8.0.1", "eslint-config-prettier": "^8.3.0", "eslint-plugin-prettier": "^4.0.0", "jest": "29.3.1", "prettier": "^2.3.2", "source-map-support": "^0.5.20", "supertest": "^6.1.3", "ts-jest": "29.0.3", "ts-loader": "^9.2.3", "ts-node": "^10.0.0", "tsconfig-paths": "4.1.1", "typescript": "^4.7.4" } } 감사합니다.
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
깃헙 권한 요청
권한 요청 드립니다.인프런 아이디 : cldud970@gmail.com인프런 이메일 : cldud970@gmail.com깃헙 아이디 : cldud970@naver.com깃헙 Username : Returnmakdo
-
미해결웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT
requestanimationframe 성능관련 궁금증
안녕하세요 좋은 강의 잘 참고해서 재밌게 만들어보고있습니다. ^^requestanimationframe을 사용해서 애니메이션이 부드럽게 잘 이동합니다만애니메이션 종료를 따로 설정해주지 않으면 renderGame()은 무한히 반복될텐데 성능에 문제가 없을까요?bulletComProp.arr와 allMonsterComProp.arr의 경우 충돌하거나 사라질때 배열에서 삭제하기때문에 순회할게 없어 동작이 안된다고하더라도 hero.keyMotion 혹은 setGameBackground는 console로 찍어보니 값이 무한히 반복해서 성능에 문제가 되지 않을까 고민해보게 되네요답변주시면 감사하겠습니다정말 감사합니다.
-
해결됨타입스크립트 입문 - 기초부터 실전까지
ts 핸드북에 나오는 void 질문
안녕하세요!null값은 void로 선언 시 이렇게 되는데 제가 실수한 게 있나요???
-
미해결처음 만난 리액트(React)
== 와 ===
const post = data.find((item) => { return item.id == postId; });이 코드에서 왜 == 를 ===로 바꿔줬을 때는 data를 찾지 못하는 걸까요?postId 와 item.id 모두 int 값 아닌가요?
-
해결됨함수형 프로그래밍과 JavaScript ES6+
안녕하세요 질문 있습니다.
강의에서는 체크 박스가 체크된 아이템을 is_selected로 구분해서 추려낸 다음 총 합계와 총 가격을 표시해줬습니다.그런데 어쨌든 체크된 아이템을 총 2번 순회하게 된다는건데 이렇게 하지 않고 두 아이템을 배열이나 키가 있는 객체에 함께 담아서 리턴하는 식으로 데이터를 다루는건 별로일까요??이렇게 되면 map을 사용해서 특정 데이터를 뽑아내지 않고 reduce를 통해서 데이터의 전체 값을 가지고 있어야 할거 같은데 그럼 오히려 수량을 계산하는 보조함수와 가격을 계산하는 보조함수가 묶이게 돼 안좋게 되나 싶어서 궁금합니다.또는 아직 안배운 다른 방법이 있어서 일단 강의를 들으면 될지도 궁금합니다. 감사합니다. 강의가 너무 재밌네요.
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
깃헙 권한 요청
깃헙 권한 요청 드립니다.인프런 아이디 : jiin724@gmail.com인프런 이메일 : jiin724@gmail.com깃헙 아이디 : jiin724@gmail.com깃헙 Username : amazingkj요청 드립니다~!
-
미해결처음 만난 리액트(React)
useContext hook
useContext hook 을 사용할때 만약 랜더링이 무거운 작업이라면 최적화를 시켜줘야한다고 하셨는데 여기서 말하는 최적화란 무엇일까요? 변수에 담아서 데이터를 사용하는게 최적화 일까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션5 | Javascript 응용과 싸이월드 실습 4탄 복습 학습자료
안녕하세요! 강의 정말 잘보고있습니다!!프리캠프 섹션5 | Javascript 응용과 싸이월드 실습 4탄 복습 학습자료 상에서 질문이 있어서 여쭤봅니다. else if에서 조건에 만족하는 경우 alert가 뜨게끔 되어 있는 것 같아서,여기 부분에서 else if~ 부분을 아래와 같이 바꿔야하는 것이 아닌지 검토 부탁드릴게요.} else if(8>password.length || password.length>16){ alert("8~16자의 영문, 숫자, 특수문자만 사용 가능합니다.") return false
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
"세팅 제이슨" 질문 보고왔는데 안되서 질문드립니다.
설정 창에 검색하니까 settings.json 이 안나오네요 ㅠㅠ 어떡하죠 편집이 안되네요 윈도우라 ctrl shift p 누르면 settings.json은 나와요
-
미해결Node.js로 웹 크롤링하기
페이스북 로그인
<button value="1" class="_42ft 4jy0 6lth 4jy6 4jy1 selected 51sy" name="login" data-testid="royallogin_button" type="submit" id="u_0_c_Cc">로그인</button> document.querySelector('#u_0_9_LS').click();위에 같이 실행하였는데 id값이 계속 변동하여 로그인 안되어서 document.querySelector('._42ft _4jy0 _6lth _4jy6 _4jy1 selected _51sy').click();class로 했는데도 로그인 안되네요 ??방법이 없나요?
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
권한 재요청
깃헙 메일이 변경되어 권한 재요청 드립니다.인프런 아이디 : online_uiux@mediawill.com인프런 이메일 : online_uiux@mediawill.com깃헙 아이디 : online_uiux@mediawill.com깃헙 Username : online_uiux
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
bcrypt를 설치하니까 docker 컨테이너가 실행이 안되네요ㅠ
검색을 나름대로 열심히 해봤는데잘 해결이 되지 않아서 질문 남깁니다.error: /app/node_modules/bcrypt/lib/binding/napi-v3/bcrypt_lib.node: invalid elf header에러 메시지는 이렇습니다.bcrypt가 설치되는 OS에 따라 버전이 달라서 그렇다는거 같은데, Dockerfile에 bcrypt 삭제했다가 설치하는 명령어도 넣어봤는데 잘 안되네요ㅠ
-
해결됨[코드캠프] 훈훈한 Javascript
css 연결 오류..?
안녕하세요! link 태그로 css를 연결하면 script코드가 웹에 그대로 출력됩니다이런식으로요.. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./style.css"> <script> const dateFormMaker = function () { const inputYear = document.querySelector('#targetYear').value; const inputMonth = document.querySelector('#targetMonth').value; const inputDay = document.querySelector('#targetDay').value; // const dateFormat = `${inputYear}-${inputMonth}-${inputDay}`; const dateFormat = inputYear + '-' + inputMonth + '-' + inputDay // console.log(inputYear, inputMonth, inputDay); return dateFormat; } const counterMaker = function () { const targetDateInput = dateFormMaker(); const today = new Date(); const targetDate = new Date(targetDateInput).setHours(0,0,0,0); const left = (targetDate - today) / 1000; const leftDay = Math.floor(left / 3600 / 24); const leftHour = Math.floor(left / 3600) % 24; const leftMin = Math.floor(left / 60) % 60; const leftSec = Math.floor(left) % 60; console.log(leftDay, leftHour, leftMin, leftSec) }; </script> </head> <body> <h1>D-Day</h1> <div id="D-day-container"> <div class="inner"> <span id="days">0</span> <span>일</span> </div> <div class="inner"> <span id="hours">0</span> <span>시</span> </div> <div class="inner"> <span id="min">0</span> <span>분</span> </div> <div class="inner"> <span id="sec">0</span> <span>초</span> </div> </div> </div> <div id="inputbox"> <input id="targetYear" class="targetInput" />년 <input id="targetMonth" class="targetInput" />월 <input id="targetDay" class="targetInput" />일 </div> <button onclick= "counterMaker()">날짜설정</button> </body> </html>혹시나 바디태그 끝으로 script 태그를 옮겨봤는데도 똑같아요... 왜 그럴까요
-
해결됨mongoDB 기초부터 실무까지(feat. Node.js)
session.abortTransaction()에 대한 실제 예시 문의
아래 명령어를 통해 transaction이 실패했을 때 원복한다고 하는데, 저런 것은 catch문에 넣어야 하는 것이 맞나요? 아니면 if else로 문제점을 발견했을 때 처리하게 하는 걸까요?즉, 저 코드를 실제로 사용할 때, 어떤 모습으로 들어가는 지 궁금합니다.session.abortTransaction()
-
미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
GitHub 권한 요청드립니다!
안녕하세요 선생님, 수업 잘 듣고 있습니다.깃허브 접근할 수 있게 권한 설정 부탁 드릴게요!인프런 아이디 : epalos인프런 이메일 : leo@poinblack.com깃헙 아이디 : rkdgus48@naver.com깃헙 Username : KAI-0419