묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
nginx 후 Front(502 Bad Gateway), back(welcome to nginx) 라고만 나오는 문제
안녕하세요 선생님 front, back nginx 한 뒤로둘다 https라고 바뀌고 인증서도 있긴한데,Front(502 Bad Gateway)라고 나오고back(welcome to nginx) 라고만 나오는 상태입니다.(설치는 Nginx Ubuntu20보고 했습니다https://certbot.eff.org/instructions?ws=nginx&os=ubuntufocal&tab=standard)문제1)그래서 첫번째 문제로 back에서 sudo npx pm2 logs --err --lines 200를 해보았을 땐 아래와 같은 경고가 나왔습니다.0|app | Warning: connect.session() MemoryStore is not 0|app | designed for a production environment, as it will leak 0|app | memory, and will not scale past a single process.질문1)찾아보니까 express-session 미들웨어의 기본 메모리 저장소(MemoryStore)를 사용할 때 MemoryStore가 개발 환경에서는 적합하지만, 실제 프로덕션 환경에서는 메모리 누수 문제와 단일 프로세스 제한으로 인해 적합하지 않아 프로덕션 환경에서는 Redis, MongoDB 등의 세션 저장소를 사용하라는데, 그럼 front 화면이 나오는건지 궁금합니다,, 문제2)그리고 두번째 문제로 back에서 tail /var/log/nginx/error.log를 했을 땐 아래와 같은 에러가 나왔습니다. ubuntu@ip-172-31-12-59:~/react_nodebird/back$ tail /var/log/nginx/error.log 2024/01/24 12:19:54 [warn] 420260#420260: conflicting server name "api.luckyhaejin.com" on 0.0.0.0:80, ignored 2024/01/24 12:19:54 [notice] 420260#420260: signal process started질문2)찾아보니 Nginx 설정 파일 내에서 api.luckyhaejin.com이라는 서버 이름(server name)이 80 포트에서 두 번 이상 선언되었음을 나타내는 에러라는데 어떤 부분이 잘못되었는지 잘 모르겠어서 어딜 확인하면 좋을지 문의 드립니다. 질문3)강의에서 Ubuntu서버만 바꿔주고 로컬은 바뀌는 부분 이없는거같아서 Ubuntu서버에서만 바꿔줬는데, 그럼 로컬에도 Ubuntu에 설치한 것 다 포함해서 코드까지 다 바꿔준 뒤 Ubuntu에서 git pull 다시 해줘야할까요,,? 현재 설정된 내용)front=> /etc/nginx/nginx.conf => server관련(글을 옮겨적으니까 들여쓰기 해서 정리 한게 코드가 전부 합쳐져서 사진으로 올립니닷,,)front/pacakage.json에서 start부분에 3060 잘 되어있음front => /etc/nginx/nginx.conf front/config/config.js에서 backUrl설정 잘 되어있음back => /etc/nginx/nginx.confback => app.js(사진이 보기 편하실거같아서 코드랑 둘다올려욧)const express = require('express'); const cors = require('cors'); const session = require('express-session'); const cookieParser = require('cookie-parser'); const passport = require('passport'); const dotenv = require('dotenv'); const morgan = require('morgan'); const postRouter = require('./routes/post'); const postsRouter = require('./routes/posts'); const userRouter = require('./routes/user'); const hashtagRouter = require('./routes/hashtag'); const db = require('./models'); const passportConfig = require('./passport'); const path = require('path'); const hpp = require('hpp'); const helmet = require('helmet'); dotenv.config(); const app = express(); db.sequelize.sync() .then(() => { console.log('DB 연결 성공'); }).catch(console.error); passportConfig(); if(process.env.NODE_ENV === 'production'){ app.use(morgan('combined')); app.use(hpp()); app.use(helmet()); app.use(cors({ origin: 'https://luckyhaejin.com', credentials: true })); } else { app.use(morgan('dev')); } app.use('/', express.static(path.join(__dirname, 'uploads'))); app.use(express.json()); app.use(express.urlencoded({extended:true})); app.use(cookieParser(process.env.COOKIE_SECRET)); app.use(session({ saveUninitialized: false, resave: false, secret: process.env.COOKIE_SECRET, cookie: { httpOnly: true, //자바스크립트로 접근하지못하게 secure: true, //일단 false로 하고 https적용할 땐 ture domain: process.env.NODE_ENV = 'production' && '.luckyhaejin.com' //도메인 사용할 경우 }, })); app.use(passport.initialize()); app.use(passport.session()); app.get('/', (req, res) =>{ res.send('hello express'); }); app.use('/posts', postsRouter); app.use('/post', postRouter); app.use('/user', userRouter); app.use('/hashtag', hashtagRouter); app.listen(3065, () => { console.log('서버 실행 중'); }); back => /etc/nginx/nginx.conf사용중인 Os) macOS
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
에뮬레이터에 화면 흰색만나오는 문제
import { API_URL } from "./config/constants.js"; import avatarImg from "./assets/icons/avatar.png"; import React from "react"; import { StyleSheet, Text, View, Image, ScrollView, Dimensions, TouchableOpacity, Alert, } from "react-native"; import { GestureHandlerRootView } from "react-native-gesture-handler"; import Carousel from "react-native-reanimated-carousel"; import axios from "axios"; import dayjs from "dayjs"; import relativeTime from "dayjs/plugin/relativeTime"; import "dayjs/locale/ko"; dayjs.extend(relativeTime); dayjs.locale("ko"); export default function App() { const [products, setProducts] = React.useState([]); const [banners, setBanners] = React.useState([]); React.useEffect(() => { axios .get(`${API_URL}/products`) .then((result) => { const products = result.data.products; setProducts(products); }) .catch((error) => { console.log("error :", error); }); axios .get(`${API_URL}/banners`) .then((result) => { const banners = result.data.banners; setBanners(banners); }) .catch((error) => { console.log("error :", error); }); }, []); return ( <GestureHandlerRootView> <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 style={styles.productList}> {products.map((product, index) => { return ( <View key={index} style={styles.productCard}> {product.soldout === 1 && <View style={styles.productBlur} />} <View> <Image style={styles.productImg} source={{ uri: `${API_URL}/${product.img_url}`, }} resizeMode={"contain"} /> </View> <View style={styles.productContents}> <Text style={styles.productName}>{product.name}</Text> <Text style={styles.productPrice}>{product.price}원</Text> <View style={styles.productFooter}> <View style={styles.productSeller}> <Image style={styles.productAvatar} source={avatarImg} /> <Text style={styles.productSellerName}> {product.seller} </Text> </View> <Text style={styles.productDate}> {dayjs(product.created_at).fromNow()} </Text> </View> </View> </View> ); })} </View> </ScrollView> </View> </GestureHandlerRootView> ); } const styles = StyleSheet.create({ headline: { fontSize: 24, fontWeight: "800", marginTop: 10, marginBottom: 10, }, container: { flex: 1, backgroundColor: "#fff", paddingTop: 32, margin: 10, }, productCard: { width: "100%", borderColor: "rgb(230,230,230)", borderWidth: 1, borderRadius: 16, backgroundColor: "white", marginBottom: 10, }, productBlur: { position: "absolute", top: 0, bottom: 0, right: 0, left: 0, backgroundColor: "#ffffffaa", zIndex: 999, }, productImg: { width: "100%", height: 210, }, productContents: { padding: 8, }, productSeller: { flexDirection: "row", }, productAvatar: { width: 24, height: 24, }, productFooter: { flexDirection: "row", justifyContent: "space-between", alignItems: "center", marginTop: 12, }, productName: { fontSize: 14, }, productPrice: { fontSize: 16, fontWeight: "600", marginTop: 8, }, productSellerName: { fontSize: 14, }, productDate: { fontSize: 14, }, productList: { alignItems: "center", }, bannerImage: { width: "100%", height: 200, }, }); 어떤 오류메세지도 뜨지않고,에뮬레이터에 화면이 출력되지않는 문제가 발생합니다.Carousel을 적용하기전에는 화면 잘 출력되었는데,Carousel을 적용하니 화면이 출력되지않네요..Error: PanGestureHandler must be used as a descendant of GestureHandlerRootView. Otherwise the gestures will not be recognized. See https://docs.swmansion.com/react-native-gesture-handler/docs/installation for more details.이러한 오류가 발생해서GestureHandlerRootView 태그로 최상단에 묶어주니 저 오류는 사라졌는데,애뮬레이터의 화면이 출력되지 않는 문제가 발생합니다.서버는 잘 연결되어있는걸 확인햇습니다..뭐가문제일까요
-
미해결AWS 배포 완벽가이드 (feat. Lightsail, Docker, ECS)
인바운드 규칙 TPC HTTP Port 80을 iPV4와 iPV6에서도 제거해줘도 되나요?
인바운드 규칙 TPC HTTP Port 80을 iPV4와 iPV6에서도 제거해줘도 되나요?로드 밸런서 세팅 강의에서는 iPV4에서만 포트 80을 삭제해주시는데, iPV6도 동일하게 삭제해주면 되는지 궁금합니다!!
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
sequelize initiate() 쓰는 방식 최신인지, 공식문서 방법인지 궁금합니다
영상에서는 sequelize 공식문서에서 바뀌어서 따라갔다고 하는데 공식문서에서 initiate() 쓰는 것 검색하였을 때 안보이며 static이랑 같이 쓴 것도 아직은 못찾았습니다 공식문서 따라가보면 주로 define(), init()을 쓰는데 강의영상의 방식과는 차이점이 있습니다.define()const { Sequelize, DataTypes } = require('sequelize'); const sequelize = new Sequelize('sqlite::memory:'); const User = sequelize.define('User', { // Model attributes are defined here firstName: { type: DataTypes.STRING, allowNull: false }, lastName: { type: DataTypes.STRING // allowNull defaults to true } }, { // Other model options go here }); // `sequelize.define` also returns the model console.log(User === sequelize.models.User); // trueinit()// Invalid class User extends Model { id; // this field will shadow sequelize's getter & setter. It should be removed. otherPublicField; // this field does not shadow anything. It is fine. } User.init({ id: { type: DataTypes.INTEGER, autoIncrement: true, primaryKey: true } }, { sequelize }); const user = new User({ id: 1 }); user.id; // undefined 강의에서 알려주는 방식으로 DB연결도 되고 조작도 잘되지만이렇게 질문을 남긴 이유는강의에서는 공식문서를 따라갔다고 하는데 공식문서에서는 찾기 어렵다는 점과강의에 나오는 방식이 시기가 지난 방법이 아닐까 하는 생각에 질문 남기게 되었습니다 제가 찾아본게 잘못된걸수도 있기에 그런점 있다면 알려주세요글읽어주셔서 고맙습니다:)
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
인자에 객체 값을 넣는 이유
인자에 객체 값을 넣는 이유가 안전하기 때문이라고 하셨는데 정확히 어떤 부분이 안전한지 알려주실 수 있나요?
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
useState를 사용하는 이유가 무엇인가요?
빈 배열을 선언해서 빈 배열에 (axios 통신을 통해 전달받은) result.data를 대입해서 사용하는 것이 아니라 useState를 사용하는 이유는 무엇인가요?제가 이해한 것은 서버에 새로운 데이터가 업로드되면 그때마다 바로바로 업로드 된 데이터를 화면에 보여주기 위함인 것 같은데(예를 들어 상품이 3개로 보이다가 관리자가 상품을 한 개 추가하면 새로고침을 안해도 4개로 보임), 올바르게 이해한 것이 맞을까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
개인 프로젝트 관련 질문
안녕하세요 드디어 강의 완강했습니다!!^^ 뒷부분 부터는 퀴즈가 없어서 비교적 빨리 수강했네요.강의 후에 해봐야 할 것들을 생각해보았는데 조언을 듣고 싶어서 질문남깁니다.일단은 지금 것 했던 "나만의 ~~프로젝트"를 리팩토링(성능/안정성/가독성/로직개선)하고 api기능추가, 테스트코드 작성, DB쿼리성능개선등을 해보고자합니다.전부 다 하려면 시간이 오래걸리겠지만(ㅠ) 마지막에 취업준비강의에서 말씀하신 3년차개발자로 생각되기 위해선 해야할게 많은 것 같습니다..ㅎㅎ(3년차 같은 신입을 뽑는다니!!ㅠㅠ)그래서 일단 목표는 실제 현업에서 하는 것처럼 코드를 작성해보고자 하는데요, 막상 하려니 좀 막막하네요.질문은:지금 제 생각은 현업에서 쓰는 좋은 코드를 보고 어떤 식으로 설계했는지 테스트코드는 어떻게 작성했는지 등등 참고하고 분석하고 공부해서 제 나름대로 프로젝트를 리팩토링해보고 싶은 생각입니다. 그게 가장 실력도 늘 것 같구요. 그래서 혹시 관련 코드나 책이나 자료등이 있으면 추천해주시면 감사하겠습니다.아! 그리고 백엔드 심화강의에서 마이크로큐와 await의 관계를 굉장히 감명깊게 들었습니다. 비동기과정이 정말 헷갈렸는데 속이 시원해졌습니다.ㅎㅎ 혹시 이런 자바스크립트 원리나 cs관련내용도 추천해주실만한 책이나 자료 있으면 알려주시면 감사하겠습니다.일단 방향은 이렇게 잡았는데 조언해주시면 참고하겠습니다!!끝으로 제가 지금것 들었던 개발강의중 가장 자세하고 친절하고 이해도 잘되고 재밌는 강의였습니다!!퀴즈 할때나 버그나 에러날때 힘들긴 했지만, 그래도 개발이 점점 더 재밌어지고 더 잘하고 싶네요. 궁금한 것있으면 또 질문해도 되겠죠?^^;;; 감사합니다!!
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
강의자료 ppt는 어디서 받을 수 있나요?
안녕하세요 11강에서 강의자료 ppt 파일을 올려주신다고 했는데 어디서 다운로드 받을수 있나요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
이미지가 안떠요...
13분 정도까지 했는데 이미지가 안뜨네요... 이유가 무엇인지 아시나요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
나만의미니프로젝트 cheerio관련질문
원하는 키워드의 값을 담은 상수를 console.log(key,value) 하면 줄바꿈되면서 안에 있는 전체 값들이 나오더라구요 ( const key = $(el).attr("property").split(":")[1]; const value = $(el).attr("content"); 부분입니다)근데 이 값들을 db에 저장하려 for문을 이용해 배열에 넣어봤더니 console.log(key,value)해서 나온 값들이 아닌 마지막 값만 들어갑니다 key와 value에 어떤 형태로 값이 스크랩핑되어 들어가있는건가요..?상수에 배열형태로 들어간 것도 아니고 한줄로 값이 들어간 것도 아니고 .. console.log하면 전체가 나오기는 하나줄바꿈이 되어 나와서 갈피를 못잡겠습니다..스크래핑한 값을 어떻게 저장을하고 넘겨야할지 db로 넘겨야할지 전혀 모르겠습니다................................. 이틀동안 찾아봐도 해결이 안되어서 질문 남깁니다..
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
tfjs-node 안깔려서
tfjs-node 안깔려서 해보라고 하는거 해보다가잘 되던 nodemon server.js 도 안되고 뭐가 잘못됐는지 모르겠습니다.빨리 마무리하고 싶은데 답답하네요강의 업데이트 좀 해주셨으면 좋겠는데 생각 없으신가요
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
1:1 관계 등록 API 강의 creatProduct 시 에러가 발생합니다
삽입시 address 값을 입력했는데도 default 값이 설정되어있지 않다고 에러가 뜹니다.
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
flyctl 관련 재문의 드립니다.
flyctl deploy가 진행이 안돼서제 컴퓨터에 있는 도커를 삭제하고 다시 실행했더니아래와 같은 상태에서 멈췄습니다.구글링 해봐도 잘 모르겠어요 ㅠㅠ어떻게 해결하면 될까요? C:\Users\dahye\Documents\react-project\d-market-server>flyctl deploy ==> Verifying app config--> Verified app config==> Building imageRemote builder fly-builder-quiet-sunset-984 ready==> Building image with Buildpacks--> docker host: 20.10.12 linux x86_6420: Pulling from heroku/buildpacksDigest: sha256:1dd1a9c5f291b47fed1aed3f4c348fdc878380319c15f0e09753a5898482554eStatus: Image is up to date for heroku/buildpacks:2020-cnb: Pulling from heroku/herokuDigest: sha256:c9d053a463c7cd81672a3b0d5d5e26bdcbdffe2782565ccbedc15867b8cddfb9Status: Image is up to date for heroku/heroku:20-cnbWarning: Platform requested deprecated API '0.6'===> DETECTINGWarning: Buildpack 'heroku/ruby@0.0.0' requests deprecated API '0.4'Warning: Buildpack 'heroku/python@0.0.0' requests deprecated API '0.4'Warning: Buildpack 'heroku/scala@0.0.0' requests deprecated API '0.4'Warning: Buildpack 'heroku/php@0.0.0' requests deprecated API '0.4'Warning: Buildpack 'heroku/go@0.0.0' requests deprecated API '0.4'Warning: Buildpack 'heroku/gradle@0.0.0' requests deprecated API '0.4'2 of 3 buildpacks participatingheroku/nodejs-engine 0.8.16heroku/nodejs-npm 0.5.2===> ANALYZINGPrevious image with name "registry.fly.io/d-market-server:cache" not found===> RESTORING===> BUILDING[Heroku Node.js Engine Buildpack][Checking Node.js version]Detected Node.js version range: *Resolved Node.js version: 19.7.0[Installing Node.js distribution]Downloading Node.js 19.7.0Extracting Node.js 19.7.0Installing Node.js 19.7.0[INFO] Installing toolbox[INFO] - yj[INFO] Using npm v9.5.0 from Node[INFO] Installing node modules from ./package-lock.jsonnpm WARN config production Use --omit=dev instead.WARN failed to finish build in graphql: Post "https://api.fly.io/graphql": context canceledOops, something went wrong! Could you try that again?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
nest 실행 (npm run start:dev)이 너무 오래 걸려요
typescript 기초 강의에서 nest를 처음 실행했는데 실행 시 너무 오래 걸립니다..(약 20~30분 정도) windows os에서 실행 햇는데 이유가 있을까요?현재 컴퓨터 사양은 Memory 32G 에 RAM 16 Core 입니다.매번 이렇게 시간이 걸리면 현실적으로 test가 불가능해서 방법을 구하고자 합니다. +추가yarn으로 실행해봐도 비슷하네요..Windows OS에서 WSL 통해서 Ubuntu 환경에서 실행하고 있습니다.
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
업로드 후 홈화면에서 이미지가 보이지 않습니다
데이터 베이스에도 기록이 잘 들어가고 사이트 홈화면에도 잘 뜨는데 화면의 이미지가 안뜹니다.uploads파일에도 이미지 다 잘 들어갑니다.인강과 데이터베이스를 비교해봤을 때 경로문제인것같긴한데 어떻게 수정을 해야할까요?근데 DB경로의 역슬래시를 슬래시로 바꾸어도 안뜨고 uploads에는 사진도 잘 들어가고 사진의 경로를 봤을때도 동일해서... 왜 안뜨는걸까요?단순히 한사진의 오류라고생각했었는데 등록한 것 모두 이렇게 되어서...어딜 어떻게 수정해야할지모르겠어서... 일단은 깃허브링크 함께올려봅니다... 홈사이트 화면개발자 툴 상품넣고 난뒤DB데이터 베이스물건 등록 후 vscode에 뜨는것 깃허브 링크: https://github.com/Dalrae03/webstudy/commit/7a5981dafabdbf009b40c0c5814e7e7c6f3ea9dehttps://github.com/Dalrae03/webstudy/commit/c9106654b1d6badba9ae64ce744a11da46b719a5
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
image 파일에서 vscode로 드래그 앤 드롭을 처리할 수 없다고 합니다
압축을 푼뒤 진행해도 에러가 납니다The file is not displayed in the text editor because it is either binary or uses an unsupported text encoding.라고 나오고요 hexeditor를 깔아도 해결이 안됩니다찾아보니 50mb를 넘는 자료를 vs코드에서 지원을 못한다고 하는데요 참고로 집에 컴퓨터가 없어 pc방 컴퓨터로 배우는 중입니다
-
미해결Express 튜토리얼 : 웹 서비스를 위한 핵심 API
myLogger 미들웨어가 작동하지 않는 경로가 있습니다.
강의영상에서 myLogger라는 예제 미들웨어를 사용하는 부분이 있었습니다.const myLogger = function(req, res, next) { console.log('LOGGED'); next(); } app.use(myLogger);위 코드를 삽입한 후 각 경로에 요청을 넣어보면 모두 LOGGED가 출력되었습니다. 그런데 딱 한 경로, post/edit/:postNum 경로에 대한 GET요청은 출력이 되지 않습니다. 특별한 이유가 있는건지, 아니면 제 개발환경의 문제인지 감을 못잡고 있는 상황입니다. 선생님이나 알고계신 분의 도움을 구합니다.
-
해결됨탄탄한 백엔드 NestJS, 기초부터 심화까지
'수업 노트를 확인해 주세요 :)'의 수업노트 위치가 어디인가요?
'첫 시작' 챕터 영상 레이아웃의 하단에 '수업 노트를 확인해 주세요 :)'가 있는데 해당하는 수업노트가 어디 있는건가요?
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
안녕하세요 강의를 따라가던 중 한 번의 이벤트임에도 두 번이 발생합니다.
위에 이미지처럼 클라이언트에서 emit을 발생시켰을 때 서버에서 2번이 찍히고, username을 클라이언트로 전달해줄 때도, 클라이언트에서 2번이 찍힙니다. afterInit()함수 내부의 로거도 두번 작동하는데 왜 이럴까요?
-
해결됨탄탄한 백엔드 NestJS, 기초부터 심화까지
npm run start:dev 실행 시 에러..
안녕하세요 현재 수강중입니다..계속해서 에러가 발생하네요.. 지치네요.......ㅠㅠㅠ똑같이 한거같은데 다음과 같은 에러가 발생합니다..무엇이 문제일까요??