묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
export default 함수 예외
const aa=function (){}const aa=() =>{}const로 시작하는 함수에는 default가 안 붙습니다이거는 예외사항이라서 오류가 아닌가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
nodemon 실행할 떄
소스 코드를 수정할 때 nodemon 이용할려면 ctrl + s 눌러서 저장해야 nodemon도 수정된 소스코드를 읽어오나요?그냥 ctrl +s 안눌러도 소스코드 수정하면 알아서 저장되나요?
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
서로 다른 팔로우 버튼을 빠르게 눌렀을때 둘다 팔로우 성공시키는 방법?
(클릭한 버튼만 loading이 되게 해놓은 상태에서)서로 다른 두개의 팔로우 버튼을 빠르게(1초안에) 클릭했을때요청이 두번가는데 두번째거만 성공하는 이유는takeLatest를 사용해서 그런것이 맞나요?둘다 성공시키기 위해 takeEvery를 사용했는데그래도 될까요?function* watchFollow() { yield takeEvery(FOLLOW_REQUEST, follow); } function* watchUnfollow() { yield takeEvery(UNFOLLOW_REQUEST, unfollow); } 그리고 혹시 takeLatest를 써도 서버에 여러개의 요청이 가니까 서버에서 여러 요청을 모두 성공하게끔 처리가 될까요?
-
해결됨[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
섹션3.http 모듈로 서버 만들기 관련 질문입니다.
섹션3.http 모듈로 서버 만들기 관련 질문입니다.코드를 보면, 클라이언트가 서버에 요청하는 get()함수를 사용할 때get("/users"), 즉 users라는 url을 클라이언트 측에 전달하도록 설정했는데,클라이언트가 서버에 데이터를 신규로 등록하거나, 수정, 삭제를요청할 때에는 post("/user", {name})이렇게 작성하는 이유가 뭘까요?그냥 생각하기에 클라이언트가 요청할 때, 서버측에서 전달할 페이지 url이/users 이니까, 그냥 수정 및 삭제도 동일한 /users 주소에서 하면 안되는건지 궁금해서요. 그리고, 두 번째 질문입니다. 만약 위 질문이 애초에 불가능한 것이라고 한다면서버에서는 /user에 수정. 삭제된 데이터 값을 어떻게 /users에 전달해서 새롭게변경된 값으로 업데이트하는 것인지 궁금합니다.(*서버에 대한 개념부족으로 인해 문의드립니다.)
-
해결됨[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
파람스에 인코딩해서 보낼 때 질문
파람스부분을 인코딩해서 보냈는데 API서버에선 디코딩 안하고 바로 req.params.title를 꺼내 썼잖아요. 콘솔로 찍어보니깐 자동으로 디코딩 되어있던데 이건 익스프레스에서 알아서 디코딩 한 것인가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
복습할 때 html,css 공부
완강하고 다시 복습했을 떄 자바스크립트만 복습해도 되나요?그리고 깃허브에 올릴떄 배운거 복습한거 올리는 것도 자바스크립트만 올려도 되나요?
-
미해결Slack 클론 코딩[백엔드 with NestJS + TypeORM]
엔티티 경로에(절대경로와 상대경로) 의한 모듈 인식
import { Channels } from '../../entities/channel.entity'; import { Workspaces } from 'src/entities/workspace.entity'; import { DataSource } from 'typeorm'; import { Seeder, SeederFactoryManager } from 'typeorm-extension'; export default class UserSeeder implements Seeder { async run( dataSource: DataSource, factoryManager: SeederFactoryManager, ): Promise<any> { const workspaceRepository = dataSource.getRepository(Workspaces); await workspaceRepository.insert([ { id: 1, name: 'nest-practice', url: 'nest-practice', }, ]); const channelsRepository = dataSource.getRepository(Channels); await channelsRepository.insert([ { id: 1, name: '개인', WorkspaceId: 1, private: true, }, ]); } }에러 로그 BaseError: Cannot find module 'src/entities/workspace.entity' Require stack: - /Users/jinyoung/Desktop/study/nest/nest-project/src/database/seeds/create-initial-data.ts - /Users/jinyoung/Desktop/study/nest/nest-project/node_modules/locter/dist/index.cjs - /Users/jinyoung/Desktop/study/nest/nest-project/node_modules/typeorm-extension/dist/seeder/utils/file-path.js - /Users/jinyoung/Desktop/study/nest/nest-project/node_modules/typeorm-extension/dist/seeder/utils/index.js - /Users/jinyoung/Desktop/study/nest/nest-project/node_modules/typeorm-extension/dist/seeder/factory/module.js - /Users/jinyoung/Desktop/study/nest/nest-project/node_modules/typeorm-extension/dist/seeder/factory/manager.js - /Users/jinyoung/Desktop/study/nest/nest-project/node_modules/typeorm-extension/dist/seeder/factory/index.js - /Users/jinyoung/Desktop/study/nest/nest-project/node_modules/typeorm-extension/dist/seeder/index.js - /Users/jinyoung/Desktop/study/nest/nest-project/node_modules/typeorm-extension/dist/data-source/options/module.js - /Users/jinyoung/Desktop/study/nest/nest-project/node_modules/typeorm-extension/dist/data-source/options/index.js - /Users/jinyoung/Desktop/study/nest/nest-project/node_modules/typeorm-extension/dist/data-source/index.js - /Users/jinyoung/Desktop/study/nest/nest-project/node_modules/typeorm-extension/dist/cli/commands/database/create.js - /Users/jinyoung/Desktop/study/nest/nest-project/node_modules/typeorm-extension/dist/cli/commands/database/index.js - /Users/jinyoung/Desktop/study/nest/nest-project/node_modules/typeorm-extension/dist/cli/commands/index.js - /Users/jinyoung/Desktop/study/nest/nest-project/node_modules/typeorm-extension/dist/cli/index.js at ModuleLoader.loadSync (/Users/jinyoung/Desktop/study/nest/nest-project/node_modules/locter/src/loader/built-in/module/module.ts:179:23) at ModuleLoader.loadSync (/Users/jinyoung/Desktop/study/nest/nest-project/node_modules/locter/src/loader/built-in/module/module.ts:172:37) at ModuleLoader.execute (/Users/jinyoung/Desktop/study/nest/nest-project/node_modules/locter/src/loader/built-in/module/module.ts:55:31) at async prepareSeeder (/Users/jinyoung/Desktop/study/nest/nest-project/node_modules/typeorm-extension/dist/seeder/module.js:58:39) at async runSeeders (/Users/jinyoung/Desktop/study/nest/nest-project/node_modules/typeorm-extension/dist/seeder/module.js:111:19) at async Object.handler (/Users/jinyoung/Desktop/study/nest/nest-project/node_modules/typeorm-extension/dist/cli/commands/seed.js:59:9) { options: { code: 'MODULE_NOT_FOUND', message: "Cannot find module 'src/entities/workspace.entity'\n" + 'Require stack:\n' + '- /Users/jinyoung/Desktop/study/nest/nest-project/src/database/seeds/create-initial-data.ts\n' + '- /Users/jinyoung/Desktop/study/nest/nest-project/node_modules/locter/dist/index.cjs\n' + '- /Users/jinyoung/Desktop/study/nest/nest-project/node_modules/typeorm-extension/dist/seeder/utils/file-path.js\n' + '- /Users/jinyoung/Desktop/study/nest/nest-project/node_modules/typeorm-extension/dist/seeder/utils/index.js\n' + '- /Users/jinyoung/Desktop/study/nest/nest-project/node_modules/typeorm-extension/dist/seeder/factory/module.js\n' + '- /Users/jinyoung/Desktop/study/nest/nest-project/node_modules/typeorm-extension/dist/seeder/factory/manager.js\n' + '- /Users/jinyoung/Desktop/study/nest/nest-project/node_modules/typeorm-extension/dist/seeder/factory/index.js\n' + '- /Users/jinyoung/Desktop/study/nest/nest-project/node_modules/typeorm-extension/dist/seeder/index.js\n' + '- /Users/jinyoung/Desktop/study/nest/nest-project/node_modules/typeorm-extension/dist/data-source/options/module.js\n' + '- /Users/jinyoung/Desktop/study/nest/nest-project/node_modules/typeorm-extension/dist/data-source/options/index.js\n' + '- /Users/jinyoung/Desktop/study/nest/nest-project/node_modules/typeorm-extension/dist/data-source/index.js\n' + '- /Users/jinyoung/Desktop/study/nest/nest-project/node_modules/typeorm-extension/dist/cli/commands/database/create.js\n' + '- /Users/jinyoung/Desktop/study/nest/nest-project/node_modules/typeorm-extension/dist/cli/commands/database/index.js\n' + '- /Users/jinyoung/Desktop/study/nest/nest-project/node_modules/typeorm-extension/dist/cli/commands/index.js\n' +해당 코드에서 처음엔 Channels라는 엔티티경로를 인식해오지 못한다고 에러 로그를 받았습니다. 이거저거 해보다가 아 혹시 상대경로로 바꿔주면 인식이 될까? 해서 상대경로로 바꿔 주었더니 Channels가 인식되기 시작했습니다. 궁금한점은 처음 Import해올 당시 제가 경로를 직접입력한것이 아닌 타입스크립트가 자동으로 경로를 잡아주어 import했습니다. 하지만 어째서 타입스크립트가 인식해서 잡아준 경로에 존재하는 모듈을 찾을수 없다고 나오는지 모르겠습니다.
-
미해결Slack 클론 코딩[백엔드 with NestJS + TypeORM]
dataSource내부 환경변수 인식 불가에 따른 db연결 실패
dataSource.ts import { DataSource } from 'typeorm'; import { ChannelChats } from './src/entities/channelChat.entity'; import { ChannelMembers } from './src/entities/channelMembers.entity'; import { Channels } from './src/entities/channel.entity'; import { DMs } from './src/entities/dm.entity'; import { Mentions } from './src/entities/mention.entity'; import { Users } from './src/entities/user.entity'; import { WorkspaceMembers } from './src/entities/workspaceMembers.entity'; import { Workspaces } from './src/entities/workspace.entity'; import { ConfigService } from '@nestjs/config'; const configService = new ConfigService(); const test = configService.get('DB_HOST'); console.log(test) const dataSource = new DataSource({ type: 'mysql', host: '127.0.0.1', port: 3306, username: configService.get('DB_USER'), password: configService.get('DB_PASSWORD'), database: configService.get('DB_NAME'), entities: [ ChannelChats, ChannelMembers, Channels, DMs, Mentions, Users, WorkspaceMembers, Workspaces, ], migrations: [__dirname + '/src/migrations/*.ts'], synchronize: false, logging: true, });출력 에러 로그 yarn seed yarn run v1.22.19 warning ../../../../package.json: No license field $ ts-node ./node_modules/typeorm-extension/dist/cli/index.js seed -d ./dataSource.ts undefined !!!!!!!!!!!!!!! Error during Data Source initialization Error: Access denied for user ''@'localhost' (using password: NO) at Packet.asError (/Users/jinyoung/Desktop/study/nest/nest-project/node_modules/mysql2/lib/packets/packet.js:728:17) at ClientHandshake.execute (/Users/jinyoung/Desktop/study/nest/nest-project/node_modules/mysql2/lib/commands/command.js:29:26) at PoolConnection.handlePacket (/Users/jinyoung/Desktop/study/nest/nest-project/node_modules/mysql2/lib/connection.js:478:34) at PacketParser.onPacket (/Users/jinyoung/Desktop/study/nest/nest-project/node_modules/mysql2/lib/connection.js:97:12) at PacketParser.executeStart (/Users/jinyoung/Desktop/study/nest/nest-project/node_modules/mysql2/lib/packet_parser.js:75:16) at Socket.<anonymous> (/Users/jinyoung/Desktop/study/nest/nest-project/node_modules/mysql2/lib/connection.js:104:25) at Socket.emit (node:events:513:28) at Socket.emit (node:domain:489:12) at addChunk (node:internal/streams/readable:324:12) at readableAddChunk (node:internal/streams/readable:297:9) { code: 'ER_ACCESS_DENIED_ERROR', errno: 1045, sqlState: '28000', sqlMessage: "Access denied for user ''@'localhost' (using password: NO)", sql: undefined } typeorm-extension seed.env NAME=development DB_HOST=localhost DB_NAME=nestdb DB_USER=root DB_PASSWORD=password!!!package.json "db:create": "ts-node ./node_modules/typeorm-extension/dist/cli/index.js db:create -d ./dataSource.ts", "db:drop": "ts-node ./node_modules/typeorm-extension/dist/cli/index.js db:drop -d ./dataSource.ts", "seed": "ts-node ./node_modules/typeorm-extension/dist/cli/index.js seed -d ./dataSource.ts", "schema:drop": "ts-node ./node_modules/typeorm/cli.js schema:drop", "schema:sync": "ts-node ./node_modules/typeorm/cli.js schema:sync", "db:migrate": "npm run typeorm migration:run -- -d ./dataSource.ts", "db:migrate:revert": "npm run typeorm migration:revert -- -d ./dataSource.ts", "db:create-migration": "npm run typeorm migration:create -- ./src/migrations/", "db:generate-migration": "npm run typeorm migration:generate -- ./src/migrations -d ./dataSource.ts"폴더구조 - node_module - src - .env - dataSource.ts - package.json 출력에러 로그에 보시면 맨위 yarn seed 기준 5번째 줄에 undefined !!!!!! 이런 로그를 확인하실수 있으실텐대 이게 process.env.DB_NAME을 해도 이렇게 나오고 configService.get('DB_NAME')을 해도 undefined로 나오는걸로 확인해본결과 현재 환경변수가 인지가 되지않는 상태라는것을 알아챈 상태까지 왔습니다. 여기서 어떤 부분을 손보면 좋을지 궁금합니다.
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
code EEXIST 에러가 계속 뜨는데 어떡하죠..
안녕하세요 create-react-app을 설치하고create-react-app .를 입력한 후에 계속 이 에러가 떠서 진행을 못하고 있습니다.ㅠEEXIST라는 에러코드인데요.. 일단 저는 sudo npm install -g create-react-app 코드를 이용해서 설치를 했고create-react-app -V라는 코드를 이용해서 create-react-app의 버전이 나옴을 확인해, 설치는 제대로 되었음을 확인했습니다. 그런데 create-react-app . 이 부분을 입력할 때마다 저 에러가 뜹니다.. 어떻게 해결하면 좋을까요?처음부터도 다시 깔아보고, uninstall install도 해보고 npx로도 해봤지만 잘 안됐습니다..
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
강사님 graphql과 swagger 관련된 질문입니다!
RestAPI로 배울때 swagger를 만들었던 경험이 있는데, graphql은 그 자체로 swagger의 역할까지 한다고 생각하면 될까요? 뭔가 swagger가 보기에 더 직관적이고 더 설명서 같은 느낌이 있어서 graphql을 사용하면서도 swagger처럼 만들 수 있는 방법이 있는지 여쭤봅니다!
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
util/produce.js 에서 오류가 납니다
npm run dev를 했는데아래와 같은 오류가 뜨면서 실행이 안됩니다어디서 문제가 있는 건가요? util/produce.js 코드 내용import { enableES5, produce } from 'immer'; export default (...args) => { enableES5(); return produce(...args); }; 터미널 에러> react-nodebird-front@1.0.0 dev> next -p 3060ready - started server on 0.0.0.0:3060, url: http://localhost:3060event - compiled client and server successfully in 668 ms (1830 modules)wait - compiling / (client and server)...event - compiled client and server successfully in 1185 ms (4446 modules)4. WrappedApp created new store with withRedux(NodeBird) { initialState: undefined, initialStateFromGSPorGSSR: undefined }{}wait - compiling /_error (client and server)...error - util/produce.js (4:11) @ __WEBPACK_DEFAULT_EXPORT__error - TypeError: (0 , immer__WEBPACK_IMPORTED_MODULE_0__.enableES5) is not a function at __WEBPACK_DEFAULT_EXPORT__ (webpack-internal:///./util/produce.js:11:53) at reducer (webpack-internal:///./reducers/user.js:115:106) at /Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/node_modules/redux/lib/redux.js:476:24 at Array.forEach (<anonymous>) at assertReducerShape (/Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/node_modules/redux/lib/redux.js:474:25) at combineReducers (/Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/node_modules/redux/lib/redux.js:539:5) at eval (webpack-internal:///./reducers/index.js:19:75) { page: '/'} 2 | 3 | export default (...args) => {> 4 | enableES5(); | ^ 5 | return produce(...args); 6 | };event - compiled client and server successfully in 315 ms (4447 modules)4. WrappedApp created new store with withRedux(NodeBird) { initialState: undefined, initialStateFromGSPorGSSR: undefined }{}TypeError: (0 , immer__WEBPACK_IMPORTED_MODULE_0__.enableES5) is not a function at __WEBPACK_DEFAULT_EXPORT__ (webpack-internal:///./util/produce.js:11:53) at reducer (webpack-internal:///./reducers/user.js:115:106) at /Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/node_modules/redux/lib/redux.js:476:24 at Array.forEach (<anonymous>) at assertReducerShape (/Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/node_modules/redux/lib/redux.js:474:25) at combineReducers (/Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/node_modules/redux/lib/redux.js:539:5) at eval (webpack-internal:///./reducers/index.js:19:75) at processTicksAndRejections (node:internal/process/task_queues:96:5)^C%
-
해결됨[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
에러처리 질문
6:25에서 POST /v1/token 요청시 성공인 200응답이 아니면 401응답으로 등록되지 않은 도메인이었거나 500응답으로 기타 에러였는데 그런 응답을 받았다면 else문 건너뛰고 바로 catch문으로 이동하게 되는 것 아닌가요? 6:25에 작성한 else문은 어떤 상황에 작동되는 건지 궁금합니다.
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
상세 페이지 구성하다 안된 수강생 입니다.캡쳐 사진 올리니 꼭좀 해결해 주세요
아무리 구글링 유튜브 찾아 봐도 알수가 없네요mock-sever 주소 크롬 주소창에 넣으면 분명히 자료가 잘 나오는데 vs코드에서 실행 하면 위에 처럼 에러가 나옵니다. 선생님 해결좀 부탁드립니다.수업을 나갈수가 없네요.
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
구매버튼 클릭 시 soldout 구현 부분(상품 블러 처리)
상품 상세 페이지에서 구매 버튼을 누르게 되면,해당 상품의 soldout값이 1로 바뀌게고 적용 완료.그 이후 자동으로 구매 버튼이 회색으로 다시 바뀌겠끔도 구현 완료 그 이후 뒷 페이지로 돌아갔을 때, 상품 목록에서 blur처리 되는 기능이 구현되지 않아 이 방법이 궁금합니다.뒤로가기 버튼을 눌렀을 때는 해당 페이지가 새로 불러와지는 로직이 아닌가요? // Main페이지 코드 import { StatusBar } from "expo-status-bar"; import { StyleSheet, Text, View, Image, ScrollView, Dimensions, TouchableOpacity, Alert } from "react-native"; import React, {useEffect, useState} from "react"; import axios from "axios"; import dayjs from "dayjs" import relativeTime from "dayjs/plugin/relativeTime" import "dayjs/locale/ko" import Carousel from "react-native-reanimated-carousel" import { API_URL } from "../config/constants"; import AvatarImage from "../assets/icons/avatar.png"; dayjs.extend(relativeTime); dayjs.locale("ko"); export default function MainScreen(props) { const [products, setProducts] = useState([]); const [banners, setBanners] = useState([]); const getProduct = () => { axios .get(`${API_URL}/products`) .then((result) => { console.log(result); setProducts(result.data.products) }) .catch((error) => { console.error(error); }); } useEffect(() => { getProduct(); axios .get(`${API_URL}/banners`) .then((result) => { setBanners(result.data.banners); }) .catch((error) => { console.error(error); }) }, []); return ( <View style={styles.container}> <ScrollView> <Carousel data={banners} width={Dimensions.get("window").width} height={200} autoPlay={true} sliderWidth={Dimensions.get("window").width} itemWidth={Dimensions.get("window").width} itemHeight={200} renderItem={(obj) => { return ( <TouchableOpacity onPress={() => { Alert.alert("배너 클릭"); }} > <Image style={styles.bannerImage} source={{ uri: `${API_URL}/${obj.item.imageUrl}`}} resizeMode="contain" /> </TouchableOpacity> ); }} /> <Text style={styles.Headline}>판매되는 상품들</Text> <View sytle={styles.productList}> {products.map((product, index) => { return ( <TouchableOpacity onPress={() => { props.navigation.navigate("Product", { id: product.id }) }}> <View style={styles.productCard}> {product.soldout === 1 && ( <View style={styles.productBlur} /> )} <View> <Image style={styles.productImage} source={{ uri: `${API_URL}/${product.imageUrl}`, }} resizeMode={"contain"} /> </View> <View style={styles.productContents}> <Text sytle={styles.productName}> {product.name} </Text> <Text sytle={styles.productPrice}> {product.price}원 </Text> <View style={styles.productFooter}> <View style={styles.productSeller}> <Image style={styles.productAvatar} source={AvatarImage} /> <Text style={styles.productSellerName} > {product.seller} </Text> </View> <Text style={styles.productDate}> {dayjs(product.createdAt).fromNow()} </Text> </View> </View> </View> </TouchableOpacity> ); })} </View> </ScrollView> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", padding: 32, }, productCard: { width: 320, borderColor: "rgb(230,230,230)", borderWidth: 1, borderRadius: 16, backgroundColor: "white", marginBottom: 8, }, productImage: { width: "100%", height: 210, }, productContents: { padding: 8, }, productSeller: { flexDirection: "row", alignItems: "center", }, productAvatar: { width: 24, height: 24, }, productFooter: { flexDirection: "row", justifyContent: "space-between", alignItems: "center", marginTop: 12, }, productName: { fontSize: 16, }, productPrice: { fontSize: 18, fontWeight: "600", marginTop: 8, }, productSellerName: { fontSize: 16, }, productDate: { fontSize: 16, }, productList: { alignItems: "center", }, Headline: { fontSize: 24, fontWeight: "800", marginBottom: 24, }, productBlur: { position: "absolute", top: 0, bottom: 0, left: 0, right: 0, backgroundColor : "#ffffffa6", zIndex: 999 }, bannerImage: { width: "90%", height: 200, }, safeAreaView: { flex: 1, backgroundColor: "#fff" } }); // Product 화면 코드 import axios from "axios"; import React, { useEffect, useState } from "react" import {Image, ActivityIndicator, StyleSheet, View, Text, TouchableOpacity, Alert, ScrollView} from "react-native" import { API_URL } from "../config/constants"; import Avatar from "../assets/icons/avatar.png" import dayjs from "dayjs" export default function ProductScreen(props){ const {id} = props.route.params; const [product, setProduct] = useState(null); const getProduct = () => { axios.get(`${API_URL}/products/${id}`) .then((result) => { console.log("product result : ", result.data); setProduct(result.data.product); }) .catch((error) => { console.error(error); }) } useEffect(() => { getProduct(); }, []); const onPressButton = () => { if(product.soldout !== 1) { axios.post(`${API_URL}/purchase/${id}`) .then((result) => { Alert.alert("구매가 완료되었습니다."); getProduct(); }) .catch((error) => { Alert.alert(`에러가 발생했습니다. ${error.message}`); }) } } if(!product){ return <ActivityIndicator /> } return ( <View style={styles.container}> <ScrollView> <View> <Image style={styles.productImage} source={{uri: `${API_URL}/${product.imageUrl}`}} resizeMode="contain" /> </View> <View style={styles.productSection}> <View style={styles.productSeller}> <Image style={styles.avatarImage} source={Avatar} /> <Text>{product.seller}</Text> </View> <View style={styles.divider} /> <View> <Text style={styles.productName}>{product.name}</Text> <Text style={styles.productPrice}>{product.price} 원</Text> <Text style={styles.productDate}>{dayjs(product.createAt).format("YYYY년 MM월 DD일")}</Text> <Text style={styles.productDescription}>{product.description}</Text> </View> </View> </ScrollView> <TouchableOpacity onPress={onPressButton}> <View style={product.soldout ===1 ? styles.purchaseDisabled : styles.purchaseButton}> <Text style={styles.purchaseText}>{product.soldout === 1 ? "구매완료" : "구매하기"}</Text> </View> </TouchableOpacity> </View> ) } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff" }, productImage: { width: "100%", height: 300 }, productSeller: { flexDirection: "row", alignItems: "center" }, avatarImage: { width: 50, height: 50, }, productSection: { padding: 16 }, divider: { backgroundColor: "#e9ecef", height: 1, marginVertical: 16 }, productName: { fontSize: 20, fontWeight: "400" }, productPrice: { fontSize: 18, fontWeight: "700", marginTop: 8 }, productDate: { fontSize:14, marginTop: 4, color: "rgb(204,204,204)" }, productDescription: { marginTop : 16, fontSize: 17 }, purchaseButton: { position: "absolute", bottom: 0, left: 0, right: 0, height: 60, backgroundColor: "rgb(255,80,88)", alignItems : "center", justifyContent: "center" }, purchaseText : { color: "white", fontSize: 20, }, purchaseDisabled: { position: "absolute", bottom: 0, left: 0, right: 0, height: 60, backgroundColor: "gray", alignItems : "center", justifyContent: "center" } })
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
시퀄라이즈안쓰고 mysql연결하려고 합니다.
기존에 mysql에 연결은 이런식으로 했습니다. 코드가 너무 지져분해서 mvc패턴으로 나눠보려고 하는중입니다.아래처럼 바꾸고 db연결하고 로그인하려고 하는데 이렇게 오류가 발생하고있습니다.구글링해봤는데 대부분은 처음에했던 위에것처럼 많이 나오는거 같아요. db를 models폴더에 mysql.js에 정의하고 controller에서 연결해서 사용하고싶습니다.혹시 controller에서 쿼리문입력하면 너무 지저분한거 같아서 강사님이 models의 user.js에 시퀄라이즈를 이용해서 db에 정보넣는것처럼 쿼리문 따로 폴더를 만들어서 가져오고 사용할수있나요?(쿼리문을 밖으로 빼서 사용하고싶습니다.) 자세히 설명해 주시면 감사하겠습니다.
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
res.render 질문
사용자 이름을 누르면 사용자의 게시글이 출력되는 기능 구현중 res.render가 동작하지 않아 질문 드립니다.아래가 컨트롤러 부분이고 console.log(posts[0].User.nick); 이부분도 출력 되는걸 확인했습니다.그런데 title 안에 posts[0].User.nick 이 부분에서 오류가 뜨는데 위 console.log에서 출력이 되는데 왜 여기선 오류가 뜨는지도 모르겠고 title과 twits 부분을 지우고 main을 다른 페이지로 바꿨는데도 아예 동작을 하지 않는걸 확인했습니다. title 부분에서 오류가 안떠도 페이지가 제대로 로드 되지도 않습니다. exports.renderUpost = async (req, res, next) => { try { console.log("!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"); let posts = []; if (req.params.userId) { const posts = await Post.findAll({ include: [ { model: User, where: { id: req.params.userId }, attributes: ["id", "nick"], }, ], }); console.log(posts[0].User.nick); } res.render("main", { title: ` ${posts[0].User.nick} | NodeBird`, twits: posts, }); } catch (error) { console.error(error); next(error); } }; 제가 작성자 이름을 a 태그로 해서 아래 코드처럼 수정해서 했는데 혹시 이 a태그에 넣은것들이 잘못된건가요? 위 코드에서 console.log 까지 출력 다 되는거 보면 문제가 없을것 같은데 그나마 생길것 같은게 이부분뿐이라 올려봅니다.<a href="#" onclick="findUpost(this);return false;" class="twit-author">{{twit.User.nick}}</a>
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
수업 진행중 이 그랩마켓 상세 페이지 만들던중 농구공 이미지
안녕하세요.그랩마켓 상세페이지 만들기 중에서 농구공 이미지 하고postman에서 만든 products/1 내용이 안나오기에 MOCK SEVER를 다시 생성해서 .GET에 복사 붙여 넣기를 했습니다.그랬더니 에러가 나면서 아무것도 안보이게 됐습니다.그래서 lean-all-with -java 페이지로 가서 INDEX.HTML로 에 있는 axios.get ( "https://831a8e94-7b7a-4354-9e1a-eb37becbc7ad.mock.pstmn.io/products"에 가서 보니 예전에 만들은 것들은 그대로 더군요. 그래서 이것도 지우고 새로 만든 mock주소를 넣었더니 이것도 에러가 납니디.원래 mock서버 새로 만들어서 붙여 놓으면 안되나요? 몇일동안 매달려도 안되네요.도와주세요.선생님
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
섹션 20 이메일 템플릿 질문합니다
섹션 20. 01-07 이메일 템플릿 생성 4 , 23분 35초에서createUser은 객체를 중괄호에 넣어줬는데sendTemplateToEmail 하고 checkPhone은 왜 중괄호 안 넣어주나요?
-
해결됨[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
JWT 시그니처, 비밀키 부분 질문
1:49 책 내용을 보면 시그니처 자체는 숨기지 않아도 되고, 비밀 키만 숨기면 된다고 적혀있는데 시그니처 안에 비밀 키가 들어있으니 이것도 유출되면 안 되는게 아닌가요? 비밀 키를 찾지 않고 그냥 바로eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.he0ErCNloe4J7Id0Ry2SEDg09lKkZkfsRiGsdX_vgEg이런 JWT문자열을 가로채서 API서버로 보내면 변조는 아니지만 그냥 그 사람인 척 할 수 있는게 아닌가요?
-
해결됨Slack 클론 코딩[백엔드 with NestJS + TypeORM]
.env 파일에 3030 포트로 동일하게 작성했지만 사이트에 연결할 수 없음이 나오는데 어디 부분이 빠진 건가요?
안녕하세요. 포트 3000 에서는 사이트도 잘 뜨고 로깅도 잘 되고 있습니다.다만, 환경변수 파일에 추가한 3030 포트로는 열리지 않고 있습니다. 어디 부분을 확인해봐야 되나요??.envSECRET=제로초강의 PORT=3030 main.tsimport { NestFactory } from '@nestjs/core'; import { AppModule } from './app.module'; declare const module: any; async function bootstrap() { const app = await NestFactory.create(AppModule); const port = process.env.PORT || 3000; await app.listen(3000); console.log(`listening on port ${port}`); if (module.hot) { module.hot.accept(); module.hot.dispose(() => app.close()); } } bootstrap(); app.service.tsimport { Injectable } from '@nestjs/common'; import { ConfigService } from '@nestjs/config'; // 서비스의 경우, 요청과 응답에 대해서는 모르기 때문에 독립적이다. // 즉, 로직을 작성하는 공간이라고 생각하면 된다. @Injectable() export class AppService { constructor(private readonly configService: ConfigService) {} getHello(): string { // process.env.PORT보단 get으로 가져오는 것이 좋다. // return this.configService.get('SECRET'); return process.env.SECRET; } } app.module.tsimport { MiddlewareConsumer, Module, NestModule } from '@nestjs/common'; import { ConfigModule } from '@nestjs/config'; import { AppController } from './app.controller'; import { AppService } from './app.service'; import { LoggerMiddleware } from './middlewares/logger.middleware'; @Module({ imports: [ConfigModule.forRoot()], controllers: [AppController], providers: [AppService], }) export class AppModule implements NestModule { configure(consumer: MiddlewareConsumer): any { consumer.apply(LoggerMiddleware).forRoutes('*'); } } logger.moddleware.tsimport { Injectable, Logger, NestMiddleware } from '@nestjs/common'; import { Request, Response, NextFunction } from 'express'; @Injectable() export class LoggerMiddleware implements NestMiddleware { private logger = new Logger('HTTP'); use(request: Request, response: Response, next: NextFunction): void { const { ip, method, originalUrl } = request; const userAgent = request.get('user-agent') || ''; response.on('finish', () => { const { statusCode } = response; const contentLenth = response.get('content-length'); // 만약 context가 필요가 없을 경우 Logger.log가 console.log 대체이다. this.logger.log( `${method} ${originalUrl} ${statusCode} ${contentLenth} - ${userAgent} ${ip}`, ); }); next(); } }