25%
57,750원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
버튼 너비 관련
저는 카테고리 버튼 너비를 25%로 지정했는데 한 줄에 버튼이 8개가 나옵니다. 그래서 한식~양식, 분식~기타 버튼끼리 따로 묶었더니 그제서야 2열로 버튼이 나오는데요. 강사님이 말씀하신 방법으로 안되면 어떻게 원인을 찾아야 할까요?
- 미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
마크가 뜨지 않는 현상 오류입니다.
안녕하세요.사진과 같이, 마크들이 뜨지 않는 상태입니다.Uncaught (in promise) ReferenceError: axios is not defined 라는 오류가 뜹니다.현재 소스에는, node_modules 안에 axios 라이브러리가 존재합니다. 1) 마크가 안 뜨는 문제가 axios 때문이 맞는지2) axios 때문이라면 node_modules 디렉토리에 라이브러리가 존재하는데 왜 안뜨는지3) 정확하진 않지만 db에 제대로 연결이 안 되어서 생기는 현상인지...가 궁금합니다. ㅜㅜ현재 소스 정보가 너무 부족하다면 이메일로 소스를 보내드릴 수 있습니다. 감사합니다..
- 미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
제 사이트를 안드로이드스튜디오에 웹뷰로 넣고 싶습니다. 어떻게 해야 할까요?
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안드로이드스튜디오를 이용해 어플 만들기도 같이 공부하고 있는데, 네비게이션 메뉴 중 하나를 누르면 웹뷰를 이용해 그 페이지가 뜨도록 하고 싶습니다. 현재 배포는 안한 상태입니다. 카카오 developers에서 플랫폼에 등록도 했습니다 . (마켓 url, 키해시 부분 공란)manifest에 있는 패키지명을 입력해두었는데 에뮬러이터를 작동시키니 맵이 뜨지 않습니다. 어떻게 적용시켜야 하는걸까요?
- 해결됨비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
카테고리를 눌렀을 때 모든 항목이 조회가 됩니다...
const categoryList = document.querySelector(".category-list"); categoryList.addEventListener("click", categoryHandler); async function categoryHandler(event) { const categoryId = event.target.id; const category = categoryMap[categoryId]; 카테고리를 눌렀을 때 모든 항목이 조회가 됩니다... 아마 쿼리 문제인것 같은데 여기서부터 오류가 떴었어요.
- 해결됨비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
axios-script.js 작성했는데 콘솔에서 오류가 뜹니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.강의는 "Axios 맛집목록 API 데이터 요청"06:00 부분을 보고 있습니다. 엉뚱하게 카카오맵에서 붙여넣기한 부분에서 오류가 뜨는데 왜이럴까요? 그 전에 쿼리스트링 조회가 안되는데 이거하고 연관이 있을까요>?
- 해결됨비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
카카오맵 이미지나 텍스트 크기가 infowindow를 벗어납니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.어떻게 수정해야 할까요? 선생님처럼 정제되어서 보이지가 않습니다. 항상 답변 해주셔서 감사합니다. 😊 인포윈도우 설정 .infowindow { width:25rem; border: 1px solid black; border-radius: 5px; background-color: white; } .infowindow-img-container { width: 100%; overflow: hidden; } .infowindow-img { width: 180px; } .infowindow-title{ font-size: 2rem; } .infowindow-address { font-size: 1.3rem; } .infowindow.btn { font-size: 20px; }
- 해결됨비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
axios-script를 작성하고부터 계속 에러가 납니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.맥북에서 node.js 설치하는 명령어가 무엇인가요? vs code로요! (오류가 있어서 삭제했습니다 ㅜ)해당 부분 /* 1. 지도 생성 & 확대 축소 컨트롤러 https://apis.map.kakao.com/web/sample/addMapControl/ */ var container = document.getElementById("map"); //지도를 담을 영역의 DOM 레퍼런스 var options = { //지도를 생성할 때 필요한 기본 옵션 center: new kakao.maps.LatLng(37.54, 126.96), //지도의 중심좌표. 서울 한가운데 level: 8, //지도의 레벨(확대, 축소 정도) 3에서 8레벨로 확대 }; var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴 // 지도 확대 축소를 제어할 수 있는 줌 컨트롤을 생성합니다 var zoomControl = new kakao.maps.ZoomControl(); map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT); /* ********************************************************** 2. 더미데이터 준비하기 (제목, 주소, url, 카테고리) */ async function getDataSet(category) { let qs = category; if (!qs) { qs=""; } const dataSet = await axios({ method: "get", url: 'http://localhost:3000/mapInfo?category=${qs}', headers: {}, //pocket header data: {}, //pocket body }); console.log(dataSet); } getDataSet(); /*
- 미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
error: readStudents Query error
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. postman에서 get 메서드로 http://localhost:3000/students 실행했을 때 뜨지 않고, vscode console에서는 error: readStudents Query error라고 뜹니다. readStudents query가 잘못되서 전체학생 목록이 안나오는 것 같습니다. 어디가 잘못 됐을까요?<indexcontroller>const { pool } = require("../../config/database"); const { logger } = require("../../config/winston"); const jwt = require("jsonwebtoken"); const secret = require("../../config/secret"); const indexDao = require("../dao/indexDao"); //학생 생성 exports.createStudent = async function(req,res) { const { studentName, major, birth, address} = req.body; console.log(studentName, major, birth, address) }; //학생테이블 조회 exports.readStudents = async function(req, res){ const { studentIdx } = req.params; try { const connection = await pool.getConnection(async (conn) => conn); try { const [rows] = await indexDao.selectStudents(connection,studentIdx); return res.send({ result: rows, isSuccess: true, code: 200, // 요청 실패시 400번대 코드 message: "요청 성공", }); } catch (err) { logger.error(`readStudents Query error\n: ${JSON.stringify(err)}`); return false; } finally { connection.release(); } } catch (err) { logger.error(`readStudents DB Connection error\n: ${JSON.stringify(err)}`); return false; } }; // 예시 코드 exports.example = async function (req, res) { try { const connection = await pool.getConnection(async (conn) => conn); try { const [rows] = await indexDao.exampleDao(connection); return res.send({ result: rows, isSuccess: true, code: 200, // 요청 실패시 400번대 코드 message: "요청 성공", }); } catch (err) { logger.error(`example Query error\n: ${JSON.stringify(err)}`); return false; } finally { connection.release(); } } catch (err) { logger.error(`example DB Connection error\n: ${JSON.stringify(err)}`); return false; } }; <Indexdao 부분> const { pool } = require("../../config/database"); exports.selectStudents = async function (connection, studentIdx) { const Query = `SELECT * FROM Students where studentIdx = ?;`; const Params = [studentIdx]; const rows = await connection.query(Query, Params); return rows; }; exports.exampleDao = async function (connection) { const Query = `SELECT * FROM Students;`; const Params = []; const rows = await connection.query(Query, Params); return rows; }; <IndexRoute 부분> module.exports = function (app) { const index = require("../controllers/indexController"); const jwtMiddleware = require("../../config/jwtMiddleware"); // // 라우터 정의 // // app.HTTP메서드(uri, 컨트롤러 콜백함수) // app.get("/dummy", index.example); //학생테이블 조회 app.get("/students/:studentIdx", index.readStudents); app.post("/students", index.createStudent); };
- 미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
nodemon 실행이 안됩니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요. 좋은 강의 잘 듣고 있습니다. 처음 서버나 데이터베이스를 공부해봐서 질문이 많은 점 죄송합니다. index.js는 잘 연결이 됩니다. 하지만 nodemon index.js는 실행되지 않습니다. 이유가 뭘까요? ,, (base) seleui-MacBookPro:back sele$ nodemon index.jsbash: nodemon: command not found(base) seleui-MacBookPro:back sele$
- 해결됨비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
aws EC2 인스턴스 시작할 때 맥북도 인강 그대로 따라하면 될까요?
AWS EC@ 인스턴스 임대 부분을 듣고 있습니다. 맥북 프로 M1을 쓰고 있습니다. aws 로그인하고 AMI 선택하는데 인강하고 똑같이 우분투 18.04 선택하면 되나요?아키텍쳐는 64비트 (x86)으로요. 컴퓨터 지식이 없어서 맥북도 똑같이 따라하면 되는지 질문합니다.
- 해결됨비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
카테고리가 2개일 때 dataset에 어떻게 입력해야 하나요?
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.예를들어 카테고리를 빨강과 점에 둘 다 나오게 하고 싶으면 두 개를 입력해도 되나요? const dataSet = [ { title: "빨강-점", address: "서울 영등포구 대방천로 260", url: "https://ipari.kr/product/red-dots/", imgurl: "https://i0.wp.com/ipari.kr/wp-content/uploads/2022/06/red-dots.png?fit=1105%2C611&ssl=1", category: "빨강", "점", } ]
- 해결됨비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
map.css 적용이 안됩니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. map.css를 작성했는데 이것을 주석처리하든 안하든 liveserver에는 똑같이 뜹니다. 혹시 index.html에 무엇을 연결해놔야 하나요? 인강을 다시 돌려보았는데 놓친 부분이 있는 것 같습니다... index.html입니다. <!DOCTYPE html> <html lang="en"> <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" /> <title>이파리 지도</title> <meta name="author" content="이파리" /> <meta name="description" content="병행충 생태 지도 서비스" /> <meta name="keywords" content="병해충, 이파리, 관찰, 식물, 지도" /> <link rel="stylesheet" href="style.css" /> </head> <body> <nav> <div class="inner"> <div class="nav-container"> <h1 class="nav-title">이파리 지도</h1> <button class="nav-contact">사이트 이동</button> </div> </div> </nav> <main> <section id="category"> <div class="inner"> <div class="category-container"> <h2 class="category-title">이파리 카테고리를 선택해보세요</h2> <div class="category-list"> <button class="category-item">빨강</button ><button class="category-item">주황</button ><button class="category-item">레몬</button ><button class="category-item">연갈색</button ><button class="category-item">검정</button ><button class="category-item">흰색</button ><button class="category-item">선</button ><button class="category-item">점</button> </div> </div> </div> </section> <!-- 카테고리 --> <div id="map" class="inner"></div> <!--카카오지도 --> </main> <div class="infowindow"> <div class="infowindow-img-container"> <!-- <img src="https://i0.wp.com/ipari.kr/wp-content/uploads/2022/10/red_lesion-scaled.jpg?zoom=2&resize=300%2C300&ssl=1" class="infowindow-img"> --> </div> <div class="infowindow-body"> <h5 class="infowindow-title">할머니집</h5> <p class="infowindow-address">서울특별시 중구 명동3길 42</p> <a href="" class="infowindow-btn" target="_blank"></a> </div> </div> <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=7e75aa2606436f7d03f3b0bbd72c8a5e&libraries=services"></script> <script src="script.js"></script> </body> </html>/2.map.css입니다. 인포윈도우 설정 .infowindow { width:25rem; border: 1px solid black; border-radius: 5px; background-color: white; } .infowindow-img-container { width: 100%; overflow: hidden; } .infowindow-img { width: 100%; } .infowindow-title{ font-size: 2rem; } .infowindow-address { font-size: 1.6rem; } .infowindow.btn { font-size: 1.6rem; }
- 미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
WinSCP 에서 Putty 열기(Ctrl + P) 오류
Win11 home 환경인데 첨부한 이미지 오류가 나네요.WinSCP, Putty 모두 최신버전이고 각각의 연결은 잘 됩니다.
- 해결됨비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
유튜브 섬네일 따지 않고 사이트의 이미지 주소를 가져오는 것은 어떻게 해야 하나요?
맛집주소에 유튜브 섬네일이 아닌 블로그 이미지주소를 불러오고 싶은데요,올려주신 코딩은 유튜브섬네일 따는 자바스크립트가 있어서 헷갈려요 ㅜㅜ혹시 이미지 주소를 info window img 로 설정하고,클릭시 블로그 주소로 이동하는 자바스크립트 코딩도 알려주실 수 있나요 ㅜㅜㅜ ... 유튜브 섬네일 따는 자바스크립트 부분을 지워도 그 외 변경해야 할 것이 많아서 헷갈립니다.. 현재맛집 클릭시 상세 조회 + 유튜브 섬네일 따기, 지도 중심 이동강의 보다가 막혔습니다.// 인포윈도우 가공하기 return ` <div class="infowindow"> <div class="infowindow-img-container"> <img src="${imgUrl}" class="infowindow-img" /> </div> <div class="infowindow-body"> <h5 class="infowindow-title">${data.title}</h5> <p class="infowindow-address">${data.address}</p> <a href="${data.url}" class="infowindow-btn" target="_blank">사이트 이동</a> </div> </div> `;}
- 미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
mysql 외부접속 오류입니다.
GRANT ALL PRIVILEGES ON *.* TO '아이디'@'%' IDENTIFIED BY '패스워드';이부분을 그대로 쳤는데You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'identified by '000000'' at line 1이 오류가 계속 나옵니다. 어떻게 해결해야 할까요?
- 미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
winscp에서 putty 연결 도중 오류
안녕하세요!winscp 에서 putty 연결 중다음과 같은 오류가 발생하여 질문 드립니다... 여기까지는 완료하였습니다..
- 미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
마커 찍는 법 질문 드립니다
ㅇ안녕하세요 첨부파일을 첨가하는 법을 몰라서 URL로 코드 보여드립니다. script.js 에서 오류가 있다고 뜨는데, Uncaught TypeError: kakao.maps.ZoomControl is not a constructor라는 오류가 뜨고요. 맛집 마커가 지도에 뜨지 않아요.강사님의 코드와 크게 다른점은 없어보입니다.단, index.html 에서 autoload=false 라이브러리 추가한 점과,script.js 에서 kakao.maps.load 부분 추가한 점 있습니다.이는 지도가 잘 뜨지 않는 점 해결하고자 추가했습니다..! 답변 주시면 감사드리겠습니다...!
- 미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
34강 <태그 추가> 질문입니다.
안녕하세용..! 저는 이 실습 문제를,const productsData = [ { title: "감자칩", weight: 300 }, { title: "칙촉", weight: 100 }, { title: "고구마칩", weight: 300 }, { title: "오잉", weight: 50 }, ]; const app = document.querySelector("#app"); productsData.forEach(e => { app.innerHTML += `<div class=item> 상품명 : ${productsData.title}, 무게 : ${productsData.weight}</div>` }); 이렇게 풀었는데, 혹시 왜 안되는지 알 수 있을까요? foreach문은 돌지만, title과 weight 값이 undefined 로 찍힙니다..
- 미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
app.use(express.static("")); 사용이유
app.use(express.static(""));를 단지 정적 파일들의 서비스할 경로를 지정한다는 건 이해했습니다. 하지만 이전, 위 사진과 같이 강사님의 수업에서 html, css, js들이 모여있는 파일을 지정하기 위해 Nginx 설정 파일에서 루트 경로를 설정한다고 배웠습니다.그래서 이 설정만으로 서비스하는데 문제가 없지 않을까?? 라는 판단이 돼, app.use(express.static(""));를 해줘야 하는 이유를 잘 모르겠습니다. (물론, 이 코드를 지우고 한번 실행시켜봤지만 오류가 발생하는 것을 인지했습니다. 이유는 모르겠습니다. ㅠㅠ)무슨 이유에 app.use(express.static("")); 사용해 줘야 하는 것인가요??
- 미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
https 적용후,, net::ERR_SSL_PROTOCOL_ERROR
1. cerbot을 이용해 https 설정을 하였지만, 강사님과는 선택지가 다르게 나옵니다. 이걸로 모든 http 요청을 https로 바꿀 수 있는 건가요?2. 분명 aws ec2 서버에는 왼쪽 사진처럼 https://www.restaurantmap.site/restaurants?category=${qs} 로 git pull & 저장돼, nginx 서비스 재시작 & pm2를 전부 재시작 해봤지만 오른쪽 사진처럼 적용되는 url이 url: http://43.200.140.142:3000/restaurants?category=${qs} 로 적용돼 어떻게 해결해야 할지 모르겠습니다. 아니면 이게 정상인건가요??3. 이곳저곳 몇 시간을 걸쳐 검색해 보고 공부해 봤지만 도저히 이 부분에 대한 해결 방법을 모르겠습니다.. 설정 파일이 잘못된 것인가요??-> 05:39am : 이 부분은 제가 우분투 22.04버전이라 ufw 방화벽 설정으로 어느 정도 해결된 것 같습니다. 하지만 ERR_CONNECTION_TIMED_OUT라는 새로운 에러가 발생하네요 ㅠㅠㅠㅠ 짐작이 안 가는데 어느 부분에서 오류가 발생하는 걸까요...nginx 설정 파일 & ec2 내부의 경로 & ec2 인바인드 규칙은 이렇습니다