묻고 답해요

이미지가 안보입니다...ㅠ(도움이 필요합니다!! 꼭 봐주세요!)

미해결

애플 웹사이트 인터랙션 클론!

안녕하세요 선생님 강의 잘 듣고 있습니다! 다름이 아니라 밑에 수강생분 처럼 저도 이미지가 안보이고 Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLCanvasElement or HTMLImageElement or HTMLVideoElement or ImageBitmap or OffscreenCanvas or SVGImageElement or VideoFrame)'. 이런 에러가 계속 뜨는데.. 어떻게 해야할지 모르겠습니다..ㅠㅠㅠ 분명 계속 이미지 경로도 확인하고 문제가 없는거같은데...대체 뭐가 문제인지 도움이 필요합니다..!! 너무 해결이 안되니까 꼭...해결하고싶습니다.. 잘되던 텍스트 애니메이션도 작동이 안됩니다. 보니까 playanimaion함수에서 sequence도 console.log에 찍으면 undefined로 찍히는데 도저히 뭐가 잘못 됐는지 모르겠습니다. 선생님이 주신 완성 코드를 대입해도 안뜨네요ㅠㅠㅠ (() => { let yOffset = 0; // window.pageYOffset대신 쓸 변수 let prevScrollHeight = 0; //현재 스크롤 위치(yOffset)보다 이전에 위치한 스크롤 섹션들의 높이값의 합 let currentScene = 0; //현재 활성화된(눈 앞에 보고있는) 씬(scroll-section) // sceneInfo는 애니메이션을 처리하는 정보를 담아놓는 변수 let enterNewScene = false;//새로운 scene이 시작되는 순간 true로 바뀜 const sceneInfo = [ { //0 type: 'sticky', heightNum:5,//브라우저 높이의 5배로 scrollHeight 세팅 scrollHeight: 0, // 애니메이션을 조작할 오브젝트를 objs에 담음 objs:{ container: document.querySelector('#scroll-section-0'), messageA: document.querySelector('#scroll-section-0 .main-message.a'), messageB: document.querySelector('#scroll-section-0 .main-message.b'), messageC: document.querySelector('#scroll-section-0 .main-message.c'), messageD: document.querySelector('#scroll-section-0 .main-message.d'), canvas: document.querySelector('#video-canvas-0'), //context객체의 메서드인 getContext를 인자 2d를 넣어 호출해 그림을 그려주는 기초를 연다. context: document.querySelector('#video-canvas-0').getContext('2d'), //비디오 이미지를 배열에 넣을 예정이다. videoImages: [] }, //오브젝트를 어느시점에 보이고 안보이게 할지를 담을 곳 css제어 //시작값 :0 끝값 :1 values: { videoImageCount: 300, //스크롤에 따른 이미지 순서의 [초기값,최종값] messageA와 다르게 섹션의 부분에서 실행될 이미지가 아닌 한스크롤에서 쭉 이어지므로 start,end구간이 필요없다 imageSequence:[0 , 299], messageA_opacity_in: [0, 1, { start: 0.1, end: 0.2 }], messageB_opacity_in: [0, 1, { start: 0.3, end: 0.4 }], //30%~ 40% messageC_opacity_in: [0, 1, { start: 0.5, end: 0.6 }], messageD_opacity_in: [0, 1, { start: 0.7, end: 0.8 }], // 글자를 20%에서 0으로 가는건데 %는 css에 나중에 작업할 예정 세번째 인수에는 타이밍이 들어간다(=어느 타이밍에 효과를 줄것인가) messageA_translateY_in: [20, 0, { start: 0.1, end: 0.2 }], messageB_translateY_in: [20, 0, { start: 0.3, end: 0.4 }], messageC_translateY_in: [20, 0, { start: 0.5, end: 0.6 }], messageD_translateY_in: [20, 0, { start: 0.7, end: 0.8 }], messageA_opacity_out: [1, 0, { start: 0.25, end: 0.3 }], messageB_opacity_out: [1, 0, { start: 0.45, end: 0.5 }], messageC_opacity_out: [1, 0, { start: 0.65, end: 0.7 }], messageD_opacity_out: [1, 0, { start: 0.85, end: 0.9 }], messageA_translateY_out: [0, -20, { start: 0.25, end: 0.3 }], messageB_translateY_out: [0, -20, { start: 0.45, end: 0.5 }], messageC_translateY_out: [0, -20, { start: 0.65, end: 0.7 }], messageD_translateY_out: [0, -20, { start: 0.85, end: 0.9 }] // messageA_opacity:[200,900] } }, { //1 type: 'normal', //heightNum은 scrollHeight를 결정할 때 innerheight의 몇배로 할지 정해주는 수 였는데 normal은 원래 본인 default높이로 설정하므로 필요가 없다 // heightNum:5, scrollHeight: 0, objs:{ container: document.querySelector('#scroll-section-1') } }, { //2 type: 'sticky', heightNum:5, scrollHeight: 0, objs:{ container: document.querySelector('#scroll-section-2'), messageA: document.querySelector('#scroll-section-2 .a'), messageB: document.querySelector('#scroll-section-2 .b'), messageC: document.querySelector('#scroll-section-2 .c'), pinB: document.querySelector('#scroll-section-2 .b .pin'), pinC: document.querySelector('#scroll-section-2 .c .pin') }, values: { messageA_translateY_in: [20, 0, { start: 0.15, end: 0.2 }], messageB_translateY_in: [30, 0, { start: 0.5, end: 0.55 }], messageC_translateY_in: [30, 0, { start: 0.72, end: 0.77 }], messageA_opacity_in: [0, 1, { start: 0.15, end: 0.2 }], messageB_opacity_in: [0, 1, { start: 0.5, end: 0.55 }], messageC_opacity_in: [0, 1, { start: 0.72, end: 0.77 }], messageA_translateY_out: [0, -20, { start: 0.3, end: 0.35 }], messageB_translateY_out: [0, -20, { start: 0.58, end: 0.63 }], messageC_translateY_out: [0, -20, { start: 0.85, end: 0.9 }], messageA_opacity_out: [1, 0, { start: 0.3, end: 0.35 }], messageB_opacity_out: [1, 0, { start: 0.58, end: 0.63 }], messageC_opacity_out: [1, 0, { start: 0.85, end: 0.9 }], pinB_scaleY: [0.5, 1, { start: 0.5, end: 0.55 }], pinC_scaleY: [0.5, 1, { start: 0.72, end: 0.77 }], pinB_opacity_in: [0, 1, { start: 0.5, end: 0.55 }], pinC_opacity_in: [0, 1, { start: 0.72, end: 0.77 }], pinB_opacity_out: [1, 0, { start: 0.58, end: 0.63 }], pinC_opacity_out: [1, 0, { start: 0.85, end: 0.9 }] } }, { //3 type: 'sticky', heightNum:5, scrollHeight: 0, objs:{ container: document.querySelector('#scroll-section-3') } } ]; function setCanvasImages() { let imgElem; for (let i = 0; i < sceneInfo[0].values.videoImageCount; i++){ //이미지 객체가 만들어짐 new Image(); 대신에 document.createElement('img')랑 같은말이다. imgElem = new Image(); imgElem.src = `./video/001/IMG_${6726 + i}.JPG`; sceneInfo[0].objs.videoImages.push(imgElem); } } setCanvasImages(); function setLayout() { //각 스크롤 섹션의 높이 세팅 for (let i = 0; i < sceneInfo.length; i++){ if (sceneInfo[i].type === 'sticky') { sceneInfo[i].scrollHeight = sceneInfo[i].heightNum * window.innerHeight; } else if (sceneInfo[i].type === 'normal') { //container본연의 높이로 가져와서 그 크기만큼으로만 normal부분을 설정한다. sceneInfo[i].scrollHeight = sceneInfo[i].objs.container.offsetHeight; } sceneInfo[i].objs.container.style.height = `${sceneInfo[i].scrollHeight}px`; } yOffset = window.pageYOffset; let totalScrollHeight = 0; for (let i = 0; i < sceneInfo.length; i++){ totalScrollHeight += sceneInfo[i].scrollHeight; if (totalScrollHeight >= yOffset) { currentScene = i; break; } } // 변수랑 문자열이 섞여있으면 ``을 써야한다. document.body.setAttribute('id', `show-scene-${currentScene}`); // console.log(sceneInfo); //초기화 할 때 실행되는 setLayout은 currentScene이 정해지지 않은 상태에서 currentScene을 구하는 것이고, // 스크롤 할 때마다 실행되는 scrollLoop는 현재 활성화된 currentScene 까지의 스크롤양(prevScrollHeight)을 기준으로 일정량의 스크롤이 지나갔을 때 currentScene을 +1 또는 -1 하는 것이랍니다. } function calcValues(values, currentYOffset) { //여기서 인자 currentYOffset은 현재 씬에서 얼마나 스크롤 됐는지 //현재 섹션에서 얼마나 스크롤 되었는지를 비율로 구한다 스클로의 비율을 0~1사이로 정한다. 비율을 구해서 그 값을 css값에 대입해준다. //yoffset변수는 전체 레이아웃에서 스크롤이 어디 위치해있는지 알려주는 변수이다. 현재 씬에서 스크롤이 얼마나됐는지는 알 수 없다. let rv; const scrollHeight = sceneInfo[currentScene].scrollHeight; //현재 씬(스크롤섹션)에서 스크롤된 범위를 비율로 구하기 ==>let scrollRation = 현재 씬에서 스크롤된 값 / 현재 씬 전체 const scrollRatio = currentYOffset / sceneInfo[currentScene].scrollHeight; if (values.length === 3) { // start~end사이에 애니메이션 실행 const partScrollStart = values[2].start * scrollHeight; const partScrollEnd = values[2].end * scrollHeight; const partScrollHeight = partScrollEnd - partScrollStart; if (currentYOffset >= partScrollStart && currentYOffset <= partScrollEnd) { rv = (currentYOffset - partScrollStart) / partScrollHeight * (values[1] - values[0]) + values[0]; } else if (currentYOffset < partScrollStart) { //스크롤섹션에서 스크롤이 start에 도달하지 못했을 때 rv = values[0]; //opacity가 0이라는 뜻 } else if (currentYOffset > partScrollEnd) { //스크롤섹션에서 스크롤이 end를 완전히 벗어났을 때 rv = values[1]; //opacity가 1이라는 뜻 } else { rv = scrollRatio * (values[1] - values[0]) + values[0]; } // rv = parseInt(scrollRatio * (values[1] - values[0]) + values[0]); return rv; } } //애니메이션 함수 function playAnimation() { // 모든 섹션에 애니메이션을 주는 것은 비효율적이므로 switch문을 이용해서 현재 보고있는 섹션의 요소에만 애니메이션을 준다 const objs = sceneInfo[currentScene].objs; const values = sceneInfo[currentScene].values; const currentYOffset = yOffset - prevScrollHeight; const scrollHeight = sceneInfo[currentScene].scrollHeight; const scrollRatio = currentYOffset / sceneInfo[currentScene].scrollHeight; switch (currentScene) { case 0: let sequence = calcValues(values.imageSequence, currentYOffset); objs.context.drawImage(objs.videoImages[sequence], 0, 0); console.log(sequence); if (scrollRatio <= 0.22) { // in objs.messageA.style.opacity = calcValues(values.messageA_opacity_in, currentYOffset); objs.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_in, currentYOffset)}%, 0)`; } else { // out objs.messageA.style.opacity = calcValues(values.messageA_opacity_out, currentYOffset); objs.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_out, currentYOffset)}%, 0)`; } if (scrollRatio <= 0.42) { // in objs.messageB.style.opacity = calcValues(values.messageB_opacity_in, currentYOffset); objs.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_in, currentYOffset)}%, 0)`; } else { // out objs.messageB.style.opacity = calcValues(values.messageB_opacity_out, currentYOffset); objs.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_out, currentYOffset)}%, 0)`; } if (scrollRatio <= 0.62) { // in objs.messageC.style.opacity = calcValues(values.messageC_opacity_in, currentYOffset); objs.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_in, currentYOffset)}%, 0)`; } else { // out objs.messageC.style.opacity = calcValues(values.messageC_opacity_out, currentYOffset); objs.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_out, currentYOffset)}%, 0)`; } if (scrollRatio <= 0.82) { // in objs.messageD.style.opacity = calcValues(values.messageD_opacity_in, currentYOffset); objs.messageD.style.transform = `translate3d(0, ${calcValues(values.messageD_translateY_in, currentYOffset)}%, 0)`; } else { // out objs.messageD.style.opacity = calcValues(values.messageD_opacity_out, currentYOffset); objs.messageD.style.transform = `translate3d(0, ${calcValues(values.messageD_translateY_out, currentYOffset)}%, 0)`; } break; case 2: // console.log('2 play'); if (scrollRatio <= 0.25) { // in objs.messageA.style.opacity = calcValues(values.messageA_opacity_in, currentYOffset); objs.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_in, currentYOffset)}%, 0)`; } else { // out objs.messageA.style.opacity = calcValues(values.messageA_opacity_out, currentYOffset); objs.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_out, currentYOffset)}%, 0)`; } if (scrollRatio <= 0.57) { // in objs.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_in, currentYOffset)}%, 0)`; objs.messageB.style.opacity = calcValues(values.messageB_opacity_in, currentYOffset); objs.pinB.style.transform = `scaleY(${calcValues(values.pinB_scaleY, currentYOffset)})`; } else { // out objs.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_out, currentYOffset)}%, 0)`; objs.messageB.style.opacity = calcValues(values.messageB_opacity_out, currentYOffset); objs.pinB.style.transform = `scaleY(${calcValues(values.pinB_scaleY, currentYOffset)})`; } if (scrollRatio <= 0.83) { // in objs.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_in, currentYOffset)}%, 0)`; objs.messageC.style.opacity = calcValues(values.messageC_opacity_in, currentYOffset); objs.pinC.style.transform = `scaleY(${calcValues(values.pinC_scaleY, currentYOffset)})`; } else { // out objs.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_out, currentYOffset)}%, 0)`; objs.messageC.style.opacity = calcValues(values.messageC_opacity_out, currentYOffset); objs.pinC.style.transform = `scaleY(${calcValues(values.pinC_scaleY, currentYOffset)})`; } break; case 3: // console.log('3 play'); break; } } // keyframe이란: 애니메이션이 진행중에 변화가 있는 지점을 keyframe이라고 한다. function scrollLoop() { enterNewScene = false; prevScrollHeight = 0;//누적을 막기 위해서 // 현재 보고잇는 section이 몇번째 section인지 판별하려고함 for (let i = 0; i < currentScene; i++){ prevScrollHeight = prevScrollHeight + sceneInfo[i].scrollHeight; } // console.log(prevScrollHeight); if (yOffset > prevScrollHeight + sceneInfo[currentScene].scrollHeight) { enterNewScene = true; currentScene++; document.body.setAttribute('id', `show-scene-${currentScene}`); // setLayout함수에서 이미 id값이 정해져있지만 스크롤에 변함에 따라 체크하는 방식으로 쓴다 } if (yOffset < prevScrollHeight) { if (currentScene === 0) return;//브라우저 바운스 효과로 인해 마이너스가 되는 것을 방지(모바일) enterNewScene = true; currentScene--; document.body.setAttribute('id', `show-scene-${currentScene}`); } // console.log(currentScene); // enterNewScene이 참이라는것은 씬이 바뀌는순간인 것이고 참일때 return, 즉 playAnimation함수를 한타임 실행하지 않는다는것으로 음수값이 무시되고 다시 playAnimation함수가 실행된다. if (enterNewScene) return; playAnimation(); } window.addEventListener('scroll', () => { yOffset = window.pageYOffset; scrollLoop(); }); window.addEventListener('load', setLayout); // window의 모든 문서(html, 이미지, 동영상..)가 완료되고 나서 // 레이아웃 잡는 setLayout함수를 실행한다 // window.addEventListener('DOMContentLoaded', setLayout); //반대로 window의 html구조들만 완료되면 반대로 이미지는 로드되지않아도 setlayout함수를 실행하는것 //인데 load보다는 빨리 setlayout을 실행한다. window.addEventListener('resize', setLayout); // 윈도우가 리사이즈 되었을 때 setLayout을 호출한다 })(); <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>AirMug Pro</title> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;900&display=swap" rel="stylesheet"> <link rel="stylesheet" href="css/default.css"> <link rel="stylesheet" href="css/main.css"> <script defer src="js/main.js"></script> </head> <body> <div class="container"> <nav class="global-nav"> <div class="global-nav-links"> <a href="#" class="global-nav-item">Rooms</a> <a href="#" class="global-nav-item">Ideas</a> <a href="#" class="global-nav-item">Stores</a> <a href="#" class="global-nav-item">Contact</a> </div> </nav> <nav class="local-nav"> <div class="local-nav-links"> <a href="#" class="product-name">AirMug Pro</a> <a href="#">개요</a> <a href="#">제품사양</a> <a href="#">구입하기</a> </div> </nav> <section class="scroll-section" id="scroll-section-0"> <h1>AirMug Pro</h1> <!-- p태그의 값들을 sticky, 즉 스티커처럼 고정해놓고 스트롤의 값에 따라 보여지도록 p태그를 감싸고 있는 div에 class를 준다. --> <div class="sticky-elem sticky-elem-canvas"> <canvas id ="video-canvas-0" width="1920px" height="1080px"></canvas> </div> <div class="sticky-elem main-message a"> <p>온전히 빠져들게 하는<br>최고급 세라믹</p></div> <div class="sticky-elem main-message b"> <p>주변 맛을 느끼게 해주는<br>주변 맛 허용 모드</p> </div> <div class="sticky-elem main-message c"> <p>온종일 편안한<br>맞춤형 손잡이</p> </div> <div class="sticky-elem main-message d"> <p>새롭게 입가를<br>찾아온 매혹</p> </div> </section> <section class="scroll-section" id="scroll-section-1"> <p class="description"> <strong>보통 스크롤 영역</strong> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas minus praesentium incidunt tempora repellendus? Laudantium sed excepturi quo nemo quisquam totam, cumque nam sit incidunt, corrupti libero temporibus obcaecati enim facilis dolore itaque minima dolorem sequi explicabo. Modi alias in ullam labore, minima voluptates ipsa ex laborum deleniti tempora incidunt architecto iure aut, molestias ab! Fugiat aliquam veritatis ad voluptatibus, quaerat officia doloribus aliquid nulla repellat quidem rem magni perferendis labore similique reprehenderit aut. Cum quis omnis ex iusto natus iste nisi magnam, nesciunt fugit aspernatur ullam? Temporibus, dolores ipsa. Odit odio aliquam sunt error corporis ab facere, illum sequi! Explicabo nulla, ipsum necessitatibus laboriosam eligendi aspernatur quam nostrum. Debitis est ad, vel in corrupti voluptas laboriosam quo, reiciendis quos quas culpa, atque voluptate tempora tempore quam accusamus ipsa asperiores voluptatibus adipisci non vero aspernatur eum nesciunt quis. A cum, molestiae eaque repellat similique esse eligendi reprehenderit amet omnis minus quae voluptatum delectus dolores repudiandae? Distinctio aut aspernatur, iure nemo, eum soluta error necessitatibus minus voluptatum laborum rem dignissimos quae. Error ut recusandae ullam magnam quas molestiae repellat culpa. Ab nihil sint voluptatum in? Enim suscipit debitis earum culpa sint maxime hic, repudiandae nulla ad error voluptatem fugiat blanditiis odit! </p> </section> <section class="scroll-section" id="scroll-section-2"> <div class="sticky-elem main-message a"> <p> <small>편안한 촉감</small> 입과 하나 되다 </p> </div> <div class="sticky-elem desc-message b"> <p> 편안한 목넘김을 완성하는 디테일한 여러 구성 요소들, 우리는 이를 하나하나 새롭게 살피고 재구성하는 과정을 거쳐 새로운 수준의 머그, AirMug Pro를 만들었습니다. 입에 뭔가 댔다는 감각은 어느새 사라지고 오롯이 당신과 음료만 남게 되죠. </p> <div class="pin"></div> </div> <div class="sticky-elem desc-message c"> <p> 디자인 앤 퀄리티 오브 스웨덴,<br>메이드 인 차이나 </p> <div class="pin"></div> </div> </section> <section class="scroll-section" id="scroll-section-3"> <p class="mid-message"> <strong>Retina 머그</strong><br> 아이디어를 광활하게 펼칠<br> 아름답고 부드러운 음료 공간. </p> <p class="canvas-caption"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet at fuga quae perspiciatis veniam impedit et, ratione est optio porro. Incidunt aperiam nemo voluptas odit quisquam harum in mollitia. Incidunt minima iusto in corporis, dolores velit. Autem, sit dolorum inventore a rerum distinctio vero illo magni possimus temporibus dolores neque adipisci, repudiandae repellat. Ducimus accusamus similique quas earum laborum. Autem tempora repellendus asperiores illum ex! Velit ea corporis odit? Ea, incidunt delectus. Sapiente rerum neque error deleniti quis, et, quibusdam, est autem voluptate rem voluptas. Ratione soluta similique harum nihil vel. Quas inventore perferendis iusto explicabo animi eos ratione obcaecati. </p> </section> <footer class="footer"> 2020, 1분코딩 </footer> </div> </body> </html>

• HTML/CSS
• 웹 디자인
• 인터랙티브-웹
• svg
• javascript
• 클론코딩

vue.config.js 질문드립니다.

미해결

Vue.js 끝장내기 - 실무에 필요한 모든 것

vue 5.0.1 node 12.14.0 nvm 0.39.2입니다. 서버와 같이 10.16.3.으로 하려고 했는데 vue cli가 node 버 전을 12이상 요구해서 그냥 12.14.0으로 하였고 vue create 하면 vue.config.js 파일에 이와 같이 있어 eslint 설정을 할 수 가 없네요 방법이 있을까요? const { defineConfig } = require ( " @vue/cli-service " ); module . exports = defineConfig ({ transpileDependencies: true , });

• javascript
• vuejs
• vuex

npm vue cli 질문드립니다.

미해결

Vue.js 끝장내기 - 실무에 필요한 모든 것

먼저 이 강의 서버 구동을 위해 node버전을 10.16.x로 낮추고 하면 vue cli가 node를 12~14이상으로 업그레이드 하라고 해서 nvm 깔고 최신 16.13.x로 바꿔줬습니다. 원래는 최신버전으로 vue create하면 vue2.x버전으로 라우터 vuex 린트 프리티어까지 설정해주고 그냥 설치해도 몇 분 안짝으로 create가 되었는데 갑자기 create만 몇 시간 째 돌리는 중인데 이거 왜이런 건가요??

• javascript
• vuejs
• vuex

그림 불러오기

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

그랩마켓이라는 이미지 불러오기가 안되네요... 어떻게 해야될까요???

• express
• tensorflow
• HTML/CSS
• nodejs
• javascript
• 머신러닝 배워볼래요?
• react-native
• react

Props 강의 관련해서 질문!!

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

안녕하세요. OddEvenResult 관련 부분 설명 시, 저는 decideodd 라고 했을 때는 인식이 되지 않다가 Decideodd 라고 하게 되면 인식이 되는 모습을 볼 수 있었습니다. 즉. 함수명은 소문자로 시작하면 에러가 발생을 합니다. 관련해서는 무조건 대문자로 시작을 해야하는건가요??

• javascript
• react
• nodejs

React alert창 띄운 후 확인 버튼 누르면 값 갱신 안되게 하는 방법ㅠㅠ

미해결

안녕하세요, react로 웹 페이지를 제작 중입니다. 다름이 아니라 3개 이상 선택하면 alert창으로('3개까지만 선택 가능합니다')라고 띄우는 것 까지는 썼는데 이제 확인을 누르면 4개도 다시 클릭이 되더라구요.. 이걸 막는 방법은 뭐가 있을까요..? 관련된 함수랑 코드를 써놓겠습니다..! const [ number , setNumber ] = useState ( 0 ); const increaseNumber = () => { setNumber ( number + 1 ) }; const decreaseNumber = () => { // number의 값을 감소시키는 함수 setNumber ( number - 1 ); }; const over3 =() => { if ( number >= 3 ){ alert ( '3개까지만 선택 가능합니다!' ); } } //onClick에 카운트 세는 함수 설정되어있습니다. < div className = 'movieposter' > { datas . map (( movie , i ) => ( movie . value === true ? < img className = 'img-responsive_clicked' src = "https://movie-phinf.pstatic.net/20220214_120/1644825641315cvVKI_JPEG/movie_image.jpg?type=f125" alt = { i } onClick = { () => { decreaseNumber (); handleClickImage ( i );} } /> : < img className = 'img-responsive' src = 'img/movie_image1.jpg' alt = { i } onClick = { () => { increaseNumber (); handleClickImage ( i ); over3 ()} } /> )) } </ div >

• react
• reactjs
• 웹페이지
• 프론트엔드

첫번째 문자에 빨간줄이 표시가 됩니다

미해결

Vue.js 끝장내기 - 실무에 필요한 모든 것

안녕하세요 vue의 모든 페이지에 첫번째 문자에 빨간줄이 표시되는데 해결 방법이 없나요?

• vuejs
• javascript
• vuex

캡틴판교님 실무에있어 원초적인 질문하나 드려봅니다

미해결

Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념

안녕하세요 캡틴판교님 거의 전과목 수강중인 학도입니다 다름이아니라 원초적인 질문하나 드려도 될까해서요 저는 원래 퍼블리셔이자 기획 업무를 하던 사람인데 배우면서 드는생각이 확실히 프론트와 백엔드를 전반적으로 다루던 자바 & 스프링 백엔드 개발자의 역할까지 프론트엔드가 어느정도 역할 분담하게되는것같은데요 그럼 퍼블&백엔드 구조가아닌 프엔&벡엔드구조의 실무에서는 백엔드 역할이 db관리와 api생성, 쿼리 짜는정도만 하게되는건가요? 스프링으로 인클루드하고 ajax로 데이터도뿌리고 했던 백엔드 역할이 많이 줄어든것같아서요 가령 회원가입이나 로그인 crud도 프론트단에서 다 해야하는건지 그 범위가 조금 궁금합니다 만약 그렇다면 디자이너와 퍼블이 없는 상대적으로 소규모 회사에서는 웹디자인과 vue 마크업 그리고 프론트 개발까지 프론트엔드가 다 해야하는것같은데 맞을까요..?

• 프엔
• 벡엔드
• javascript
• vuejs

왜 비디오가 이미지보다 늦게 요청되는 걸까요?

해결됨

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2

네트워크 탭으로 분석했을 때 비디오 리소스가 팬딩상태였다가 이미지 로드 완료 후 요청되는데 왜 항상 비디오가 이미지보다 늦게 요청되는 걸까요? 리소스 타입에 따른 브라우저 네트워크 상의 우선순위같은 것이 있는지 궁금합니다!

• react
• devtools

글씨 색

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

선생님 혹시 진짜 별거 아니긴한데 module.exports 여기에 색 들어오게 하는건 어떻게 하셨나요 ㅠㅠ 저는 그냥 흰색으로 나와서 뭔가 밋밋해서 바꾸고싶은데 방법을 모르겠네요

• javascript
• react
• nodejs

zerocho 님 eslint 설정관련해서 질문이 있습니다.

미해결

[리뉴얼] React로 NodeBird SNS 만들기

안녕하세요 zerocho 님 eslint 설정관련해서 질문이 있습니다. eslint에서 env쪽에 node: true를 주시면서 node에서 사용하니까 주셨다고 하셨는데 next.js는 Browser환경에서 실행되지 않나요? server 코드가 따로 있는게 아닌 것 같아서요 혹시 이유를 알 수 있을까요?

• express
• redux
• nodejs
• react
• Next.js

card영역이 footer 영역을 침범하여 문의드려요

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

강의 뒷부분에서 나온다고 댓글 확인했는데 아직 안나와서요.. height:100%는 어디다 적용되었는지 모르겠네요

• HTML/CSS
• nodejs
• 머신러닝 배워볼래요?
• tensorflow
• javascript
• react
• express
• react-native

오늘부터 인터렉티브 공부 시작합니다

미해결

인터랙티브 웹 개발 제대로 시작하기

평소에도 인터랙티브 강의에 관심ㅇ 있었는데 마침 세일하길래 몽땅 사버렸습니다 오늘부터 천천히 공부를 시작해보겠습니다~~~

• javascript
• HTML/CSS
• 인터랙티브-웹

django 관련 질문

해결됨

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트

안녕하세요! 이제 강의를 들을려고 합니다. 먼저 저의 상황은 이와 같습니다. Django를 통해 전체적인 웹개발에 대한 흐름을 공부해볼려고 시작합니다. 그 후, backend web 개발자나 Devops나 Data 분야로 가는 것을 결정해볼라고 합니다. Django에 대해 그냥 유튜브 검색을 해보니 [Django를 추천하지 않는 이유](https://www.youtube.com/watch?v=ObelJbEt8-Y) 를 보게 되었습니다. 이 영상에서 봤을 때, 웹 개발을 공부하고 싶으면 Django를 하지 말고 Spring을 해야 한다는 의견이었습니다. Django는 너무 dB에 집중되어 있다고 했습니다. 3년 전 영상이라 지금은 어떨지 모르겠습니다. java spring 시장이 한국에서 매우 거대하여 python Django가 상대적으로 적어도, 절대적으로는 적은 수는 아니라고 생각합니다. (그리고 python은 너무너무 가용성이 좋은 언어라 개인적으로 좋아하는 언어입니다 : ) ) 이에 대해 어떻게 생각하시는 지 궁금합니다.

• django
• react
• python
• django
• docker

기타 파일 설치 관련하여

해결됨

풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

안녕하세요! 환경세팅부분에서 계속막히는데요 ,,저는 yarn 설치 시 yarn lock 이 생성되지 않아 touch lock으로 생성하였습니다. 그 후 client 폴더에서 sass와 axios webpack을 설치하려 하니 다음과 같이 뜹니다. 어느 파일에 무얼 추가하면 될까요? 하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

• rest-api
• react
• graphql

안녕하세요 코드 리뷰 부탁드립니다!

미해결

자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)

function solution ( k , arr ) { let p = 0 , q = 0 , sum = 0 , answer = 0 ; for ( q ; q < arr . length ; q ++ ) { sum += arr [ q ]; answer = Math . max ( answer , sum ); if ( q - p === k - 1 ) { p ++ ; q = p - 1 ; sum = 0 ; } } return answer ; } let a = [ 12 , 15 , 11 , 20 , 25 , 10 , 20 , 19 , 13 , 15 ]; console . log ( solution ( 3 , a ));

• 코테 준비 같이 해요!
• javascript

다름이 아니라 DB 설계 관련 질문이 있습니다.

미해결

[리뉴얼] React로 NodeBird SNS 만들기

안녕하세요 강의 잘보고 있습니다! DB 관련해서 제가 몇가지 궁금한게 있는데 1. 예를 들어 하나의 테이블에서 다 대 다일때 즉 user 와 user에 다대다 일때 중간테이블 follow를 만들어주지 않고 한 User 테이블에 컬럼을 늘리는건 별로 안좋은 방식인가요? 예를 들어서 follow 테이블을 만들지 않고 User 테이블안에 팔로우, 팔로잉 수 컬럼을 넣는 방식 2. 다 대 다 관계일시 중간테이블 관련 다 대 다 관계일시 데이터베이스 이론적으로는 중간테이블을 만드는걸로 저도 배우긴 했는데 근데 이게 프로그래밍 관점에서 테이블을 너무 많이 늘리고 join이 많아질시 성능이 안좋다고 배웠던 기억이 있어서요 그래서 이게 실무에서도 다대다일시 중간테이블로 쪼개고 join을 자주 발생시키는지 궁금해요 로그인 같은경우에도 팔로우,잉,쓴글갯수를 유지하기 위해 로그인을 할때마다 post 테이블 follow 테이블 과의 3개의 테이블을 조인시켜서 select 하는 경우인데 과연 이런식의 3중조인을 로그인할때마다 해줘야 하는건가에 대한 생각 꼭 조인을 이렇게 많이해야 저 데이터를 가지고 올 수있나에 대한 DB설계에 대한 생각이 공존합니다. 아니면 제가 너무 오버하는 것일지 문제가 되지 않는 것인지... 그래서 실제로도 실무에서도 이런식으로 중간테이블과 db설계관련 또한 그걸로 인한 많은 join 관련해서 궁금하네요 ++ 제가 이런 생각이 든 이유가 게시판을 만들때 게시물 상세 페이지에 파일갯수랑, 댓글 갯수를 게시물 리스트에 명시해주는 로직을 짜다가 join 몇번해서 select 해서 가져와보자 했는데.. 다른분께서 이유는 말안하셨지만 join 그렇게 하지말라고 하셨거든요 그래서 그래서 게시물 DB에 갯수에 대한 컬럼을 늘려서 게시물 상세페이지 작성시 댓글, 파일 insert 할때 게시물 db에 갯수counting 해서 insert 하고 조인 없이 list 뿌려지는 형태로 바꿨거든요 그게 생각이나서요(insert 시 다른 db에는 count+1 insert 한 동작에 각 테이블의 2번의 insert 작업) 3. db 생성시 post.js user.js -> 실 테이블 posts, users 뒤에 s가 붙는데 이건 왜 붙는건 가요? 제가 실무 경험이 없어서 꼭 알고 싶은 포인트입니다.. ** 질문이 많은데 읽어주셔서 감사합니다.

• nodejs
• react
• express
• redux
• Next.js

passwordChangeForm을 FBV로 하면 안되나요?

미해결

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트

안녕하세요 선생님 휴일인데 죄송합니다. 저는 강의를 듣기전에 미리 한번 먼저 해보고 하는 방식으로 공부중입니다. 다만 로그인이나 프로필 수정쪽은 FBV를 사용해서 직접 구현을 하셔서 이번 비밀번호 변경도 FBV로 구현을 하겠구나 생각하고 AUTH앱의 PasswordChangeForm과 FBV로 구현해보고 강의를 수강하였습니다. 선생님께서는 CBV로 구현을 하셔서 질문드립니다. CBV와 FBV를 다양하게 쓰는 예를 보여주시려고 사용하신건가요? 아니면 CBV는 AUTH앱의 passwordchangeVIew를 가져오면 기능들이 갖춰져 있기 때문에 편리하고 더 효율적이기 때문에 사용하신건가요? 아니면 그냥 아래 처럼 맞는지는 모르겠지만 함수로 구현해도 상관은 없는건가요? 처음 질문이라 좀 요점이 없는것 같은데 죄송합니다. @login_required def password_change ( request ): if request.method == 'POST' : form = ChangeForm(request.POST) if form.is_valid(): form.save() messages.success(request, "비밀번호 변경 성공" ) else : form = ChangeForm() return render(request, "accounts/password_change_form.html" ,{ 'form' :form,})

• react
• docker
• python
• django

수강생 카카오톡 그룹 채팅방은 어떻게 들어가나요?

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

안녕하세요. 다른이 아니라 수강생 카카오톡 그룹 채팅방 입장 비밀번호는 어디서 알 수가 있는지 궁금합니다.. 혹시 강의 구입후 처음 듣기 시작했을 때 나왔던 모달창에 비밀번호가 작혀 있었을까요?ㅠㅠ 차음 수강 시작 했을 때 모달창이 한개 나왔던거 같은데.... 제대로 확인을 못 해서 질문드리게 되었습니다

• react
• nodejs
• javascript

1번문제에대한 질문

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

제가 하는 방식은 잘못된 건가요? 2번의 답을 구하려해도 안나오더라구요.. let 농구공={ 이름:'~~~' 가격:'~~~~' 설명:'~~~'} 이런식으로 세개의 객체를 정한 뒤 let 상품들=["농구공","배드민턴채","탁구채"]로 배열을 묶는건 잘못된 방식인가요?! 아니라면 2번정답을 알 방법좀 알려주세요!!

• tensorflow
• HTML/CSS
• 머신러닝 배워볼래요?
• react-native
• react
• javascript
• nodejs
• express