묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
graphql codegen 설치
섹션 10에서 graphql codegen 설치하려는데요강의에서는 yarn add -D @graphql-codegen/cli을 설치하라고 하는데 지금 설치하려고 사이트에 들어가니yarn add --dev typescript @graphql-codegen/cli로 되어 있는데 같은 건가요?그냥 아래 명령어 실행해도 되나요?
-
해결됨대용랑 채팅 TPS에 대한 stateful 서비스 구축하기
1탄과 2탄 사이 변경된 코드 질문
안녕하세요! 지난 1탄 강의 잘 들었습니다.다름이 아니라 1탄과 2탄에서 go로 작성된 코드가 조금 다른거 같은데 혹시 누락된 강의가 있는걸까요 ?1탄에선 network 디렉토리에 network.go와 socket.go만 작성했었는데 2탄에선 server.go와 util.go가 생기면서 코드가 조금 변경된거 같습니다.누락된 강의가 없다면, 변경된 부분이 어떤 것들인지 알고싶어서 질문드립니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션4 01-02-emotion 에러가 나는데 못찾겠습니다ㅜ
설치가 잘못된 걸까요.. yarn dev하니 오류가 납니다ㅜ
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
mongoDB 데이터 확인하는 법
강사님께서 mongoDB Clusters 카테고리 들어가면 데이터 확인하실 수 있는데, 저는 따로 뜨는게 없고 이런 화면이 나오네요. 어디서 볼 수 있나요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
postman 에러
안녕하세요. 현재 7강 듣고 있는데요, node.js run하고 postman에 이름, 이메일, 패스워드 넣어서 요청하면 에러 뜨고 종료가 됩니다... 이유가 뭔가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
이번 final 과제 피드백 부탁드립니다!
안녕하세요! 강의 잘 듣고 있습니다!이번 과제 코드 피드백 부탁드립니다!고맙습니다.<화면><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과 관련된 코드들을 작성한다고 보면되는건가요?
-
해결됨Slack 클론 코딩[백엔드 with NestJS + TypeORM]
배포 환경 DB 연결 질문 있습니다.
안녕하세요. 배포를 하고 있는 중 에러를 만났는데 도저히 이해가 가지 않아서 여쭤봅니다.[Nest] 1 - 05/23/2024, 2:56:25 PM ERROR [TypeOrmModule] Unable to connect to the database. Retrying (1)... Error: Access denied for user '유저'@'호스트 서버 IP' (using password: YES)제가 지금 만난 에러인데요. 현재 배포하고 있는 서버와 DB로 켜놓은 서버가 각각 다른 서버입니다.데이터베이스 사용자에 당연히 프로젝트에서 연결 해둔 유저를 추가해두었고, 배포하고 있는 서버의 접근도 허용해뒀습니다. 또한, GRANT ALL PRIVILEGES ON . TO '유저'@'호스트 서버 IP' IDENTIFIED BY '비밀번호'; flush privileges;이렇게 모든 권한도 주었습니다. 그런데 계속 위의 에러가 발생하는데 이유를 도통 모르겠습니다. 어떻게 접근해야 할까요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
2.10 Date 객체와 날짜 강의에서 월이 하나씩 추가 됩니다.
안녕하세요. 강의 듣다가 신기해서 질문드려요. 사진에서 보시면 1월로 입력했는데, 콘솔창에는 Feb으로 표시가 됩니다. 다른 달로 바꿔봐도 다음 달이 나오네요.. 그냥 자체 보정해서 (원하는 month - 1) 사용해야하는 건가요??아니면 , , 로 나누는 date는 잘 사용되지 않고, . - / 이 세가지를 사용하면 되는건가요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
리액트 복습하기
안녕하세요. 선생님 강의에 따라서 투두 리스트까지 완강하였는데요. 복습시 이번에 만들어본 프로젝트를 보지 않고 만들 수 있을 때까지 연습해보는 식으로 나아가면 될까요??
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
app.js 에서 sequelize 를 가져오는 부분이 models/index.js 있는 sequelize 를 가르키는게 맞나요?
[제로초 강좌 질문 필독 사항입니다]세션 6번app.js 시퀄라이즈 싱크에 관한 문의 입니다.const { sequelize } = require('./models');app.js 에서 시퀄라이즈를 가져오는데 해당 모둘안에는 3개의 파일 있습니다 .( user, comment, index ) index 파일만 실행하면 될거 같은데 sequelize 자져오는 이유가 궁금하고 , 여기서 가르키는 sequelize 가 index에 있는 sequelize 인지 궁금합니다.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
movieTitle
movieTitle 값이 안나와요ㅜㅜㅜ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
그리드 부분 질문있습니다.
그리드 부분 영상에서 헷갈리는 부분이 있습니다. 그리드 강의 영상에는 밑에 이미지처럼 grid-column: 1 / 3 부분이 첫번째 라인에서 시작해서 3번라인에서 끝난다고 하는데 사이부분까지 해서 4개의 라인이 되서 grid-column: 1 / 3이 아니라 1 / 4 가 아닌가요? 혹시 몰라 노션을 보니 노션은 1 / 4라고 되어있던데 뭐가 맞는 것인지 너무 헷갈립니다.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 챗봇 사이트 만들기
한국어 챗봇 만들기
처음에 언어 선택할때 한국어로 선택하고 dialogFlowSessionLanguageCode: 'ko'로 선택하면 한국어 챗봇만들기도 가능하나요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
coolsms.default에서 에러가 발생합니다. //sdk 가져오기
import coolsms from 'coolsms-node-sdk'const mysms = coolsms.default 에서 default에 빨간줄이 생기고, "typeof CoolsmsMessageService' 형식에 'default' 속성이 없습니다" 라는 에러가 계속 뜨는데 어떻게 해야하나요?import * as coolsms from 'coolsms-node-sdk' 로 임포트하면 해결되는데, 이러면 또 const messageService = new mysms(SMS_KEY, SMS_SECRET) 부분에서 문제가 터지네요ㅠㅜ..
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
커뮤니티를 올리고 난 후 404 page
커뮤니티 name을 Name1 이렇게 지었으면http://localhost:3000/r/Name1 이런식으로 바로 넘어가져서 404 page가 뜨는데요 이유가 create.tsx파일const handleSubmit = async (event: FormEvent) => { event.preventDefault(); try { const res = await axios.post("/subs", { name, title, description }); router.push(`/r/${res.data.name}`); } catch (error: any) { console.log(error); setErrors(error.response.data); } };여기서 router.push(`/r/${res.data.name}`);이 부분때문에 그런건가요? 원래 커뮤니티 등록하면 넘어가지는게 정상인가요? 강의에서는 안넘어가는걸로 보이는데...
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
상위에서 Props로 받은 함수를 왜 한번 더 함수로 감싸줘야 하나요?
맨 끝단인 TodoList에서 onUpdate나 onDelete를 바로 button에 달지 못하고 함수로 한번 더 감싸줘야 하는데 왜 그렇게 해야하는지 모르겠습니다. 감싸지 않고 바로 onClick={onDelete(id)}으로 달아주니 에러가 뜨더라고요
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
css에서 calc에 대해 질문있습니다.
현재 css에서 calc부분에 대해 강의를 보고 있는데 궁금한 점이 처음부터 계산해서 한번에 값을 적으면 되지 왜 calc(100% - 70px) 이런식으로 하는지 궁금합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
eslint 설치후 eslint.config.mjs 파일 생성이되고 .eslintrc.js 없습니다.
eslint 설치후 eslint.config.mjs 파일 생성이되고 .eslintrc.js 는 없습니다. 그리곳 eslint 설치시 첫 옵션 3가시 선택(강제로 고처주는옵션) 3번째 옵션도 없습니다. 2가지만 나오네요
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
localhost:3000/qqq 안됩니다..
사이트에 연결할 수 없다라고 나옵니다..혹시 몰라 5000/qqq도 해봤는데.. 액세스 거부로 나오구요.방화벽도 꺼져있습니다..ㅠ
