묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결따라하며 배우는 자바스크립트 A-Z
섹션9 Todo App 질문드립니다.
새로운 투두 추가하기 버튼을 클릭할 때 실행되는 createNewTodo함수가 끝나고 input을 입력하거나 checkbox change같은 이벤트를 실행할 때 createTodoItem함수 안에 있는 이벤트리스너가 발생되는데 클로저와 연관이 있을까요?이론으로만 접근하다가 이게 바로 클로저..? 라는 생각이 들었는데 제가 생각한 부분이 맞는지 궁금합니다.삭제버튼 이벤트리스너에서 itemEl.remove(); 코드로 해당 투두 아이템 요소를 삭제해주는데, 이전에는 이벤트리스너의 event 인자로 타겟을 정해주고 사용했던 적이 있어서 약간 낯설게 느껴졌습니다. 코드의 itemEl 요소가 해당 투두 아이템인지 인식할 수 있는 이유는 이벤트버블링 때문인가요?제가 이번 강의를 부득이하게 음소거로 듣고있어서 영상에 이미 설명이 되었던 부분이라면 죄송합니닷🥲
-
미해결실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
2강 storybook & vitest
안녕하세요. 2.1강에서 storybook, vitest 명령어를 사용했을 때, 에러가 나타나서 질문 드립니다 Settingbranch: unit-test-examplevitest 플러그인: v0.3.0 (현재 이하로는 변경이 안되는 것 같습니다)node: 19.9.0 eslint.json - `"prettier:prettier": "off"` 추가prettierrc - `"endOfLine": "auto"` 추가 storybook 사용 시(npm run storybook) Web의 경우 새로고침을 하면 정상 페이지로 동작하지만 에러 로그는 그대로 입니다vitestimport { screen } from '@testing-library/react'; import React from 'react'; import TextField from '@/components/TextField'; import render from '@/utils/test/render'; it('className Prop으로 설정한 css class가 적용된다.', async () => { // Arrange - 테스트를 위한 환경 만들기 // -> className을 지닌 컴포넌트 렌더링 await render(<TextField className="my-class" />); // Act - 테스트할 동작 발생 // -> 렌더링에 대한 검증이기 때문에 이 단계는 생략 // -> 클릭이나 메서드 호출, prop 변경 등등에 대한 작업이 여기에 해당 합니다. // Assert - 올바른 동작이 실행되었는지 검증 // -> 렌덩링 이후 DOM에 해당 class가 존재하는지 검증 // TextField는 placeholder 요소가 있습니다. // vitest의 expect 함수를 사용하여 기대 결과를 검증 expect( screen .getByPlaceholderText('텍스트를 입력해 주세요.') .toHaveClass('my-class'), ); });
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - Part 1 NestJS Core
yarn 관련 강좌 업데이트가 필요합니다.
강사님 yarn 버전이 1.22 를 사용하고 있는데 지금 4.x 버전까지 yarn berry(2.0 이상)의 zero install 이나 pnp 등 상당히 많은 업데이트가 진행되었습니다. nest/cli 신규 프로젝트 생성부터 yarn 버전으로 프로젝트 진행에 상당히 불편함을 느끼지 싶습니다. 시간이 되신다면 yarn 관련 강좌 업데이트 부탁드리겠습니다.감사합니다.
-
미해결타입스크립트 입문 - 기초부터 실전까지
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
-
미해결Do it! Node.js 프로그래밍 입문
로컬 호스트 접속이 안됩니다
마지막 강의 듣고있는데요 어제까지만 해도 잘되던 로컬호스트 접속이 안됩니다 서버는 기동이 잘되는데 이렇게 접속하면 접속이 안됩니다.. cm 에서 포트 떠있는것도 보이는데 왜그럴까요
-
미해결
마우스오버 이벤트가 특정 영역 안에서만 이루어졌으면 좋겠습니다.
마우스가 그림 위에 오버되면 원을 생성하는 인터랙티브 기능을 구현했습니다.사진 안에서만 원들이 생성 되고 사진 영역을 벗어나면 원이 그려지지 않았으면 좋겠는데 어떻게 해야할까요? <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 알고리즘 베스트 10
4번 꿈의 설계
안녕하세요이 부분에서 갑자기 key value가 나오는데, 이 변수들은 정의되지 않았는데 어떻게 나온건가요?
-
미해결JavaScript 알고리즘 베스트 10
3번 출정인원 선발
3번 출정 인원 선발의 아래 코드에서 질문이 있습니다.if문의 첫 번째 조건에서, 선발된 인원이 2명, 선발해야 하는 인원이 4명, i[1].length가 3일 경우에 조건을 통과하여 선발인원에 push가 되는데, 남은 자리가 2개여서 3명이 추가되면 안되니까 조건이 잘못된 것이 아닌가요??그래서 선발해야하는 인원과 선발된 인원의 차이를 고려하여 첫 번째 조건의 && 뒷부분 조건이 아래 코드블럭처럼 되어야 하는게 아닐지 궁금합니다. 제가 잘못 생각했다면 어느 지점이 잘못된 것일지도 궁금합니다 감사합니다!i[1].length <= 선발해야하는인원 - 선발된 인원
-
미해결JavaScript 알고리즘 베스트 10
강의 깃헙 주소
강의 깃헙 주소는 어디 있나요?
-
미해결JavaScript 알고리즘 베스트 10
문제 1번 관련
안녕하세요혹시 정규표현식 말고 replaceAll 사용한 이유가 있으신가요?
-
미해결JavaScript 알고리즘 베스트 10
서비스에서 run javascript
안녕하세요서비스에서 run javascript가 어디있나요??
-
미해결[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
쿵쿵따, 계산기에서 변수 선언
안녕하세요 변수 선언 관련해 질문이 있습니다 쿵쿵따에서는 단어 저장할 변수를 만들 때 아래와 같이 변수자체만 선언하고계산기 만들기를 할 때는 숫자랑 연산자 저장할 변수를 만들 때 아래처럼 빈 문자열을 넣는데 어떤 이유가 있는 건지 궁금합니다계산기 만들기에서 아래처럼 선언하면 숫자가 저장되지 않고 NaN이 나오더라구요
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
12.13) 마지막 부분, body의 display 속성
12.13) New Page 구현하기 1. UI 강좌 마지막에 흰색 배경이 화면 아래까지 감싸지 않아서 강사님께서 display속성을 수정하셨는데요.body의 display속성을 개발자도구로 살펴보면 display:block 으로 되어있고 display:flex 로 바꿨을 때 왜 문제가 해결됐는지 모르겠습니다. display:block은 full width만 지킬뿐 full height는 지키지 않아서 아래가 비어있음-> margin방향으로 팽창을 위해 flex를 사용?flex가 컨테이너 내부의 elements를 정렬/조작해주는건 알고 있었는데 flex를 적용한 컨테이너 자체 크기가 변하는 기능이 있나요?
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
실무 프로젝트 진행중 리터럴은 따로 파일에 만들어서 분리하나요?
예를들어서<Button text={"취소하기"}/>같은 버튼 컴퍼넌트가 있다면 실무에서는 "취소하기"같은 리터럴도 다른 파일에 분리해서 관리하나요?
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - Part 1 NestJS Core
데이터베이스의 작동 방식
강의 내용과는 조금 별개로 궁금한 점이 있어서 질문드립니다.지금 테스트환경에서는 userModel을 한두개 생성해서 테스트하지만, 실제로 네임드 앱들은 유저의 수가 수억개씩 존재하는데, 그렇게되면 데이터베이스가 특정 PostModel에 해당하는 하나의 user객체를 식별하는데 오랜 시간이 걸리지 않나요?그 시간 차이가 미비해서 따로 신경쓰지 않아도 되는건지, 혹은 컴퓨터만의 쿼리 탐색 방법이 따로 존재하는건지 궁금합니다!
-
해결됨자바스크립트로 알아보는 함수형 프로그래밍 (ES5)
_go함수 _pipe.apply(null, fns) 사용하는 이유
질문1. go 함수에서 apply의 쓰임 제가 알고 있는 apply는 this바인딩 때문에 사용하는것으로 알고 있습니다. 여기서는 array-like를 array로 바꿔주는 것으로 쓰이는것 같아요?? 물어보고싶은것은 apply의 기능 1. this바인딩 때문에 사용 호출함수에서 array-like를 array로 기능하도록해준다이렇게 두 가지 기능을 한다 라고 정의를 하면 될까요??
-
미해결mongoDB 기초부터 실무까지(feat. Node.js)
user 내장 시 ref 필드 필요성
안녕하세요 !유익한 강의 감사합니다. Blog.js에서 BlogSchema를 보면,user를 내장하였는데,_id에 ref 필드가 그대로 있더라구요.사실 populate 하지 않을 꺼면 ref필드는 삭제해도 되지 않을까요?만약 내장하려는 문서에 ref가 필요한 케이스가 있다면 어떤 게 있을까요?
-
미해결실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
mockServiceWorker.js 파일이 프로젝트내에 포함되어 있어야 하나요?
실무에 적용하려고 하니 msw 에서 많이 막히네요 ㅠ 그래서 올려주신 깃헙 프로젝트를 샅샅히 훑어보고 있는데 mockServiceWorker.js 이 파일과 package.json에"msw": { "workerDirectory": "public" } 요런 부분이 있더라고요. 요것들의 역할이 뭔지 알수 있을까요? msw 사이트에 가서 Getting started 를 가봐도 안나와 있는것 같아서 궁금합니다!
-
해결됨Only Javascript만으로 배우는 하이브리드앱 패키징
onesignal 연동 확인 부탁드립니다!
window.plugins.OneSignal.setAppId("원시그널앱ID"); //푸시메세지 수신부 window.plugins.OneSignal.setNotificationOpenedHandler(function(jsonData){ console.log('notificationOpenedCallback: ' + JSON.stringify(jsonData)); }); //푸시권한 허용팝업(android OS 13 이상에서 사용됨) window.plugins.OneSignal.promptForPushNotificationsWithUserResponse(function(accepted) { console.log("User accepted notifications: " + accepted); });위 코드가 정상적으로 작동을 안하는 것 같습니다! 버전 문제인지 모르겠는데 코드 추가하고 onesignal 사이트에서 "Check Subscribed Users" 버튼을 클릭하면 아래 같은 오류가 발생하는데 확인 부탁드립니다 We haven't detected any subscribed users yet for this platform. Try some of the tips below or contact us for support.Run OneSignal.SetLogLevel(OneSignal.LOG_LEVEL.DEBUG, OneSignal.LOG_LEVEL.DEBUG);before OneSignal initialization and check your ADB logcat for errors or warnings.Verify that the OneSignal App ID is correct in your app or site.
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
두 코드의 차이점
function add(a,b,callback){ sum = a + b; setTimeout(callback(sum),3000); } add(1,2,(value)=>{console.log(value)});function add(a,b,callback){ setTimeout(()=>{ const sum = a+b; callback(sum); },3000); } add(1,2,(value)=>{console.log(value)}); 위 두 코드의 차이점이 궁금합니다.