묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결기획자님 이 정도 웹 개발은 배워보면 어떨까요? [이론+실습]
HomePage.vue에 작성한 내용이 화면엔 보이지 않습니다.
질문은 자세하게 적어주실 수록 좋습니다. 어느 부분을 수강중이신지 -> bmi 계산기 프로그램 완성하기 내가 어떻게 했는데, 어떤 결과가 나오기를 기대했는데, 다른 결과가 나왔는지 -> 노션의 코드들을 다 복사해서 붙여넣기 했는데 homepage 영역이 안나옵니다작성하신 코드 및 오류 스크린샷 을 함께 첨부해주시면 좋아요!
-
미해결기획자님 이 정도 웹 개발은 배워보면 어떨까요? [이론+실습]
VUE CLI 설치 프로젝트 생성이 안됩니다
Vue CLI v5.0.8✨ Creating project in /Users/yeji/Desktop/2-17__/myfirestvuewapp.⚙ Installing CLI plugins. This might take a while...npm error code EACCESnpm error syscall opennpm error path /Users/yeji/.npm/_cacache/tmp/e7f990dfnpm error errno EACCESnpm errornpm error Your cache folder contains root-owned files, due to a bug innpm error previous versions of npm which has since been addressed.npm errornpm error To permanently fix this problem, please run:npm error sudo chown -R 501:20 "/Users/yeji/.npm"npm error Log files were not written due to an error writing to the directory: /Users/yeji/.npm/_logsnpm error You can rerun the command with --loglevel=verbose to see the logs in your terminalERROR Error: command failed: npm install --loglevel error --legacy-peer-depsError: command failed: npm install --loglevel error --legacy-peer-depsat ChildProcess.<anonymous> (/usr/local/lib/node_modules/@vue/cli/lib/util/executeCommand.js:138:16)at ChildProcess.emit (node:events:518:28)at maybeClose (node:internal/child_process:1104:16)at ChildProcess._handle.onexit (node:internal/child_process:304:5)yeji@gim-yejiui-MacBookPro 2-17__ % sudo npm i -g @vue/cli;2A
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
full reload 질문
선생님 처럼 영상을 보고 css full reload 를 설정 했는데 체크를 해제하면 css 수정 시 안올라가고 체크를 하면 올라 갑니다 또한 html 수정시 마다 매번 위(무한스크롤링)로 올라 갑니다. 해결방법이 있나요?
-
미해결SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
영상 싱크가 맞지 않습니다!
영상 싱크가 맞지 않습니다 ㅠㅠ 헤더영역에 특히 그렇습니다 ㅠ
-
미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
결과 이미지랑 글이 안떠요 왜일까요
// main변수= 문서 내 #main을 찾아서 가지고 와라 const main= document.querySelector("#main"); const qna= document.querySelector("#qna"); // statusbar 위한 엔드포인트 정의 const endPoint =12; // 결과값 const result=document.querySelector("#result"); // 사용자 입력값에 대한 배열 // const select = []; // 사용자 입력값에 대한 배열 new.직접 12개의 배열에 value 0넣기 const select = [0,0,0,0,0,0,0,0,0,0,0,0,0]; // 질문에 따른 답변 계산 // function calresult(){ // var pointArray = [ // 이 부분 data는 data.js로 옮겨서 동물 당 번호로 바꿔줌. // ] // for(let i = 0; i<endPoint; i++){ // // qnalist로 들어가서 a로 들어가고 거기서 select한 값 // var target =qnaList[i].a[select[i]]; // for(let j=0; j< target.type.length; j++){ // for(let k=0; k<pointArray.length; k++){ // if(target.type[j]=== pointArray[k].name){ // pointArray[k].value += 1; // } // } // } // } function calresult(){ // select라는 배열에 index를 반환할건데 최대값을 console.log(select); var result =select.indexOf(Math.max(...select)); return result; } // // value기준으로 정렬 sort // var resultArray = pointArray.sort(function(a,b){ // if(a.value > b.value){ // return -1; // } // if(a.value < b.value){ // return 1; // } // return 0; // }); // console.log(resultArray) // // key값을 도출, 동물의 이름 // let resultword = resultArray[0].key; // return resultworld; function setresult(){ let point = calresult(); const resultName = document.querySelector('.resultname'); resultName.innerHTML = infoList[point].name; var resultImg = document.createElement('img'); const imgDiv = document.querySelector('#resultImg'); var imgURL = 'img/image-'+ point + '.png'; resultImg.src=imgURL; resultImg.alt=point; resultImg.classList.add('img-fluid'); imgDiv.appendChild(resultImg); const resultDesc = document.querySelector('.resultDesc'); 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(); calresult(); } function addAnswer(answerText, qIdx,idx){ var a = document.querySelector('.answerbox'); var answer = document.createElement('button'); // answer는 클래스나 id값이 없어서 querySelector이용 불가하므로 클래스 만들어주기 answer.classList.add('answerlist'); // qbox, answerlist에 애니메이션 넣기 위해 클래스 만들어주기 answer.classList.add('fadeIn'); // 버튼 간 간격 answer.classList.add('my-3'); answer.classList.add('py-3'); answer.classList.add('mx-auto'); // 답변 클릭할 수 있게 버튼 만들기 그것을 html에서 코드 짜지 않고 // innerhtml을 통해서 넣기 a.appendChild(answer); answer.innerHTML = answerText; // html의 onclick 역할의 addEventListener 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 1s"; children[i].style.Animation = "fadeOut 1s"; } setTimeout(() => { // 소,닭 등 각 부여된 select 리스트의 순서를 찾아 value값 1씩 늘려주기 var target =qnaList[qIdx].a[idx].type; for(let i=0; i< target.length; i++){ select[target[i]] +=1; } //// 사용자 입력이 몇 번째인지 인덱스로 넣어주고 idx로 받아주기 -> 몇 번째 질문에서 몇 번째 답변 눌렀는지 select[qIdx] = idx; for(let i=0; i< children.length; i++){ children[i].style.display = 'none'; } goNext(++qIdx); // 버튼이 사라지고 950초쯤 이후 버튼 없어지게 }, 950) }, false); } function goNext(qIdx){ // 결과값 호출하는 함수 if(qIdx === endPoint){ goresult(); return; } // html파일에서 qna 안 qbox가져와라 var q= document.querySelector('.qbox'); q.innerHTML = qnaList[qIdx].q; // 원래는 q.innerHTML =qnalist[0].q; 였는데 0~11번째 질문을 // 하나씩 입력하면 귀찮으니까 let Idx라는 변수 만들어서, for 함수 사용 for(let i in qnaList[qIdx].a){ // answerlist를 하나씩 입력하지 않고 파라미터로 addAnswer(qnaList[qIdx].a[i].answer,qIdx,i); } // status에 따라서 바로 나타내려고 var status = document.querySelector('.statusbar'); status.style.width=(100/endPoint)*(qIdx+1) + '%'; } // 장면 넘어가는 animation 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); }
-
미해결처음 만난 리액트(React)
index.js를 수정 후 npm start를 하면 계속 포트running이라고 뜹니다
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 강사님과 동일하게 index.js를 수정하고 terminal - new terminal을 하면 저는 경로가 계속 my-app의 상위 경로로 되어있어서 cd my-app을 해주고 npm start를 하는데 (이부분도 저는 왜 계속 이렇게 뜨는지 궁금합니다..my-app을 우클릭 후 터미널을 열면 되긴합니다만..) 이렇게 떠서 계속 새로운 포트를 추가해서 사용하게 됩니다..저도 강사님처럼 실습하고 싶은데 어떻게 하면 될까요..?
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
폰트어썸
안녕하세요css 기초이론을 따라하여 (아이콘)cdn 주소 링크에 넣고 i 태그도 위에 맞게 넣었습니다. 근데 항상 저는 네모에 엑스박스친 오류 상자만 뜹니다.인강 당시와 cdn 주소가 변경된건지.. 알 수 있을까요?
-
미해결처음 만난 리액트(React)
jsx 실습 관련 오류 npm start를 해도 강사 화면처럼 안떠요.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.왼쪽의 화면처럼만 뜹니다.그리고 강사처럼 npm start만 하면 이런 오류가 떠서cd my-app , npm start하면 그나마 실행되는데 위의 사진처럼 결과 리액트가 아니라 로딩화면같이 뜹니다. 어떻게 해결해야하나요?
-
미해결처음 만난 리액트(React)
terminal에서 npx 명령어 입력해도 안떠요..
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.어떻게 해결해야할까요?
-
미해결SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
수강평 작성이 안되네요..
안녕하세요 선생님SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma 강의를구매하고 섹션1all 과 섹션2 몇개 강의 듣고 수강평 남기려고 하는데 작성하는 곳이 없어서 글올립니다..ㄴ 수강평 버튼이 없습니다..
-
해결됨이거 하나로 종결-스프링 기반 풀스택 웹 개발 무료 강의
다운로드 불가
1강 소개 자료 zip 파일이 압축 해제가 안 됩니다!
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
<꼭 답변 부탁 드립니다>그랩선생님, [컴포넌트 사용하기] 강의에서 질문 있습니다.
안녕하세요? 그랩선생님, 수고가 많으십니다.다름이 아니라 강의 [컴포넌트 사용하기] 강의를 진행하던 중 2가지 에러가 발생하여 질문을 하게 되었습니다.첫번째 에러는 아래 사진으로 첨부합니다.첫번째 에러 사진의 크롬 브라우저 제목은 listing directory / 라고 뜹니다. 그다음에 src디렉토리에 가서 App.js를 열면 첨부사진 처럼 입력된 소스화일 내용이 아래와 같이 뜨는데어떻게 해야 크롬 브라우저로 로고까지 뜨게 되나요?그리고 두번째 에러는 실제 소스 파일 폴더에 가서 App.js 파일을 선택 후 엔터(실행)하니 아래 사진과 같은 에러가 발생하였습니다.--> 이 두가지 에러를 어떻게 하면 해결 할 수 있는지 상세한 설명과 자세한 답변 부탁드립니다.감사합니다.
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
3차 y축으로 올라오는 갤러리제작
3차 y축으로 올라오는 갤러리제작에 관한 질문입니다이미지와 왼쪽에 있는 클론코딩 제목이 같이 올라오게 하고 싶거든요Concierge 글자가 올라오면서 이미지가 올라오고두번째 Hanwha Solutins가 올라오면서 이미자가 올라오는이런건 안될까요?
-
미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
Putty에서 nginx를 vi로 수정할때 오류
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 제목과 같이 putty 터미널에서 vi로 vi /etc/nginx/sites-.../에서 수정하는데 저는 다음과 같은 화면이 나옵니다. ㅠㅠ 이거 왜 이런건가요
-
미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
mysql과 선생님의 깃허브 코드연결
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요선생님께서 올리신 완성본 코드를 깃허브에서 다운받아서 결과를 보고싶은데, 지도상에 음식점들의 핀이 뜨지 않습니다 ㅠ 아마 sql상에 더미 데이터들이랑 연결이 안되어서 그런것같은데 지도상에 마커들이 뜨게 하려면 어떻게 해야할까요 도와주세요
-
미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
nodemon 실행오류
[nodemon] 3.1.7[nodemon] to restart at any time, enter rs[nodemon] watching path(s): .[nodemon] watching extensions: js,mjs,cjs,json[nodemon] starting node index.js[nodemon] app crashed - waiting for file changes before starting... 다음과 같은 오류가 발생하는데 어떻게 해결해야하나요 ㅠ
-
미해결TailwindCSS 완벽 마스터: 포트폴리오부터 어드민까지!
스니펫 관련질문
이거 근데 log이렇게 치면console.log(''); 이렇게 되야되는거 아닌가요? 이상하게 안되네요console.log(); 이렇게 밖에 스니펫이 안되는데 '$1' 에서 '' 이부분은 왜 씹히는거죵?ㅠㅠ
-
미해결인터랙티브 웹 개발 제대로 시작하기
animation이벤트 질문이요!
window를 ballElem로 변경하면 click했을때 작동을 하지 않는데 이유를 모르겠습니다..!<script> const ballElem=document.querySelector('.ball'); window.addEventListener('click', function(){ ballElem.style.animation='ball-ani 1s 3 forwards'; }); ballElem.addEventListener('animationend',function(){ ballElem.classList.add('end'); }); ballElem.addEventListener('animationiteration',function(){ console.log('반복'); }); </script>
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
visual studio 2022 emmet
시험장 visual studio 2022에 emmet 설치 되어 있습니까?! -> Tab이 되지 않으면 기본 구문 외워서 다 쳐야 합니까?그리고, 시험장에 최신 버전 visual studio 2022 설치 되어 있습니까? 이때까지 visual studio 2019로 연습했었는데요.
-
미해결퍼블리싱 핵심이론 PDF 교재 및 예제파일(HTML+CSS+FLEX+JQUERY)
비주얼 스튜디오 코드 Bracket Pair Colorizar 설치
비주얼 스튜디오 코드 필수 앱 설치 및 사용법 영상을 보고 있는데'Bracket Pair Colorizar' 이라는 프로그램이 기능 제공을 더 이상 하지 않는다고 적혀있습니다. 해당 프로그램 외에 어떤걸 설치 해야 하나요???