176만명의 커뮤니티!! 함께 토론해봐요.
해결됨
React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)
GPT API 호출, 프롬프트 연동 강의 0:24 계속해서 useState에 다음과 같은 오류가 뜹니다. import { useState } from "react"; 오류 사유는'useState' is declared but its value is never read. 대체 왜 해결이 안되는 것일까요..?ㅜ.ㅜ
해결됨
React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)
setUserInput("")을 하면 userInput 값이 ""로 바뀌고 그다움 num 선언문에 ""의 숫자변환값이 들어가는게 아닌가 궁금합니다.
미해결
[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
영상에서는 sequelize 공식문서에서 바뀌어서 따라갔다고 하는데 공식문서에서 initiate() 쓰는 것 검색하였을 때 안보이며 static이랑 같이 쓴 것도 아직은 못찾았습니다 공식문서 따라가보면 주로 define(), init()을 쓰는데 강의영상의 방식과는 차이점이 있습니다. define() const { Sequelize, DataTypes } = require('sequelize'); const sequelize = new Sequelize('sqlite::memory:'); const User = sequelize.define('User', { // Model attributes are defined here firstName: { type: DataTypes.STRING, allowNull: false }, lastName: { type: DataTypes.STRING // allowNull defaults to true } }, { // Other model options go here }); // `sequelize.define` also returns the model console.log(User === sequelize.models.User); // true init() // Invalid class User extends Model { id; // this field will shadow sequelize's getter & setter. It should be removed. otherPublicField; // this field does not shadow anything. It is fine. } User.init({ id: { type: DataTypes.INTEGER, autoIncrement: true, primaryKey: true } }, { sequelize }); const user = new User({ id: 1 }); user.id; // undefined 강의에서 알려주는 방식으로 DB연결도 되고 조작도 잘되지만 이렇게 질문을 남긴 이유는 강의에서는 공식문서를 따라갔다고 하는데 공식문서에서는 찾기 어렵다는 점과 강의에 나오는 방식이 시기가 지난 방법이 아닐까 하는 생각에 질문 남기게 되었습니다 제가 찾아본게 잘못된걸수도 있기에 그런점 있다면 알려주세요 글읽어주셔서 고맙습니다:)
미해결
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
33-05 강의에서 test에서 자꾸 이 오류가 뜹니다 apis.js import { graphql } from "msw"; const gql = graphql.link("http://mock.com/graphql") export const apis = [ gql.mutation("createBoard", (req, res, ctx) => { const { writer, title, contents } = req.variables.createBoardInput return res( ctx.data({ createBoard: { _id: "qqq", writer, title, contents, __typepname: "Board", }, }) ); }), // gql.query("fetchBoards", () => {}) ]; jest.setup.js import { server } from "./src/commons/mocks/index" beforeAll(() => server.listen()); afterAll(() => server.close()); index.test.tsx import { fireEvent, render, screen, waitFor } from "@testing-library/react"; import StaticRoutingMovedPage from "../../pages/section33/33-05-jest-unit-test-mocking"; import { ApolloClient, ApolloProvider, HttpLink, InMemoryCache, } from "@apollo/client"; import fetch from "cross-fetch"; import mockRouter from "next-router-mock"; jest.mock("next/router", () => require("next-router-mock")); it("게시글이 잘 등록되는지 테스트 하자!", async () => { const client = new ApolloClient({ link: new HttpLink({ uri: "http://mock.com/graphql", fetch, }), cache: new InMemoryCache(), }); render( <ApolloProvider client={client}> <StaticRoutingMovedPage /> </ApolloProvider> ); fireEvent.change(screen.getByRole("input-writer"), { target: { value: "맹구" }, }); fireEvent.change(screen.getByRole("input-title"), { target: { value: "안녕하세요" }, }); fireEvent.change(screen.getByRole("input-contents"), { target: { value: "방가방가" }, }); fireEvent.click(screen.getByRole("submit-button")); await waitFor(() => { expect(mockRouter.asPath).toEqual("/boards/qqq"); }); }); 도와주십쇼 ㅠㅠ
미해결
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 섹션 31 댓글 기능 구현 과제 중 궁금한 점이 있어 질문 남깁니다 댓글 리스트의 수정 아이콘 클릭 시 사진과 같은 화면이 나오도록 했고, 댓글 등록하기 presenter component를 재사용 했습니다 댓글 리스트 presenter 파일입니다 export default function CommentListUI(props) { return ( <S.Wrapper> {props.data?.fetchBoardComments.map((item) => ( <S.CommentListWrapper key={item._id}> {props.isEdit && props.commentId === item._id ? ( <CommentWriteUI></CommentWriteUI> ) : ( <S.Comment_Container> <S.profile_icon src="/02/profile_icon.png"></S.profile_icon> <S.Content_container> <S.Name_Star_container> <S.Text style={{ fontWeight: "600" }}>{item.writer}</S.Text> <S.ReviewStar_container style={{ marginLeft: "16px" }}> <S.StarDiv></S.StarDiv> <S.StarDiv></S.StarDiv> <S.StarDiv></S.StarDiv> <S.StarDiv></S.StarDiv> <S.StarDiv></S.StarDiv> </S.ReviewStar_container> </S.Name_Star_container> <S.Text style={{ marginTop: "-15px", fontWeight: "500" }}> {item.contents} </S.Text> <S.Text style={{ fontSize: "12px", fontWeight: "400", color: "#BDBDBD", }} > {getDate(item.createdAt)} </S.Text> </S.Content_container> <S.Icon_container> <S.Icon style={{ backgroundImage: `url("/createComment.png")` }} onClick={() => props.onClickTEST(item._id)} ></S.Icon> <S.Icon style={{ backgroundImage: `url("/clear.png")` }} onClick={() => props.onClickDelete(item._id)} ></S.Icon> </S.Icon_container> </S.Comment_Container> )} </S.CommentListWrapper> ))} </S.Wrapper> ); } 삼항연산자를 사용해 나오는 화면을 다르게 했습니다 isEdit 변수는 수정하기 아이콘 클릭 시 true로 바뀌고, 삼항연산자 조건에 isEdit 변수만 사용하니 수정 아이콘을 클릭하지 않은 다른 댓글 리스트가 사라지면서 재사용한 댓글 등록 presenter 파일만 화면에 나와서 조건은 위와 같이 작성했습니다 여기서 문제는 수정 아이콘을 클릭해 나오는 댓글 등록 창은 container 파일에 작성한 함수가 작동하지 않는 것입니다 댓글 리스트 container 파일입니다 export default function CommentList() { const { data } = useQuery(FETCH_COMMENTS); const [deleteBoardComment] = useMutation(DELETE_COMMENTS); const onClickDelete = async (item) => { const pw = prompt("비밀번호를 입력해주세요."); try { await deleteBoardComment({ variables: { pw: pw, boardCommentId: item, }, refetchQueries: [{ query: FETCH_COMMENTS }], }); alert("삭제되었습니다."); } catch (error) { alert(error.message); } }; // 수정하기 아이콘 클릭 시 화면 변화 const [isEdit, setIsEdit] = useState(false); const [commentId, setCommentId] = useState(); const onClickTEST = (item) => { setIsEdit(true); setCommentId(item); }; // console.log(commentId); return ( <CommentListUI data={data} onClickDelete={onClickDelete} onClickTEST={onClickTEST} isEdit={isEdit} commentId={commentId} ></CommentListUI> ); } 댓글 등록 container 파일입니다 const [updateBoardComment] = useMutation(UPDATE_BOARD_COMMENT); const onClickUpdate = () => { // updateBoardComment({ // variables: { // updateBoardCommentInput: { // contents: contents, // rating: 0 // }, // password: pw, // boardCommentId: // } // }) console.log("Test"); }; return ( <> <CommentWriteUI onChangeWriter={onChangeWriter} onChangePw={onChangePw} onChangeContents={onChangeContents} onClickUpdate={onClickUpdate} ></CommentWriteUI> </> ); } onClickUpdate 함수는 댓글 작성 presenter 파일의 등록하기 버튼에 연결되어 있습니다 상세 페이지 로딩 시 나오는 댓글 등록창은 버튼 클릭 시 콘솔이 제대로 나오는데 댓글 리스트 수정 아이콘을 눌러 나오는 댓글 등록창에서는 버튼을 눌러도 콘솔 자체가 나오지 않습니다 댓글 과제 가이드를 확인해서 어떻게 수정하면 좋을지는 알았지만, 궁금한 점이 해소되지 않네요 궁금한 점은 삼항연산자, map 등 기능의 속성을 제대로 알지 못한 채 사용한 문제인지 코드 자체를 잘못 작성한 것인지 추가로 rating(별점) 데이터 활용법에 대한 힌트를 얻고 싶습니다 rating 값 1 = 별 1개 인가요? rating 숫자 데이터가 별과 어떻게 연결되는지 잘 모르겠습니다 부족한 점이 많아 질문이 너무 길어졌네요 항상 감사합니다
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
안녕하세요 강의 끝까지 잘봤습니다!!! 강의 시청 후 포트폴리오용 프로젝트 설계 중에 식별 관계에 대해 의문이 생겨서 질문합니다! 우선 식별 관계로 구성 시 자식 테이블에 데이터를 넣기 전에 부모 테이블에 데이터가 필수적으로 존재해야 한다고 알고 있습니다. 이는 개발자가 실수로 데이터를 입력하는 것을 막아줌으로써 데이터 정합성을 DB에서도 체크할 수 있지만, 만약 요구사항이 변경된다면 테이블의 데이터와 구조를 모두 변경해야하는 불상사가 발생할 수 있다고 알고 있습니다. 그렇다면 굳이 식별 관계로 설정할 필요가 있나요?? 그냥 전부 비식별 관계로 설정하면 안될까요? 포트폴리오에 올릴 프로젝트를 만드는 중이라 정석대로 식별 관계로 설정해야 하나 싶은데, 아직 뭐가 뭔지 잘 모르는 상태에서 괜히 복잡하게 식별 관계로 설정하는게 맞는건가 잘 모르겠어서요ㅜㅜ
미해결
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요. test를 하던 중 오류가 발생하여 문의드립니다. 지금 현재 코드를 import { setupServer } from "msw/node"; import { apis } from "./apis"; export const server = setupServer(...apis); 위에처럼 입력해 놓은 상태입니다. 하지만 테스트 실행 시 아래와 같이 발생합니다. Cannot find module 'msw/node' from 'src/commons/mocks/index.js' Require stack: src/commons/mocks/index.js jest.setup.js > 1 | import { setupServer } from "msw/node"; | ^ 2 | import { apis } from "./apis"; 추가적으로 지금 jest관련 페이지에서 Parsing error: ESLint was configured to run on `<tsconfigRootDir>/src\commons\mocks\index.js` using `parserOptions.project`: <tsconfigRootDir>/tsconfig.json However, that TSConfig does not include this file. Either: - Change ESLint's list of included files to not include this file - Change that TSConfig to include this file - Create a new TSConfig that includes this file and include it in your parserOptions.project See the typescript-eslint docs for more info: https://typescript-eslint.io/linting/troubleshooting#i-get-errors-telling-me-eslint-was-configured-to-run-- 위와 같은 오류가 발생합니다. 해결 부탁드립니다!
미해결
따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
서버에서 npm install 오류 bcrypt 버전을 최신으로 올려주세요. 저는 5.1.1 버전입니다. npm run dev 오류시 [오류내용] client -> package.json -> react-scripts 버전을 수정하세요. *package.json을 수정하면 npm install을 다시 진행해서 node_modules을 다시 설치해야 됩니다. npm run dev 실행 후 오류 해당 파일을 찾아 이 부분을 수정해주면 됩니다. setupMiddlewares: (middlewares, devServer) => { if (!devServer) { throw new Error('webpack-dev-server is not defined') } if(fs.existsSync(paths.proxySetup)) { require(paths.proxySetup)(devServer.app) } middlewares.push( evalSourceMapMiddleware(devServer), redirectServedPath(paths.publicUrlOrPath), noopServiceWorkerMiddleware(paths.publicUrlOrPath) ) return middlewares; },
미해결
안녕하세요 react, redux, node.js를 활용하여 웹 앱 개발을 하려고 하는데 react의 경우 class형과 함수형 두 가지의 타입으로 개발이 되고 있더군요 그래서 함수형 react의 참고서를 찾아봤는데 참고할만한 교재를 선택하기에 어려움이 있어서 질문 드립니다. 혹시 추천해주실만한 참고서가 있을까요?
미해결
[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
채팅방에 모두 나가기를 했는데요, 이상하게 채팅방을 만든 브라우저에서는 방이 바로 없어지지않고, 새로고침을 해야 제거가되는데 이러면 안되는건가요..?
미해결
지금 당장 NodeJS 백엔드 개발 [사주 만세력]
소스코드 대체 어디서 다운 받나요??
미해결
[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
Room.remove 이 부분에서 계속해서 TypeError: Room.remove is not a function 발생하길래 docs를 살펴봤는데 deleteMany나 deleteOne만 있더라구요! 현재 코드를 deleteMany로 수정해서 잘 동작이 됩니다! 그런데 remove가 deleteOne이나 deleteMany로 분리된것은 꽤 오래전 일이라서 docs를 봐도 왜 나는 remove가 안되는데 불과 몇개월 전에 코드에서는 remove가 잘 돌아간건지 궁금해서 질문 남깁니다!! ㅜㅜ
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
인자에 객체 값을 넣는 이유가 안전하기 때문이라고 하셨는데 정확히 어떤 부분이 안전한지 알려주실 수 있나요?
미해결
Node.js 노드 빠르게 훑어보기: 서버부터 DB까지
강의 감사드립니다~~~ main.html 에서 에러가 발생하는데요 에러메시지는 다음과 같습니다. Template render error: (C:\Users\Notebook\Desktop\Node_Study\my_app\views\main.html) [Line 15, Column 36] unexpected token: }} at Object._prettifyError (C:\Users\Notebook\Desktop\Node_Study\my_app\node_modules\nunjucks\src\lib.js:32:11) at Template.render (C:\Users\Notebook\Desktop\Node_Study\my_app\node_modules\nunjucks\src\environment.js:442:21) at C:\Users\Notebook\Desktop\Node_Study\my_app\node_modules\nunjucks\src\environment.js:301:27 at createTemplate (C:\Users\Notebook\Desktop\Node_Study\my_app\node_modules\nunjucks\src\environment.js:254:9) at handle (C:\Users\Notebook\Desktop\Node_Study\my_app\node_modules\nunjucks\src\environment.js:265:11) at C:\Users\Notebook\Desktop\Node_Study\my_app\node_modules\nunjucks\src\environment.js:276:9 at next (C:\Users\Notebook\Desktop\Node_Study\my_app\node_modules\nunjucks\src\lib.js:258:7) at Object.asyncIter (C:\Users\Notebook\Desktop\Node_Study\my_app\node_modules\nunjucks\src\lib.js:263:3) at Environment.getTemplate (C:\Users\Notebook\Desktop\Node_Study\my_app\node_modules\nunjucks\src\environment.js:259:9) at Environment.render (C:\Users\Notebook\Desktop\Node_Study\my_app\node_modules\nunjucks\src\environment.js:295:10) 수업중 제가 놓친 부분이 없다면 main.html에서 마지막 작성 부분은 다음과 같은데요, 이것이 맞는지요? 이후로 main.html이 언급되는 부분이 강의에 없어서요~ 확인요청드립니다~ 강의 감사드립니다~~~ ====================== 마지막 강의에서 main.html이 보이고 거기에서 수정가능합니다. {% for writing in list %} <tr> <td><a href="/ detail/{{writing.id} }" class="btn">{{writing.title}}</a></td>
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 강사님. 마이페이지 내 포인트 화면의 구매내역 조회기능을 구현 중에 있습니다. fetchPointTransactionsOfBuying API 로 구매내역을 조회하는데 판매자의 이름이 불러와지지 않습니다.. const FETCH_POINT_TRANSACTIONS_OF_BUYING = gql` query fetchPointTransactionsOfBuying($search: String, $page: Int) { fetchPointTransactionsOfBuying(search: $search, page: $page) { _id impUid amount balance status statusDetail useditem { _id name price seller { _id # name # email } buyer { _id name email } soldAt } createdAt } } `; useditem.seller._id 까지는 조회가 되는데 name 과 email 은 조회가 되지않습니다. 혹시나 해서 buyer 정보를 불러왔는데 buyer 도 _id 만 조회가 되고 name 과 email 는 조회가 되지 않습니다. 위와 같은 오류가 나오는데 제가 모르는 부분이 있는건지 데이터에 문제가 있는건지 잘 모르겠습니다.. !
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 초심자의 입장에서 사실 저러한 기능을 보면 그냥 처음에 만들때는 useCallback, React.memo 를 다 써보고 나중에 문제 생기면 그때 바꿔쓰면 되지 않나? 라는 생각이 듭니다. 마치 평소에는 const 로 다 만들고, 해보다가 let 으로 변경이 필요하다 싶으면 let 으로 바꾸는 것처럼요. 이걸 어떤 기준을 잡고 사용해야 할까요? 정확한 기준이 있는지도 궁금합니다. 렌더링 되는데 걸리는 시간이 몇 초 이상일시 변경한다거나 하는 기준이 있을까요?
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
Express에서 데이터 처리하기 강의 수강 중에 생긴 오류 입니다. 이후에 포스트맨에서 body 수정 후 send 시에도 Error: connect ECONNREFUSED이 오류가 떳습니다. index.js를 실행 후에 웹 브라우저에 http://localhost:8080/products 입력하면 [{"name":"농구공","price":5000}] 이렇게 웹 화면에 뜨면서 node:events:492 thorw er;도 같이 뜨면서 서버 에러가 납니다 database.sqlite3을 vs코드 열었을 때는 위 사진처럼 뜨고 sqllite로 열었을 때는 읽을 수 없다고 뜹니다
미해결
[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
질문1) 4000/test에서는 토큰이 표시되지만, 8002/v1/test 에서는 유효하지 않은 토큰으로 뜨는 이유가 무엇일까요? 로그에서는 401코드가 뜨다가 4000/test 접속 후 새로고침을 하면 200 코드가 로그에 다시 뜹니다. api 코딩 내용 첨부합니다. app.js controllers/v1 middleware/v1 routes/v1
미해결
Angular(2+) Front에서 Back까지 - Nest js를 알려면 Angular 모듈을 알아야한다!
Angular가 express 처럼 node.js 패키지로 개발된건가요? 타입스크립트기반이라 자바스크립트 실행환경이 필요한건 이해가 갑니다. 근데 완전 별도의 실행환경이 있을줄알았는데 node.js 기반이라고 해야하나요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
nodejs도 다운로드받고 coderunner도 확장자에서 설치했는데 원인을 모르겠습니다.
