inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

동물앨범 3-3 에서 express@5 설치 후 app.get('/*', callback) 에서 문제가 발생합니다.

해결됨

한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지

npm i express 로 express 를 설치 후 강의와 같이 코드를 작성했지만 .. app.get('/*', (req, res) => {...}); 에서 오류가 발생합니다. TypeError : Missing parameter name at 2: https://git.new /pathToRegexpError 가 발생합니다. 구글에서 검색하여 보니 Express v5에서 '/*' 형식은 맞지 않는 것으로 보입니다. 따라서 아래와 같이 코드를 정규식으로 변환하니 제대로 실행 되었습니다. app.get(/^\/(.*)/, (req, res) => { res.sendFile(path.join(__dirname, '..', 'index.html')); }); 혹시 정규식 말고 다른 수정 방법이 있는지 알고 싶습니다. ⚠ 답변은 평일 오전 10시에 순차적으로 작성해드립니다. ⚠ '질문 해결'은 답변 작성일 기준 1일 이후에 적용됩니다.

  • javascript
  • rest-api
  • spa
  • dom
  • express
Codingbear 댓글 1 좋아요 1 조회수 239

1. 동물 앨범 만들기 1-1 에서 template 배열 선언후 왜 문자열로 합치기를 했나요?

해결됨

한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지

template 변수를 빈 배열 리터럴 초기화한 후 배열에 push() 메서드를 사용하여 생성된 이미지 요소를 삽입하는 것이 맞다 봅니다. 나중에 출력 시 join() 메서드로 문자열 출력하는 것이 좋겠네요... 🙂 const API_URL = 'https://animal-api-two.vercel.app/'; const $content = document.querySelector('div.content'); let template = []; const getData = async () => { let res = await fetch(API_URL); try { if (res) { let data = await res.json(); data.photos.forEach((elm) => { template.push(`<img src="${elm.url}" alt="${elm.name}" />`); }); $content.innerHTML = template.join(' '); } } catch (err) { console.log(err); } }; getData(); ⚠ 답변은 평일 오전 10시에 순차적으로 작성해드립니다. ⚠ '질문 해결'은 답변 작성일 기준 1일 이후에 적용됩니다.

  • javascript
  • rest-api
  • spa
  • dom
Codingbear 댓글 1 좋아요 1 조회수 141

nav 에 sign in 라인

해결됨

Figma 참조 - 반응형 쇼핑몰 웹사이트 만들기 완벽 가이드

안녕하세요 선생님 수업 잘 듣고 있습니다. 강의를 듣는 도중에 sign in 왼쪽선이랑 아래 hero 섹션에서 제일 오른쪽 꽃이미지 왼쪽선이랑 미세하게 안맞는데 피그마에서는 선이 딱 맞더라구요 이것도 딱 맞게 조정할 수 있는 방법이 있나요?

  • HTML/CSS
  • javascript
  • jquery
  • figma
김가희 댓글 2 좋아요 1 조회수 91

배포 강의에서 Blocked request 경우, vite.config.js 파일도 수정해야되나요?

해결됨

React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드

안녕하세요! 강의 듣다가 최종 배포에서 질문이 있습니다. 강의에서는 vite.config.js 파일 내용 수정은 없는 것 같은데요 아래 순서로 했는데 홈페이지 메인화면에서 Blocked request. This host (" 5d39-218-159-221-155.ngrok-free.app ") is not allowed. To allow this host, add " 5d39-218-159-221-155.ngrok-free.app " to server.allowedHosts in vite.config.js. 에러가 뜨는데요 vite.config.js 파일 수정을 해야되나요? 프론트, 백앤드 서버 실행 cmd 창에서 ngrok http 5173 입력 index.js 파일에서 아래와 같이 수정 app.use(cors({ //origin: "http://localhost:5173", origin: "https://5d39-218-159-221-155.ngrok-free.app", credentials: true, })); ngrok 에러는 아래와 같아요 08:36:45.923 KST GET /favicon.ico 403 Forbidden

  • HTML/CSS
  • javascript
  • react
  • node.js
  • mongodb
호호하하 댓글 1 좋아요 0 조회수 862

코드 샌드박스 소스 입력시 콘솔이 계속 반응하는것 같아요.

해결됨

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

안녕하세요 코드 샌드박스 소스 입력시 소스를 입력할때마다 console.log()가 계속 반응하는 것같은데 소스입력할때마다 반응하는 것을 멈출수 있을가요? 혹시.. 코드샌드박스 적응이 아직 안되었으면.. 비쥬얼 코드로 공부해도 큰 문제없을가요?

  • javascript
  • es6
  • 객체지향
  • es5
ymckh1005 댓글 3 좋아요 0 조회수 235

조건부 렌더링을 위해 인스턴스를 매번 생성하는 것의 장단점이 궁금합니다.

해결됨

한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지

조건부 렌더링을 통해 다음과 같이 url 에 따라 특정 컴포넌트를 생성하는 방법을 이해했습니다. const render = () => { const path = this.state.currentPage; $app.innerHTML = ""; if (path.startsWith("/city")) { renderHeader(); renderCityDetail(); } else { renderHeader(); renderRegionList(); renderCityList(); } }; 이 경우, 컴포넌트가 추가될 때마다 this.setState 에 추가된 컴포넌트의 setState 를 추가로 호출해야 하는 번거로움도 사라진 것 같습니다. 하지만, 상세 페이지와 메인 페이지를 계속 왔다갔다 할 경우, 공통으로 호출되는 renderHeader() 와 다른 렌더링 함수가 호출되고 인스턴스가 계속 생성이 될 것 같습니다. 이렇게 인스턴스가 계속 생성이 되면, 메모리 효율이 좋지 않을 것 같은데, React나 Vue 같은 도구에서는 이런 문제를 해결해주고 있나요? 아니면, 이 정도는 크게 신경 안써도 될 정도로 미비한 건지 궁금합니다.

  • javascript
  • spa
cho766 댓글 1 좋아요 1 조회수 97

스크롤 속도에 따른 messageA_opacity_out

미해결

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

강사님처럼 똑같이 코드를 작성했음에도 불구하고 스크롤을 천천히 내리면 opacity가 0까지 잘 적용이되는데 스크롤을 빨리내리면 opacity가 0으로 빠지다가 그상태로 남아서 씬2까지 넘어가요. 혹시 왜그런지 알 수 있을까요?

  • HTML/CSS
  • javascript
  • 웹-디자인
  • svg
  • 인터랙티브-웹
  • 클론코딩
이상민 댓글 1 좋아요 0 조회수 139

useEffect 의존성배열

해결됨

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

의존성 배열에 보통 배열이나 객체를 넣지 않는 게 좋다고 어디서 본거 같은데 useState으로 만든 객체나 배열은 상관이 없고 const a = {a: 1, b:2} 이런 거나 const b = []; 이렇게 초기화 된 것들만 넣지 말라고 하는 것인가요? 맞다면 이유는 const a 랑 const b는 리렌더 될 때마다 참조 값이 바뀌고 useState으로 만든 것은 리렌더링이 되어도 set 함수가 쓰이지 않는 이상 참조 값이 바뀌지 않아서 그런 건가요?

  • javascript
  • react
  • node.js
Juhyeon Lee 댓글 2 좋아요 0 조회수 179

[12.6) 폰트, 이미지, 레이아웃 설정하기] 이미지 설정 관련해서 질문 있습니다.

해결됨

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

제 얕은 지식으로는 svg 파일이 png 파일보다 용량이 더 적어서 좋다고 알고 있는데 어떤 이유로 이미지를 svg 파일 말고 png 파일로 진행하시는 이유가 있는지 궁금합니다!

  • javascript
  • react
  • node.js
댓글 2 좋아요 0 조회수 120

[12.6) 폰트, 이미지, 레이아웃 설정하기] 이미지 설정 관련해서 질문 있습니다.

해결됨

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

제 얕은 지식으로는 svg 파일이 png 파일보다 용량이 더 적어서 좋다고 알고 있는데 어떤 이유로 이미지를 svg 파일 말고 png 파일로 진행하시는 이유가 있는지 궁금합니다!

  • javascript
  • react
  • node.js
코린이 댓글 2 좋아요 0 조회수 113

출력 결과가 이해되지 않습니다.

미해결

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

const promise = new Promise((resolve, reject) => { // 비동기 작업을 실행하는 함수 // executor setTimeout(() => { console.log("안녕"); // resolve(); reject(); }, 2000); }); console.log(promise); setTimeout(() => { console.log(promise); }, 3000); 첫 번째 console.log와 setTimeout에서의 두 번째 console.log는 promise객체의 상태가 달라야 한다고 생각하는데 왜 같은지가 궁금합니다.

  • javascript
  • react
  • node.js
bestoon 댓글 2 좋아요 0 조회수 211

tap() 안에서 async/await 쓸 때 트랜잭션 커밋이 제대로 안 되는 이유가 궁금합니다.

미해결

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

코드팩토리 디스코드에 질문하면 더욱 빠르게 질문을 받아 볼 수 있습니다! [코드팩토리 디스코드] https://inf.run/54jjz - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. QueryRunner 커스텀 데코레이터 만들기 듣고 있는데 강의대로 return next.handle().pipe( catchError(async (e) => { await qr.rollbackTransaction(); await qr.release(); throw new InternalServerErrorException(e.message); }), tap(async () => { await qr.commitTransaction(); await qr.release(); }), ); 이렇게 코드를 짜면 포스트맨에서 응답으로 { "message": "QueryRunner Decorator를 사용할려면 TransactionInterceptor를 적용해야 합니다.", "error": "Internal Server Error", "statusCode": 500 } 이렇게 나옵니다. 그래서 tap 대신에 mergeMap(async (value) => { await qr.commitTransaction(); await qr.release(); return value; }), merge맵을 사용하면 문제가 해결되는데 강의에서는 tap을 써도 트랜잭션 커밋이 잘 되는 것처럼 보였는데, 설명 부탁드립니다.

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

Rest API 보다는 graphql이 주된 내용인데

해결됨

[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

보통 채용공고엔 rest api가 많더라고요 강의에도 아예 없진 않은데 강의 수강이후에 rest api도 할수있다고 생각을 해도되나요 아니면 따로 공부를 해야하나요? 차이가 많이나는지요

  • javascript
  • node.js
  • docker
  • rest-api
  • nestjs
momodooly 댓글 2 좋아요 0 조회수 162

Symbol 관련 테스트 코드 실행 결과 문의

미해결

풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]

Symbol 관련 테스트 코드를 Sandbox로 확인해 보았는데 결과가 다르게 나와서 문의드립니다. Javascript로 sandbox를 create하였고, 생성된 index.mjs 파일에 강의내용의 Symbol 테스트 코드를 동일하게 작성해여 테스트 하였습니다. let testSymbol1 = Symbol(1); let testSymbol2 = Symbol(1); console.log(typeof testSymbol1, testSymbol1); console.log(typeof testSymbol2, testSymbol2); console.log(testSymbol1 == testSymbol2); console.log(testSymbol2 === testSymbol2); Console로 확인한 결과는 2symbol Symbol(1) false true 이렇게 나옵니다. null로 나오지 않고, === 결과도 true인데 어떤 이유로 다르게 나오는건지 궁금합니다.

  • HTML/CSS
  • javascript
  • es6
euny 댓글 1 좋아요 0 조회수 166

API 에러

해결됨

한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지

동물 앨범 만들기 코드 챕터에서 강의에서 제공하고 API_URL인 https://inf.run/7Sf7J 주소로 들어가면 데이터가 보여지는게 아니라 아래 이미지처럼 나오는데 왜그럴까요?

  • javascript
  • rest-api
  • spa
  • dom
정태윤 댓글 2 좋아요 1 조회수 214

Mac Os / npx eas build --platform android --profile development 질문

해결됨

[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스

Vscode 터미널에서 npx eas build --platform android --profile development 명령어를 입력하면 Resolved "development" environment for the build. Learn more No environment variables with visibility "Plain text" and "Sensitive" found for the "development" environment on EAS. ✔ Using remote Android credentials (Expo server) ✔ Using Keystore from configuration: Build Credentials B93ecKpj4X (default) Compressing project files and uploading to EAS Build. Learn more ✖ Compressing project files Failed to upload the project tarball to EAS Build Reason: EPERM: operation not permitted, scandir '/Users/development/.Trash' Error: build command failed. GPT는 Trash를 우회해서 하라는데 우회해도 안되고.. .easignore 파일에 .Trash .DS_Store node_modules .git **/.Trash !./.Trash # 만약 현재 디렉토리에 있다면 포함시킴 를 작성해도 계속 같은 에러가 발생합니다ㅠ.ㅠ 어떻게 해결하면 될까요 ?

  • javascript
  • react
  • node.js
  • react-native
  • typescript
backendinfj 댓글 2 좋아요 0 조회수 186

클린업 JavaScript: 점프업! / 6. 클로저(Closure), 클로저 대상 / 2:25

미해결

클린업 JavaScript: 점프업!

const setPoint=function(){ let one =100; const two = 200; var five=500; if(one){ let seven=700; var nine = 900; }; return function(){ console.log(one+two+nine); // one + two + nine; debugger // one + two + nine; // one, two, nine variable 없음 debugger // seven; }; }; const getPoint =setPoint(); getPoint(); debugger로 변수를 개발자도구 콘솔에 찍으니깐요 변수를 추적못합니다. 신기해서 질문합니다 웹브라우저에서는 변수를 찾지 못하고 자바스크립트에서는 클로저로 할당된 변수를 찾아서 콘솔에 찍어주는 건가 싶기도하고요 언제 변수를 찾느냐의 차이인가요? 웹브라우저에서 직접 변수를 찾으면 못찾는다고 하네요 이유가 무엇인지 알고 계신가요?

  • javascript
bigger 댓글 2 좋아요 0 조회수 118

인기 태그

인프런 TOP Writers

주간 인기글