묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결처음 만난 리액트(React)
섹션 2 create-react-app
npx create-react-app my-app이라고 작성했는데 오류가 나타납니다. node.js와 npm버전은 모두 14.0과 6.14 이상입니다PS C:\Users\이민준> npx create-react-app my-app npm ERR! code ENOENT npm ERR! syscall lstat npm ERR! path C:\Users\이민준\AppData\Roaming\npm npm ERR! errno -4058 npm ERR! enoent ENOENT: no such file or directory, lstat 'C:\Users\이민준\AppData\Roaming\npm' npm ERR! enoent This is related to npm not being able to find a file. npm ERR! enoent npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\이민준\AppData\Local\npm-cache\_logs\2023-08-02T12_46_01_759Z-debug-0.log PS C:\Users\이민준>
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
중고마켓 답변질문입니다.
강사님 안녕하세요,혹시 똑같은사람이 다른 질문을 할 수 있는데여그럼 그때는 어떻게 해당 답변을 판단할 수 있나여?쿼리에서는 판단할수있는게 없는데요.... 이럴때는 어떻게 해야할지 모르겠습니다..useditemQuestion._id 는 질문한 사람이 같기때문에 판단할수없고요... 그리고 useditemQuestionId는 어떤걸로 잡아야하나요 해당 detail 페이지의 상품을 id로 잡아야하나요? 아니면 판매자의 id를 잡아야하나요?
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
페이지 이동시에 너무 느림
넥스트 서버사이드렌더링 까지 다한상태인데 getStaticProps는 정말 빨리 넘어갑니다 하지만 getServerSideProps으로 만든 페이지는 정말 3초? 이상 걸립니다. 서버도 다 한국으로 시작했고 GCP 쓰고 있습니다서버속도 문제가 아니라면 속도를 줄일수있는방법이 머가있을까요.. ㅜㅜbuild 시에 페이지 용량도 높지 않습니다. 정적페이지랑 차이도 별루 없구요 ㅜㅠ2.back 에서 데이터를 가져올 때 시간이 많이 걸리는거 같은데 페이지 이동이라도 빠르게 진행하고 그다음 데이터를 불러오는 방법을 어떻게 깔삼하게 구현할 수 있을까요..
-
미해결처음 만난 리액트(React)
섹션 2 리액트 시작하기 (실습) 직접 리액트 연동하기
click 버튼이 나타나지 않습니다.코드는 정상적으로 오타가 없는지 여러 번 확인했습니다.function MyButton(props){ const [isClicked, setIsClicked] = React.useState(false); return React.createElement( 'button', {onClick: () => setIsClicked(true)}, isClicked ? 'Clicked!' : 'Click here!' ) } <html> <head> <title>민준의 블로그</title> <link rel="stylesheet" href="sylesj.css"> </head> <body> <h1>민준의 블로그에 오신 여러분들 환영합니다</h1> <div id="root"></div> <!--리액트 가져오기--> <script src="https://unpkg.com/react@17/umd/react.decelopment.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react.decelopment.js" crossorigin></script> <!--리액트 컴포넌트 가져오기--> <script src="MyButtonj.js"></script> </body> </html>
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
onEdit setData 없어도 되는건가요?
안녕하세요 강사님!강의를 따라가는 도중 제가 onEdit 함수에 setData를 하지 않았다는 사실을 알게 되었습니다.하지만 setData를 해주지 않고 data에 map 함수로 변경 해주는 동작만 해도 정상적으로 수행되는데 왜 그런지 알 수 있을까요?useCallback 해주기 전에도 정상 동작한 이유도 궁금하고 강사님께서 알려주신 대로 data에는 컴포넌트가 마운트 됐을때 data 상태인 빈 배열이 들어가 있어야 하는 것이 아닌가요?아래는 제가 짠 onEdit 함수 입니다const editDiary = useCallback((targetId, editedContent) => { data.map((e) => e.id === targetId ? {...e, content: editedContent} : e ) }, [])
-
해결됨부트캠프에서 알려주지 않는 것들 (리액트) 1편
test 코드 작성시 질문
vite를 사용하고 있으며 현재 촐더 구조입니다.현재 jest.setup.ts 파일내용입니다. (챗 gpt에게 물어본 결과 setupTest.ts로 바꿔야한다는 답변을 받았지만 꼭 바꿔야하는지 잘모르겠습니다.)import "@testing-library/jest-dom" import { server } from "./src/mocks/server" beforeAll(() => server.listen()) afterEach(() => server.resetHandlers()) afterAll(() => server.close()) msw를 사용 하기위해 필요한 설정을 해놓았습니다.다음은 테스팅을 위한 컴포넌트 입니다.import axios from "axios" import React, { useEffect, useState } from "react" const Direction: React.FC = () => { const [data, setData] = useState<any>({}) const [isLoading, setIsLoading] = useState(true) useEffect(() => { void (async () => setData(await (await axios("https://jsonplaceholder.typicode.com/todos/1")).data))() setIsLoading(false) }, []) return ( <> {isLoading ? ( <div>loading...</div> ) : ( <ul> <li>{data.id} / </li> <li>{data.title} /</li> <li>{data.userId} /</li> </ul> )} </> ) } export default Direction 보시는 것처럼 데이터를 불러와서 화면에 표시하는 컴포넌트 입니다. 다음은 테스트 케이스 입니다.import { render, screen } from "@testing-library/react" import Direction from "." test("Direction 컴포넌트가 정상적으로 렌더링되는지 테스트", async () => { render(<Direction />) const result = await screen.findAllByRole("listitem") expect(result).toHaveLength(3) })해당 코드를보시면 간단해서 에러없이 깔끔하게 성공합니다.하지만 프로젝트에서 swr을 사용하기로 했는데 여기서 문제가 발생합니다.import React from "react" import useSWR from "swr" const Direction: React.FC = () => { const { isLoading, data } = useSWR("https://jsonplaceholder.typicode.com/todos/1") return ( <> {isLoading ? ( <div>loading...</div> ) : ( <ul> <li>{data.id} / </li> <li>{data.title} /</li> <li>{data.userId} /</li> </ul> )} </> ) } export default Direction 컴포넌트를 swr을 사용하는 방식으로 바꾸고 테스트를 실행해보면 findAllByRole에서 listitem을 찾을수 없다는 에러가 발생합니다.swr의 특성인거같긴한데 도무지 해결방안이 떠오르지 않습니다.react-query나 swr같은 캐싱라이브러리를 사용하면서 msw를 사용하여 테스트를 하고 싶은데 따로 설정해야하는 것들이나 권장되는 코드 작성 방식이 따로 있나요?그것이아니라면 어떤부분을 수정해야 제대로 작동할까요?
-
미해결처음 만난 리액트(React)
npm start해도 안됩니다.
index.jsLibrary.jsxBook.jsx
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
일기 추가 시 DiaryEditor 리렌더링 질문
안녕하세요 강사님강의를 듣고 저는 React.memo로 DiaryEditor를 고차 컴포넌트를 만들어 동일한 prop을 받았을 때 리렌더링 되지 않도록 해주고 onCreate 함수를 useCallback을 통해 메모리제이션 하여 같은 함수를 DiaryEditor에 prop으로 전달한다고 이해했습니다그래서 제가 생각했을 땐 일기를 새로 저장하거나, 삭제, 수정하는 작업 중에는 DiaryEditor가 아예 리렌더링이 되지 않아야 된다고 생각했는데 강의 14분 17초에서도 그렇고 제가 직접 짠 코드에서도 일기를 새로 저장할 때 리렌더링이 되는데 제가 이해한게 잘못 된건가 싶어 질문 드립니다!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
혹시 강의 중에 git clone 말씀하시는데, git 주소를 좀 알수 있을까요?
혹시 강의 중에 git clone 말씀하시는데, git 주소를 좀 알수 있을까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
css-in-js 질문입니다!!
안녕하세요!! 수업 잘듣고있습니다.jsx내에서 div태그 속에 여러 css-in-js 변수들을 입력하려면 어떻게 해야하나요??아래와 같이 className 방식을 사용했는데 기존 css 방식이어서 안먹히는건가요...?<ProfileLink> <div className={clsx[styles.Click, styles.LinkLight].join(" ")}> <img src="/ic_link.png" /> </div> <Click> <img src="/ic_location.png" /> </Click> </ProfileLink>
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
Entity 생성 시 import 내용 자동 생성
제가 코드를 한 번에 입력하지 않고 나눠서 강의를 봐서 놓친 것일 수도 있는데..@Entity("votes")를 입력하면 제일 위쪽에 자동으로 import {Entity} from "typeorm" 등의 코드가 강의에서는 생기던데 혹시 import 코드가 자동으로 생성되지 않는 이유는 무엇일까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
eslint 적용안됨
선생님이 설명하신 것처럼 따라서 했는데 저장할 시 저절로 2칸 tab되는 기능이 안되는데 어디서 잘못된 지 알려주시면 감사하겠습니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
find로 댓글을 가져오는 부분이 이상합니다
console.log로 action과 post를 찍어봤는데 post의 값이 이상합니다redux dev tools도 확인해보면 제가 지금 넣은 데이터의 형식이 content만 들어가 있습니다 어떻게 해야하나요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
로그인에 성공해도 name을 불러오지 못 하는거 같습니다
playgroud 에서 회원을 생성 이후 login 페이지에서 로그인을 성공적으로 하였으나 login success 페이지에서 fetchuserloggedin 이 성공적으로 이루어 지지 않는거 같습니다. 회원가입을 여러번 해서 다른 계정으로 시도해도 name 부분이 표시가 되지 않네요. 혹시 뭐가 문제일까요? import { useState } from "react"; import { gql, useMutation } from "@apollo/client"; import { IMutation, IMutationLoginUserArgs, } from "../../../src/commons/types/generated/types"; import { accessTokenState } from "../../../src/commons/stores"; import { useRecoilState } from "recoil"; import { useRouter } from "next/router"; const LOGIN_USER = gql` mutation loginUser($email: String!, $password: String!) { loginUser(email: $email, password: $password) { accessToken } } `; export default function LoginPage() { const router = useRouter(); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [loginUser] = useMutation< Pick<IMutation, "loginUser">, IMutationLoginUserArgs >(LOGIN_USER); const [, setAccessToken] = useRecoilState(accessTokenState); const onChangneEmail = (event) => { setEmail(event.currentTarget.value); }; const onChangnePassword = (event) => { setPassword(event.currentTarget.value); }; const onClickLogin = async () => { try { //1.로그인 뮤테이션 날려서 accessToken 받아오기 const result = await loginUser({ variables: { email, password, }, }); const accessToken = result.data?.loginUser.accessToken; console.log(accessToken); //받아온 accessToken 을 글로벌 스테이트에 저장해야지 모든 애들이 쓸수 있음 if (accessToken === undefined) { alert("로그인에 실패했습니다: 다시 시도해주세요"); return; } setAccessToken(accessToken); // 3. 로그인 성공 페지이로 이동하기 void router.push("/section23/23-01-login-success"); } catch (error) { if (error instanceof Error) alert(error.message); } }; return ( <> 이메일:{" "} <input onClick={onChangneEmail} type="text" placeholder="이메일 입력" /> 비밀번호:{" "} <input onClick={onChangnePassword} type="password" placeholder="비밀번호 입력" /> <button onClick={onClickLogin}>로그인</button> </> ); } import { useQuery, gql } from "@apollo/client"; import type { IQuery } from "../../../src/commons/types/generated/types"; const FETCH_USER_LOGGED_IN = gql` query { fetchUserLoggedIn { email name } } `; export default function LoginPage() { const { data } = useQuery<Pick<IQuery, "fetchUserLoggedIn">>(FETCH_USER_LOGGED_IN); return <>{data?.fetchUserLoggedIn.name}님 환영합니다!</>; }
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
null? blank? 차이
- 여러분의 질문을 고대하고 있습니다. :-)- 질문 전에 검색을 먼저 해보세요. 사람 사는 게 다 비슷하다는 것을 알게 됩니다.- 예의는 거침없이 질문하기 위한 최고의 발명품입니다.- 100개의 설명이 스크린샷 한방 보다 못할 수 있습니다.- 코드를 첨부하면 전세계 누구나 이해할 수 있는 질문이 됩니다.- 하나의 질문에는 하나의 주제를 담아야 답변도 예리해집니다.- 시행착오를 알려주시면 곧 바로 원하는 문제에 집중할 수 있습니다.- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 선생님 혹시 model 생성시 null=True와 blank=True의 차이점은 뭔가요? 둘다 값을 부여하지않아도 된다라는 식으로 이해하고 있어서요
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
Button is not defined
프로필 탭 들어갈 시 Button is not defined 이라는 오류가 뜹니다 제 코드는 import React from "react"; import PropTypes from "prop-types"; import { List } from "antd"; import Item from "antd/lib/list/Item"; import { StopOutlined } from "@ant-design/icons"; import { isStyledComponent, keyframes } from "styled-components"; const FollowList = ({ header, data }) => { return ( <List style={{ marginBottom: 20 }} grid={{ gutter: 4, xs: 2, md: 3 }} size="small" header={<div>{header}</div>} loadMore={ <div style={{ textAlign: "center", margin: "10px 0" }}> <Button>더 보기</Button> </div> } bordered dataSource={data} renderItem={(Item) => ( <List.Item style={{ marginTop: 20 }}> <Card actions={[<StopOutlined key="stop" />]}> <Card.Meta description={Item.Nickname} /> </Card> </List.Item> )} /> ); }; FollowList.propTypes = { header: PropTypes.string.isRequired, data: PropTypes.array.isRequired, }; export default FollowList; 입니다 무엇이 문제 일까요?
-
미해결처음 만난 리액트(React)
npm start
npm start를 하면 여기서 멈추고 원하는 화면이 안나오는데 어떻게 해야하나요?
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
try catch문이 있는데 if문으로 에러처리를 따로 하는 이
router.get("/", async (req, res, next) => { try { if (req.user) { // findOne에서 에러가 생기는 거는 try catch문으로 처리가 안된 const user = await User.findOne({ where: { id: req.user.id }, }); res.status(200).json(user); } else { res.status(200).json(null); } } catch (error) { console.error(error); next(error); } });이부분에서 아직 로그인을 하지 않아서 유저 정보가 없을때 User.findOne에서 에러가 나기 때문에 if문으로 감싸서 아직 유저정보가 없을 때를 예외 처리 해주셨는데 어차피 User.findOne에서 에러가 나면 catch문으로 이동해서 에러가 처리가 되는데 굳이 if else로 예외 처리 하신 이유가 있나요?
-
미해결처음 만난 리액트(React)
(실습_리액트18)시계만들기_코드_index.js
import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import Library from './chapter_03/Library'; import Clock from './chapter_04/Clock'; const root = ReactDOM.createRoot(document.getElementById('root')); setInterval(() => { root.render( <React.StrictMode> <Clock /> </React.StrictMode> ); },1000);
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션28 오류 질문
검색 해보니까 input태그에 자식을 넣어서 발생하는 에러라고 하는데 코드에는input태그에 props를 넣은것 빼곤 그럴만한 에러사항이 없습니다. 무엇이 문제인가요..?ㅠ index.jsimport BoardWrite from "../../../src/components/units/board/write/BoardWrite.container"; export default function GraphqlMutationPage() { // 한 줄일 땐 괄호() 필요 없음 return ( <div> <div>########## 여기는 페이지입니다.####### </div> <BoardWrite />;<div>########## 여기는 페이지입니다.####### </div> </div> ); } BroadWrite.container.js:import { useMutation } from "@apollo/client"; import { useState } from "react"; import BoardWriteUI from "./BoardWrite.presenter"; import { 나의그래프큐엘셋팅 } from "./BoardWrite.queries"; export default function BoardWrite(props) { const [writer, setWriter] = useState(); const [title, setTitle] = useState(); const [contents, setContents] = useState(); const [나의함수] = useMutation(나의그래프큐엘셋팅); const onClickSubmit = async () => { const result = await 나의함수({ variables: { // variables 이게 $ 역할을 함 writer: writer, title: title, contents: contents, }, }); console.log(result); }; const onChangeWriter = (event) => { setWriter(event.target.value); }; const onChangeTitle = (event) => { setTitle(event.target.value); }; const onChangeContents = (event) => { setContents(event.target.value); }; return ( <div> <div>$$$$$$$$$여기는 컨테이너입니다.$$$$$$$$</div> <BoardWriteUI aaa={onClickSubmit} bbb={onChangeWriter} ccc={onChangeTitle} ddd={onChangeContents} /> <div>$$$$$$$$$여기는 컨테이너입니다.$$$$$$$$</div> </div> ); } BroadWrite.presenter.jsimport { RedInput, BlueButton } from "./BoardWrite.styles"; export default function BoardWriteUI(props) { return ( <div> <div>@@@@@@@@@@@여기는 프리젠터입니다.@@@@@@@@@@</div> <div> 작성자: <RedInput type="text" onChange={props.bbb} /> 제목: <input type="text" onChange={props.ccc} /> 내용: <input type="text" onChange={props.ddd} /> <BlueButton onClick={props.aaa}>GRAPHQL-API 요청하기</BlueButton>; </div> <div>@@@@@@@@@@@여기는 프리젠터입니다.@@@@@@@@@@</div> </div> ); } BroadWrite.styles.jsimport styled from "@emotion/styled"; export const RedInput = styled.input` border-color: red; `; export const BlueButton = styled.input` background-color: blue; `;
