173만명의 커뮤니티!! 함께 토론해봐요.
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
안녕하세요 basic, bearer 토큰을 이미 범용적으로 널리 사용된다고 하셨는데 궁금한점이 로그인할 때 id/pw 를 header 에 넣어서 보낸다고 하셨는데 패킷을 탈취하면 너무 취약할 것 같아서요. 제가 웹개발자가 아니라 실무에선 실제로 어떻게 쓰는지 알고싶어서 질문남깁니다.
미해결
코드로 배우는 React 19 with 스프링부트 API서버
섹션 3의 REST 방식 컨트롤러 만들기(2)까지는 apiserver에서 작업중이었는데 REST컨트롤러 -수정/삭제, CORS 설정부터는 mallapi라고 프로젝트 이름이 바뀌어있고 그 뒤로도 mallapi에서 작업중인듯한데 제가 착각한건가요ㅠㅠ 뭐죠
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
강의 내용처럼 그대로 따라 했을 때 다음과 같이 됩니다. 1. 아래 사진 처럼 breakpoint 설정 시 빨간색이 아니라 빈원이 나옵니다. 실제 실행하였을 경우 break가 걸리긴 하는데 ts파일이 아닌 compile된 js 파일로 넘어갑니다. 인터넷 찾아보고 sourceMap 관련된거 같아서 tsconfig 파일에 sourceMap: true 넣고 launch.json에 sourceMaps: true 넣어봤는데도 변함이 없네요 어떤 부분을 확인해봐야할까요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
const weatherSearch = function (position) { console.log(position); fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${position.latitude}&lon=${position.longitude}&appid=9756434244216c3d2f9c08591b54bede`) } // 위치 정보를 처리하는 함수 const acessToGeo = function (position) { const positionObj = { latitude: position.coords.latitude, // 위도 longitube: position.coords.longitude // 경도 (오타: longitube → longitude) }; console.log(positionObj); // 위치 정보 출력 console.log(position); // 전체 위치 데이터 출력 weatherSearch(positionObj) }; 2.5로 수정햇는데 오류가 뜨네요 어떠한 오류인 지 모르겠습니다 밑 코드는 // DOM 요소 선택 const todoInput = document.querySelector("#todo-input"); // 할 일 입력 필드 const todoList = document.querySelector("#todo-list"); // 할 일 목록 // localStorage에서 저장된 데이터를 불러오기 const savedTodoList = JSON.parse( localStorage.getItem("saved-items") ); /* 문자열로 저장된 데이터를 JSON.parse를 통해 배열로 변환 */ // 새로운 할 일을 생성하는 함수 const createTodo = function (storageData) { let todoContents = todoInput.value; // 입력 필드에서 가져온 값 if (storageData) { todoContents = storageData.contents; // 저장된 데이터가 있으면 그 내용을 사용 } // 할 일을 나타내는 DOM 요소 생성 const newLi = document.createElement("li"); // li 요소 생성 const newSpan = document.createElement("span"); // span 요소 생성 (할 일 내용 표시) const newBtn = document.createElement("button"); // 완료 버튼 생성 // 완료 버튼 클릭 시 해당 할 일을 완료 상태로 변경 newBtn.addEventListener("click", () => { newLi.classList.toggle("complete"); // 완료된 상태를 토글 saveItemsFn(); // 변경 내용을 저장 }); // 할 일을 더블클릭하면 삭제 newLi.addEventListener("dblclick", () => { newLi.remove(); // li 요소 제거 saveItemsFn(); // 변경 내용을 저장 }); // 저장된 데이터가 완료 상태면 완료 표시 추가 if (storageData?.complete) { // 옵셔널 체이닝 사용 newLi.classList.add("complete"); // 완료 클래스 추가 } // 할 일 내용을 span에 추가 newSpan.textContent = todoContents; // li 요소에 버튼과 span을 자식으로 추가 newLi.appendChild(newBtn); newLi.appendChild(newSpan); // 할 일 목록에 li 추가 todoList.appendChild(newLi); // 입력 필드를 비우기 todoContents.value = ""; // 변경된 목록 저장 saveItemsFn(); }; // Enter 키를 눌렀을 때 할 일 추가 const keyCodeCheck = function () { if (window.event.keyCode === 13 && todoInput.value !== "") { createTodo(); // 입력값이 있으면 할 일을 생성 } }; // 전체 삭제 기능 const deleteAll = function () { const liList = document.querySelectorAll("li"); // 모든 li 요소 선택 for (let i = 0; i < liList.length; i++) { liList[i].remove(); // 모든 할 일 제거 } saveItemsFn(); // 변경 사항 저장 }; // localStorage에 저장하는 함수 const saveItemsFn = function () { const saveItems = []; // 저장할 데이터를 담을 배열 // 현재 목록의 할 일들을 객체로 변환하여 저장 for (let i = 0; i < todoList.children.length; i++) { const todoObj = { contents: todoList.children[i].querySelector("span").textContent, // 할 일 내용 complete: todoList.children[i].classList.contains("complete"), // 완료 상태 }; saveItems.push(todoObj); // 객체를 배열에 추가 } // 배열이 비었으면 localStorage에서 데이터 제거, 아니면 저장 saveItems.length === 0 ? localStorage.removeItem("saved-items") // 데이터가 없으면 키 삭제 : localStorage.setItem( "saved-items", JSON.stringify(saveItems) // 배열을 문자열로 변환 후 저장 ); }; // 저장된 데이터가 있으면 불러와 화면에 표시 if (savedTodoList) { for (let i = 0; i < savedTodoList.length; i++) { createTodo(savedTodoList[i]); // 저장된 데이터로 할 일을 생성 } } const weatherSearch = function (position) { console.log(position); fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${position.latitude}&lon=${position.longitude}&appid=9756434244216c3d2f9c08591b54bede`) } // 위치 정보를 처리하는 함수 const acessToGeo = function (position) { const positionObj = { latitude: position.coords.latitude, // 위도 longitube: position.coords.longitude // 경도 (오타: longitube → longitude) }; console.log(positionObj); // 위치 정보 출력 console.log(position); // 전체 위치 데이터 출력 weatherSearch(positionObj) }; // Geolocation API로 사용자 위치 요청 const askForLocation = function () { navigator.geolocation.getCurrentPosition( acessToGeo, // 위치 정보를 가져오면 실행할 콜백 (err) => { console.log(err); // 에러가 발생하면 에러 정보를 출력 } ); }; // 위치 요청 실행 askForLocation();
미해결
TS/JS 디자인 패턴 with Canvas: 제로초에게 제대로 배우기
class의 메서드는 선언식으로 쓰는걸 좋아하는데 bind는 쓰기 싫어서 bind 필요한것만 arrow function 쓰면 클래스 메서드가 선언식이랑 표현식 섞인게 뭔가 일관성이 없어보이더라구요.. (섞어쓰면 나중에 이거 bind 필요한 메서드였나? arrow function으로 했었나? 헷갈릴것같기도 하고?)
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
10.3) React.memo와 컴포넌트 렌더링 최적화 강의를 보고, 투두 리스트 아이템에 체크박스를 클릭했을 때, Header 컴포넌트 외에 Editor 컴포넌트도 불필요하게 리렌더링이 되고 있어 리렌더링 되지 않도록 코드를 수정하였습니다. 코드를 수정해서 더 이상 리렌더링이 되지 않고 있는데 이러한 성능 최적화가 정말 필요한 건지에 대한 의문이 듭니다. 거대한 컴포넌트의 경우 불필요한 리렌더링을 막는 것은 정말 필요하고 좋을 것 같은데 Editor 컴포넌트나 Header 컴포넌트 정도의 작은 컴포넌트의 리렌더링도, 불필요하게 일어난다면 막는 것이 좋은 건지 아니면 굳이 최적화가 필요 없는 지 실무 관점에서 궁금합니다.
해결됨
진짜! 자바스크립트(Javascript) - 기초부터 고급까지
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 메서드에 전달된 콜백은 마이크로 태스크 큐에 등록된 후에 콜스택이 모두 비어졌을 때 호출된다고 이해를 했는데... 연결고리가 이어지지 않는 느낌입니다.
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
'react/self-closing-comp': 'warn' 해당 문구를 추가했음에도 동작하지 않습니다. 재부팅도 해보았습니다만 동작하지 않습니다. 제가 잘못한 것이 있을까요?
미해결
만들면서 배우는 리액트 : 기초
강사님 강의 보면서 저는 vite 를 이용해서 했는데요, 그런 경우는 깃허브에 배포를 어떻게 해야 하나요? npm run build npm install gh-pages 그 다음에 package.json 파일도 아래처럼 수정을 했습니다. "homepage": " 깃허브주소 넣음 ", "deploy": "gh-pages -d dist" 그다음에 다시 npm run build npm run deploy 하면 깃허브에 gh-pages 가 생겨야 하는데 생기지를 않아서요.... 어디 부분을 잘못 한걸까요?
미해결
만들면서 배우는 리액트 : 기초
마지막에 빌드를 하려고 하는데요, 저는 vite를 이용해서 했구요, 깃허브에 페이지 올리고 pages까지 오픈을 했습니다. 그리고 나서 npm run build 를 하면 강사님하고 다르게 build 폴더가 아니고 dist폴더가 만들어지는데요, 혹시 그럴경우엔 깃허브에 배포할때 명령어가 혹시 강의내용과 다르게 해야 하는 부분이 있는지요? npm install gh-pages package.json 파일에서 소스 추가할때 "deploy": "gh-pages -d build" 위의 파일을 수정한 후 다시 npm run build npm run deploy 여기까지 해도 깃허브 저장소에서 gitpages가 생기기 않습니다...
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
해당 챕터에서 강의대로 진행했고 몇번을 다시 확인해봐도 차이점을 도통 찾지 못해서 문의드립니다. Home.jsx에서 데이터를 필터걸어도 걸리지않는 상황 DiaryList.jsx에서 DiaryItem으로 데이터를 보내도 받는쪽에서 받지 못하는 상황(개발자도구에서는 워닝으로 hook.js:608 Warning: Each child in a list should have a unique "key" prop) 발생 이하 소스첨부 드립니다. App.jsx import './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.jsx import { 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.jsx import './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.jsx import 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;
미해결
TailwindCSS 완벽 마스터: 포트폴리오부터 어드민까지!
컬러 및 배경, 보더 처리 00:43 여기보면 tail 만 쳐도 emmit 이라고 해야 되나요. 팝업도움말이 뜨는데 저는 저런게 전혀 뜨지 않는데요. 어떻게 해야 저런 도움말 팝업이 뜰 수 있나요? tailwind css intellisense 플러그인은 설치해놓은 상태입니다.
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요. 강의를 전부 수강한 수강생입니다. 강사님의 강의를 보다가 궁금한 것이 있어서 질문 남깁니다. 강의에서는 API 요청 방식을 fetch를 사용하여 전부 Next 서버에서 요청을 보내는 방식이던데 클라이언트 컴포넌트에서 fetch를 사용하여 브라우저를 통해 요청하는 방법과 강의와 같이 사용하는 방법, API Route(Handle) 방식을 사용하는 방법의 차이를 알 수 있을까요?? 또한 Next 서버의 부하는 괜찮은지 궁금합니다.
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
혹시나 기본 '/' 경로에서 펭귄눌렀다 popstate 로 뒤로갔을 경우 'clicked' css가 먹지않는 현상, 강의 내용에서 저부분이 영상 짤려서 놓치기 쉬울꺼 같습니다. 저도 강의보면서 하다가 || 'all' 하는 부분 제대로 보기힘들어서 못 적었다가 나중에 문제생겨서 로직 보다가 발견했습니다,
해결됨
한 입 크기로 잘라먹는 Next.js
npm install 해서 의존성 설치후에 npx prisma db push를 했는데 $ npx prisma db push Environment variables loaded from .env Prisma schema loaded from prisma\schema.prisma Datasource "db": PostgreSQL database "postgres", schema "public" at " aws-0-ap-northeast-2.pooler.supabase.com:5432 " Error: P1001: Can't reach database server at aws-0-ap-northeast-2.pooler.supabase.com : 5432 Please make sure your database server is running at aws-0-ap-northeast-2.pooler.supabase.com : 5432 . 이렇게 나옵니다. 챗지피티랑 스택 오버플로우 이런거 봐도 잘 안돼서 질문드립니다.
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
코드 관련 질문은 아래와 같이 '코드블럭' 기능을 이용해주세요! + 오류 메세지도 함께 올려주시면 좋아요 🙂 console.log('hello'); 이런식으로 구축했는데 프로젝트만 바꾸면 서버가 꺼져서요..
미해결
TailwindCSS 완벽 마스터: 포트폴리오부터 어드민까지!
[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', // 수동으로 설정 };
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요~ 설명해주신 CSR, SSR 렌더링 강의보고 CSR, SSR 렌더링 방식에 대해 궁금한점 두가지 남겨봅니다! (유사한 질문이 있는지 찾아봤는데 글이 많아서 찾질 못해서 중복 감안하고 올려봅니다🙏🏻) 질문1 CSR은 bundle js 다운로드 레이턴시 만큼 FCP가 느리고 반대로 SSR은 bundle js 다운로드 레이턴시만큼 CSR보다 FCP가 빠르다고 이해했는데요. TTI 기준으로 보면 결국 CSR, SSR모두 차이가 없는게 맞을까요? (gzip압축 해제, js parse, hydration등의 처리에서 드는 비용의 차이가 있겠지만 이런 부분들은 크게 영향을 주진 않을거라고 생각하여 문의드립니다. 혹시 두 방식에 영향을 미치는 큰 요소가 있다면 그 부분도 고려해서 알려주시면 감사하겠습니다.) 질문2 CSR의 장점으로 초기 렌더링이 느리고 이후에 페이지 이동시 빠르게 화면을 그릴 수 있다고 하셨는데요, CSR에서 초기 렌더링의 속도를 높이기 위해 코드 스플리팅 전략을 취할 수 있을거 같습니다. 이렇게 CSR에서 코드 스플리팅 방식을 취한 경우 페이지 이동시 결국 bundle js 다운르드 레이턴시가 또 발생할거 같은데요. prefetch, preload같은 전략을 취하지 않고 코드스플리팅만 적용한 CSR방식은 단점만 남는 렌더링 전략이 맞을까요? 유일한 장점은 CSR이지만 코드 스플리팅을 했기 때문에 초기 FCP가 조금 빠르다정도일거 같은데 이해한게 맞는지 문의드려봅니다.
미해결
Next + React Query로 SNS 서비스 만들기
백엔드 취준생인데 프론트를 좀 할 일이 있어서 강의 듣고 있는데 Next-Auth 부분이 이해가 쉽지 않네요... 몇 가지 질문 드리고자 합니다. 1. session 객체에 어떤게 담기는건지 잘 모르겠습니다. export default async function Home() { const session = await auth() if (session?.user) { redirect('/home') return null } return ( <Main/> ); } export const { handlers: { GET, POST }, auth, signIn, } = NextAuth({ // 개발자가 직접 만든 화면에서 로그인 하도록 진행 pages: { signIn: '/i/flow/login', // 로그인 newUser: '/i/flow/signup' // 회원가입 }, providers: [ CredentialsProvider({ async authorize(credentials) { const authResponse = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/login`, { method: 'POST', headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id: credentials.usename, password: credentials.password, }) }) if (!authResponse.ok) { return null } const user = await authResponse.json() return { email: user.id, name: user.nickname, image: user.image, ...user } } }) ], }) Home 에서 auth() 를 통해 불러온 session 객체에 CredentialsProvider 가 리턴한 객체가 담기는건가요? 그런데 그렇다고 하기엔 객체에 user 라는 속성이 없어서 아닌 것 같기도 해서 아닌 거 같다는 생각도 듭니다. export default function Login() { const router = useRouter() const { data: session } = useSession(); if (session?.user) { router.replace('/home') return null } router.replace("/i/flow/login") return ( <Main /> ) } 마찬가지로 여기서도 session 에 어떤게 담기는지 잘 모르겠습니다 ㅠㅠ auth() 로 리턴한 세션과 같은 객체가 담기는 것 같긴 한데 도대체 session 에 뭐가 담기는지 파악이 쉽지 않네요 ㅋㅋㅋ 그래서 session 객체의 user 를 클릭해서 들어가보니 다음과 같은 interface 가 나오네요. export interface DefaultSession { user?: User expires: ISODateString } auth/core 에 있는 인터페이스인 것 같은데 이 인터페이스가 어느 시점에 등장(?) 하는 건지 잘 모르겠습니다. 2. 지금 진행하는 로그인 방식은 백엔드에 로그인 관련 API 가 있다고 가정하고 진행하는 것으로 저는 이해를 했는데요 export const handlers = [ http.post(`${baseUrl}/api/login`, () => { console.log('로그인'); return HttpResponse.json(User[1], { headers: { 'Set-Cookie': 'connect.sid=msw-cookie;HttpOnly;Path=/' }, }) }), http.post(`${baseUrl}/api/logout`, () => { console.log('로그아웃'); return new HttpResponse(null, { headers: { 'Set-Cookie': 'connect.sid=;HttpOnly;Path=/;Max-Age=0' } }) }), http.post(`${baseUrl}/api/users`, async ({ request }) => { console.log('회원가입'); // return HttpResponse.text(JSON.stringify('user_exists'), { // status: 403 // }) return HttpResponse.text(JSON.stringify('ok'), { headers: { 'Set-Cookie': 'connect.sid=msw-cookie;HttpOnly;Path=/' }, }); }) ]; 이게 지금 api 를 mocking 한 건데 여기에 요청을 보내고 있으니까요. 그러면 이 API 에서 리턴한 유저(User[1]) 가 세션에 담기는 것인지 궁금하네요. (이것도 1번 질문하고 좀 연관이 되네요) 그러면 만약에 백엔드 API 가 로그인 성공했을 때 http body 에 별도의 객체를 리턴하지 않으면 어떻게 되나? 이런 궁금증도 생깁니다. 3. 그리고 로그아웃을 할 때는 왜 로그아웃 API 에 따로 요청을 보내지 않고 signOut 함수만 사용하는지 궁금합니다. 이것만 사용해도 쿠키가 삭제가 돼서 그런 것인가요? 그러면 백엔드 서버에 별도의 로그아웃 API 를 만들지 않아도 되는 것인지 궁금합니다. 장문의 질문글이 된 거 같은데, 뭔가 Next-Auth 를 처음 접하다보니 사용법이 좀 익숙치가 않네요. AI 에 물어보거나 구글링을 해 봐도 좀 파악이 쉽지 않아 여기에 질문 남겨봅니다. 감사합니다.
미해결
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
docker-compose build가 안되요!ㅠㅠㅠㅠㅠ 도커라 도커컴포즈 삭제하고 다시 까는거는 5시간동안 했는데... 챗gpt가 하라는데로 5시간동안 했는데 해결이 안되네요! Traceback (most recent call last): File "urllib3/ connectionpool.py ", line 677, in urlopen File "urllib3/ connectionpool.py ", line 426, in make request File "<string>", line 3, in raise_from File "urllib3/ connectionpool.py ", line 421, in make request File "http/ client.py ", line 1369, in getresponse File "http/ client.py ", line 310, in begin File "http/ client.py ", line 271, in read status File " socket.py ", line 589, in readinto ConnectionResetError: [Errno 104] Connection reset by peer During handling of the above exception, another exception occurred: Traceback (most recent call last): File "requests/ adapters.py ", line 449, in send File "urllib3/ connectionpool.py ", line 727, in urlopen File "urllib3/util/ retry.py ", line 410, in increment File "urllib3/packages/ six.py ", line 734, in reraise File "urllib3/ connectionpool.py ", line 677, in urlopen File "urllib3/ connectionpool.py ", line 426, in make request File "<string>", line 3, in raise_from File "urllib3/ connectionpool.py ", line 421, in make request File "http/ client.py ", line 1369, in getresponse File "http/ client.py ", line 310, in begin File "http/ client.py ", line 271, in read status File " socket.py ", line 589, in readinto urllib3.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 retrieve server_version File "docker/api/ daemon.py ", line 181, in version File "docker/utils/ decorators.py ", line 46, in inner File "docker/api/ client.py ", line 237, in _get File "requests/ sessions.py ", line 543, in get File "requests/ sessions.py ", line 530, in request File "requests/ sessions.py ", line 643, in send File "requests/ adapters.py ", line 498, in send requests.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 main File "compose/cli/ main.py ", line 200, in perform_command File "compose/cli/ command.py ", line 70, in project_from_options File "compose/cli/ command.py ", line 153, in get_project File "compose/cli/docker_ client.py ", line 43, in get_client File "compose/cli/docker_ client.py ", line 170, in docker_client File "docker/api/ client.py ", line 197, in init File "docker/api/ client.py ", line 222, in retrieve server_version docker.errors.DockerException: Error while fetching server API version: ('Connection aborted.', ConnectionResetError(104, 'Connection reset by peer')) [119730] Failed to execute script docker-compose 챗 gpt에 물어보고 똑같이 해봐도 해결이 안됩니다. ㅜㅜㅜㅜㅜ
