묻고 답해요
160만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결함수형 프로그래밍과 JavaScript ES6+
프론트엔드 실무에서 어떤때에 쓰이는지 궁금합니다
안녕하세요. 추석챌린지로 수강하고있어 미션으로 질문을 남기게되었습니다.함수형프로그래밍과 지연성 확장성… 의 중요성을 알게되긴했는데 실무에서 어떤때에 쓰일수있는지… 궁금합니다.
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
Promise 객체
안녕하세요! 강의 너무 잘 듣고 있습니다 ㅎㅎ21강 비동기 처리 부분에서 비동기란 무엇인지 너무 잘 알려주셔서 어느정도 이해를 했다고 생각했습니다.setTimeout을 활용해서 시간으로 생각하니까 이해가 잘 되는것 같아요! 그 다음 강의에서 Promise 라는 부분이 나오는데, const promise = new Promise()이와 같은 생성자 함수(?)로 Promise 객체를 생성해서 사용하는 이유가 궁금합니다.정확히는 Promise 객체가 무엇인지 잘 와닿지 않습니다 ㅠㅠ 강의를 듣다 보면 "Promise를 반환한다." 라는 말을 자주 들어볼 수 있는데, 이 말이 잘 이해가 안되고 있어서 이렇게 질문 남겨봅니다.
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
강의를 들으면서 궁금한 점
Spring(Java)을 약 1~2년 정도 공부하다가, 최근 입사 후 NestJS를 새롭게 배우고 있습니다.공부하기 위한 강의를 듣던 중 문득 궁금증이 생겨 이렇게 질문을 남깁니다.NestJS를 사용하는 이유가 무엇일까요?제가 지금까지 배워온 관점에서 보면, Spring은 생태계가 훨씬 풍부하고 레퍼런스도 많으며, 엔터프라이즈 환경에서 안정성이 매우 높다고 느껴졌습니다.반면 NestJS는 비동기 I/O 처리에 강점이 있어 성능적으로 빠르다는 인상을 받았지만, 단순히 그 이유만으로 NestJS를 선택해야 할까 하는 의문이 들었습니다.물론 기술 선택에는 여러 요소가 있겠지만, 실무적으로나 기술적으로 Spring 대신 NestJS를 선택하는 명확한 이유가 무엇인지 궁금합니다.단순 궁금증이었습니다...!
-
미해결함수형 프로그래밍과 JavaScript ES6+
함수형 프로그래밍 심화 강의 자료 추천
좋은 강의 덕분에 함수형 프로그래밍에 더 관심을 가지게 됐습니다. 😊함수형 프로그래밍을 더 깊에 배우고 싶은데 추천해주실만한 책이나 강의가 있을까요?
-
미해결TS/JS 디자인 패턴 with Canvas: 제로초에게 제대로 배우기
undo 구현
안녕하세요 좋은 강의 잘 듣고 있습니다 undo 기능을 따라 구현하던 중 이슈가 있어 질문 드립니다pen mode로 그린 뒤 eraser mode에서 일부 지움 -> undo 실행-> 화면이 모두 지워집니다 원인은 eraser mode에서 mousedown 시 ctx.globalCompositeOperation = 'destination-out' 로 바뀐 상태가 유지된 채 restore() 내부에서 drawImage()가 실행되기 때문인 것 같은데요, 제로초님이라면 eraser mode 종료 시점 (mouseup)에서 source-over로 되돌리는 방식이랑restore에서 source-over로 바꾼 뒤 drawImage()하는 것 또는 제 3의 장소??어떤 곳에 작업하실지 여쭙고 싶습니다
-
해결됨프론트엔드 마스터클래스
학습자료는 따로 공유가 안되는건가요?
그 전까지는 크게 불편함이 없었는데 이번 장에 위에 설명이 건너뛰기가 돼서 놓치게 되네요. 다양한 학습자료 제공에 miro형식 파일이라고 강의 소개에 적혀있긴한데, 따로 첨부파일이나 링크는 등록이 안돼있는것 같아서요.
-
미해결자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
알고리즘 학습법 관련해서 질문드립니다.
안녕하세요 코딩테스트를 공부하고 있는 학생입니다. 코딩테스트를 공부할때 모르는 문제를 마주하면 AI를 통해서 알고리즘이나 순서에 관해 힌트를 얻는 편인데, 어떤 방식으로 공부해나가야 하는지 추천하시는 방법이 있는지 궁금합니다
-
해결됨프론트엔드 빌드 시스템 완벽 가이드 - Part.1: 모듈 시스템
번들러 이해 및 학습 방향에 대한 질문입니다.
안녕하세요, 강의 잘 듣고 있습니다!최근 개인 프로젝트로 래핑 라이브러리를 만들고 있고 번들러로 Rolldown을 사용하고 있습니다.강의에서 언급된 Rollup과 구조가 유사하고 기본 개념은 거의 동일하다고 알고 있습니다. Rolldown을 사용하고 있는 상황에서 Webpack이나 Rollup의 구조를 먼저 이해하는 것이 학습에 도움이 될까요? 학습 우선순위나 접근 방식을 어떻게 잡는게 좋을지 궁금합니다.
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
리액트 개발자 도구 현업 사용 빈도
안녕하세요, 현재 Vue 2.0을 사용하고 있으며, React로 이직을 하고자 해당 강사님의 강의를 수강하고있습니다.혹시 현업에서도 해당 도구를 많이 사용하는지 빈도가 궁금합니다. Vue를 사용하면서는 그러지아니하다보니 이것을 알고있는게 좋은지 파악이 안된다보니 쌩뚱한 질문을 드려 죄송합니다.
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
cityList 렌더가 안되는 문제
강의 영상대로 코드를 작성하고, localhost:3000을 열어보니 다음과 같은 오류가 계속 뜨네요 ㅜㅠㅠSyntaxError: Unexpected identifier 'App'. import call expects one or two arguments. 다음은 server.js 입니다const express = require("express"); const path = require("path"); const app = express(); const PORT = 3000; //현재 탐색기에 위치한 폴더들에 서버가 접근할 수 있도록 하는 코드 //join 안에 경로 작성 app.use(express.static(path.join(__dirname, ".."))); //어떤 경로의 요청이 오던지 항상 동일한 index.html 파일을 반환할 수 있도록 코드 작성 app.get("/*splat", (req, res) => { res.sendFile(path.join(__dirname, "..", "index.html")); }); //우리가 설정한 포트번호에서 서버가 항상 요청을 듣고 있을 수 있도록 하는 코드. app.listen(PORT, () => { console.log("START SERVER"); }); 다음은 index.js 입니다import App from "./App.js"; const $app = document.getElementById("app"); new App($app); 무엇이 문제일까요? import 경로를 계속 수정해봐도 같은 에러가 뜹니다 ㅠㅠ
-
미해결TailwindCSS 완벽 마스터: 포트폴리오부터 어드민까지!
tailwindcss 와 ai tool
ai tool(cursor, claude code ...) 에서 tawilwindcss 를 다룰 때, 팁이나 주의해야 할 점에 대해서 공유해주셔도 좋을것 같다는 생각이 들었습니다. 🙂
-
미해결시나브로 자바스크립트
virtual dom과 관련된 인식 피드백
안녕하세요.강의 내용이 좋아서 재밌게 잘 보고 있습니다. 피상적으로 virtual dom을 접했을때는 virtual dom과 dom을 비교하는 글들위주로 보다보니 dom은 전체를 렌더링해서 느리고 virtual dom은 일부만 조작해서 성능이 향상된다는 인식이 있었는데요.강의를 듣다보니 virtual dom의 기능이 이런 방향과 다른결이라고 느꼈습니다. 강의에서 이해한 내용과 찾아본 지식을 종합해서 virtual dom에 대한 나름대로의 정리를 해보았는데요.제대로 인식한 것이 맞는지 피드백이 가능할까요? dom의 렌더링과 virtual dom의 렌더링은 서로 다른 시점이고 다른 책임을 가지고 있다.virtual dom은 dom렌더링을 낚아채서 빠르게 최적화하는게 아니고 dom렌더링은 브라우저가 항상 진행하는것이다.virtual dom은 빠른호출이 아니라 개발편의성 관점으로 보아야한다.전체 트리에서 변경된부분을 찾기 때문에 하드코딩된 것과 비교해 호출속도에 있어서 오히려 오버헤드가 있을수있다. 기존의 상태가 변경될때, 필요한 요소를 일일히 찾아서 innerHTML로 업데이트하는 과정을 virtual dom을 통해 추상화하여 제공하는것이다.필요한부분만 업데이트하는것이 중요한것은 17.1 innerHTML and its inefficiency에서 말씀하신대로 상태유실가능성 방지를 위한것이다.
-
미해결TS/JS 디자인 패턴 with Canvas: 제로초에게 제대로 배우기
[프론트엔드 문서화 관련 질문]
안녕하세요, 제로초님.프론트엔드 문서화 관련하여 질문을 드릴 게 있습니다.저희 회사에서 단기간에 규모가 큰 프로젝트를 진행하다보니 AI의 도움을 빌려 만들기는 만들었는데 문서화가 제대로 되지 않은 상태입니다.최근 한 명의 백엔드 개발자가 프론트엔드도 함께 개발을 하게 되어 문서화의 필요성을 느끼고 있는데, 문서화에 대한 경험이 없어 제로초님께 여쭤봅니다.현재 폴더 구조는 FSD를 채택하여 개발 중입니다.구상중인 것은 Slice 단마다 문서를 만드려고 하는데,해당 Slice에 포함된 파일의 사용 방식(API input값, output 값 등)에 대해 작성하고, store(zustand)에 저장된 값을 적고, ui에서 필요한 정보값들에 대해서도 적어보려고 합니다.이렇게 모든 폴더에 정리하게 된다면 못해도 50개가 넘는 문서가 만들어지게 될텐데, 괜찮은 방법인지 확신하지 못하겠네요.(현재 회사에 있는 개발자분들은 딱히 관심이 없어보이십니다ㅠ)제로초님이라면 해당 문서에 어떤 내용을 담으실지 궁금합니다.그리고 프로젝트 전체를 소개하는 문서에는 Tech Stack, 프로젝트 구조 이외에 어떤 항목을 넣는 것이 좋을지도 궁금합니다.이 수업에서 배운 디자인패턴에 대해서도 작성하는 것이 좋을까요?
-
해결됨[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
DELETE 요청의 반환값은 어떤 기준으로 결정하는 게 좋을까요?
CRUD 중 DELETE 요청의 경우 어떤 기준으로 반환 타입을 정하는 게 좋을지 궁금합니다.제가 생각하기에는 아래 두 가지 방식이 있을 것 같습니다.강사님께서는 이러한 상황에서 어떤 기준을 표준으로 사용하시는지 궁금합니다.1. 일관된 응답return { success: true, data: null };CREATE, READ, UPDATE와 동일하게 성공 여부를 명시하고 data는 null로 처리하여 응답 구조를 통일하는 방식입니다.이렇게 하면 프론트엔드에서 일관된 형태로 응답을 처리할 수 있을 것 같습니다.2. HTTP 표준 준수 (204 No Content)@HttpCode(204)응답 본문을 따로 내려주지 않고 상태 코드만 반환하는 방식입니다.이 경우 RESTful 표준에 부합하고 불필요한 네트워크 비용을 줄일 수 있을 것 같습니다.다만 프론트엔드에서는 응답 본문이 없어 분기 처리가 필요할 수도 있을 것 같습니다.이 두 가지 방식 중에서 실무에서는 어떤 기준으로 선택하시는지 또는 프로젝트 성격에 따라 구분하는 기준이 있을지 궁금합니다.
-
미해결[JS] Phaser 게임 제작 - 뱀파이어 서바이벌 클론
physics.closest()는 중심점 기준인가요, 충돌 영역 기준인가요?
this.physics.closest()가 Mob과 플레이어의 거리를 계산할 때단순히 중심 좌표 기준으로 계산되는 건지, 아니면 물리엔진에서 사용하는 충돌 영역 기준으로 계산되는 건지 헷갈립니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
깃 레포지터리 소스
안녕하세요.강의를 수강하는 과정에서 놓친 부분이 있어서 강의 코드를 다운받아서 수강하고 싶습니다.깃 레포지터리 클론할 수 있는 링크를 주실 수 있을까요?
-
미해결함수형 프로그래밍과 JavaScript ES6+
함수형 자바스크립트 프로그래밍 책
안녕하세요 강의 잘 보고 있습니다 🙂 멀티패러다임 프로그래밍 책을 최근에 보고 더 자바스크립트 근간을 공부할 필요가 있구나 싶어서 이 강의도 듣게 되었습니다. 다름이 아니라 '함수형 자바스크립트 프로그래밍'이라는 책도 출간이 되어 있는 걸로 알고 있는데, 혹시 강의와 같은 내용일까요?
-
미해결[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
쿵쿵따 조건문 질문입니다.
제로초님께서 강의에서 작성해주신 if문을 보면,if (!word || (word[word.length-1] === newWord[0] && newWord.length ===3 )) 입니다.||연산자를 기준으로 첫 번째 조건이 "첫 제시어가 비어있는가"이고, 해당 조건만 true일 때도 실행이 되게됩니다.그런데 첫 제시어의 글자수가 3보다 길거나 짧아도 게임진행이 되어버리는데 원래 의도하신건지 궁금합니다.
-
해결됨Cursor AI로 만들면서 배우는 Web & Javascript
Gemini API Key 관련 문의입니다.
강사님, Vibe 코딩에 관심이 있어서 강의를 수강하고 있는데앞부분에 알려주신 API KEY 입력 관련해서 Google AI Studio에서 API KEY 받아서 알려주신 대로 Cursor 입력해서 사용하는데,, Cursor 화면 인터페이스가 영상 촬영하신 2월달과 달라진거 같고설명주시는 Gemini 2.0 flash도 조회가 안되는거 같은데... 현재 Cursor 환경이 달라진 걸까요? 궁금해서 문의드립니다.
-
해결됨바이브 코딩 With Claude Code로 웹 서비스 만들기
Cluade Code 사용 시 TaskMaster API key 필요 유무
안녕하세요. 10강에서 TaskMaster에서 복잡도를 사용하기 위해서 Perplexity API 를 입력해서 쓰셨는데, Cluade Code를 사용하면 자체 Provider를 사용하는 거 같은데 다른 이유가 있으신가요?https://github.com/eyaltoledano/claude-task-master/blob/main/docs/examples/claude-code-usage.md