안녕하세요 선생님 !! 자바스크립트에 대한 기초가 아예 없을 경우에는 다른 분의 자바스크립트 강의를 듣고 이 강의를 봐야 할까요?? 아니면 그냥 바로 진행해도 될까요봐야 한다면 자바스크립트를 얼마나 알고 이 강의를 진행하는 것이 좋은지 알고 싶습니다!

"html이 어플레이케이션 중심으로 전환되었다"는 뜻이html5 에서는 이전과는 달리, 단순 줄글 텍스트 데이터 형식으로 콘텐츠를 표현하는 것이 아니라,canvas나 video와 같이 텍스트 형식을 벗어난 엘리먼트들로 콘텐츠를 표현한다는 의미일까요? 그리고 여기서 정확히 "애플리케이션"이 의미하는 바가 무엇인지 궁금합니다. canvas, video와 같은 엘리먼트의 구현체(?)가 DOM에 객체를 추가하기 위해 계산등을 처리해주기에 이들이 "애플리케이션"으로써 분류된걸까요? 그리고 "마크업"이라는 것을 텍스트 형식으로 표시된 의미론적으로 분류된 텍스트라고 이해해도 될까요? 그렇다면 canvas도 마크업으로써 콘텐츠를 표현하는 것이지만, html 이 parse되어 DOM 으로 만들어질때, 즉 메모리에 객체 형태로 올라갈 때 그 형식이 텍스트가 아닌 다른 무언가이기에 "어플리케이션"이라는 표현이 사용되는 것일까요? 그렇다면 XHTML와 그 이전 버전에서는 canvas, video같은 앨리먼트 없이 오로지 텍스트를 표현하는 태그들만 사용되었던건가요? 좋은 강의 늘 감사합니다.

이거 deprecated 됐다는데 그냥 받으면 되나요?

html, body { margin: 0px; width: 100px; background-color: rgb(246, 246, 246); } #root { background-color: white; max-width: 600px; width: 100%; margin: 0 auto; min-height: 100vh; height: 100%; box-shadow: rgba(100, 100, 100, 0.2) 0px 0px 29px 0px; } body * { font-family: "NanumPenScript"; } 이렇게 작성하셨는데 구현하신 화면 보면 root가 가운데 정렬 되어있지만 제가 구현하면 css는 좌측 세로 정렬 되는데 원인이 있을까요?

선생님  강의에 보면 getElementById로 <div class="bookmark-item-add-btn">  이 부분 가져오는데, 강의를 여러번 돌려봐도 아이디는 없고 클래스만 설정했는데 어떻게 코드가 강의에선 잘 돌아가는지 모르겠어요 ㅠㅠ똑같이 따라하려는데 안되네요 ㅠㅠ

.page:nth-child(2) 에 .back-btn 버튼이 눌리지 않아, 원본 코드를 보니 .page-face 에 transform-style: preserve-3d; 가 추가 되어 있어서 적용했습니다. 그런데, transform-style: preserve-3d; 를 추가하면 .back-btn 버튼은 눌리지만 사진과 같이 나옵니다. transform-style: preserve-3d; 를 추가하지 않으면 원래대로 처럼 나오지만 .back-btn 버튼이 클릭이 안됩니다. 어떻게 해결해야할까요 ??

안녕하세요, 강사님. 이제 강의를 신청하고 본격적으로 수업을 들으려고 합니다제가 현재 리눅스(페도라) 버전 노트북과 Window 버전 데스크탑을 이용 중인데, 혹시 리눅스로도 해당 강의를 따라갈 수 있을까요? (첫 개발이라 좀 더 쉬운 환경에서 작업하고 싶기는 합니다!)제가 주로 카페나 외부에서 혼자 노트북으로 작업하는 일이 많아서 리눅스로도 해당 강의 내용을 충실히 이행할 수 있는지 여쭤보고 싶어서 문의 남겼습니다. 답변 부탁드리겠습니다:> 아, 그리고 좋은 강의 만들어주셔서 감사합니다!

선생님 인강 잘듣고 있읍니다인강에선 react 설치시 vite 로설치하고 책에서는 create React App 으로 설치하는데대략검색해보니 vite 설치시 효울적이고 빠르다고 하는데책으로 공부하면 create React App으로 설치해도 상관없나요

인프런 아이디 : @sbn041778144인프런 이메일 : sbn04177@naver.com깃헙 아이디 : sbn04177@naver.com깃헙 아이디 : EunJaemm

안녕하세요, 강의에서 훅(useState, useEffect) 사용 규칙과 내부 동작 원리를 공부하다가 궁금한 점이 있어 질문드립니다.React는 훅을 순서 기반으로 관리한다고 배웠습니다. 그래서 다음과 같은 규칙이 있는 걸로 알고 있습니다:훅은 컴포넌트 최상위에서만 호출해야 한다.조건문, 반복문, 중첩 함수 안에서 훅을 호출하면 안 된다.이와 관련해 궁금한 점은 다음과 같습니다:개발하다 보면 상태가 많아지고 상태마다 핸들러도 많아지게 되어 코드가 길어지게 됩니다. 그러다 보니 소스코드를 한눈에 파악하기 어려워지는 것 같습니다.실무에서는 상태별로 핸들러를 묶어서 작성하는 패턴을 많이 쓰나요? 예를 들어:const [count, setCount] = useState(0); const handleChangeCount = () => { ... };const [name, setName] = useState(''); const handleChangeName = () => { ... };이런 방식으로도 구현을 하시는지, 아니면 useState는 최상단에서 묶어 관리하고 handler는 handler끼리 useEffect는 useEffect 끼리 작성하는 것이 일반적인지 궁금합니다.

초기 세팅에서 "yarn start:dev"실행 시, Nest 앱이 포트 listen까지 잘 되어 '/' path 요청 시 'Hello World!' 문자열을 잘 응답하는 것을 확인했습니다. 하지만 app.module.ts에 타입 ORM 정보를 넣은 후, import { Module } from '@nestjs/common'; import { AppController } from './app.controller'; import { AppService } from './app.service'; import { TypeOrmModule } from '@nestjs/typeorm'; @Module({ imports: [ TypeOrmModule.forRoot({ type: 'postgres', host: '127.0.0.1', port: 5432, username: 'postgres', password: 'postgres', database: 'typeormstudy', entities: [], synchronize: true, }), ], controllers: [AppController], providers: [AppService], }) export class AppModule {} 실행을 시키면 다음에서 그냥 멈추어 버립니다. [Nest] 21556 - 2025. 11. 16. 오후 11:55:25 LOG [NestFactory] Starting Nest application...[Nest] 21556 - 2025. 11. 16. 오후 11:55:26 LOG [InstanceLoader] TypeOrmModule dependencies initialized +1036ms[Nest] 21556 - 2025. 11. 16. 오후 11:55:26 LOG [InstanceLoader] AppModule dependencies initialized +0ms 왜 타입ORM 설정을 하니 Nest 앱이 3000 포트에서 실행을 하지 못하고 멈추는지 원인을 못 찾겠네요 ㅠ그래서 [RoutesResolver] 로그가 찍히지 않습니다.  cf_sns 프로젝트에서는 잘 넘어갔는데,typeorm study 부분에서 이렇게 막히네요; 딱히 차이는 없는데 이유를 모르겠습니다 ㅠ

11강에서는 removeEventListener 함수로 리스너를 명시적으로 제거하지 않는 한 요소가 사라지더라도 메모리에 계속 남아 있다고 설명하셨는데요. 12강에서는 요소를 제거하는 방식으로도 리스너를 제거할 수 있다고 해서 내용이 충돌하는 것 같아요.

문득 강의 수강 중에 강사님께서 개발자모드를 활성화하면 전체적인 화면이 반응형으로 되어있는데 쭉 수강하다가 제꺼에서는 지정이 안되있어 어느 챕터를 놓쳤는지 감이 안옵니다ㅜㅜ 혹여나 다른 분들도 비슷한 사례가 있을까싶어 여쭈어봅니다.

isLoading 기능을 추가했는데 수정하기, 다이어리 페이지에서 새로고침하면 존재하지 않는 일기입니다. 라고 나오네요.https://github.com/pdh9311/onebite-react 작성했던 코드 입니다.import { Route, Routes } from "react-router-dom"; import "./App.css"; import { createContext, useEffect, useReducer, useRef, useState } from "react"; import Diary from "./pages/Diary"; import Edit from "./pages/Edit"; import Home from "./pages/Home"; import New from "./pages/New"; import Notfound from "./pages/Notfound"; function reducer(state, action) { let nextState; switch (action.type) { case "INIT": return action.data; case "CREATE": nextState = [action.data, ...state]; break; case "UPDATE": nextState = state.map((item) => String(item.id) === String(action.data.id) ? action.data : item ); break; case "DELETE": nextState = state.filter( (item) => String(item.id) !== String(action.data.id) ); break; default: nextState = state; } localStorage.setItem("diary", JSON.stringify(nextState)); return nextState; } export const DiaryStateContext = createContext(); export const DiaryDispathContext = createContext(); function App() { const [isLoading, setIsLoading] = useState(true); const [data, dispatch] = useReducer(reducer, []); const idRef = useRef(0); useEffect(() => { const storedData = localStorage.getItem("diary"); if (!storedData) { setIsLoading(false); return; } const parsedData = JSON.parse(storedData); if (!Array.isArray(parsedData)) { setIsLoading(false); return; } let maxId = 0; parsedData.forEach((item) => { if (Number(item.id) > maxId) { maxId = Number(item.id); } }); idRef.current = maxId + 1; console.log(parsedData); dispatch({ type: "INIT", data: parsedData, }); setIsLoading(false); }, []); const onCreate = (createdDate, emotionId, content) => { dispatch({ type: "CREATE", data: { id: idRef.current++, createdDate, emotionId, content, }, }); }; const onUpdate = (id, createdDate, emotionId, content) => { dispatch({ type: "UPDATE", data: { id, createdDate, emotionId, content, }, }); }; const onDelete = (id) => { dispatch({ type: "DELETE", data: { id, }, }); }; if (isLoading) { <div>데이터 로딩중입니다....</div>; } return ( <> <DiaryStateContext.Provider value={data}> <DiaryDispathContext.Provider value={{ onCreate, onUpdate, onDelete }}> <Routes> <Route path="/" element={<Home />} /> <Route path="/new" element={<New />} /> <Route path="/diary/:id" element={<Diary />} /> <Route path="/edit/:id" element={<Edit />} /> <Route path="*" element={<Notfound />} /> </Routes> </DiaryDispathContext.Provider> </DiaryStateContext.Provider> </> ); } export default App; import { useContext, useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; import { DiaryStateContext } from "../App"; //커스텀 훅 const useDiary = (id) => { const data = useContext(DiaryStateContext); const [currDiaryItem, setCurrDiaryItem] = useState(); const nav = useNavigate(); useEffect(() => { console.log("useDiary"); const currentDiaryItem = data.find( (item) => String(item.id) === String(id) ); if (!currentDiaryItem) { window.alert("존재하지 않는 일기입니다."); nav("/", { replace: true }); } setCurrDiaryItem(currentDiaryItem); }, [id]); return currDiaryItem; }; export default useDiary;

안녕하세요. 좋은 강의 감사합니다!26. 클래스와 스타일을 다루는 가장 강력한 방법 – classList, style, 그리고 리플로우까지 에서 인라인 스타일로 스타일을 바꾸면 리플로우/리페인트가 자주 발생할 수 있어 성능에도 안 좋을 수 있다고 설명하셨는데요.예시로 들어주신 코드에서는 어차피 자바스크립트 엔진이 싱글 스레드라 클래스든 인라인 스타일이든 모두 반영된 후에, 리플로우/리페인트가 발생하기 때문에 성능적으로는 유의미한 차이가 없을 것 같은데요. 좀 더 구체적인 설명을 해주실 수 있을까요?ChatGPT 답변도 같이 첨부합니다.https://chatgpt.com/share/69181628-34d0-8007-8e81-02401c649370

그랩님, 강의 잘 듣고 있습니다.다름이 아니라 궁금한 사항(=에러 해결방법)이 필요해서 글을 남기게 되었습니다.101강에서 Axios 에러(400)가 안드로이드 스튜디오 에뮬레이터에서 발생하고이어 아래의 추가 사진2에서 보시다시피 502 Bad Gateway가 발생하여 어떻게 해결 할 수 있는지에 대해 알고 싶어서 질문 드립니다.일단 101강 처음부터 ~ 4분 52초까지 그랩님께서 작성하신 소스코드를 똑같이 작성 후결과를 보려하는데,농구공 그림(세부사항:판매자:그랩,가격,상품명등등) 이 나오지 않아서 이것을 어떻게 하면 그랩님과 같은결과를 볼 수 있을지에 대해 여쭈어봅니다.사진 1 첨부 : 판매되는 상품들 밑에 100강만 들었을 시에 농구공 화면이 잘 나왔으나 101강 4분 52초까지의 내용의 소스코드를 입력 후 결과값 보면 400 에러도 발생하고 농구공도 안나오게 됩니다.어떻게 해야 하나요? 사진 2 첨부 : ngrok http 8080후 진행 하면, 아래와 같이 502 Bad Gateway라고 뜨는데, 이 에러 의미와무엇이 잘못된건지 그리고 어떻게 해결 해야 하는지 답변 주시면 좋겠습니다.이어서 중간에 아래 사진과 같은 절차를 겪었었는데요, 필요할 것 같아 참고로 스샷을 첨부합니다.axios 설치 후 grab-market-mobile에서 npm start하니 다른 프로세스에의해 포트 8081이 사용되고 있는데 8082 포트를 대신 쓸거냐는 질문에서 y or n 하라는데 y하게 되었는데요, 이 다음에 어떻게 해야그랩님 강의와 똑같이 잘 작동할 수 있을까요? 더불어서 또 다른 에러가 발생하는데요, 또 다른 에러는 cmd에서 ngrok http 8080 입력 후 포워딩 주소를 크롬브라우저에 복사 후 붙여넣으면,이전 밑에 질문에서는 정상 작동되었으나지금은 아래와 같이 바뀐 에러가 발생하였습니다.해결법을 모르기에 아래에 사진을 첨부합니다. 꼭 답변 부탁 드립니다.그랩님의 답변 부탁 드립니다.

안녕하세요. 목차를 살펴보다가 이상한 점을 발견해서 문의합니다.(책 맨 앞의 목차가 아니라 "목차 메뉴"의 출력이 이상해서 문의합니다.) 저는 알라딘에서 전차잭으로 구매했는데 홈페이지 상세 페이지에서는 순서가 제대로 잘 나와있는 것 같은데... 제 전자책에서는 목차가 이상하게 출력됩니다.챕터10 -> 파트4(300페이지) 챕터14~17까지 순서대로 나오다가 -> 챕터 11~13까지 나옵니다.이건 해당 구매처로 문의해야 하는 걸까요?

안녕하세요.좋은 강의 들으며 많은 것을 배우고 있어서 감사히 생각하고 있습니다.그런데 강의 들으면서 작성한 코드 (예를 들면 감정 일기장 코드)를 제 github repository에public으로 올려도 되나요?답변해주시면 감사합니다.  

그랩님, 강의 잘 듣고 있습니다.다름이 아니라 궁금한 사항(=에러 해결방법)이 필요해서 글을 남기게 되었습니다.101강에서 Axios 에러(400)가 안드로이드 스튜디오 에뮬레이터에서 발생하고이어 아래의 추가 사진2에서 보시다시피 502 Bad Gateway가 발생하여 어떻게 해결 할 수 있는지에 대해 알고 싶어서 질문 드립니다.일단 101강 처음부터 ~ 4분 52초까지 그랩님께서 작성하신 소스코드를 똑같이 작성 후결과를 보려하는데,농구공 그림(세부사항:판매자:그랩,가격,상품명등등) 이 나오지 않아서 이것을 어떻게 하면 그랩님과 같은 결과를 볼 수 있을지에 대해 여쭈어봅니다.사진 1 첨부 : 판매되는 상품들 밑에 100강만 들었을 시에 농구공 화면이 잘 나왔으나 101강 4분 52초까지의 내용의 소스코드를 입력 후 결과값 보면 400 에러도 발생하고 농구공도 안나오게 됩니다.어떻게 해야 하나요?사진 2 첨부 : ngrok http 8080후 진행 하면, 아래와 같이 502 Bad Gateway라고 뜨는데, 이 에러 의미와무엇이 잘못된건지 그리고 어떻게 해결 해야 하는지 답변 주시면 좋겠습니다.그랩님의 답변을 기다립니다.

 감정일기장 최종완성본 링크는 어디에있나요??