안녕하세요 Modules 단계를 듣다가 궁금한 점이 생겨서 여쭤봅니다. export default {} 를 해야 import 를 할 수 있는 것으로 이해 하였습니다. 그런데 TodoHeader.vue 의 경우 스크립트 단을 아예 만들지 않아서 export default {} 가 없는데 어떻게 App.vue 에서는 TodoHeader를 import 할 수 있는 걸까요? 제가 예상하기로는 export default 단위 블록 안에 아무 내용이 없으면 생략 가능한 것 아닐까 라는 생각을 해보았는데 혹시 맞을까요?

안녕하세요 강의 감사히 잘 듣고 있습니다.다름이 아니라 chapter06에서 코드는 같은데Notification의 componentDidUpdate() 한번씩 더 호출되는데 이유를 모르겠습니다.import React from "react"; const styles = { wrapper: { margin: 8, padding: 8, display: "flex", flexDirection: "row", border: "1px solid grey", borderRadius: 16, }, messageText: { color: "black", fontSize: 16, }, }; class Notification extends React.Component { constructor(props) { super(props); this.state = {}; } componentDidMount() { console.log(`${this.props.id} componentDidMount() called.`); } componentDidUpdate() { console.log(`${this.props.id} componentDidUpdate() called.`); } componentWillUnmount() { console.log(`${this.props.id} componentWillUnmount() called.`); } render() { return ( <div style={styles.wrapper}> <span style={styles.messageText}>{this.props.message}</span> </div> ); } } export default Notification;import React from "react"; import Notification from "./Notification"; const reservedNotifications = [ { id: 1, message: "안녕하세요, 오늘 일정을 알려드립니다.", }, { id: 2, message: "점심식사 시간입니다.", }, { id: 3, message: "이제 곧 미팅이 시작됩니다.", }, ]; var timer; class NotificationList extends React.Component { constructor(props) { super(props); this.state = { notifications: [], }; } componentDidMount() { const { notifications } = this.state; timer = setInterval(() => { if (notifications.length < reservedNotifications.length) { const index = notifications.length; notifications.push(reservedNotifications[index]); this.setState({ notifications: notifications, }); } else { this.setState({ notifications: [], }); clearInterval(timer); } }, 1000); } componentDidUpdate() { console.log(` parent componentDidUpdate() called.`); } componentWillUnmount() { if (timer) { clearInterval(timer); } } render() { return ( <div> {this.state.notifications.map((notification) => { return ( <Notification key={notification.id} id={notification.id} message={notification.message} /> ); })} </div> ); } } export default NotificationList;추가로 NotificationList의 componentDidUpdate()가 계속 호출되는데 이유가 있을까요?

비동기가 없을 시에 불필요한 프로미스 객체를 생성하지 않고 동기일 땐 배열을 프로미스가 있을 때만 프로미스를 반환하기 때문에 async await를 사용하는거 보다 성능면에서 우위를 가질 수 있는건가요?async를 사용하면 무조건 동적인 값이여도 promise를 반환하기 때문에 성능에 좋지 않다라고 이해했는데 맞는건가요?

 안녕하세요 onClickItem에서 (item) 이 데이터를 어디서 가져오는지 이해가 가지 않아서요,,item이라고 명시된 값이 없는데 item을 어떻게 사용하는 건가요..???

index.jsNotificationList.jsx에러코드 화면오타 확인도 해봤는데 아무리봐도 에러가 왜 나는지 못찼겠습니다.

ILIKE와 같은 유틸함수에 직접적으로 사용자 입력값을 받을때 sql 인젝션이 방어되는지 궁금합니다. 검색해서 찾아보니 파라매터 바인딩하는 방법이 있는것 같은데 queryBuilder를 해야하는 것 같더라구요 sql injection 방어를 위해서 유틸함수를 쓰지 못하고 queryBuilder를 해야하는 거면 typeorm을 사용했을때 장점이 줄어드는 것 같아서 고민됩니다.   

import coolsms from 'coolsms-node-sdk'const mysms = coolsms.default 에서 default에 빨간줄이 생기고, "typeof CoolsmsMessageService' 형식에 'default' 속성이 없습니다" 라는 에러가 계속 뜨는데 어떻게 해야하나요?import * as coolsms from 'coolsms-node-sdk' 로 임포트하면 해결되는데, 이러면 또 const messageService = new mysms(SMS_KEY, SMS_SECRET) 부분에서 문제가 터지네요ㅠㅜ..

<Book.jsx><Library.jsx><index.js>입력 후 출력 시 오류값이 나오는데 설명부탁드립니다.

안녕하세요. 강의에 사용하는 예제 코드 자료 있나요? PPT(https://www.inflearn.com/course/lecture?courseSlug=%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%9E%85%EB%AC%B8-%EC%9D%B8%ED%94%84%EB%9F%B0-%EC%98%A4%EB%A6%AC%EC%A7%80%EB%84%90&unitId=51363)자료만 있는 게 맞나요? 감사합니다.

main에 ValidationPipe를 적용 했었는데요! app.module에서도 app전반적으로 사용되는 Pipe를 적용 할 수 있어 보이는데 두 적용 방식의 차이는 무엇일까요?

응답에서 슬래시가 // 두개로 표기되고 슬래시// 두개가 포함된 image 값을 그대로 복사해서 웹에서 테스트했을때 이미지는 정상적으로 확인됩니다. //두개 표기되는게 문제있는건 아닌걸까요?

안녕하세요 선생님~ 수업 잘 듣구있습니다 ㅎㅎㅎ  door-opened 클래스를 add하고 remove하는 순서로 생각했는데 코드 작성 흐름이 거꾸로 역순으로 가는 이유가 있을까요...?^^;;; 

맨 끝단인 TodoList에서 onUpdate나 onDelete를 바로 button에 달지 못하고 함수로 한번 더 감싸줘야 하는데 왜 그렇게 해야하는지 모르겠습니다. 감싸지 않고 바로 onClick={onDelete(id)}으로 달아주니 에러가 뜨더라고요

마우스 갖다올리면 정의 나오는 익스텐션이 어느건가요? 전 계속 loading...이라고만 나오네요 ㅠ.ㅠ

JavaScript 코드와 XML/HTML 코드가 결합된 JSX라는걸 어떻게 알 수 있나요? 자료형이나 변수를 통해 할 수 있는건가요?

Part1 수강중인데 혹시 이까지만 해도 초기에 나온 로드맵을 다 다루게 되는건가요? Part1은 어느 범위까지를 다루게 되는건지요 @.@?

안녕하세요 선생님,강의 잘 듣고 있습니다. 감사합니다.근무중에도 틈틈히 몰래 화면 펼쳐놓고 공부하고 싶은데두터운 책 아닌 폰으로 슬쩍 볼수 있는 코드화면이 필요합니다.vscode 입력내용이 적힌 앱/웹 공유를 해주실수도 있을까요 ?? 어떤 식으로든 폰 화면으로 코드 복습할 방법을 알려주시면 더욱 좋겠습니다.  

모던 웹을 위한 모던 CSS 단위 이해 및 정리 14:10에서 100vw를 하면 전체가 차지 되야 하는데 흰색 테두리가 있는 걸로 보아 100%꽉 채우지 않은 것 같아서요. 제가 예전에 어디서 배운 것 같기는 한데 정확하게 개념이 기억이 안나서 설명 부탁드립니다...! 

혹시 이거 Mysql로 바꾸려면 어떻게 해야되나요?바꿀부분 다 바꿨는데 [Nest] 61395 - 05/16/2024, 6:50:32 PM ERROR [TypeOrmModule] Unable to connect to the database. Retrying (6)...Error: Access denied for user ''@'localhost' (using password: YES) at Packet.asError (/Users/eunsukkim/nestjs-lv1-main/nestjs-lv1-main/node_modules/mysql2/lib/packets/packet.js:728:17) at ClientHandshake.execute (/Users/eunsukkim/nestjs-lv1-main/nestjs-lv1-main/node_modules/mysql2/lib/commands/command.js:29:26) at PoolConnection.handlePacket (/Users/eunsukkim/nestjs-lv1-main/nestjs-lv1-main/node_modules/mysql2/lib/connection.js:481:34) at PacketParser.onPacket (/Users/eunsukkim/nestjs-lv1-main/nestjs-lv1-main/node_modules/mysql2/lib/connection.js:97:12) at PacketParser.executeStart (/Users/eunsukkim/nestjs-lv1-main/nestjs-lv1-main/node_modules/mysql2/lib/packet_parser.js:75:16) at Socket.<anonymous> (/Users/eunsukkim/nestjs-lv1-main/nestjs-lv1-main/node_modules/mysql2/lib/connection.js:104:25) 이런 오류가 나네요.  env  // // 서버 프로토콜 -> http / https// export const ENV_PROTOCOL_KEY = 'PROTOCOL';// // 서버 호스트 -> localhost:3000// export const ENV_HOST_KEY = 'HOST';// // JWT 토큰 시크릿 -> codefactory// export const ENV_JWT_SECRET_KEY = 'JWT_SECRET';// // JWT 토큰 해시 라운드 수 -> 10// export const ENV_HASH_ROUNDS_KEY = 'HASH_ROUNDS';// // 데이터베이스 호스트 -> localhost// export const ENV_DB_HOST_KEY = 'DB_HOST';// // 데이터베이스 포트 -> 5432// export const ENV_DB_PORT_KEY = 'DB_PORT';// // 데이터베이스 사용자 이름 -> postgres// export const ENV_DB_USERNAME_KEY = 'DB_USERNAME';// // 데이터베이스 사용자 비밀번호 -> postgres// export const ENV_DB_PASSWORD_KEY = 'DB_PASSWORD';// // 데이터베이스 이름// export const ENV_DB_DATABASE_KEY = 'DB_DATABASE';//// 서버 프로토콜 -> http / httpsexport const ENV_PROTOCOL_KEY = 'PROTOCOL';// 서버 호스트 -> localhost:3000export const ENV_HOST_KEY = 'HOST';// JWT 토큰 시크릿 -> codefactoryexport const ENV_JWT_SECRET_KEY = 'JWT_SECRET';// JWT 토큰 해시 라운드 수 -> 10export const ENV_HASH_ROUNDS_KEY = 'HASH_ROUNDS';// 데이터베이스 호스트 -> localhostexport const ENV_DB_HOST_KEY = 'localhost';// 데이터베이스 포트 -> 5432export const ENV_DB_PORT_KEY = '3306';// 데이터베이스 사용자 이름 -> postgresexport const ENV_DB_USERNAME_KEY = 'root';// 데이터베이스 사용자 비밀번호 -> postgresexport const ENV_DB_PASSWORD_KEY = 'root';// 데이터베이스 이름export const ENV_DB_DATABASE_KEY = 'bigproject';  이런식으로 다 바꿨는데요

const COLORS = [ "#394fb8", "#554fb8", "#605ac7", "#2a91a8", "#2e9ab2", "#32a5bf", "#81b144", "#85b944", "#8fc549", "#e0af27", "#eeba2a", "#fec72e", "#bf342d", "#ca3931", "#d7423a", ]; export class Polygon { constructor(x, y, radius, sides) { this.x = x; this.y = y; this.radius = radius; this.sides = sides; this.rotate = 0; } animate(ctx, moveX) { ctx.save(); const angle = PI2 / this.sides; const angle2 = PI2 / 4; ctx.translate(this.x, this.y); this.rotate += moveX * 0.008; ctx.rotate(this.rotate); for (let i = 0; i < this.sides; i++) { const x = this.radius * Math.cos(angle * i); const y = this.radius * Math.sin(angle * i); i == 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); ctx.save(); ctx.fillStyle=COLORS[i] ctx.translate(x, y); ctx.rotate((((360 / this.sides) * i + 45) * Math.PI) / 180); ctx.beginPath(); for (let j = 0; j < 4; j++) { const x2 = 160 * Math.cos(angle2 * j); const y2 = 160 * Math.sin(angle2 * j); j == 0 ? ctx.moveTo(x2, y2) : ctx.lineTo(x2, y2); } ctx.fill(); ctx.closePath(); ctx.restore(); } ctx.restore(); } }지금은 COLORS 배열을 이용해 fillstyle의 색을 넣었는데, 색상 대신 특정 이미지들을 넣고싶습니다. ctx.fillstyle = colors[i] 를 어떤 식으로 바꿔야할까요..?