inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

173만명의 커뮤니티!! 함께 토론해봐요.

vue 에서 jquery 사용 문제

해결됨

타입스크립트 입문 - 기초부터 실전까지

안녕하세요. vue 사용중에 있어 부득이하게 jquery 를 사용하려고 하는데요. import $ from 'jquery'; import 'jqueryui'; import 'jquery-ui-touch-punch'; 모바일까지 지원을 해야해서 jquery-ui-touch-punch 까지 사용을 해야 하는 상황입니다. 위와 같이 import를 해주면 코드툴에선 에러가 안뜨는데 브라우저 화면에서는 콘솔에러가 나타나고 있습니다. 아래와 같은 오류인데 혹시 해결책이 있을까요? 여러 방법으로 시도해 보고 있으나 해결이 안되서 혹시나 경험이 있으실지 해서 문의드립니다 ㅠㅠ Uncaught ReferenceError: jQuery is not defined

  • javascript
  • typescript
  • es6
devYo 댓글 2 좋아요 1 조회수 738

마우스오버 이벤트가 특정 영역 안에서만 이루어졌으면 좋겠습니다.

미해결

마우스가 그림 위에 오버되면 원을 생성하는 인터랙티브 기능을 구현했습니다. 사진 안에서만 원들이 생성 되고 사진 영역을 벗어나면 원이 그려지지 않았으면 좋겠는데 어떻게 해야할까요? <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); }

  • javascript
ㄴㄹㅇㄹㄴㄹㅇ 댓글 1 좋아요 0 조회수 329

mockServiceWorker.js 파일이 프로젝트내에 포함되어 있어야 하나요?

해결됨

실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트

실무에 적용하려고 하니 msw 에서 많이 막히네요 ㅠ 그래서 올려주신 깃헙 프로젝트를 샅샅히 훑어보고 있는데 mockServiceWorker.js 이 파일과 package.json에 "msw": { "workerDirectory": "public" } 요런 부분이 있더라고요. 요것들의 역할이 뭔지 알수 있을까요? msw 사이트에 가서 Getting started 를 가봐도 안나와 있는것 같아서 궁금합니다!

  • javascript
  • react
  • 소프트웨어-테스트
  • vitest
bn.kim 댓글 2 좋아요 1 조회수 297

깃허브 vue-todo 접근불가에 따른 확인요청

해결됨

Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex

깃허브 권한이 별도 없다고해주셨는데, 아래와같이 vue-todo 접근이 불가해서 확인부탁드리려합니다.

  • javascript
  • vue.js
  • es6
  • vuex
조예림 댓글 2 좋아요 1 조회수 388

HTML, CSS에 대한 선수 지식은 어느 정도로 필요한가요?

해결됨

웹 프론트엔드를 위한 자바스크립트 첫걸음

HTML이랑 CSS 아는 게 얼마 없는데 이 상태로 공부하면 하다가 막힐까요? 그리고 출판사에서 전자책 출간 일자 답변은 아직인지요..ㅠㅠ

  • javascript
  • dom
쿄야마 카즈사 댓글 2 좋아요 1 조회수 316

Bearer라는 단어로 작성하는 이유가 있나요?

미해결

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

항상 좋은 강의 감사합니다. 예전에 프론트 개발 할 때도 궁금했던 부분인데 Bearer 를 굳이 작성하는 이유나 혹은 작성하게 된 관습의 기원이 궁금합니다.

  • javascript
  • typescript
  • rest-api
  • nestjs
  • backend
info 댓글 2 좋아요 0 조회수 398

puppeteer 네이버 로그인

미해결

안녕하세요. 제가 프로그램을 만들고 있습니다. 네이버 로그인을 puppeteer로 자동화를 하려고 하고있습니다. 하지만 네이버에서 매크로 프로그램으로 로그인을 하는것을 막고 있습니다 ㅠㅠ 로그인을 자동화 시키려하면 캡챠로 넘어가서 다른 방법이 있는지 알아보는 와중 복사 붙여넣기 기능을 하면 된다고 구글링을 통해 봤습니다. 하지만 복사 붙여기능또한 네이버 로그인에서는 안되게 막아놓은것 같습니다.. 혹시 네이버 로그인 자동화를 구현하신 분 있는 멋진분을 찾습니당.

  • puppeteer
  • javascript
  • 매크로
  • 크롤링
  • electrone
댓글 2 좋아요 0 조회수 373

relation option "nullable : false" 로 설정했는데, 테이블에 insert가 되고 있습니다.

미해결

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

안녕하세요 선생님~ 위와 같이 세팅해서 user/profile 로 post 요청을 보내면 500 에러가 나야하는걸로 알고 있는데, 이처럼 잘 들어가 버리네요ㅜ `users` 로 get요청을 보내도 profile이 null이 들어간 상태로 조회됩니다. 개발환경 버전도 올려드립니다~

  • javascript
  • typescript
  • rest-api
  • nestjs
  • backend
노상 댓글 3 좋아요 0 조회수 420

map 함수에서 cannot read properties of undefined 에러 발생

미해결

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

강사님이 알려주신 대로 작성했는데 해당 부분에서 Cannot read properties of undefined (reading 'map') 이라는 오류가 발생합니다.ㅠㅠ 오타가 있는것 같지는 않은데..어디가 문제일까요..?

  • javascript
  • react
  • node.js
이화영 댓글 2 좋아요 0 조회수 428

var 변수의 문제점 설명하실 때 질문 있습니다.

해결됨

진짜! 자바스크립트(Javascript) - 기초부터 고급까지

function testShadowing() { let x = 5; if (true) { let x = 10; console.log(x); } console.log(x); } testShadowing() 위와 같이 let으로 x 변수를 2번 할당했는데, 실제 메모리에는 어떻게 할당이 되나요? 블록 스코프라고 하더라도 함수 스코프 안에서 블록 스코프가 만들어 질 것으로 생각이 되는데(뇌피셜입니다.), 이미 함수 스코프에서 x라는 변수명을 사용하고 있어서 블록 스코프에서 x는 자바 스크립트 엔진에서 어떻게 받아들이고 실제 메모리에 어떤 식으로 메모리 할당을 하는지 궁금합니다.

  • javascript
  • es6
  • 객체지향
  • es5
산성 댓글 2 좋아요 0 조회수 542

오픈그래프 태그

미해결

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

배포 후 링크 공유하는데 오픈 그래프 태그가 나타나지 않습니다.ㅜㅜ

  • javascript
  • react
  • node.js
우다슬 댓글 5 좋아요 0 조회수 957

리랜더링 highLight 질문..

미해결

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

10.3) React.memo와 컴포넌트 렌더링 최적화 위 강의를 보다보니, 뭔가 이상해서 질문드립니다... 여기서 Header컴포넌트에 memo함수로 감싸서 최적화된 컴포넌트를 만드셨다고 했는데, 영상으로만 보면 item 컴포넌트 변경시에 리랜더링이 안되야 하는 Header 컴폰넌트에 highLight가 들어가는데요..(4:46 경..) 아무리 봐도 하이라이트가 들어가는데, 말씀으로는 하이라이트가 더이상 들어가지 않는다고 하는데, 제가 뭘 잘못 이해한걸까요?

  • javascript
  • react
  • node.js
sketchband 댓글 2 좋아요 3 조회수 668

catnip 이펙트 범위가 이상하네요

해결됨

[JS] Phaser 게임 제작 - 뱀파이어 서바이벌 클론

디버깅으로 확인했는데, catnip의 써클 범위가 캐릭터가 이동할 때 마다 캐릭터 중심에서 살짝 어긋나는데, 캐릭터의 중심에 고정할 수 있을까요? import Phaser from "phaser"; import Player from "../characters/Player" export default class Catnip extends Phaser.Physics.Arcade.Sprite { // scene의 startingPosition 위치에 데미지 damage와 크기 scale의 Catnip을 생성합니다. constructor(scene, startingPosition, damage, scale) { super(scene, startingPosition[0], startingPosition[1], "catnip"); // 화면 및 물리엔진에 추가합니다. scene.add.existing(this); scene.physics.world.enableBody(this); // Catnip은 static 공격입니다. (플레이어 주변에만 발생하고 몹으로 이동하지 않음) scene.m_weaponStatic.add(this); // 데미지를 멤버 변수로 설정해줍니다. this.m_damage = damage; // 크기, 투명도, depth를 설정해줍니다. this.scale = scale; this.alpha = 0.5; this.setDepth(5); // catnip은 동그랗게 생겼으므로 물리적 영역을 원으로 설정해줍니다. this.setCircle(30); // 애니메이션을 재생합니다. this.play("catnip_anim"); } // 플레이어가 움직이면 Catnip도 따라 움직여야 하므로 move 메서드를 만들어주었습니다. move(vector) { this.x += vector[0] * 4; this.y += vector[1] * 4; } }

  • javascript
  • phaser
Fork 댓글 2 좋아요 0 조회수 286

혼자 푼 것 코드리뷰 부탁드립니다!

미해결

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

// 한 개의 문자열 s와 문자 t가 주어지면 문자열 s의 각 문자가 문자 t와 떨어진 최소거리 function solution(str = "", char = "") { let answer = []; let count = 0; for (let i = 0; i < str.length; i++) { if (str[i] === char) { count = 0; answer.push(count); } else { count++; answer.push(count); } } count = 1; for (let i = answer.length - 1; i >= 0; i--) { if (i > 0 && answer[i - 1] > count) { answer[i - 1] = count; count++; } else { count = 1; } } return answer; } console.log(solution("teachermode", "e")); // 1 0 1 2 1 0 1 2 2 1 0 혹시나 반례나 수정할 곳 있으면 조언 부탁드려요!

  • javascript
  • 코딩-테스트
tmdwhd319 댓글 2 좋아요 0 조회수 262

Prettier 적용 안되는 이슈

미해결

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

강의에서 소개해주신 것 처럼 Format on Save 옵션을 적용하였는데도, 저장 시 자동으로 Formatter가 작동하지 않아 서치해보니,Default Formatter 옵션이 위처럼 없음(null)로 설정이 된 경우에는 Prettier로 적용해주어야 정상동작하더라구요.해당 내용 공유드려요 ㅎ

  • javascript
  • react
  • node.js
진영 댓글 7 좋아요 21 조회수 1584

vue 개발자도구 refresh event 문제

해결됨

Vue 3 시작하기

component events에서 refresh log가 보이지 않습니다. component의 event listners에서 refresh: not declared인 것이 문제일까요? 코드도 함께 첨부합니다.

  • javascript
  • vue.js
  • vue-3
seo 댓글 2 좋아요 1 조회수 565

addAttackEvent 속도가 너무 빠르면 이런 오류가 발생하네요

해결됨

[JS] Phaser 게임 제작 - 뱀파이어 서바이벌 클론

addAttackEvent(this, "beam", 3, 1, 100) 속도를 위처럼 빠르게 하면 몹이 한마리 죽으면서 아래 오류가 나오는데 이런 경우는 어떻게 해야하나요? beam.js:31 Uncaught RangeError: Maximum call stack size exceeded at Beam.setVelocity (beam.js:31:19) at Beam.setVelocity (beam.js:32:18) at Beam.setVelocity (beam.js:32:18) at Beam.setVelocity (beam.js:32:18) at Beam.setVelocity (beam.js:32:18) at Beam.setVelocity (beam.js:32:18) at Beam.setVelocity (beam.js:32:18) at Beam.setVelocity (beam.js:32:18) at Beam.setVelocity (beam.js:32:18) at Beam.setVelocity (beam.js:32:18)

  • javascript
  • phaser
Fork 댓글 2 좋아요 0 조회수 321

javascript 공부없이 바로 react native 배워도 되나요?

미해결

html/css, jQuery, Java Script, react까지 3년전에 배웠었어요. 현재는 html/css 코드를 보고 읽고 간단한 건 수정할 수 있는 정도의 수준입니다. 개인적인 흥미로 취미로 개발을 배워보고 싶은데 시작하면 앱 개발, 유지/보수 할 수 있는 수준으로는 배우고 싶어요. 과외로 배울 예정인데 2분의 선생님을 소개받았는데 어떤 분의 루트가 더 나을지 판단이 어려워 전문가분들의 의견 구합니다. html/css > Java > react > react native까지 차근히 배우는 선생님 React native와 Java Script를 병행으로 배우는 선생님 1번 선생님의 경우, 현직자이신 것 같진 않고 강의를 위주로 하시는 분 같고 2번 선생님은 현직 개발자로 7년차이세요. 2번 선생님의 경우 함수선언을 영어로 치면 숙어라고 생각하고 배울 수 있을 것 같다고 설명해주셨어요. 리엑트 네이티브에서 사용했던 언어들이 java Script에서 조금 변형된 것들이라고 기억하고 있어서 2번 선생님이 더 속성으로 배울 수 있을 것 같긴 한데(기간은 1년정도 생각합니다) 나중에 혼자 앱 개발을 하는 상황을 생각하면 처음부터 꼼꼼히 배우는게 나을까요?

  • 리엑트네이티브
  • javascript
  • reactnative
  • react
귀여운 수달 댓글 1 좋아요 0 조회수 530

프롬프트 내용은 어디서 볼수있나요?

해결됨

React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)

안녕하세요 강사님 강의 정말 잘 듣고있습니다. 다름이 아니라 프롬프트의 내용이 꽤 긴데 혹시 복붙할 수 있는 페이지는 따로 없는지 궁금합니다..! 제가 못찾은것일수도 있어서 조심스럽게 문의드립니다

  • HTML/CSS
  • javascript
  • react
  • node.js
  • chatgpt
류돌프 댓글 2 좋아요 1 조회수 444

await를 사용하면 결국 동기와 다른 이유가 뭔가요?

해결됨

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

강의 2.14 비동기작업처리하기, 5:59 비동기는 프로세스의 병렬 처리를 위해 사용하는 것인데 비동기 함수를 await 키워드를 통해서 값이 반환되기를 기다렸다가 사용하면 동기 와 다른 점이 뭔지 궁금합니다. 어떤 경우에 await가 비동기 함수를 사용하면서 중요한 역할을 담당하는지도 궁금합니다.

  • javascript
  • react
  • node.js
yeonsul123 댓글 2 좋아요 1 조회수 1237

인기 태그

인프런 TOP Writers

주간 인기글