묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
파이널 과제도중 질문
파이널 과제중에 html이랑 css는 어느정도 다를수있게된거같은데 타이머나 인증번호쪽 js가 쫌 안되더라고요..이걸 공부를 어떻게해야할지 고민입니다파이널과제를 완벽하게 할수있을때까지 복습을해야할지..아니면 다음 커리큘럼이 js니까 일단 진도를 나가야할지 고민입니다
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.03
ScrollTrigger의 animation에 함수호출
function rotation_text(){ const tl = gsap.timeline({defaults:{duration:2}}) tl .to('.container6>.textbox',{ rotation:720 }) .to('.container6>.textbox',{ scale:5 }) // .to('.container6>.textbox',{ // opacity:0 // }) } ScrollTrigger.create({ trigger:'.container6', start:'top', end:'+=2000', scrub:1, pin:true, markers:true, animation:rotation_text() })안녕하세요 선생님 좋은 강의 항상 감사하면서 공부하고 있습니다.다름이 아니라 위 코드처럼 타임라인을 함수로 등록하여 사용하고 싶은데요..위의 코드를 실행하면 스크롤트리거에 걸리지 않고 이미 함수가 실행되어 container6으로 내려오는데 제가 뭘 잘못했을까요...ㅜㅜ고민고민하고 이리저리 뜯어보다 질문드립니다.
-
해결됨[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
where에서 이상 이하를 입력하는 방법
where : [ { id : 1, //version : 1 이건 id = 1AND version = 1; 로 된다는 의미이다. }, { version : 1 // 이땐 id = 1 OR version = 1; 로 된다. }, { profile : { id : 3 } } ],and와 or 그리고 값에 대한 조건설정은 있지만 프로퍼티에서 이상과 이하에 대한 검색은 어떻게 하나요?
-
해결됨React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)
const handleEnter 문에 궁금한게 있습니다.
setUserInput("")을 하면 userInput 값이 ""로 바뀌고그다움 num 선언문에 ""의 숫자변환값이 들어가는게 아닌가 궁금합니다.
-
미해결2022 30분 요약 강좌 시즌 1 : HTML, CSS, Linux, Bootstrap, Python, JS, jQuery&Ajax
codesandbox 문서 버튼이 안보여요
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. codesandbox 문서 버튼이 안보여요코딩실습을 해야하는데 문서 버튼이 아예 없어서 어딜 눌러서 코딩을 해야할지...
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
리프레시 토큰 관련 질문이 있습니다.
안녕하세요.해당 강의에 대한 질문이라기 보다 현재 우리가 구현한 인증/인가 구현 방법에 대한 질문이 있습니다. accessToken은 만료되었을 시 refreshToken을 재발급 받을 수 있도록 우리가 API를 만들었습니다. 따라서 클라이언트 측에서 accessToken 만료 시 refreshToken을 재발급하는 API를 요청하고 갱신을 할 것이라고 생각됩니다. 하지만 refreshToken을 갱신하는 API는 refreshToken이 만료되었을 시에는 리프레쉬 토큰을 갱신하지 못합니다. 이 때 사용자에게 재로그인을 시킨다는 기획이라면 문제가 없을 것 같습니다. (재로그인이라면 리프레시 토큰 갱신 API는 불필요할 것으로 생각됩니다.) 그렇다면 리프레시 토큰을 갱신하는 API는 클라이언트 입장에서 언제 호출을 해야되나요?사용자가 우리 서비스를 이용한다면 주기적으로 리프레시 토큰을 갱신하는 API를 호출하고 리프레시 토큰을 갱신을 해놔야하나요? 정답이야 없겠지만 스탠다드한 방법이 궁금합니다!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
access token 관련 질문드립니다.
안녕하세요 강의를 다 듣고 개인 포트폴리오 제작중에 있습니다.현재 로그인 부분을 구현중인데, 포인트 충전이라던가 마이페이지 접근시, 비밀번호 변경 시 등의 경우에 인가(여기선 fetchUser)를 받아야 한다고 이해했습니다. 그러려면, 강의에선 아래 사진처럼 header에 토큰을 넣어서 보내었습니다.하지만 직접 프론트엔드를 구축해서 api 호출하려고 하니 header에 토큰을 넣어줘야 하는데, 현재 로그인시 그냥 토큰 값인 문자열을 리턴할 뿐 엑세스토큰을 저장하는 곳이 없습니다.보통 액세스토큰을 저장할 때 변수, 로컬스토리지, 세션스토리지, 쿠키 중 무엇을 가장 많이 사용하나요?섹션 13-11의 강의에서 처럼 변수에 액세스토큰을 저장하는 경우를 생각해 봤습니다. 그러면 인증하는 컴포넌트(ex: login)와 인가를 받는 컴포넌트(ex: 포인트 충전)가 다를 때 컴포넌트에서 token을 변수로 저장하더라도 다른 컴포넌트에서는 사용 못할텐데 recoil같은 라이브러리를 사용해서 전역변수로 사용해야 하는지 궁금합니다. 아래는 프론트엔드의 login 컴포넌트를 예시를 적어보았습니다. const [token, setToken] = useState(""); await axios.post("http://localhost:5656/graphql", { query: ` mutation { login(id: "${inputId}", password: "${inputPw}") } `, }) .then(res => { setToken(res.data.data.login); } }) 감사합니다.
-
미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
스웨거에 글 등록시 401 에러가 나와요 ㅠ
스웨거에 글 등록시 401 에러가 나와요 ㅠ 뭐가 문제일까요?
-
미해결[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
첫번쨰 사람이지 판단하기
샘 이거복붙으로 해봐도 안되네요 ㅜㅜ 왜 제시어를 입력을 해도 안되나요 ???? 제시어가 입력이되야하는데 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>끝말잇기</title> <style> </style> </head> <body> <div><span id="order">1</span>번쨰 참가자</div> <div>제시어:<span id="word"></span></div> <input type="text"> <button>입력</button> <script> const number = Number(prompt('몇명이참가하나요 ?:')); const $button =document.querySelector('button'); const $input = document.querySelector('input'); const $word = document.querySelector('#word'); //선택하고 let word;//제시어저장 let newWord;// 새로입력한단어저장 const onClickButton=() =>{ if(!word) // 제시어가 비어잇는가? { // 비어잇다 word = newWord; // 입력한단어가 제시어가 된다 $word.textContent = word; } else{ // 비어잇지않다 } }; const onInput = (event) => { newWord = event.target.value; // 키보드를 입력할때마다 그글자가 저장이된다 }; $button.addEventListenter('click',onClickButton); $input.addEventListenter('input',onInput); /*첫번쨰 참가자인지 어떻게 판단을 할가 ??? 제시어가 없으면 첫번쨰 참가자 제시어라고 안니오겟지 그래서 워드를 만든거고 <div>제시어:<span id="order"></span></div> */ </script> </body> </html>
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
TodoInput컴포넌트의 addTodo 헬퍼함수 적용 질문드립니다.
<template> <div class="inputBox shadow"> <input type="text" v-model="inputValue" v-on:keyup.enter="checkAndAddTodo()"> <span class="addContainer" v-on:click="checkAndAddTodo()"> ... </template> <script> methods: { ...mapMutations([ 'addTodo' ]), checkAndAddTodo() { if (!this.checkEmpty()) { this.addTodo(this.inputValue); this.clearInput(); } else { this.showModal = !this.showModal; } }, checkEmpty() { console.log("inputValue: ", this.inputValue) if(this.inputValue === '') { return true; } return false; }, clearInput() { this.inputValue = ''; } }, components: { Modal: Modal } </script>addTodo도 helper 함수를 적용해서 변경해보려 했는데.. 이런식으로 변경하는게 맞을까요??checkAndAddTodo함수 내의 this.addTodo() 실행시 mapMutations의 'addTodo'를 따라 store까지 전달이 되긴 하는데.. 올바른 방식으로 수정한건지 궁금합니다
-
해결됨웹 프론트엔드를 위한 자바스크립트 첫걸음
크롬 확장프로그램 검색어 질문
안녕하세요! 강의 너무 잘 보고 있습니다! 그런데 확장 프로그램으로 적용해 보면서 궁금한 점이 생겼는데 그러면 프로젝트를 이렇게 만든 상태에서 적용을 하게 되고 만약에 실제로 쓴다면 검색어가 제가 지정한 링크가 아니라 실제 구글처럼 검색하려는 것을 검색하고 그 검색한 사이트가 보이게 만드는게 가능할까요?
-
미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
함수가 정의되기 전에 함수 호출
2-1[코드설명]기초다지기! 강의에서 질문1. 코드에서 render함수가 정의되기 전에 getPercent함수에서 render를 호출(실행)하는게 이해가 안되요.. ㅜ_ㅜ함수가 값도 되기 때문에 값을 전달하면서 동시에 호출도 하는것이 가능 한건가요? 질문2. function init(){ getPercent();};이렇게 초기화 하는건 기본으로 꼭 해야하는 동작인가요 질문3.javascript 기초를 듣고 왔는데 익숙해질때까지 강의를 반복수강하는것 말고 익숙해지는 방법이 또 있을까요? 기초를 복습할 수 있는 아주 쉬운 예제가 있는 사이트들이 있다면 추천 부탁드립니다.
-
미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
버튼 누를시 인포윈도우 닫는 방식 설명좀 다시 부탁드려도 될까요?
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 빈 배열 객체 생성 let infowindow = []; 거기에 for문 돌면서 infowindow 집어넣기infowindowArray.push(infowindow);1,2번 까지는 말 그대로 빈 배열객체를 생성후기존의 infowindow를 집어넣어 기존의 자료가 들어간infowindowArray를 만든것까진 알겠는데그 이후에 3. function closeInfoWindow(){ for (let infowindow of infowindowArray){ infowindow.close(); } };이게 무슨 말 일까요? 사실 모든 원리가 잘 이해가 되질 않습니다..ㅜㅜ기존에는 그냥 인포윈도우 클릭하면 해당정보가 나타나고 그것을 다른 것을 누르면 끄려 그러는데 왜 빈 배열객체를 만드는지 부터 잘 이해가 안되네요..
-
미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
result 에서 결과가 안 나와요.
result 페이지에서 결과가 안 나와요resultname, resultdesc가 안 뜨는데이미지는 선택된 결과 제대로 뜨는 걸로 봐선 알고리즘엔 문제가 없는데 어디서 잘못된 걸까요? 제 코드는 이렇습니다. const main = document.querySelector("#main"); const qna = document.querySelector("#qna"); const result = document.querySelector("#result"); const endpoint = 6; const select = [0, 0, 0, 0, 0, 0]; function claResult() { console.log(select); var result = select.indexOf(Math.max(...select)); return result; } function setResult() { console.log(name); let point = claResult(); const resultname = document.querySelector('.resultname'); resultname.innerHTML = infoList[point].name; var resultImg = document.createElement('img'); const imgDiv = document.querySelector('#resultImg'); var imgURL = '../image/image-' + point + '.png'; resultImg.src = imgURL; resultImg.alt = point; resultImg.classList.add('img-fluid'); imgDiv.appendChild(resultImg); const resultDesc = document.querySelector('.resultDese'); resultDesc.innerHTML = infoList[point].desc; } function goResult() { qna.style.WebkitAnimation = "fadeOut 1s"; qna.style.animation = "fadeOut 1s"; setTimeout(() => { result.style.WebkitAnimation = "fadeIn 1s"; result.style.animation = "fadeIn 1s"; setTimeout(() => { qna.style.display = "none"; result.style.display = "block"; }, 450) }) setResult(); } function addAnswer(answerText, qIdx, idx) { var a = document.querySelector('.answerBox'); var answer = document.createElement('button'); answer.classList.add('answerList'); answer.classList.add('mx-8'); answer.classList.add('py-3'); answer.classList.add('mx-auto'); answer.classList.add('fadeIn'); a.appendChild(answer); answer.innerHTML = answerText; answer.addEventListener("click", function () { var children = document.querySelectorAll('.answerList'); for (let i = 0; i < children.length; i++) { children[i].disabled = true; children[i].style.WebkitAnimation = "fadeOut 0.5s"; children[i].style.animation = "fadeOut 0.5s"; } setTimeout(() => { var target = qnaList[qIdx].a[idx].type; for (let i = 0; i < target.length; i++) { select[target[i]] += 1; } for (let i = 0; i < children.length; i++) { children[i].style.display = 'none'; } goNext(++qIdx); }, 450) }, false); } function goNext(qIdx) { if (qIdx === endpoint) { goResult(); return; } var q = document.querySelector('.qBox'); q.innerHTML = qnaList[qIdx].q; for (let i in qnaList[qIdx].a) { addAnswer(qnaList[qIdx].a[i].answer, qIdx, i); } var status = document.querySelector('.statusBar'); status.style.width = (100 / endpoint) * (qIdx + 1) + '%'; } function begin() { main.style.WebkitAnimation = "fadeOut 1s"; main.style.animation = "fadeOut 1s"; setTimeout(() => { qna.style.WebkitAnimation = "fadeIn 1s"; qna.style.animation = "fadeIn 1s"; setTimeout(() => { main.style.display = "none"; qna.style.display = "block"; }, 450) let qIdx = 0; goNext(qIdx); }, 450); }
-
미해결자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
코드리뷰 부탁드립니다 .선생님..^^
function solution(arr) { let result = Number.MIN_SAFE_INTEGER; let row = 0; let column = new Array(arr.length).fill(0); let diagonal = new Array(2).fill(0); let miniDia1 = 0; /** 대각의 합 */ let miniDia2 = 0; for (let i = 0; i < arr.length; i++) { let miniRow = 0; /** 행의 합 */ let miniCol = 0; /** 열의 합 */ for (let r = 0; r < arr.length; r++) { miniRow += arr[i][r]; miniCol += arr[r][i]; if (miniRow > row) row = miniRow; }; miniDia1 += arr[i][i]; miniDia2 += arr[i][arr.length - 1 - i]; column[i] = miniCol; }; diagonal[0] = miniDia1; diagonal[1] = miniDia2; const maxCol = Math.max(...column); const maxDia = Math.max(...diagonal); result = Math.max(maxCol, maxDia, row); return result; };
-
해결됨[코드캠프] 시작은 프리캠프
고농축 프론트엔드 수업
안녕하세요 강사님!덕분에 잘 완강해서 파이널과제까지 마쳤습니다.뭔가 이어서 배포까지 하는 프로젝트를 하나 만들어보고 싶은데고농축 프론트엔드 수업?이거 강의를 들으면 도움이 될까요?학습방향이 궁금해서 여쭤봅니다!그리고 뭔가 프로젝트 하나를 만들 때 피그마를 사용해야 하는 걸로 알고 있는데,이건 본인이 직접 만들어서 프로젝트에서 적용하는 건가요?아니면 프리캠프에서 했던 것 처럼 피그마 예시를 주고 거기다가 하는건가요?
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.03
영상 순서 오류
안녕하세요. 선생님.섹션 4 - Layout [Horizontal Layout] 대한 영상 순서가 잘못 올라간듯합니다. (1)과 (2)는 중복되어 보이고, 첫번째 영상인 (3)과 이어지지 않고 있습니다.확인 부탁드리겠습니다~
-
해결됨[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
docker로 올린 postgresql이 authentication failed만 떠요. 깃에서 가져와도 같은 현
컨테이너 올라온 것도 확인했구요.내부로 접속을해서 alter로 비번을 재설정해도 같은 현상이 지속되네요;
-
미해결[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
docker build 시 이미지 생성부분 질문
현재Docker 3 - package.json강의 듣고 질문 드립니다아래와 같이 index.js 파일을 3회 수정후, 수정할때마다 docker build 후docker images 명령어로 확인해보니이미지가 총 3번 생성 된것을 확인 할 수 있는데, express index.js 파일import express from "express" const app = express() app.get("/qqq", function (req, res) { res.send("qqq1") }) app.listen(3000) import express from "express" const app = express() app.get("/qqq", function (req, res) { res.send("qqq2") }) app.listen(3000)import express from "express" const app = express() app.get("/qqq", function (req, res) { res.send("qqq3") }) app.listen(3000)이미지 총 3번 생성질문1size가 915 mb 로 나오는데,위에 915M * 3 만큼의 용량이 내 pc 어딘가에 저장되어 용량을 차지하고 있는게 맞나요?질문2그렇다면 왜 기존 이미지를 수정하는 방식이 아닌,매번 새로운 이미지를 생성하는걸까요?지금 윈도우에 wsl Linux 설치하여 학습중인데,우클릭해서 용량을 확인할수가 없네요뒤에 해당 내용을 알려주시나요?답변 주시면 감사하겠습니다~
-
미해결[코드팩토리] [입문] 9시간만에 끝내는 코드팩토리의 Javascript 무료 풀코스
함수 안 변수 키워드를 var를 사용하시는 이유가 궁금합니다.
이전 강의에서 var 키워드를 지양하라고 하셨는데 함수를 정의하는 부분들에서는 계속 var를 이용하시더라구요 혹시 따른 이유가 있을까요?
