묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨Next.js 시작하기
getServerSideProps에서 axios 호출시
const response = await axios.get(`http://localhost:4000/products/${id}`);로 호출할때 클라이언트에서는 별다른 에러 메시지가 나오지 않으나npm run dev로 실행한 서버 터미널에서는 GET /products/backendManager.js.map 500 in 9ms ⨯ AxiosError: Request failed with status code 404 GET /products/react_devtools_backend_compact.js.map 500 in 16ms이라는 에러가 나옵니다.이 파일들을 호출하는 이유가 무엇인가요..?
-
해결됨실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
2.1강 테스트에서 헷갈리는 부분이 있습니다.
안녕하세요. 몇가지 의문이 있어 질문 드립니다.올바른 테스트 작성 규칙에서 내부 구현에 대한 테스트, 단순한 UI렌더링 관련 테스트는 하지 않는것이 좋다고 하셨는데,className prop이 css class에 적용되는지, placeholder설정, focus 시 border 스타일이 변경되는지 테스트하는건 단순히 UI와 관련된 테스트가 아닌가요?getByPlaceholder API는 만약 구현코드에서 placeholder 내용이 달라지면 테스트 코드도 모두 수정해야 하는데 종속성이 있다고 볼 수 있지 않나요?아직 테스트가 익숙하지 않아 그런지 이런 부분이 많이 헷갈립니다ㅜㅜ
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
GSAP 가이드 Part.02 강의 > 01 > practice html 맨처음 시작시 강의랑 동일하지 않을 경우
웹 애니메이션을 위한 GSAP 가이드 Part.02에advence-start > 01.animation-control > pratice의 html을 실행하면 강의랑 다르게파란색 길이 안나와서 당황했는데 강의를 들으면서 확인해보니까해당 밑에꺼 3개 주석처리 하니까 시작 할 때랑 똑같이 나옵니다.혹시 연습으로 먼저 해보실분들은 이거 3개 주석처리 하시고 시작하시면 될것같습니다. #emart .path { stroke-dasharray: 496; stroke-dashoffset: 496; } #medi .path { stroke-dasharray: 604; stroke-dashoffset: 604; } .pick { opacity: 0; }
-
해결됨실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
1.3강 npm run dev 안되는 문제
문제)의존성 설치 후 npm run dev를 기동하면$ npm run dev> test-example-shopping-mall@0.0.0 dev> concurrently --kill-others 'npm run dev:server' 'npm run dev:ui'[0] ''npm'��(��) ���� �Ǵ� �ܺ� ����, ������ �� �ִ� ���α�, �Ǵ�[0] ��ġ ������ �ƴմϴ�.[1] 'run'��(��) ���� �Ǵ� �ܺ� ����, ������ �� �ִ� ���α�, �Ǵ�[1] ��ġ ������ �ƴմϴ�.[2] ���� �̸�, ���� �̸� �Ǵ� ���� ���̺� ������ �߸��Ǿ����ϴ�.[3] ''npm'��(��) ���� �Ǵ� �ܺ� ����, ������ �� �ִ� ���α�, �Ǵ�[3] ��ġ ������ �ƴմϴ�.[4] 'run'��(��) ���� �Ǵ� �ܺ� ����, ������ �� �ִ� ���α�, �Ǵ�[4] ��ġ ������ �ƴմϴ�.[4] run exited with code 1--> Sending SIGTERM to other processes..[3] 'npm exited with code 1--> Sending SIGTERM to other processes..--> Sending SIGTERM to other processes..[1] run exited with code 1--> Sending SIGTERM to other processes..[0] 'npm exited with code 1--> Sending SIGTERM to other processes..[5] ���� �̸�, ���� �̸� �Ǵ� ���� ���̺� ������ �߸��Ǿ����ϴ�.[5] dev:ui' exited with code 1이런 콘솔이 찍히며 테스트 서버가 실행되지 않습니다.인코딩이 깨져서 뭐가 문젠지 추적을 못하겠어요ㅠㅠnode 버전은 강의와 동일하게 19.9.0으로 맞춰두었습니다.+) 인코딩이 깨지는 문제는 vscode터미널 말고 다른 커맨드창을 이용하니 해결 되었습니다.> test-example-shopping-mall@0.0.0 dev > concurrently --kill-others 'npm run dev:server' 'npm run dev:ui' [0] ''npm' is not recognized as an internal or external command, [0] operable program or batch file. [1] 'run' is not recognized as an internal or external command, [1] operable program or batch file. [2] The filename, directory name, or volume label syntax is incorrect. [3] ''npm' is not recognized as an internal or external command, [3] operable program or batch file. [4] 'run' is not recognized as an internal or external command, [4] operable program or batch file. [4] run exited with code 1 --> Sending SIGTERM to other processes.. [3] 'npm exited with code 1 --> Sending SIGTERM to other processes.. [2] dev:server' exited with code 1 --> Sending SIGTERM to other processes.. [1] run exited with code 1 --> Sending SIGTERM to other processes.. [0] 'npm exited with code 1 --> Sending SIGTERM to other processes.. [5] The filename, directory name, or volume label syntax is incorrect. [5] dev:ui' exited with code 1그런데 여전히 실행이 안됩니다ㅜㅜnpm을 못찾는거 같은데 환경변수에 따로 등록을 해야하나요? npm -v하면 버전은 잘 나오는데 원인을 모르겠습니다...현재 환경변수와 버전정보 추가합니다.+) package.json스크립트에서 작은 따옴표를 큰 따옴표로 수정해서 최종적으로 해결되었습니다... 허무하네용ㅋㅋㅋ ㅠ
-
미해결자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
이렇게 풀어봤는데 괜찮을까요?
function App() { const solve = (m ,arr) => { let answer = 0; let n = arr.length; arr.sort((a,b) => (a[0] + a[1]) - (b[0] + b[1])); // 50% 쿠폰, 상품 for (let i = 0; i < n; i++) { let money = m - (arr[i][0] - arr[i][1]); let cnt = 1; for (let j = 0; j < n; j++) { if (j === i) { continue; } money = money - (arr[j][0] + arr[j][1]) if (money > 0) { cnt ++; } } if (answer < cnt) { answer = cnt } } return answer } const arr = [[6,6],[2,2],[4,3],[4,5],[10,3]]
-
해결됨Next.js 시작하기
next create-next-app@latest 설치 문제
Aborting installation.Unexpected error. Please report it as a bug: Error: EACCES: permission denied, open '/Users/jeonginn/Library/Preferences/create-next-app-nodejs/config.json.tmp-982595282012e022' at openSync (node:fs:581:18) at attempt (/Users/jeonginn/.npm/_npx/efeac22998af9bf2/node_modules/create-next-app/dist/index.js:8:43165) at Object.writeFileSync (/Users/jeonginn/.npm/_npx/efeac22998af9bf2/node_modules/create-next-app/dist/index.js:8:38664) at Conf._write (/Users/jeonginn/.npm/_npx/efeac22998af9bf2/node_modules/create-next-app/dist/index.js:8:74912) at set store [as store] (/Users/jeonginn/.npm/_npx/efeac22998af9bf2/node_modules/create-next-app/dist/index.js:8:73358) at Conf.set (/Users/jeonginn/.npm/_npx/efeac22998af9bf2/node_modules/create-next-app/dist/index.js:8:71962) at run (/Users/jeonginn/.npm/_npx/efeac22998af9bf2/node_modules/create-next-app/dist/index.js:74:51291) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) { errno: -13, code: 'EACCES', syscall: 'open', path: '/Users/jeonginn/Library/Preferences/create-next-app-nodejs/config.json.tmp-982595282012e022'}설치할 때 터미널에서 이런 메세지가 나오네요 ㅠㅠ 권한 문제인거 같아서 구글링 계속 해보면서 해봤는데 안되서 글 남깁니다 ㅠㅠ
-
미해결[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
객체 참조 관련 질문
위와 같이 코드를 작성했을 때, D.push(d) 이후에는 d === D[2] 값이 false가 나옵니다. 이건 push할 때는 새로운 주소에 할당되기 때문일까요?깊이에 따른 복사가 다르다고 얼핏 듣긴 했습니다만 잘 몰라서 질문 드립니다.
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
페이징 처리
안녕하세요. 선생님. todolist를 따라하며 완성하였는데요.todolist의 list들이 많아지면 페이징 처리를 통해 나누어 봐야 할 거 같은데 이 기능은 어떻게 구현하면 좋을까요??(RESTFUL API로 개발하면 프론트, 백엔드 양쪽에서 페이징 처리를 해야 하는지,, )
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
심플 카운터 onClick시 setCount 무한 루프
선생님 안녕하세요선생님 안녕하세요 강의에 나온 내용은 아니지만실습 중에 문법 경고가 안 떠있는데제 의도대로 작동 되지 않은 코드가 있어서이러면 안된다고 부연 설명해주셨지만제가 강의 안보고 혼자 실습하다가 그 안 되는걸 해버렸는데이유가 너무 궁금해서 질문 드립니당심플 카운터 실습 중에 App 컴포넌트에서Count 스태이트를 함수로 만들어서 Controller 컴포넌트에 넘기고컨트롤러 컴포넌트에서 이렇게함수를 호출 했더니버튼 누르지도 않았는데혼자 무한루프 도는걸 봤는데왜 이런건지 궁금해요
-
미해결웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT
캐릭터 기본 모션 만들기에서 포토샵에 열라고하는데 포토샵없으면 어떻게하죠? 공짜버전있나요?
캐릭터 기본 모션 만들기에서 포토샵에 열라고하는데 포토샵없으면 어떻게하죠? 공짜버전있나요?
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
추가 강의
안녕하세요! 리액트랑 타입스크립트 강의 완강하고 강사님께 더 배우고 싶어서 찾아보다가 타사에 리액트 + next.js 강의가 있더라구요. 그런데 커리큘럼을 보니 리액트 부분은 제가 수강한 리액트 강의랑 거의 흡사한 것 같고 거기에 추가로 next.js 부분만 공부하고 싶은데 강사님이 7월 ~8월 중에 next.js 강의를 낸다고 하신 게 있어서요 ㅠ혹시 next.js 강의가 늦게 나올까요 ㅠ? 미리 강사님의 리액트 + next.js 강의를 들어도 되나요? (현재 리액트 강의나 추후 나올 next.js 강의와 겹치는 부분은 없는지...등)
-
해결됨문제해결을 통한 웹프로그래밍 입문
공지
강좌 운영이나 강의 내용에 관해 궁금한 점이 있으면 자유롭게 나누어주세요.교수자, 수강생 누구나 글쓰기와 댓글 쓰기가 가능합니다.
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
해결되었습니다
해결되었습니다
-
미해결[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
-2+ -2 = -4 음수 더하기 음수 - 셀프체크 계산기
음수 끼리 더해 보고 싶어서 해봤습니다.근데 결과가 0이 나와서 질문 드립니다.혹시 숫자가 잘못 나왔나 해서 콘솔 로 확인 해봤는데 숫자는 우선 잘 된것 같습니다. 무엇이 문제인걸까요? -3 + -5 도 결과 값이 2 가 나옵니다.계산할때 중괄호가 없어서 그런걸까요?
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
질문있습니다.
파일 저장 시 prettier가 의도적으로 줄 바꿈한 문장을 한 줄로 합쳐버립니다. 라고 질문 올렸는데 다른 분이 답 주시고 강사님께서 답을 안 해주셔서 질문드립니다. 사진을 지워서 지난글을 봐주실 수 있나요 슬래쉬 두 번 쓰는거는 불편한데, 설정으로 어떻게 안 되는건가요? 줄바꿈 한거는 합쳐버리고, 한줄로 있던거는 나눠버립니다.
-
해결됨비전공자의 전공자 따라잡기 - 자료구조(with JavaScript)
우선순위 큐 질문이 있습니다!
우선순위 큐 강의를 재미있게 보았는데, 큐와 우선순위큐가 먼저 실행 되는것을 실행하는 차이말고는 똑같은것 같은데 구현 코드는 힙 자료구조를 사용 하시더라고요! 그렇다면 힙과 우선순위 큐가 비슷하고 우선 순위 큐가 큐랑 비슷하니까 힙과 큐도 비슷한건가요?
-
해결됨만들면서 배우는 리액트: 컴포넌트 설계와 리팩토링
state 변경에 따른 리랜더링 범위가 어떻게 되는 건가요?
const handleClick = ()=>{ localStorage.setItem(inputText, inputText); setInputText(''); }제가 처음 생각한 걸론 저 상태에서도 로컬스토리지에 인풋텍스트가 저장되고 setInputText()로 <App> 엘리먼트가 리렌더링 될테니 할 일을 추가하면 바로 화면에 표시가 될 거라고 생각했거든요?실제로 todos를 state로 관리하기 전까진 그런 방식이었던 것 같고, 그런데 삭제 구현 이후에는 어떤 차이로 디스플레이에 반영이 안되는 건가요?만약 <App> 단위로 리렌더링 되는 게 맞다면 todos랑 <ul> 평가할 때 데이터가 바뀌었을테니 리렌더링 되는 게 맞다고 생각이 들었거든요.
-
해결됨실무에 바로 적용하는 프런트엔드 테스트 - 2부. 테스트 심화: 시각적 회귀・E2E 테스트
4.3 테스트 질문 입니다
시간: 9:00Q. ‘비밀번호를 입력하지 않고 로그인 버튼을 클릭할 경우 “비밀번호를 입력하세요” 경고 메시지가 노출된다’ 를 테스트 할 때, 비밀번호가 입력하지 않은 상태인지 확인하는 부분은 없어도 되는 건가요??비밀번호를 입력하는 요소가 null 인지 확인하는 테스트는 없어도 되는 건가요??
-
해결됨실무에 바로 적용하는 프런트엔드 테스트 - 2부. 테스트 심화: 시각적 회귀・E2E 테스트
5.2 테스트에서 상품 이름 사용, 로그인 세션 질문
Q1. 장바구니, 구매 버튼 클릭 시 해당 상품의 이름을 cy.findByText('Handmade Cotton Fish 장바구니 추가 완료!').should('exist) 상품 이름을 직접 입력하는데, (통합 테스트에서 모킹 데이터를 사용한다면 모킹 데이터는 직접 설정하기 때문에 가능하지만), 실제 api를 사용하면 첫번째 상품 데이터가 변경할 수도 있기 때문에 실패할 수도 있기 때문에 다르게 작성해야 하지 않을까요?? 질문 드립니다 Q2. 로그인을 커스텀 커맨드에서 설정해서 session을 사용해 설정해서 테스트할 때, 웹에서는 로그인 성공/실패 여부는 확인할 수 없는 것 아닌가요??로그인이 실패하게 되면 로그인 관련 테스트는 모두 실패하게 되는데 그냥 이 결과로 로그인 성공/실패 확인을 하는 건가요??
-
해결됨실무에 바로 적용하는 프런트엔드 테스트 - 2부. 테스트 심화: 시각적 회귀・E2E 테스트
5.3 cy.intercept 질문
Q. cy.intercept()는 회원 가입 요청에 대한 성공/실패 응답을 모킹해서 받는데, 이 때 의도하는 코드는 1번이지만 응답이 정해져 있기 때문에 2번처럼 틀린 요청으로도 결과는 똑같이 나오게 될 거라고 생각됩니다. 실제 응답이 아니라 응답을 정해 놓고 전달하기 때문에 실제 동작과 다를 수도 있어서 이 부분은 '실패, 성공 시 문구 노출'이 나타나는 동작이 있다는 document 로만 이해해도 될까요?? 1성공 데이터 요청 -> 성공 데이터 응답실패 데이터 요청 -> 실패 데이터 응답2실패 데이터 요청 -> 성공 데이터 응답성공 데이터 요청 -> 실패 데이터 응답