안녕하세요basic, bearer 토큰을 이미 범용적으로 널리 사용된다고 하셨는데 궁금한점이로그인할 때 id/pw 를 header 에 넣어서 보낸다고 하셨는데패킷을 탈취하면 너무 취약할 것 같아서요. 제가 웹개발자가 아니라 실무에선 실제로 어떻게 쓰는지 알고싶어서 질문남깁니다.

강의 내용처럼 그대로 따라 했을 때 다음과 같이 됩니다.1. 아래 사진 처럼 breakpoint 설정 시 빨간색이 아니라 빈원이 나옵니다. 실제 실행하였을 경우 break가 걸리긴 하는데 ts파일이 아닌 compile된 js 파일로 넘어갑니다. 인터넷 찾아보고 sourceMap 관련된거 같아서 tsconfig 파일에 sourceMap: true 넣고 launch.json에 sourceMaps: true 넣어봤는데도 변함이 없네요 어떤 부분을 확인해봐야할까요?

class의 메서드는 선언식으로 쓰는걸 좋아하는데bind는 쓰기 싫어서 bind 필요한것만 arrow function 쓰면 클래스 메서드가 선언식이랑 표현식 섞인게 뭔가 일관성이 없어보이더라구요.. (섞어쓰면 나중에 이거 bind 필요한 메서드였나? arrow function으로 했었나? 헷갈릴것같기도 하고?)

10.3) React.memo와 컴포넌트 렌더링 최적화 강의를 보고, 투두 리스트 아이템에 체크박스를 클릭했을 때,Header 컴포넌트 외에 Editor 컴포넌트도 불필요하게 리렌더링이 되고 있어 리렌더링 되지 않도록 코드를 수정하였습니다.코드를 수정해서 더 이상 리렌더링이 되지 않고 있는데이러한 성능 최적화가 정말 필요한 건지에 대한 의문이 듭니다.거대한 컴포넌트의 경우 불필요한 리렌더링을 막는 것은 정말 필요하고 좋을 것 같은데 Editor 컴포넌트나 Header 컴포넌트 정도의 작은 컴포넌트의 리렌더링도, 불필요하게 일어난다면 막는 것이 좋은 건지 아니면 굳이 최적화가 필요 없는 지 실무 관점에서 궁금합니다. 

const promise = new Promise((resolve, reject) => { setTimeout(() => { resolve(1); }, 1000); }); promise .then((value) => { console.log(`${value} 번째 Promise 의 then`); return new Promise((resolve, reject) => { setTimeout(() => { resolve(2); }, 1000); }); }) .then((value) => { console.log(`${value} 번째 Promise 의 then`); return new Promise((resolve, reject) => { setTimeout(() => { reject(new Error('강제 에러')); }, 1000); }); }) .catch((error) => { console.log(error); });이런 형태로 then 과 catch 를 메서드 체이닝할 수 있는 이유는 then 과 catch 메서드가 Promise 를 반환하기 때문이라고 이해를 했습니다. 그런데 then() 메서드에 전달하는 콜백 함수에서 return new Promise() 를 하여 Promise 를 반환하면 해당 Promise 가 반환된다고 이해를 했는데 어떻게 그것이 가능한 지 잘 이해가 안됩니다. then 은 동기적으로 실행되고 then 메서드에 전달된 콜백은 마이크로 태스크 큐에 등록된 후에 콜스택이 모두 비어졌을 때 호출된다고 이해를 했는데... 연결고리가 이어지지 않는 느낌입니다.

강사님 강의 보면서 저는 vite 를 이용해서 했는데요,그런 경우는 깃허브에 배포를 어떻게 해야 하나요?npm run buildnpm install gh-pages 그 다음에 package.json 파일도 아래처럼 수정을 했습니다."homepage": "깃허브주소 넣음",  "deploy": "gh-pages -d dist" 그다음에 다시 npm run buildnpm run deploy 하면 깃허브에 gh-pages 가 생겨야 하는데 생기지를 않아서요....어디 부분을 잘못 한걸까요?

마지막에 빌드를 하려고 하는데요,저는 vite를 이용해서 했구요,깃허브에 페이지 올리고 pages까지 오픈을 했습니다. 그리고 나서 npm run build 를 하면 강사님하고 다르게 build 폴더가 아니고 dist폴더가 만들어지는데요,혹시 그럴경우엔 깃허브에 배포할때 명령어가 혹시 강의내용과 다르게 해야 하는 부분이 있는지요? npm install gh-pages package.json 파일에서 소스 추가할때"deploy": "gh-pages -d build" 위의 파일을 수정한 후 다시 npm run buildnpm run deploy여기까지 해도 깃허브 저장소에서 gitpages가 생기기 않습니다... 

해당 챕터에서 강의대로 진행했고 몇번을 다시 확인해봐도차이점을 도통 찾지 못해서 문의드립니다.Home.jsx에서 데이터를 필터걸어도 걸리지않는 상황DiaryList.jsx에서 DiaryItem으로 데이터를 보내도 받는쪽에서 받지 못하는 상황(개발자도구에서는 워닝으로 hook.js:608 Warning: Each child in a list should have a unique "key" prop) 발생  이하 소스첨부 드립니다. App.jsximport './App.css' import { useReducer, useRef, createContext } from 'react'; import { Routes, Route } from 'react-router-dom'; import Home from './pages/Home'; import Diary from './pages/Diary'; import New from './pages/new'; import Edit from './pages/Edit'; import Notfound from './pages/Notfound'; const mockData =[ { id : 1, createdDate : new Date("2024-12-6").getTime(), emotionId : 1, content : "1번 일기내용", }, { id : 2, createdDate : new Date("2024-12-5").getTime(), emotionId : 2, content : "2번 일기내용", }, { id : 3, createdDate : new Date("2024-11-15").getTime(), emotionId : 3, content : "3번 일기내용", }, ] function reducer(state, action){ switch(action.type){ case 'CREATE' : return [action.data, ...state] case 'UPDATE' : return state.map((item)=> String(item.id) === String(action.data.id) ? action.data : item) case 'DELETE' : return state.filter((item) => String(item.id) !== String(action.id)); default : return state; } } export const DiaryStateContext = createContext(); export const DiaryDispatchContext = createContext(); function App() { const [data, dispatch] = useReducer(reducer, [mockData]); const idRef = useRef(3); 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 : "DELTE", data : { id, } } ) } return ( <> <DiaryStateContext.Provider value={data}> <DiaryDispatchContext.Provider value={{ onCreate, onUpdate, onDelete, }} > <Routes> <Route path="/" element={<Home />}></Route> <Route path="/new" element={<New />}></Route> <Route path="/diary/:id" element={<Diary />}></Route> <Route path="/edit/:id" element={<Edit />}></Route> <Route path="*" element={<Notfound />}></Route> </Routes> </DiaryDispatchContext.Provider> </DiaryStateContext.Provider> </> ); }; export default App Home.jsximport { useState, useContext } from "react"; import { DiaryStateContext } from "../App"; import Button from "../components/button"; import Header from "../components/Header" import DiaryList from "../components/DiaryList"; const getMonthlyData = (pivotDate, data) =>{ const beginTime = new Date( pivotDate.getFullYear(), pivotDate.getMonth(), 1, 0, 0, 0 ).getTime(); const endTime = new Date( pivotDate.getFullYear(), pivotDate.getMonth() + 1, 0, 23, 59, 59 ).getTime(); console.log('필터시작일자 : ' + beginTime + '필터종료일자' + endTime) return data.filter((item)=> beginTime <= item.createdDate <= endTime); } const Home = () => { const data = useContext(DiaryStateContext); const [pivotDate,setPivotDate] = useState(new Date()); const monthlyData = getMonthlyData(pivotDate, data); console.log(monthlyData); const onIncreaseMonth = () => { setPivotDate(new Date(pivotDate.getFullYear(), pivotDate.getMonth() + 1) ); }; const onDecreaseMonth = () => { setPivotDate(new Date(pivotDate.getFullYear(), pivotDate.getMonth() - 1) ); }; return <div> <Header title = {`${pivotDate.getFullYear()} 년 ${ pivotDate.getMonth()+ 1 }월`} leftChild={<Button onClick={onDecreaseMonth} text="<" />} rightChild={<Button onClick={onIncreaseMonth} text=">" />} /> <DiaryList data={monthlyData} /> </div>; } export default Home;DiaryList.jsximport './DiaryList.css' import Button from "./button"; import DiaryItem from './DiaryItem'; import { useNavigate } from 'react-router-dom'; import { useState } from 'react'; const DiaryList = ({data}) => { const nav = useNavigate(); const [sortType, setSortType] = useState("latest"); const onChangeSortType = (e) => { setSortType(e.target.value); }; const getSortedDate = () => { return data.toSorted((a, b) => { if(sortType ==='oldest'){ return Number(a.createdDate) - Number(b.createdDate); } else { return Number(b.createdDate) - Number(a.createdDate); } }); } const sortedData = getSortedDate(); return ( <div className="DiaryList"> <div className="menu_bar"> <select> <option value={"latest"}>최신순</option> <option value={"oldest"}>오래된순</option> </select> <Button onClick = {() => nav("/new")} text={"새 일기 쓰기"} type={"POSITIVE"} /> </div> <div className="list_wrapper"> {sortedData.map((item)=><DiaryItem key={item.id} {...item}/>)} </div> </div> ); }; export default DiaryList;DiaryItem.jsximport getEmotionImage from "../util/get-emotion-image" import Button from "./button"; import "./DiaryItem.css"; import { useNavigate } from "react-router-dom"; const DiaryItem = ({id, emotionId, createdDate, content}) => { const nav = useNavigate(); return ( <div className="DiaryItem"> <div onClick={()=>nav(`/diary/${id}`)} className={`img_section img_section_${emotionId}`} > <img src={getEmotionImage(1)} /> </div> <div onClick={()=>nav(`/diary/${id}`)} className="info_section"> <div className="created_date"> {new Date(createdDate).toLocaleDateString()} </div> <div className="content">{content}</div> </div> <div className="button_section"> <Button onClick={()=>nav(`/edit/${id}`)} text={"수정하기"} /> </div> </div> ) }; export default DiaryItem;   

컬러 및 배경, 보더 처리00:43여기보면 tail 만 쳐도 emmit 이라고 해야 되나요. 팝업도움말이 뜨는데 저는 저런게 전혀 뜨지 않는데요.어떻게 해야 저런 도움말 팝업이 뜰 수 있나요?tailwind css intellisense 플러그인은 설치해놓은 상태입니다.

혹시나 기본 '/' 경로에서 펭귄눌렀다 popstate 로 뒤로갔을 경우'clicked' css가 먹지않는 현상,  강의 내용에서 저부분이 영상 짤려서 놓치기 쉬울꺼 같습니다. 저도 강의보면서 하다가 || 'all' 하는 부분 제대로 보기힘들어서못 적었다가 나중에 문제생겨서 로직 보다가 발견했습니다,  

코드 관련 질문은 아래와 같이 '코드블럭' 기능을 이용해주세요!+ 오류 메세지도 함께 올려주시면 좋아요 🙂console.log('hello');  이런식으로 구축했는데 프로젝트만 바꾸면 서버가 꺼져서요..

[tailwind.config.js]/** @type {import('tailwindcss').Config} */ module.exports = { content: ['./src/**/*.{html,js}'], darkMode: 'selector', }; [practice-test.html]<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Tailwind CSS</title> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="bg-white dark:bg-gray-900 dark:text-white"> <main class="container max-w-5xl mx-auto min-h-screen flex items-center justify-center" > <div class="flex flex-col items-center"> <h1 class="font-extrabold text-3xl">Tailwind CSS 다크모드</h1> <p class="mt-4">이 페이지는 다크 모드를 지원합니다.</p> <button id="darkmode_btn" class="bg-blue-500 px-4 py-2 rounded-md text-white mt-4" > 다크 모드 전환 </button> <div class="px-10 py-6 bg-white rounded-md shadow-md mt-20 dark:bg-gray-800" > <p>이 박스는 다크 모드에서 배경이 어두운 색으로 변합니다.</p> </div> </div> </main> <script> document.querySelector('#darkmode_btn').addEventListener('click', () => { document.documentElement.classList.toggle('dark'); }); </script> </body> </html> tailwind.config.js 의 경로는 아래 스크린샷으로 첨부하였습니다.  제가 무슨 설정을 빠트린건지 명확히는 모르겠는데 <head> 태그 내부에 <script> 태그로 아래와 같이 설정하면 버튼을 클릭했을 때 다크모드와 원래 상태로 정상적으로 토글이 되는데 tailwind.config.js 로 설정만 하면 토글이 안되네요 모든 페이지에 다크모드를 설정하기 위해서는 tailwind.config.js 를 통해서 다크 모드 활성화를 하는 것이 좋을 것 같아서 질문 남깁니다! 좋은 강의 감사드립니다.tailwind.config = { // darkMode: 'media', // 운영 체제의 모드에 맞게 설정 darkMode: 'selector', // 수동으로 설정 };

 docker-compose build가 안되요!ㅠㅠㅠㅠㅠ도커라 도커컴포즈 삭제하고 다시 까는거는 5시간동안 했는데...챗gpt가 하라는데로 5시간동안 했는데 해결이 안되네요!Traceback (most recent call last):File "urllib3/connectionpool.py", line 677, in urlopenFile "urllib3/connectionpool.py", line 426, in makerequestFile "<string>", line 3, in raise_fromFile "urllib3/connectionpool.py", line 421, in makerequestFile "http/client.py", line 1369, in getresponseFile "http/client.py", line 310, in beginFile "http/client.py", line 271, in readstatusFile "socket.py", line 589, in readintoConnectionResetError: [Errno 104] Connection reset by peerDuring handling of the above exception, another exception occurred:Traceback (most recent call last):File "requests/adapters.py", line 449, in sendFile "urllib3/connectionpool.py", line 727, in urlopenFile "urllib3/util/retry.py", line 410, in incrementFile "urllib3/packages/six.py", line 734, in reraiseFile "urllib3/connectionpool.py", line 677, in urlopenFile "urllib3/connectionpool.py", line 426, in makerequestFile "<string>", line 3, in raise_fromFile "urllib3/connectionpool.py", line 421, in makerequestFile "http/client.py", line 1369, in getresponseFile "http/client.py", line 310, in beginFile "http/client.py", line 271, in readstatusFile "socket.py", line 589, in readintourllib3.exceptions.ProtocolError: ('Connection aborted.', ConnectionResetError(104, 'Connection reset by peer'))During handling of the above exception, another exception occurred:Traceback (most recent call last):File "docker/api/client.py", line 214, in retrieveserver_versionFile "docker/api/daemon.py", line 181, in versionFile "docker/utils/decorators.py", line 46, in innerFile "docker/api/client.py", line 237, in _getFile "requests/sessions.py", line 543, in getFile "requests/sessions.py", line 530, in requestFile "requests/sessions.py", line 643, in sendFile "requests/adapters.py", line 498, in sendrequests.exceptions.ConnectionError: ('Connection aborted.', ConnectionResetError(104, 'Connection reset by peer'))During handling of the above exception, another exception occurred:Traceback (most recent call last):File "docker-compose", line 3, in <module>File "compose/cli/main.py", line 81, in mainFile "compose/cli/main.py", line 200, in perform_commandFile "compose/cli/command.py", line 70, in project_from_optionsFile "compose/cli/command.py", line 153, in get_projectFile "compose/cli/docker_client.py", line 43, in get_clientFile "compose/cli/docker_client.py", line 170, in docker_clientFile "docker/api/client.py", line 197, in initFile "docker/api/client.py", line 222, in retrieveserver_versiondocker.errors.DockerException: Error while fetching server API version: ('Connection aborted.', ConnectionResetError(104, 'Connection reset by peer'))[119730] Failed to execute script docker-compose   챗 gpt에 물어보고 똑같이 해봐도 해결이 안됩니다. ㅜㅜㅜㅜㅜ

todos.filter을 사용할 때 내부의 화살표함수에서 return 을 명시하지 않으면 값이 정상적으로 반환되지 않습니다. 강의에서는 return 을 별도로 작성하지 않았는데 값이 정상적으로 반환되는것 같네요 리액트 버전의 문제일까요..?

<input value={name} onChange={onChangeButton} placeholder={"이름"} />안녕하세요! 이번 강의 내용에서 return되는 부분에서 텍스트 박스를 형성하는 부분에 있는 위에 코드 부분에 대한 질문입니다! value={name}이 들어가는 이유는 무엇인가요?? 이 부분이 없어도 지장이 없는 것 같아 여쭤봅니다!

현재 실무에서 ORM(Prisma)을 채택해서 백엔드를 만들고 있어요.ORM으로 할 수록 Repository패턴과 조합이 좋지않다고 생각이 들고 실제 팀리더도 Repository패턴을 같이 쓰는거에 부정적이고 실제로 사용하지 않아요. 그렇다고 service 하나에 몰아 넣으니 저는 코드 읽기가 점점 힘들어지는거 같아요.대체할만한걸 검색해보니 CQRS패턴이나 Query Object가 나오는데 아니면 서비스파일을 여러개 두거나... 강사님 같은 경우에는 실무에서 어떻게 대처하시는지 궁금합니다.

11:42아래와 같이 for in을 배열에서도 사용이 가능한 것 같습니다!다만 권장되지는 않는 방법이라고 하네요.let arr = [1, 2, 3]; for (let i in arr) { console.log(arr[i]); }권장되는 방법: for...of, 일반 for 루프, forEach() 메서드 등

[0] Failed running 'server/index.js' [1] [1] VITE v4.4.4 ready in 271 ms [1] [1] ➜ Local: http://localhost:5173/ [1] ➜ Network: use --host to expose [0] Restarting 'server/index.js' [0] file:///Users/kim-yongmin/test-example-shopping-mall/server/index.js:9 [0] import productsJSON from './response/products.json' assert { type: 'json' }; [0] ^^^^^^ [0] [0] SyntaxError: Unexpected identifier 'assert' [0] at compileSourceTextModule (node:internal/modules/esm/utils:337:16) [0] at ModuleLoader.moduleStrategy (node:internal/modules/esm/translators:164:18) [0] at callTranslator (node:internal/modules/esm/loader:439:14) [0] at ModuleLoader.moduleProvider (node:internal/modules/esm/loader:445:30) [0] at async ModuleJob._link (node:internal/modules/esm/module_job:106:19) [0] [0] Node.js v22.5.1 [0] Failed running 'server/index.js' 3.1 강의 시청 후 test-example-shopping-mall 브랜치에서, 작업을 시작할려고, 서버와 프로젝트를 모두 킬려고 하는데 잘 동작하지 않습니다. 이에 대한 해결방법이 있을까요?

많은 분들이 memo 기능 관련하여 문의 주신것 같은데 내용이 다 동일하네요.. 영상을 보면 변경 전/후 전부다 하이라이트가 표시가 되어서 리렌더링이 발생하는지 시각적으로 확인이 안됩니다. 문의 남기신 글에는 console.log로 확인을 하라고 하시는데.. 그럴것 같으면 강의 내용 자체가 바껴야 되는거 아닌가요?? 이 부분이랑 context 설명하는 부분도 마찬가지인데요.. context 설명할때 onUpdate, onDelete, onCreate는 useCallback을 사용하여 재생성을 방지하게 이미 설정되어있는데, 왜 memo 기능을 써야하나요?? 이 부분도 설명할때 화면상에 하이라이트가 전과 후 다 발생하는데.. 강사님 혼자 뭐 없어진거 확인하는데..화면상으로 전혀 확인이 안되는데.. 혼자 진행하시니 혼란스럽네요.. 확실하게 딱 표시가 나는게 아니라면 그에 대한 설명이 있어야 하지 않을까 싶습니다.

개발자도구에서 vue탭이 안보입니다. 버전이 여러게 있길래 다 시도해봤는데도 안보이네요. 현재는 legacy 버전을 설치한 상태이고, 파일 url액세스 허용도 체크되어 있습니다.여전히 vue탭은 개발자도구에서 안나타나네요.  가이드를 부탁드립니다.