안녕하세요. 최근에 프로젝트를 완성해서 배포까지 성공리에 마쳤는데요. 이제 운영을 해야하는데 몇가지 궁금한 점이 생겨서 질문 남기게 되었습니다.운영을 하다보면 배포하기 전 진행한 테스트 외에도 예기치 못한 오류가 생길 수 있기때문에 서버에서 로깅하는게 굉장히 중요하다고 생각이 드는데요. 실무에서는 로깅을 따로 어떻게 하는지에 대해 궁금함이 생겼습니다.현재 서비스의 중요한 비즈니스 로직에는 Logger를 사용해서 호출 될 때 마다, 시간과 함께 넘어가는 데이터를 같이 로깅하게끔 개발 해놨습니다. 약간 문제라고 생각되는 것은 에러가 발생 할 때, 호스팅하고있는 온프레미스 서버에 직접 접속해서 도커 컨테이너 로그를 일일이 확인해야 하는 번거로움이 있는 점입니다. 실무에서 모든 개발자들이 이렇게 확인하지 않을 것이라고 생각하는데 보통 실무에서는 어떻게 로그를 관리하시나요? 조언 부탁드립니다!

카카오 api 받아서 지도 잘 작동하고 검색창도 떳는데키워드 검색 데이터 받아오기 강의 들으면서 잘 따라갔는데 갑자기 안됩니다 upload.js:1 Uncaught ReferenceError: require is not definedat upload.js:1:20 f12누르니까 이렇게 나옵니다 ㅠㅠ 추가적으로 vs코드에서는파일이 CommonJS 모듈입니다. ES 모듈로 변환될 수 있습니다.ts(80001) 이런 문구가 나오네요  +그래서 upload 파일은 무시하고 지도위에 저장한 데이터 표시하기 강의까지 들었는데 이번엔 main.js:1 Uncaught ReferenceError: require is not defined at main.js:1:20 이렇게 뜨네요 require 함수가 지금까지 잘 되다가 수업이 진행될수록 왜 문제가 될까요 ㅠㅠ

현재 리액트부분을 시작했는데 리액트를 설치할때 yarn add next@12.1.0 react@17.0.2 react-dom@17.0.2 --exact이러한 명령어를 사용하는데 이렇게 설치하고 나니 제가 알고있는 폴더들이나 내용이 좀 다르더라구요. 제가 알고있는 건 npx create-react-app ./ 이러한 명령어로 리액트를 설치했는데 이거와 전혀 다른 명령어 인가요?

안녕하세요 강사님! 이번학기에 갑자기 웹 개발을 하게 되어 부랴부랴 프론트 강의 챙겨보는중인데 정말 도움이 많이 돼 우선 감사의 말씀 먼저 드립니다. ㅜㅜ  다름이 아니라 제가 본 영상 강의를 보고 학교 과제를 수행하다가   (투두 리스트를 참고하여 만들었습니다. 참고로 과제는 이슈관리 시스템입니다.) 이러한 메인 화면을 구현하였는데, 각 프로젝트 이름을 누르면 그 프로젝트의 상세 페이지로 연결 시키고 싶은데, 라우터 기능을 사용하여 링크는 제대로 바뀌는데 화면 전환이 되지 않습니다. ㅜㅜ  코드를 여러번 봐도 무엇이 문제인지 감이 안 잡혀 질문 드리게 되었습니다.  코드 첨부 하겠습니다. ! import "./App.css"; import { Routes, Route, Link, useNavigate } from "react-router-dom"; import { useRef, useState } from "react"; import Header from "./components/Header"; import List from "./components/List"; import ProjectDetail from "./pages/ProjectDetail"; //임시데이터 const mokdata = [ { p_id: 0, p_name: "회원가입 프로젝트", date: new Date().getTime(), }, { p_id: 1, p_name: "온라인 테트리스 게임 프로젝트", date: new Date().getTime(), }, { p_id: 2, p_name: "윷놀이 프로젝트", date: new Date().getTime(), }, { p_id: 3, p_name: "온라인 채팅 앱 개발 프로젝트", date: new Date().getTime(), }, { p_id: 4, p_name: "회원 관리 시스템 프로젝트", date: new Date().getTime(), }, { p_id: 5, p_name: "이슈 관리 시스템 프로젝트", date: new Date().getTime(), }, ]; function App() { const [projects, setProjects] = useState(mokdata); const onDelete = (targetId) => { //배열에서 targetId와 일치하는 id를 갖는 요소만 삭제한 새로운 배열 setProjects(projects.filter((project) => project.p_id !== targetId)); }; return ( <> <div className="App"> <Header /> <List projects={projects} onDelete={onDelete} /> </div> <Routes> <Route path="/ProjectDetail:p_id" element={<ProjectDetail projects={projects} />} /> </Routes> </> ); } export default App; 위는 App.jsx 코드 이고  아래는 ProjectDetail 코드 입니다. !import { useParams } from "react-router-dom"; const ProjectDetail = ({ projects }) => { const { p_id } = useParams(); const project = projects.find((project) => project.p_id === parseInt(p_id)); return ( <div> <h1>프로젝트 상세내용</h1> <h2>{project.p_name}</h2> </div> ); }; export default ProjectDetail;   

node.js와 npm은 --version을 이용하니 버전이 나오는데 yarn은 버전이 나오지 않아 npm install -g yarn 이라는 명령어를 하니 이미지처럼 에러가 나옵니다.

eslint 설치 시 3개 중에 마지막 3번째를 선택하라고 하는데 저는 선택지가 2개만 나옴니다. 2번째를 선택해서 설치해도 되나요?

geolocation부분에const askForLocation = function () { navigator.geolocation.getCurrentPosition((position) => { console.log(position); }); }; askForLocation();이렇게 함수가 있는데 여기서 궁금한점이 askForLocation(); 함수 호출부분에 인자로 전달하는 것이 없는데 매개변수로 position에 위치정보 객체형식으로 콘솔에 나오는 이유가 뭔지 궁금합니다.

sudo iptables -A PREROUTING -t nat -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 3000까지 하고 3000번 포트로 잘 들어가지는데 3000번포트를 지우고 들어가봐도 뒤에 :80을 붙여 넣어 들어가봐도 사이트에 연결할 수 없음이 뜨네요 왜 그럴까요??

안녕하세요. 프로젝트를 배포하는 과정에서 왜인지 모를 CORS 에러가 계속 생겨서 질문 드립니다.CORS 문제를 해결하기 위해서는 응답 헤더에 Acess-Control-Allow-Origin이 필요한데, nestjs와 같은 was에서 enableCors를 설정해주거나, Nginx의 server 블럭에 add_header를 통해서 헤더를 추가 해 줄 수 있는 것으로 알고 있습니다.웹 서버가 was보다 앞에 있으니까 웹 서버에서 설정해줘야겠다는 생각에 nginx.conf에 allowed_origin은 동적으로 Access-Control-Allow-Origin 헤더의 값을 받기 위해서 설정해뒀습니다.이렇게 작성하고 reload를 해줬는데, 왜인지 응답헤더에 추가한 헤더가 생기지 않습니다...테스트 서버에 위와 같은 설정으로 올렸을 때는 잘 해결됐는데 라이브에 올리니까 이런 문제가 발생하는데 어디를 살펴봐야 할 지 모르겠습니다... access to XMLHttpRequest at '도메인 주소' from origin '서버 ip' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.이런식으로 404에러가 나옵니다.

함수, 변수의 호이스팅 강의 영상 부분에if (storageData?.complete) { newLi.classList.add("complete"); }이 코드에서 storageData 뒤에 ? 이 물으표가 없으면 매개변수를 받아오지 않게 되니 undefined라고 강사님이 말씀하시는데 이게 무슨 말인지 잘 모르겠습니다. 그리고 ToDoList에서 리스트에 추가를 하고 더블클릭 삭제, 전체 삭제까지는 어느정도 이해가 되는데 로컬스트리지 전체 부분이 조금 이해도 어려운데 어떻게 이해를 하면서 공부를 하면 좋을까요?

현재 객체 localStorage저장 부분의 인강을 보다 궁금한점 있어 질문을 드립니다.const saveItemsFn = function () { const saveItems = []; for (let i = 0; i < todoList.children.length; i++) { const todoObj = { contents: todoList.children[i].querySelector("span").textContent, complete: todoList.children[i].classList.contains("complete"), }; saveItems.push(todoObj); } localStorage.setItem("saved-items", JSON.stringify(saveItems)); };현재 자바스크립트 코드 제일 마지막 부분에 saveItemsFn함수가 저장하는 부분이니 이 함수안에 localStorage.setItem을 사용해서 로컬스토리지에 저장을 하는것까지는 이해가 되었는데 저장된걸 가져오기 위해 const savedTodoList = localStorage.getItem("saved-items");localStorage.getItem을 사용하는데 여기서 첫번째로 이 코드 위치가 다시 제일 위쪽에 작성이 되었는지 궁금하고 두번째로 이 코드가 saveItemsFn 함수 안에 작성이 되지 않은 이유는 getItem이 저장하는 코드가 아니기때문에 saveItemsFn안이 아닌 따로 다시 작성이 된것인가요?

logout을 send하면 해당 오류가 발생합니다. 코드가 잘못된건지 궁금해 git 도 올려드립니다. 감사합니다. https://github.com/bukwon/boiler-plate 

안녕하세요.강의 잘 들었습니다.마지막에 메시지를 저장 하는 얘기를 하셨는데.. 보통 메신저 서비스에서는 어떤 방식의 DB를 사용하는지궁금합니다. 흔히 Oracle이나 MariaDB 같은 방식의 관계형 DB를 사용하는게 흔한지 아니면 Mongo같은 비관계형 방식의 DB를 많이 사용하는지 혹시 답변이 가능하시다면 답변 부탁 드립니다. 그리고 그걸 선택한 이유가 무엇인지. 감사합니다.

섹션 10에서 graphql codegen 설치하려는데요강의에서는 yarn add -D @graphql-codegen/cli을 설치하라고 하는데 지금 설치하려고 사이트에 들어가니yarn add --dev typescript @graphql-codegen/cli로 되어 있는데 같은 건가요?그냥 아래 명령어 실행해도 되나요?

안녕하세요! 지난 1탄 강의 잘 들었습니다.다름이 아니라 1탄과 2탄에서 go로 작성된 코드가 조금 다른거 같은데 혹시 누락된 강의가 있는걸까요 ?1탄에선 network 디렉토리에 network.go와 socket.go만 작성했었는데 2탄에선 server.go와 util.go가 생기면서 코드가 조금 변경된거 같습니다.누락된 강의가 없다면, 변경된 부분이 어떤 것들인지 알고싶어서 질문드립니다.

설치가 잘못된 걸까요.. yarn dev하니 오류가 납니다ㅜ

강사님께서 mongoDB Clusters 카테고리 들어가면 데이터 확인하실 수 있는데, 저는 따로 뜨는게 없고 이런 화면이 나오네요. 어디서 볼 수 있나요? 

안녕하세요. 현재 7강 듣고 있는데요, node.js run하고 postman에 이름, 이메일, 패스워드 넣어서 요청하면 에러 뜨고 종료가 됩니다... 이유가 뭔가요? 

안녕하세요! 강의 잘 듣고 있습니다!이번 과제 코드 피드백 부탁드립니다!고맙습니다.<화면><html><!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>SignUp</title> <link rel="stylesheet" href="./final.css"> <script defer src="./final.js"></script> </head> <body> <div class="wrapper"> <div class="wrapper__header"> <span id="header__title">코드캠프 회원가입</span> </div> <div class="wrapper__body"> <div class="wrapper__text"> <input type="text" id="email" placeholder="이메일을 입력해 주세요."> <span class="errorMsg email">이메일이 올바르지 않습니다.</span> <input type="text" id="name" placeholder="이름을 입력해 주세요."> <span class="errorMsg name">이름이 올바르지 않습니다.</span> <input type="text" id="pw1" placeholder="비밀번호를 입력해 주세요."> <span class="errorMsg pw1">비밀번호를 입력해주세요.</span> <input type="text" id="pw2" placeholder="비밀번호를 다시 입력해 주세요."> <span class="errorMsg pw2">비밀번호를 입력해주세요.</span> </div> <div class="wrapper__phone" oninput="phone()"> <input type="text" id="num1" maxlength="3"> - <input type="text" id="num2" maxlength="4"> - <input type="text" id="num3" maxlength="4"> </div> <div class="wrapper__certification"> <div class="cert__number"> <span id="certNum">000000</span> <button class="chkBtn" disabled="true">인증번호 전송</button> </div> <div class="cert__time"> <span id="certTimer">3:00</span> <button class="chkBtn" disabled="true">인증완료</button> </div> </div> <div class="wrapper__select"> <div class="select__locale"> <select id="locale"> <option selected disabled>지역을 선택하세요</option> <option value="서울">서울</option> <option value="경기">경기</option> <option value="인천">인천</option> </select> <span class="errorMsg locale">지역을 선택해주세요.</span> </div> <div class="select__gender"> <label for="woman"> <input type="radio" name="gender" id="woman"> 여성 </label> <label for="man"> <input type="radio" name="gender" id="man"> 남성 </label> </div> <span class="errorMsg gender">성별을 선택해주세요.</span> </div> </div> <div class="divideLine"></div> <div class="wrapper__check"> <!-- <button class="submit" disabled="true">가입하기</button> --> <button class="submit">가입하기</button> </div> </div> </body> </html> <css>*{ box-sizing: border-box; margin: 0; } html, body{ width: 540px; } .chkBtn{ width: 120px; height: 40px; border: 1px solid #D2D2D2; border-radius: 7px; font-size: 16px; font-weight: 400; color: #0068FF; background-color: #FFF; cursor: pointer; } .chkBtn.active { width: 120px; height: 40px; border: 1px solid #D2D2D2; border-radius: 7px; font-size: 16px; font-weight: 400; background-color: #0068FF; color: #FFF; cursor: pointer; } .errorMsg{ width: 100%; color: red; font-size: 10px; display: flex; flex-direction: column; align-items: center; visibility: hidden; } .wrapper{ width: 100%; height: 100%; padding: 60px 80px; border: 1px solid #AACDFF; border-radius: 20px; box-shadow: 7px 7px 39px rgba(0, 104, 255, .25); } .wrapper__header{ width: 100%; font-size: 32px; font-weight: 700; color: #0068FF; padding-bottom: 60px; } .wrapper__body{ width: 100%; } .wrapper__text > input{ width: 100%; height: 60px; margin-top: 20px; font-size: 16px; font-weight: 400; border: 1px solid #D2D2D2; border-radius: 7px; padding: 18px; } .wrapper__phone{ width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 20px 0; } .wrapper__phone > input{ width: 100px; height: 40px; border: 1px solid #D2D2D2; border-radius: 7px; } .wrapper__certification { width: 100%; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; } #certNum, #certTimer{ color: #0068FF; font-size: 18px; padding-right: 20px; } .cert__time{ padding: 20px 0; } .wrapper__select{ width: 100%; display: flex; flex-direction: column; align-items: center; } .select__locale{ width: 100%; display: flex; flex-direction: column; justify-content: center; } #locale{ width: 100%; height: 60px; border: 1px solid #D2D2D2; border-radius: 7px; color: #797979; font-size: 16px; font-weight: 400; padding: 18px; } .select__gender{ width: 140px; display: flex; justify-content: space-between; padding-top: 30px; } .divideLine{ width: 100%; border: 1px solid #E6E6E6; margin: 20px 0; } .wrapper__check{ width: 100%; display: flex; justify-content: center; } .submit { width: 100%; height: 60px; font-size: 18px; font-weight: 400; color: #0068FF; background-color: #FFF; border: 1px solid #0068FF; border-radius: 7px; }  <js>const submit = document.querySelector('.submit'); // 가입하기 const numberChk = document.querySelector('.cert__number .chkBtn'); // 인증번호 전송 const timeChk = document.querySelector('.cert__time .chkBtn'); // 인증완료 let time = 180; // 180초, 인증 시간 let isStarted = false; // email const emailChk = () => { let email = document.getElementById('email').value; if(email.includes('@') === true){ let isEmail = email.split('@')[1].includes('.'); if(isEmail === false){ document.querySelector('.errorMsg.email').style.visibility = 'visible'; document.querySelector('.errorMsg.email').value = ''; return false; } else { document.querySelector('.errorMsg.email').style.visibility = 'hidden'; return true; } } else { document.querySelector('.errorMsg.email').style.visibility = 'visible'; document.getElementById('email').value = ''; return false; } } // name const nameChk = () => { let name = document.getElementById('name').value; if(name.length === 0){ document.querySelector('.errorMsg.name').style.visibility = 'visible'; return false; } else { document.querySelector('.errorMsg.name').style.visibility = 'hidden'; return true; } } // pw const pwChk = () => { let pw1 = document.getElementById('pw1').value; let pw2 = document.getElementById('pw2').value; if(pw1 && pw2){ if(pw1 === pw2){ document.querySelector('.errorMsg.pw1').style.visibility = 'hidden'; document.querySelector('.errorMsg.pw2').style.visibility = 'hidden'; return true; } else { document.querySelector('.errorMsg.pw1').style.visibility = 'visible'; document.querySelector('.errorMsg.pw2').style.visibility = 'visible'; document.querySelector('.errorMsg.pw1').innerHTML = '비밀번호가 일치하지 않습니다.' document.querySelector('.errorMsg.pw2').innerHTML = '비밀번호가 일치하지 않습니다.' return false; } } else { document.querySelector('.errorMsg.pw1').style.visibility = 'visible'; document.querySelector('.errorMsg.pw2').style.visibility = 'visible'; return false; } } // phone const phone = () => { let num1 = document.getElementById('num1').value; let num2 = document.getElementById('num2').value; let num3 = document.getElementById('num3').value; if(num1.length === 3) { document.getElementById('num2').focus(); if(num2.length === 4) { document.getElementById('num3').focus(); } } if(num1.length === 3 && num2.length === 4 && num3.length === 4){ numberChk.classList.add('active'); certification(); } } const certification = () => { // 인증번호 numberChk.disabled = false; numberChk.addEventListener('click', e => { let randomNumber = String(Math.trunc(Math.random() * 1000000)).padStart(6, '0') document.getElementById('certNum').innerText = randomNumber; // 타이머 if(isStarted === false){ isStarted = true; timeChk.disabled = false; let timer = setInterval(() => { if(time >= 0){ let min = Math.trunc(time / 60); let sec = String(time % 60).padStart(2,'0'); document.getElementById('certTimer').innerText = `${min}:${sec}`; time--; } else { clearTime(timer); } }, 100) timeChk.addEventListener('click', e => { if(time >= 0){ alert('인증이 완료 되었습니다.'); clearTime(timer); submit.disabled = false; } }) } }) } const clearTime = (timer) => { timeChk.classList.remove('active'); numberChk.classList.remove('active'); document.getElementById('certNum').innerText = '000000'; document.getElementById('certTimer').innerText = '0:00'; timeChk.disabled = true; numberChk.disabled = true; isStarted = false; clearInterval(timer); } const checkValidation = () => { emailChk(); nameChk(); pwChk(); if(emailChk() && nameChk() && pwChk()) { return true; } else { return false; } } // 검증 submit.addEventListener('click', e => { checkValidation(); if(checkValidation()){ alert('코드캠프 가입을 축하합니다.'); } });

자바스크립트 함수가 조금 어려운데 함수는 그냥 관련된 코드들을 작성할 때 사용하나요? 예를 들어 input으로 어떠한걸 한다면 input 함수를 만들어서 이 함수안에는 input과 관련된 코드들을 작성한다고 보면되는건가요?