173만명의 커뮤니티!! 함께 토론해봐요.
미해결
풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
모던 웹을 위한 모던 CSS 단위 이해 및 정리 14:10에서 100vw를 하면 전체가 차지 되야 하는데 흰색 테두리가 있는 걸로 보아 100%꽉 채우지 않은 것 같아서요. 제가 예전에 어디서 배운 것 같기는 한데 정확하게 개념이 기억이 안나서 설명 부탁드립니다...!
미해결
const COLORS = [ "#394fb8", "#554fb8", "#605ac7", "#2a91a8", "#2e9ab2", "#32a5bf", "#81b144", "#85b944", "#8fc549", "#e0af27", "#eeba2a", "#fec72e", "#bf342d", "#ca3931", "#d7423a", ]; export class Polygon { constructor(x, y, radius, sides) { this.x = x; this.y = y; this.radius = radius; this.sides = sides; this.rotate = 0; } animate(ctx, moveX) { ctx.save(); const angle = PI2 / this.sides; const angle2 = PI2 / 4; ctx.translate(this.x, this.y); this.rotate += moveX * 0.008; ctx.rotate(this.rotate); for (let i = 0; i < this.sides; i++) { const x = this.radius * Math.cos(angle * i); const y = this.radius * Math.sin(angle * i); i == 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); ctx.save(); ctx.fillStyle=COLORS[i] ctx.translate(x, y); ctx.rotate((((360 / this.sides) * i + 45) * Math.PI) / 180); ctx.beginPath(); for (let j = 0; j < 4; j++) { const x2 = 160 * Math.cos(angle2 * j); const y2 = 160 * Math.sin(angle2 * j); j == 0 ? ctx.moveTo(x2, y2) : ctx.lineTo(x2, y2); } ctx.fill(); ctx.closePath(); ctx.restore(); } ctx.restore(); } } 지금은 COLORS 배열을 이용해 fillstyle의 색을 넣었는데, 색상 대신 특정 이미지들을 넣고싶습니다. ctx.fillstyle = colors[i] 를 어떤 식으로 바꿔야할까요..?
미해결
Three.js로 1인칭 3D 웹사이트 만들기
안녕하세요 늘 좋은강의 감사합니다. playerContactMaterial 에서 restitution을 0으로 뒀는데도 캐릭터가 엄청 튕겨지네요 ㅜ player의 cannonMaterial도 playerCannonMaterial로 변경했는데 똑같이 엄청 통통 튕겨다닙니다... 그래서 궁금해서 그냥 defaultContactMaterial의 반발력을 0으로 두고 전부 defaultMaterial을 적용해봐도 똑같이 전부 통통 튕겨 다니네요... 영상에서도 보면 부딪힐 때 캐릭터가 뒤로 튕겨져 나가는거 보니 어쩔수 없는 현상인걸까요??...
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요 선생님! 너무나 좋은 강의 잘 듣고 있습니다. 17:28 에서 .EmotionItem 을 가운데 정렬할 때 text-align: center 를 사용하셨는데요. display: flex 와 text-align: center 중 어떤 것을 사용할지에 대한 기준이 있으실까요? 리액트 강의라 크게 중요한 부분은 아니지만 수업 중 flex 를 사용하신 경우가 더 많았던 것 같아 질문을 드려봅니다! 🥺
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요! DiaryList.jsx 파일에서 option이나 Button 태그의 옵션에 보면 value={"latest"}나 type={"POSITIVE"} 이런 식으로 { } 를 사용하셨던데 없이 해도 출력이 잘 되는데 꼭 써줘야 하는지 궁금합니다.
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
강의가 음성만 재생이 되고 영상이 재생되지 않네요 다른 강의들은 영상과 음성 모두 재생되는데 이 강의만 재생이 되지 않아요
미해결
자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
혹시 블로그에 포스팅 해도 되나요?? 안되면 노션에 할게요 !
해결됨
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
수정 삭제는 sqlite로 직접 만져야되나요
해결됨
타입스크립트 입문 - 기초부터 실전까지
안녕하세요. vue 사용중에 있어 부득이하게 jquery 를 사용하려고 하는데요. import $ from 'jquery'; import 'jqueryui'; import 'jquery-ui-touch-punch'; 모바일까지 지원을 해야해서 jquery-ui-touch-punch 까지 사용을 해야 하는 상황입니다. 위와 같이 import를 해주면 코드툴에선 에러가 안뜨는데 브라우저 화면에서는 콘솔에러가 나타나고 있습니다. 아래와 같은 오류인데 혹시 해결책이 있을까요? 여러 방법으로 시도해 보고 있으나 해결이 안되서 혹시나 경험이 있으실지 해서 문의드립니다 ㅠㅠ Uncaught ReferenceError: jQuery is not defined
미해결
마우스가 그림 위에 오버되면 원을 생성하는 인터랙티브 기능을 구현했습니다. 사진 안에서만 원들이 생성 되고 사진 영역을 벗어나면 원이 그려지지 않았으면 좋겠는데 어떻게 해야할까요? <div id="leaf"> </div> <body> <script> let leaf = document.getElementById("leaf"); let jean = document.getElementById("jean"); leaf.addEventListener("mouseover",onmouseover); //window.addEventListener("mouseover",onmouseover); function onmouseover(e){ let circle = document.createElement("div"); let radius = Math.floor(Math.random()* 150+50); let randomBrightColor = () => { let color_r = Math.floor(Math.random() * 127 + 128).toString(16); let color_g = Math.floor(Math.random() * 127 + 128).toString(16); let color_b = Math.floor(Math.random() * 127 + 128).toString(16); return `#${color_r+color_g+color_b}`; } circle.style.position = "absolute", circle.style.opacity = Math.random()*0.9 + 0.1; circle.style.width = radius+"px"; circle.style.height = radius+"px"; circle.style.borderRadius = "50%" circle.style.backgroundColor = randomBrightColor(); circle.style.left= e.pageX -radius * 0.5 + "px"; circle.style.top= e.pageY -radius * 0.5 + "px"; circle.style.transform= "scale(0,0)"; gsap.to(circle, {scale:1 , ease: "back.out(1.7)", duration: 0.3}) document.body.appendChild(circle); circle.style.zIndex = "1"; } </script> </body> css 는 다음과 같습니다 #leaf{ width: 600px; height: 600px; overflow: hidden; background-image: url(https://images.unsplash.com/photo-1714571883639-fe73d73ef8a9?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D); }
해결됨
실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
실무에 적용하려고 하니 msw 에서 많이 막히네요 ㅠ 그래서 올려주신 깃헙 프로젝트를 샅샅히 훑어보고 있는데 mockServiceWorker.js 이 파일과 package.json에 "msw": { "workerDirectory": "public" } 요런 부분이 있더라고요. 요것들의 역할이 뭔지 알수 있을까요? msw 사이트에 가서 Getting started 를 가봐도 안나와 있는것 같아서 궁금합니다!
해결됨
Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
깃허브 권한이 별도 없다고해주셨는데, 아래와같이 vue-todo 접근이 불가해서 확인부탁드리려합니다.
해결됨
웹 프론트엔드를 위한 자바스크립트 첫걸음
HTML이랑 CSS 아는 게 얼마 없는데 이 상태로 공부하면 하다가 막힐까요? 그리고 출판사에서 전자책 출간 일자 답변은 아직인지요..ㅠㅠ
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
항상 좋은 강의 감사합니다. 예전에 프론트 개발 할 때도 궁금했던 부분인데 Bearer 를 굳이 작성하는 이유나 혹은 작성하게 된 관습의 기원이 궁금합니다.
미해결
안녕하세요. 제가 프로그램을 만들고 있습니다. 네이버 로그인을 puppeteer로 자동화를 하려고 하고있습니다. 하지만 네이버에서 매크로 프로그램으로 로그인을 하는것을 막고 있습니다 ㅠㅠ 로그인을 자동화 시키려하면 캡챠로 넘어가서 다른 방법이 있는지 알아보는 와중 복사 붙여넣기 기능을 하면 된다고 구글링을 통해 봤습니다. 하지만 복사 붙여기능또한 네이버 로그인에서는 안되게 막아놓은것 같습니다.. 혹시 네이버 로그인 자동화를 구현하신 분 있는 멋진분을 찾습니당.
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
안녕하세요 선생님~ 위와 같이 세팅해서 user/profile 로 post 요청을 보내면 500 에러가 나야하는걸로 알고 있는데, 이처럼 잘 들어가 버리네요ㅜ `users` 로 get요청을 보내도 profile이 null이 들어간 상태로 조회됩니다. 개발환경 버전도 올려드립니다~
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강사님이 알려주신 대로 작성했는데 해당 부분에서 Cannot read properties of undefined (reading 'map') 이라는 오류가 발생합니다.ㅠㅠ 오타가 있는것 같지는 않은데..어디가 문제일까요..?
해결됨
진짜! 자바스크립트(Javascript) - 기초부터 고급까지
function testShadowing() { let x = 5; if (true) { let x = 10; console.log(x); } console.log(x); } testShadowing() 위와 같이 let으로 x 변수를 2번 할당했는데, 실제 메모리에는 어떻게 할당이 되나요? 블록 스코프라고 하더라도 함수 스코프 안에서 블록 스코프가 만들어 질 것으로 생각이 되는데(뇌피셜입니다.), 이미 함수 스코프에서 x라는 변수명을 사용하고 있어서 블록 스코프에서 x는 자바 스크립트 엔진에서 어떻게 받아들이고 실제 메모리에 어떤 식으로 메모리 할당을 하는지 궁금합니다.
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
배포 후 링크 공유하는데 오픈 그래프 태그가 나타나지 않습니다.ㅜㅜ
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
10.3) React.memo와 컴포넌트 렌더링 최적화 위 강의를 보다보니, 뭔가 이상해서 질문드립니다... 여기서 Header컴포넌트에 memo함수로 감싸서 최적화된 컴포넌트를 만드셨다고 했는데, 영상으로만 보면 item 컴포넌트 변경시에 리랜더링이 안되야 하는 Header 컴폰넌트에 highLight가 들어가는데요..(4:46 경..) 아무리 봐도 하이라이트가 들어가는데, 말씀으로는 하이라이트가 더이상 들어가지 않는다고 하는데, 제가 뭘 잘못 이해한걸까요?
