176만명의 커뮤니티!! 함께 토론해봐요.
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
강의 보면서 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.js const express = require("./config/express"); const { logger } = require("./config/winston"); //log const port = 5999; express().listen(port); logger.info(`API Server Start At Port ${port}`);
HTML/CSS javascript aws git mysql rest-api github pm2
김혜림
2023-12-25T08:57:47.973Z
댓글 2
좋아요 0
조회수 466
미해결
SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
질문 주실 때 항상 2가지를 지켜주세요. 오류가 나는 부분이나 궁금한 부분의 브라우저 화면 캡쳐해서 올리기 HTML+SCSS+JS 코드 캡쳐 말고 텍스트로 붙여넣기 하기 만약 코드를 캡쳐해서 올리시면 제가 코드의 오류를 찾는게 너무 어렵습니다. 반드시 텍스트로 붙여넣기 해주세요. 비쥬얼 스튜디오 코드에서 라이브 서버를 키면 에러가 뜨네요 근데 그냥 파일로 들어가면 HTML이 제대로 나오네요.
HTML/CSS javascript sass jquery scss
imhj11777
2023-12-25T07:06:26.357Z
댓글 2
좋아요 1
조회수 336
미해결
SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
질문 주실 때 항상 2가지를 지켜주세요. 오류가 나는 부분이나 궁금한 부분의 브라우저 화면 캡쳐해서 올리기 HTML+SCSS+JS 코드 캡쳐 말고 텍스트로 붙여넣기 하기 만약 코드를 캡쳐해서 올리시면 제가 코드의 오류를 찾는게 너무 어렵습니다. 반드시 텍스트로 붙여넣기 해주세요. scss에서 watch sass를 누르고, whatching이 되잖아요. 근데 저는 . css만 생기지 . css.map 은 안 생기는데 이유가 뭐죠?
HTML/CSS javascript sass jquery scss
imhj11777
2023-12-25T06:19:51.879Z
댓글 3
좋아요 1
조회수 449
미해결
반응형 웹사이트 포트폴리오(App Official Landing Website)
안녕하세요 강사님, Header & Welcome 섹션 #4까지 수강 중에 마우스 휠까지는 다 되는데 TypeIt - Welcome 부분만 적용이 안됩니다. 제이쿼리 슬릭 슬라이더는 문제없이 잘 되는데 왜 typeit.min.js 파일만 제이쿼리 연결이 안되는 건지 잘 모르겠네요, 경로는 맞게 지정한거 같은데 이상하네요.. em태그 안에 임으로 텍스트를 나오면 텍스트가 뜨기는 하는데 제이쿼리 연결하려고 다 지우면 안나옵니다. 코드에는 이상이 없는거 같은데 어떻게 해결해야 될지 몰라서 질문 드립니다. 확인 한번 부탁드립니다, 감사합니다. [HTML 코드] <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>StarUp Mate : App Official Landing</title> <link rel="icon" href="images/logo-favicon.png"> <!-- jQuery CDN --> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <!-- Slick Slider --> <link rel="stylesheet" href="js/slick/slick-theme.css"> <link rel="stylesheet" href="js/slick/slick.css"> <script src="js/slick/slick.min.js"></script> <!-- TypeIt --> <script src="js/typeit.min.js"></script> <!-- Custom CSS & JS --> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="responsive.css"> <script src="custom.js"></script> </head> <body> <div class="container"> <!-- Header --> <header> <div class="header-inner"> <div class="logo"> <a href="#none"><img src="images/logo.png" alt=""></a> </div> <div class="gnb"> <a href="#none">CEO 인사말</a> <a href="#none">서비스 특징</a> <a href="#none">자주 묻는 질문들</a> <a href="#none">경영비전</a> <a href="#none">사용자 리뷰</a> <a href="#none">앱 사용자 가이드</a> <a href="#none">최신소식</a> </div> </div> </header> <!-- Section : welcome --> <section class="welcome"> <div class="slideshow"> <img src="images/slide-welcome-01.png"> <img src="images/slide-welcome-02.png"> <img src="images/slide-welcome-03.png"> </div> <div class="welcome-heading"> <span>창의적인 아이디어를 만드는 가장 빠른 방법</span> <h1> An idea solution of startup for your <em id="typing"></em> </h1> <p> 스타트업 메이트 앱이 여러분의 최상의 스타트업 구축을 위해 창의적인 아이디어를 제공하는 데 최선을 다하겠습니다. </p> <div class="welcome-btns"> <a href="#none" class="btn start">CEO 시작하기</a> <a href="#none" class="btn guide">사용자 가이드</a> </div> </div> <div class="mouse"> <span class="wheele"></span> </div> </section> <!-- Section : ceo-access --> <section class="ceo-access"></section> <!-- Section : banner --> <section class="banner"></section> <!-- Section : feature --> <section class="feature"></section> <!-- Section : vision --> <section class="vision"></section> <!-- Section : faq --> <section class="faq"></section> <!-- Section : review --> <section class="review"></section> <!-- Section : focus --> <section class="focus"></section> <!-- Section : guide --> <section class="guide"></section> <!-- Section : news --> <section class="news"></section> <!-- Footer --> <footer></footer> </div> </div> </body> </html> [CSS 코드] /* Fontawesome 4.7 */ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); /* XEION CDN */ @import url('http://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css'); /* Web Fonts - Source Sans Pro */ @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap'); /* font-family: 'Source Sans Pro', sans-serif; */ /* Web Fonts - NoonNoo */ @font-face { font-family: 'NEXON Lv2 Gothic'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv2 Gothic.woff') format('woff'); font-weight: normal; font-style: normal; } /* Reset CSS */ * { box-sizing: border-box; } a { text-decoration: none; color: #222; } button, input { outline: none; } h1,h2,h3,h4,h5,h6 { margin-top: 0; font-weight: normal; line-height: 1.5em; } /* Default CSS */ body { font-family: 'NEXON Lv2 Gothic', sans-serif; font-size: 18px; line-height: 1.7em; margin: 0; background-color: #fff; color: #222; } /* #################### Header #################### */ header{ position:fixed; width:100%; z-index:10; } .header-inner { /* border:1px solid #000; */ width: 1300px; margin:0 auto; overflow:hidden; padding-top:30px; padding-bottom:15px; } .logo { float:left; } .logo img { margin-top:-7px; } .gnb { float:right; } .gnb a { margin:10px; font-size: 16px; } .gnb a {} /* #################### section : welcome #################### */ .welcome { /* border:5px solid #000; */ height:90vh; position:relative; } .slidshow {} .welcome-heading { position:absolute; top:50%; transform:translateY(-50%); left:200px; text-align:center; width:750px; } .welcome-heading span { font-size: 24px; } .welcome-heading h1 { font-family: 'Source Sans Pro', sans-serif; font-size: 60px; font-weight: 600; line-height: 1.2em; margin-bottom:30px; margin-top:15px; } .welcome-heading h1 em{ display:block; font-style:normal; color:#eb4d4b; } .welcome-heading p { padding:0 100px; margin-bottom:50px; } .welcome-btns {} .welcome-btns .btn { /* border:1px solid #000; */ display:inline-block; width: 160px; padding:8px; /* height: 70px; */ color:#fff; border-radius:5px; margin:5px; transition:0.5s; } .btn:hover { box-shadow:0 5px 10px rgba(0, 0, 0, 0.1); transform:translateY(-5px); } .btn.start { background-color: #0abde3; } .btn.guide { background-color: #fff; color:#222; } /* Mouse Wheele */ .mouse { border:2px solid #fff; position:absolute; width: 32px; height: 45px; border-radius:30px; bottom:100px; left: 250px; } .wheele { /* display:block; */ position:absolute; width: 4px; height: 15px; background-color: #fff; border-radius: 5px; left:12px; top:10px; animation:wheele 1s linear infinite; } @keyframes wheele { 0% { top:10px; } 50% { top:20px; } 100% { top:10px; } } /* #################### Slick Custom Css #################### */ .slideshow .slick-arrow { border:1px solid #000; display:none !important; } .slideshow img { outline:none; } [custom.js 코드] $(function(){ /* Slick Slider - Welcome*/ $('.slideshow').slick({ infinite: true, // 무한반복 dots: false, // 동그라미 네비게이션 사용안함 autoplay: true, // 자동 재생 autoplaySpeed: 2000, // 자동 재생 시 머무는 시간 fade: true, // 크로스 페이드 트랜지션 speed: 1000, // 자동 재생 트랜지션 시간 pauseOnHover: false // 마우스 오버될 때 멈춤 사용안함 }); }) /* TypeIt - Welcome */ $('#typing').typeIt({ strings: ["Business strategy.", "Innovation Plan.", "Creative Idea."], // 타이핑 텍스트 입력 speed: 100, // 알파벳 타이핑 속도 autoStart: true, // 자동 재생 사용 breakLines: false, // 줄 바꿈 사용안함 });
lexhan90
2023-12-22T02:22:37.178Z
댓글 2
좋아요 1
조회수 438
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
프로젝트를 완성하고 aws 인스턴스 프리티어 사용량이 제한량에 거의 도달해서 항상 켜놓으면 안되겠다고 생각해서 잠깐 중단시켰다가 며칠후에 재시작 시켰는데 재시작 한 이후로 지도상에 핀이 안 보이는데 어떻게 해야할까요? pm2도 해놔서 인스턴스를 중단했다가 재시작한것 때문인거 같은데... mysql을 접속하려 했을때 이런 창이 뜹니다.
HTML/CSS javascript aws git mysql rest-api github
2023-12-20T16:01:11.592Z
댓글 1
좋아요 0
조회수 324
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
그랩마켓 자바스크립트 적용하기 -2 편에서 다 되는데 농구공 그림이 안떠요 <html> <head> <title>그랩마켓</title> <link href="index.css" type="text/css" rel="stylesheet" /> </head> <body> <div id="header"> <div id="header-area"> <img src="images/icons/logo.png" /> </div> </div> <div id="body"> <div id="banner"> <img src="images/banners/banner1.png"> </div> <h1>판매되는 상품들</h1> <div id="product-list"> </div> </div> <div id="footer"></div> </body> <script> var product = [{ name : '농구공', price : 10000, seller : '조던', imagUrl : '/images/products/basketball1.jpeg' },{ name : '축구공', price : 50000, seller : '메시', ImageUrl : '/images/prodocts/soccerball1.jpg' },{ name : '키보드', price : 10000, seller :'그랩', ImageUrl : '/images/prodocts/keyboard.jpg' }]; document.querySelector("#product-list").innerHTML = '<div class="product-card>'+ "<div>" + '<img class="product-img" src="images/products/basketball1.jpeg" />' + "</div>" + '<div class="product-contents">' + '<span class="product-name">농구공 1호</span>' + '<span class="product-price">50000원</span>' + '<div class="product-seller">' + '<img class="product-avatar" src="images/icons/avatar.png" />'+ "<span>그랩</span>" + "</div>" + "</div>" + "</div>" </script> </html>
HTML/CSS javascript react node.js react-native 머신러닝 express tensorflow
신승아
2023-12-19T12:49:46.564Z
댓글 1
좋아요 0
조회수 235
미해결
처음 만난 리액트(React)
뭐가 문제일까요 똑같이 작성한 거 같은데 자꾸 빨간줄이 생겨요ㅜㅜ
김채원
2023-12-19T04:25:07.675Z
댓글 1
좋아요 1
조회수 708
해결됨
[코드캠프] 시작은 프리캠프
안녕하세요. 제공되는 노션 학습자료는 어디서 확인가능한가요?
지수환
2023-12-18T13:15:34.885Z
댓글 2
좋아요 0
조회수 398
미해결
풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
코드샌드박스가 많이 바뀐것 같아요. create 샌드박스 눌러도 바닐라 자바스크립트가 뜨질 않습니다. 그리고 js 파일에서 console.log('test) 쓰고 실행은 어떻게하고 콘솔창은 어디에 있는건지 궁금해요.
sung jin kim
2023-12-17T16:36:08.867Z
댓글 1
좋아요 2
조회수 937
미해결
SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
안녕하세요 선생님. 혹시 Modal 창으로 포트폴리오를 보여 줄 시, 창크기를 줄여서 반응형이 구현된다는 걸 보여 줄 수 있는 방법이 있을까요? (모달창의 창크기가 조절이 되게끔 하는 방법) 수업시간에 지나갔는지 기억이 잘 안나네요 ㅎㅎ; 혹시나 불가능하다면, 어쩔 수 없이 링크버튼이 연결된 버튼을 따로 주는 방법이 좋을까요? 항상 감사드립니다.
Jamie K
2023-12-15T07:25:08.952Z
댓글 1
좋아요 1
조회수 628
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
여기서 align-items 랑 align-content가 개념이 잘 안잡혀요..ㅠ 인터넷에 검색해보니깐 한줄 두줄의 차이라고 하는데... 모바일사이즈일때는 한줄이 아니니깐 align-content라고 쓴걸까요? 아니면 justify-items: center; 코드가 있어서 일까요?
원스텝
2023-12-15T00:10:33.377Z
댓글 1
좋아요 1
조회수 331
미해결
처음 만난 리액트(React)
import { useState, useCallback } from "react"; import ThemeContext from "./ThemeContext"; import MainContent from "./MainContent"; function DarkOrLight(props) { const [theme, setTheme] = useState("light"); const toggleTheme = useCallback(() => { if (theme === "light") { setTheme("dark"); } else if (theme === "dark") { setTheme("light"); } }, [theme]); return ( <ThemeContext.Provider value={{ theme, toggleTheme }}> <MainContent /> </ThemeContext.Provider> ) } export default DarkOrLight; import React from "react"; const ThemeContext = React.createContext(); ThemeContext.displayName = "ThemeContext"; export default ThemeContext; MainContent가 ThemeContext의 하위 컴포넌트입니다. 그러면 <ThemeContext.Provider> 안에 있는 <MainContent /> 컴포넌트는 ThemeContext.Provider 안의 props.children 으로 간주될텐데 ThemeContext 에 {props.children} 가 없어도 <MainContent /> 가 표시되는 이유가 궁금합니다. .privider 메서드(메서드로 지칭하는게 맞나요...?ㅎ)를 사용하면 자동으로 하위 컴포넌트를 표시하는 기능(암묵적으로 {props.children} 를 사용한다던지...)이 있는 건가요?
Dohun Choi
2023-12-13T11:34:06.575Z
댓글 1
좋아요 1
조회수 312
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
이미지 부분에 cctv 영상을 구현하고 싶은데, 혹시 .... api를 연동해서 어떻게 연결하면 되는지 알 수 있을까요?
HTML/CSS javascript aws git mysql rest-api github
hihi
2023-12-12T06:11:24.941Z
댓글 2
좋아요 0
조회수 639
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
jQuery에서 '클릭한다'는 동작의 실행 코드로 맨 위에서는 focus를 사용했고, 아래에서는 click을 사용하신 것은 input에 사용할때와 아닐 때의 차이인 것인가요?
숀
2023-12-12T05:35:49.971Z
댓글 1
좋아요 1
조회수 354
미해결
따라하며 배우는 HTML, CSS
강사님의 영상 약 11분 10초 대를 보면 go live를 한 후 h1태그를 추가 한 후에 새로고침 하면 웹 창에서 추가된 h1이 보이는데 제가 하면 아래와 같은 오류가 뜨면서 추가되지 않습니다. 어떻게 하면 될까요? Live Reload is not possible without a head or body tag.
ismania1
2023-12-12T02:32:00.250Z
댓글 1
좋아요 0
조회수 385
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
노션 링크가 어디있나요 ? 찾기가 어렵네요..
HTML/CSS javascript aws git mysql rest-api github
hihi
2023-12-11T15:17:53.164Z
댓글 1
좋아요 1
조회수 356
해결됨
CSS Flex와 Grid 제대로 익히기
flex-basis에서 auto로 설정하는 것과 0으로 설정하는 것의 차이가 무엇인지 궁금합니다. 따로 코드를 짜서 실행하면 autof로 설정했을 때와 0으로 설정했을 때 결과물이 똑같아서 차이가 궁금합니다.
강두희
2023-12-11T11:07:23.890Z
댓글 2
좋아요 0
조회수 795
해결됨
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
expo를 global로 설치하고 init까지 한 후 npm start를 했을 때 일단 아래처럼 에러가 발생합니다. Unable to find expo in this project - have you run yarn / npm install yet? -> 이건 npm install을 해서 해결 했습니다. 그런데 그 후에도 또 아래와 같은 에러가 발생합니다. PS D:\Programming\study\Inflearn\FullStack\project\grab-market-mobile> npm start > grab-market-mobile@1.0.0 start > expo start Starting project at D:\Programming\study\Inflearn\FullStack\project\grab-market-mobile Starting Metro Bundler FetchError: request to https://api.expo.dev/v2/sdks/49.0.0/native-modules failed, reason: self signed certificate in certificate chain FetchError: request to https://api.expo.dev/v2/sdks/49.0.0/native-modules failed, reason: self signed certificate in certificate chain at ClientRequest.<anonymous> (D:\Programming\study\Inflearn\FullStack\project\grab-market-mobile\node_modules\node-fetch\lib\index.js:1501:11) at ClientRequest.emit (node:events:513:28) at TLSSocket.socketErrorListener (node:_http_client:494:9) at TLSSocket.emit (node:events:513:28) at emitErrorNT (node:internal/streams/destroy:157:8) at emitErrorCloseNT (node:internal/streams/destroy:122:3) at processTicksAndRejections (node:internal/process/task_queues:83:21) 이건 어떻게 해결해야 하나요?
HTML/CSS javascript react node.js react-native 머신러닝 express tensorflow
이원석
2023-12-11T08:13:45.051Z
댓글 1
좋아요 1
조회수 680
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
입력란과 버튼의 크기를 배분하기 위해 flex를 사용할 때, 부모 요소는 반드시 display: flex를 사용해야 하는 것인가요? flex와 display:flex가 상관관계가 있는 것인지 궁금합니다.
숀
2023-12-11T07:16:38.418Z
댓글 1
좋아요 1
조회수 220
미해결
SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
spoqa han sans neo글씨체 다운받았는데 피그마 할 때 text밑에 fonts에서 no matching font로 나오네요. 아예 검색자체가 안되는데 무슨 문제인가요??
HTML/CSS javascript sass jquery scss
imhj11777
2023-12-11T03:00:32.827Z
댓글 3
좋아요 1
조회수 1124
