묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨Slack 클론 코딩[백엔드 with NestJS + TypeORM]
yarn run db:create 시에 발생하는 데코레이터 오류
제목처럼 명령어 실행시 아래와 같은 오류가 발생했습니다.Decorating class property failed. Please ensure that transform-class-properties is enabled and r uns after the decorators transform.이 오류는 타입스크립트 데코레이터와 클래스 필드초기화 문제로 보입니다. 엔티티를 처리하는 과정에서 데코레이터가 클래스 필드와 충돌을 일으키는 것으로 보입니다. 갑자기 생긴 오류에 tsconfig.ts 파일도 수정해보고 엔티티를 다시 점검해봐도 오류가 해결이 안되서 질문드립니다.오류가 발생하는 부분입니다.at _initializerWarningHelper (src/entities/DMs.ts:12:964) at DMs.<instance_members_initializer> (src/entities/DMs.ts:58:286) at new DMs (src/entities/DMs.ts:58:270) at EntityMetadata.create (node_modules/src/metadata/EntityMetadata.ts:568:23) at EntityMetadataValidator.validate (node_modules/src/metadata-builder/EntityMetadataValidator.ts:211:47) at node_modules/src/metadata-builder/EntityMetadataValidator.ts:43:18 at Array.forEach (<anonymous>) at EntityMetadataValidator.validateMany (node_modules/src/metadata-builder/EntityMetadataValidator.ts:42:25) at DataSource.buildMetadatas (node_modules/src/data-source/DataSource.ts:730:33) at processTicksAndRejections (node:internal/process/task_queues:95:5) error Command failed with exit code 1.DMs 엔티티의 문제인가 싶어서 제로초님의 코드를 다시 작성해보고 살펴보아도 문제가 해결되지 않습니다.추가로 yarn seed명령어도 안됩니다,,,
-
미해결코로나맵 개발자와 함께하는 지도서비스 만들기 1
nodemon설치와 express-generator 오류
이러한 오류가 뜨는데 어떻게 해결할 수 있을까요?개발환경은 windows입니다.
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
memoizedDispatch 말고 MemoizedProvider
const MemoizedProvider = React.memo(TodosStateContext.Provider);TodosStateContent가 컴포넌트이니까 memoizedDispatch의 useMemo말고 아예 React.memo를 사용해서 최적화 해도 되나요? 이렇게 하면 안에 있는 객체 {onCreate, onUpdate, onDelete}도 재생성 안되지 않을까요..?
-
미해결Slack 클론 코딩[백엔드 with NestJS + TypeORM]
npm run db:create 시에 발생하는 decorating 오류
cli 통해서 db생성을 하면 migration 테이블이 생기지 않아서 오류를 들여다 봤더니 아래와 같은 오류가 생겼습니다.ERROR Decorating class property failed. Please ensure that transform-class-properties is enabled and runs after the decorators transform. 데코레이터를 적용하는 과정에서의 이슈로 보이는데 수업 과정을 이수하는 시점까지 별다른 문제나 별개의 코드를 작성하지 않았기에 의문점이 있는 상태입니다. 오류가 발생하는 구간은 아래 코드와 같습니다.at _initializerWarningHelper (C:/Users/user/Desktop/Study/nestjsbook/src/entities/Mentions.ts:12:1005) at Mentions.<instance_members_initializer> (C:/Users/user/Desktop/Study/nestjsbook/src/entities/Mentions.ts:61:291) at new Mentions (C:/Users/user/Desktop/Study/nestjsbook/src/entities/Mentions.ts:61:270) at EntityMetadata.create (node_modules\src\metadata\EntityMetadata.ts:568:23) at EntityMetadataValidator.validate (node_modules\src\metadata-builder\EntityMetadataValidator.ts:211:47) at node_modules\src\metadata-builder\EntityMetadataValidator.ts:43:18 at Array.forEach (<anonymous>) at EntityMetadataValidator.validateMany (node_modules\src\metadata-builder\EntityMetadataValidator.ts:42:25) at DataSource.buildMetadatas (node_modules\src\data-source\DataSource.ts:730:33) at processTicksAndRejections (node:internal/process/task_queues:95:5) Mentions만에 문제인가 싶어서 Entities를 제거하고 다른 특정 하나(Users)의 Entity만 포함시켜서 실행했을 때도 동일한 오류를 뱉고 있어요.tsconfig가 컴파일될 때, 제 때 동작이 안되는가 싶어 바벨을 설치해서 플러그인을 주입해도 동일한 현상이 발생되네요 ㅠㅠ 물론 tsconfig에 데코레이터 관련 옵션이 true이긴 합니다. emitDecoratorMetadata: true experimentalDecorators : truescript"db:create": "ts-node ./node_modules/typeorm-extension/bin/cli.cjs db:create -d ./dataSource.ts", "db:drop": "ts-node ./node_modules/typeorm-extension/bin/cli.cjs db:drop -d ./dataSource.ts",참고로 db:drop시에는 오류가 없이 잘 동작합니다.
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
비동기 함수로 불러온 데이터를 화면에 렌더링
강의 내용을 바탕으로 프로젝트를 하나 만들다 안되는 부분이 있어 질문드립니다.제가 axios를 이용해서 데이터를 받는 함수를 만들었는데요 const [posts, setPosts] = useState(); const getAllPosts = async () => { try{ const {data} = await axios.get("/api/posts"); console.log("axios - getAllPosts: ", data); setPosts(data); } catch(error){ console.log("getAllPosts 에러: ",error); } }getAllPosts(); 이런 코드를 작성했을때 렌더링할때 axios를 이용해서 받은 데이터를 posts란 state에 저장하고 이를 리스트 형태로 렌더링하려고 하는데 저기서 그냥 getAllPosts(); 를 해버리면 콘솔창에 무한하게 posts 값이 찍히고 화면에는 렌더링이 되지 않더라고요 ㅠ 콘솔창에는 그래도 데이터가 찍히긴 하는데 말이죠..ㅠgetAllPosts메서드는 비동기 함수니깐 컴포넌트들이 렌더링되기 전에 실행되고 컴포넌트들이 렌더링되는거 아닌가요? 그럼 저 메서드를 호출하면 잘 렌더링이 되야하는거 아닌가요??ㅠㅠ왜 저렇게 콘솔창에는 무한하게 데이터값이 찍히고 컴포넌트에는 왜 렌더링이 되지 않는건가요??
-
해결됨차세대 Node.js 백엔드 서버 개발(Fastify & Prisma & Typescript와 함께하는)
앱에 refreshToken을 전송할때 궁금한점이 있습니다.
앱은 쿠키가 따로 없는걸로 알고있습니다 웹과 앱을 제작할때 서버를 하나만 사용하게된다면 refreshToken에대한 처리는 어떻게 해주는게 좋을까요??
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useEffect 사이클
function App() {const [count, setCount] = useState(0);const [input, setInput] = useState("");const isMount = useRef(false);// 1. 마운트 : 탄생useEffect(() => {console.log("mount"); }, []);// 2. 업데이트 : 변화, 리렌더링useEffect(() => {if (!isMount.current) {isMount.current = true;return; }console.log("update"); });// 3. 언마운트 죽음const onClickButton = (value) => {setCount(count + value);// console.log(count + value); };return (... );} 위 코드를 작성하고 새로고침을 하면위 처럼 콘솔에 모든 mount, unmount, update가 뜹니다....코드상 update도 안떠야하는데 왜 뜨는걸까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
수업 내용 변경된건가요?
제가 작년에 구매하여 section 10 정도 까지 듣다가 중단했었는데요,, 그땐 싸이월드만들기 이런 강의가 없던거같은데 강의가 개정된걸까요..? 어디서부터 다시 들어야할지 모르겠네요 ..
-
미해결이미지 관리 풀스택(feat. Node.js, React, MongoDB, AWS)
프록시 관련 질문
안녕하세요 강사님,proxy 설정을 하면 이렇게 오류가 뜨면서 서버 시작이 안돼요.프록시 부분을 지우면 잘 작동하는데어디가 잘못된걸까요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useEffect 가 정확히 언제 실행되는건지 헷갈립니다
강의를 다 듣고 뭔가 아직 useEffect의 개념이 명확히 잡히지 않았는데요..바뀐 state 값을 바로 이용하려고 할때, 컴포넌트가 렌더링된 후에 사용한다고 하셨는데그럼 만약 컴포넌트를 렌더링할때 바뀐 state값을 같이 렌더링해줘야 하는 경우에는 useEffect는 컴포넌트가 렌더링 된 이후에 사용하니깐 useEffect를 못쓰는건가요??여기서 useEffect가 컴포넌트가 렌더링 된 이후에 사용한다는게 모든 컴포넌트가 완전히 화면에 그려지고 나서 사용된다는 의미 맞나요??
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
AWS 배포했는데 CORS 에러떠요
AWS에 정적페이지 동적페이지 분리해서 배포했는데 https://backendonline.codebootcamp.co.kr/graphql 이주소로 API 요청하면은 CORS 에러납니다. 해당 주소로 API 요청하는게 잘못된걸까요 본강의에서 ??
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
15강 오류질문
15강 객체 강의 6분 let name = person.name;블록 범위 변수 'name'을 다시 선언할 수 없습니다라고 나옵니다
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
12.11 ) Home에서 getMontlyData 작성 중 오류 / 개발자도구 hooks Context 에서 객체가 아닌 함수로 출력됩니다
안녕하세요,강의 잘 듣고있습니다! 16분 쯤에 montlyData를 만들어서 호출하는 부분인데개발자도구로 체크해봤을때 hooks가 선생님처럼 나오지 않고 저런 함수 형태?로 출력이 되어서 그런지 오류가 나서 진행이 되지 않습니다ㅜ눈알빠지게 찾아봤는데도 잘 모르겠어서 글을 씁니다ㅠㅠ한번 체크 부탁드립니다 //App.jsx 파일입니다 const mockData = [ { id: 1, createdDate: new Date("2024-09-30").getTime(), emotionId: 1, content: '1번 일기' }, { id: 2, createdDate: new Date("2024-09-29").getTime(), emotionId: 2, content: '2번 일기' }, { id: 3, createdDate: new Date("2024-08-02").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: "DELETE", id } ) } return ( <> <DiaryStateContext.Provider value={data}> <DiaryStateContext.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> </DiaryStateContext.Provider> </DiaryStateContext.Provider> </> ) } export default App
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
리액트로 로그인 부분 처리하는데 질문이 있습니다.
리액트 강의를 듣고 스프링부트랑 연동해서 리액트 코드를 짜고 있습니다. 지금 로그인 부분 처리하다가 막혀서 정말 구글링도 해보고 며칠째 하다가 도저히 해결이 안돼서 질문 드립니다.지금 로그인처리가 되면 sessionStorage에 로그인 회원 정보를 담고 navigate함수를 이용해 Main컴포넌트로 보냈습니다. 근데 다른 컴포넌트들에서도 이 로그인회원 정보를 사용하기 위해 최상위컴포넌트인 App컴포넌트에서 sessionStorage.getItem()해서 state값에 저장하고 그걸 context로 하위 컴포넌트들에게 제공했는데 로그인되고 navigate함수로 Main컴포넌트로 가면 context로 저장한 state값이 null이 되고 새로고침해보면 state값이 잘 들어오더라고요ㅠㅠ 비동기함수인것과 관련있을까요??새로고침없이 컴포넌트에서 바로 state값을 이용하고 싶으면 어떻할까요? state값 이용해서 바로 화면에도 렌더링도 해야하는 상황입니다 ㅠㅠ강의와 관련된 내용은 아니지만 프로젝트를 혼자 만들다보니 잘 안되는 부분이 많아 질문드립니다 !
-
미해결mongoDB 기초부터 실무까지(feat. Node.js)
option usecreateindex is not supported 오류 나면은
await mongoose.connect(MONGO_URL); // 제거 하시고 사용 하세요 // 버전6부터 해당 옵션을 사용하지 않아도 돼요https://mongoosejs.com/docs/migrating_to_6.html(공식문서) 보세요. 참고하세요
-
미해결Node.js로 웹 크롤링하기
6강 프록시 서버 테스트 관련하여
안녕하세요.. 프록시 사이트 (http://spys.one/free-proxy-list/KR/) 에 있는 프록시 사이트에 대한 정보를 가져와서, sqlite에 저장하는 코드로 테스트 하고 있습니다. 두가지 문제 현사잉 발생하고 있습니다.관련 크롤러 함수를 실행했는데, puppeteer의 브라우저 화면이 안나나나지만, 프록시 사이트 정보를 클로링은 합니다. 현재 headless:false로 해서 브라우저를 기동시키고 있는데, 왜 이런 형상이 발생할 까요? 인터넷 정보를 서치하다 보니, 브라우저 실행시 '--no-sandbox'를 해보하고 해서 해봤더니, 페이지 보이기는 합니다. (이 옵션의 의미는 무엇인지 궁금합니다.)강의 동영상에서 알려주신대로 크롤링 된 사이트에서 latency가 가장 작은 ip를 이용해서 브라우저 실행시 --proxy-server=fastestProxy 로 설정한 후 네이버 IP 확인 페이지를 호출했는데,Error: net::ERR_TIMED_OUT at https://search.naver.com/search.naver?where=nexearch&ssc=tab.nx.all&query=%EB%82%B4%EC%95%84%EC%9D%B4%ED%94%BC%EC%A3%BC%EC%86%8C&sm=tab_she&qdt=0 가 발생하는데, 이는 네이버에서 Proxy서버에서 접근하는 것을 막아서 발생하는 것인가요? 프록시 서버를 사용하지 않고 브라우저를 생성하면, 정상적으로 접근되어서 제 IP 주소를 확인할 수 은 있습니다.강의 처럼 변경된 프록시 서버의 ip를 확인할 수 있는 방법이 무엇인지 알려주시면 좋겠습니다.
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
콜백함수에서 value() 가 갑자기 어디서 나온걸까요?
function main(value) { value(); } function sub() { console.log("sub"); } main(sub);여기서 main() 을 호출하면 main 함수를 호출하게 되고,main 함수에서는 매개변수로 value를 받고 있는데main(sub)를 호출하게 되면 main() 함수가 실행이 되고,여기서 main 함수 안에 있는 value()는 매개변수로 받은 값이 value라서 value()이렇게 매개변수로 받은 이름으로 함수를 호출하는걸까요? 그럼 만약 매개변수로 aaa를 받았다면 main 함수 안에서 aaa()를 호출하게 되면 동일하게 sub() 함수가 호출되는걸까요? main 함수 안에서 매개변수로 받은 value()를 호출하는것과함수 sub()를 바로 호출하는것과의 장단점이 있을까요? 그리고 main 함수 안에서 value를 호출하는것과 value()를 호출하는것의 차이가 어떤게 있을까요??value()를 호출할때는 매개변수로 받은 콜백함수를 호출해서 실행을 하는걸로 이해를 하고 있는데 value를 호출을 하면 아무런 변화가 없는데 value를 호출하는 경우도 자주 보이던데 이렇게 호출을 하는 이유가 무엇일까요?
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
chat.adapter.rooms의 시간순 정렬 여부
// socket.js socket.on('disconnect', async () => { console.log('chat 네임스페이스 접속 해제'); // /room/방아이디 => URL에서 가져오기. const { referer } = socket.request.headers; const roomId = new URL(referer).pathname.split('/').at('-1'); const currentRoom = chat.adapter.rooms.get(roomId); // 현재 방의 인원이 0이면(방장도 나감) 자동삭제. const userCount = currentRoom?.size || 0; if (userCount === 0) { await removeRoom(roomId); room.emit('removeRoom', roomId); // room 네임스페이스에 이 방이 제거됬다고 알려서 실시간으로 제거할 것임. console.log('방 제거 요청 성공'); } else { // 시스템 메시지 DB 저장 const systemChat = `${socket.request.session.color}님이 퇴장하셨습니다.`; await createChat(roomId, 'system', systemChat); const memberList = [...currentRoom].map((socketId) => { return { color: chat.sockets.get(socketId).request.session.color, socketId, }; }); // 누군가 나가면 그 방의 모든 사람에게 시스템 메시지 및 정보 전달. socket.to(roomId).emit('exit', { user: 'system', chat: systemChat, memberList, }); } }); }); }; 여기서 chat.adapter.rooms.get(roomId) = currentRoom이 Set객체인데 여기 쌓이는 socketId들은 접속한 순서대로 쌓이나요? 그러니까, 시간순 정렬이 되어있는 건가요? 방장 위임하는 기능 구현 중인데 '방에 방장 정보를 저장한다' 이걸 어떻게 해야할 지 모르겠습니다🤔
-
미해결Node.js로 웹 크롤링하기
페이스북 로그인 로그아웃 자동화관련
안녕하세요.. 5-1 페이스북 로그인/로그아웃 관련 강의를 따라 하고 있습니다.puppeteer의 page를 이용해서 로그인 버튼까지는 클릭해서 실행까지는 되는 것 같습니다.그래서 로그인 버튼 클릭후에 사용자에게 로그인 승인 알람 메시지를 처리해야 실질적인 로그인 페이지로 넘어가고 있는 상황입니다. 이럴경우 강의 시간에 알려주신 방법들은 대부분이 타임아웃 오류가 발생합니다. 이 부분을 어떻게 해결해야 할지 방법을 알려 주시면 좋겠습니다. 강의 내용의 모습이랑. 현재시점의 페이스북이 달라서 수정하는 것이 초보자에게는 어렵네요..
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
투두 필터링
import "./List.css"; import TodoItem from "./TodoItem"; import { useState } from "react"; const List = ({ todos, deleteTodo, updateTodos }) => { const [filtered, setFiltered] = useState(""); const onChange = (e) => { setFiltered(e.target.value.toUpperCase()); }; const getfiteredData = () => { return todos.filter((todo) => { return todo.content.toUpperCase().includes(filtered); }); }; const filteredTodos = getfiteredData(); return ( <div className="list"> <h4>Todo List 🌱</h4> <input type="text" placeholder="검색어를 입력하세요" onChange={onChange} /> <div className="todoWrapper"> {filtered ? filteredTodos : todos.map((todo) => { return ( <TodoItem {...todo} key={todo.id} deleteTodo={deleteTodo} updateTodos={updateTodos} /> ); })} </div> </div> ); }; export default List; 이렇게 하니까Uncaught Error: Objects are not valid as a React child (found: object with keys {id, isDone, content, date}). If you meant to render a collection of children, use an array instead. at throwOnInvalidObjectType (react-dom_client.js?v=6a67398a:9932:17) at updateSlot (react-dom_client.js?v=6a67398a:10153:15) at reconcileChildrenArray (react-dom_client.js?v=6a67398a:10249:30) at reconcileChildFibers2 (react-dom_client.js?v=6a67398a:10557:24) at reconcileChildren (react-dom_client.js?v=6a67398a:14290:37) at updateHostComponent (react-dom_client.js?v=6a67398a:14805:11) at beginWork (react-dom_client.js?v=6a67398a:15933:22) at beginWork$1 (react-dom_client.js?v=6a67398a:19751:22) at performUnitOfWork (react-dom_client.js?v=6a67398a:19196:20) at workLoopSync (react-dom_client.js?v=6a67398a:19135:13)콘솔에 이런 오류가 뜨더라구요... 객체를 보내지도 않았는데 이렇게 하면 안되는 이유가 있나요?