묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
mime-types 패키지를 import 할 때 에러 발생
mime-types를 설치하고 import 시킨 후에 해당 사진과 같은 에러가 발생합니다..
-
미해결풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
scss 스타일 적용
혹시 scss 스타일 적용이 안되는 이유 여쭤봐도 될까여?
-
해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
yarn run client시 에러는 안 나는데 호스트가 열리질 않습니다 ㅠㅠ
혼자 해결해보려 했으나 해결이 안돼 글 남깁니다 ㅠㅠ이렇게 정상적으로 열리는 듯 하지만 열리지 않고 계속 이 상태에서 멈춰있습니다.참고로 원래 개인 프로젝트 할때 yarn 으로 하고 있었고 yarn start 시에는 문제가 없었습니다 !ㅜㅜ왜 이럴까요?
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
getStaticProps 두개의 질문있습니다
1.getStaticProps를 about 페이지에 사용하셨는데빌드를 하고 나서 유저의 게시글 개수 팔로우 개수 팔로워 개수가 바뀔 수 있잖아요?근데 getStaticProps를 사용했고빌드시 html로 만들어 저장하고 그 html을 브라우저로 전달하기 때문에DB의 데이터가 바뀌어도브라우저 화면의 about페이지에는 빌드시의 html이 보여지게 되서 데이터 갱신이 안되는데 맞나요?? 2.그리고 html로 바뀌는 대상이 about페이지라면about컴포넌트의 자식 AppLayout의 자식 UserProfile 컴포넌트에는 동적인 데이터가 쓰이기 때문에 말이 안되는 것 같은데 html로 바뀌는 대상이 정확히 뭔지 알 수 있을까요??
-
미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
깃허브
깃허브에 코딩한거 올려주시나요?하신다면 링크 알 수 있을까요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
logout시 token이 삭제되지 않습니다.
postman에서 logout을 시도해도 mongoDB에서는 token이 삭제가 되지 않아 콘솔로 req.user._id를 찍어보니 undefined가 나와auth를 확인해보니 req.user 값이 제대로 들어가질 않는 거 같습니다. 혹시 어느 부분을 바꿔야 req.user에서 제대로 값이 출력되고 logout시 token도 삭제 될까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
ant icon 질문있습니다
import { GithubOutlined } from "@ant-design/icons"; import styled from "@emotion/styled"; import { useRouter } from "next/router"; const Wrapper = styled.div` height: 80px; padding: 0px 50px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; background-color: #fff4f4; `; const LoginWrapper = styled.div` display: flex; flex-direction: row; `; const LoginBtn = styled.button` width: 100px; height: 40px; background-color: orange; border: 2px solid orange; border-radius: 10px; font-size: 16px; color: white; cursor: pointer; `; const SignBtn = styled.button` width: 100px; height: 40px; background-color: orange; border: 2px solid orange; margin-left: 10px; border-radius: 10px; font-size: 16px; color: white; cursor: pointer; `; export default function LayoutHeader(): JSX.Element { const router = useRouter(); const onClickLogo = (): void => { void router.push("/boards/page"); }; const onClickLogin = (): void => { void router.push("/boards/login"); }; const onClickSign = (): void => { void router.push("/boards/sign"); }; return ( <Wrapper> <GithubOutlined style={{ fontSize: "50px" }} onClick={onClickLogo} /> <LoginWrapper> <LoginBtn onClick={onClickLogin}>로그인</LoginBtn> <SignBtn onClick={onClickSign}>회원가입</SignBtn> </LoginWrapper> </Wrapper> ); }다음과 같이 코드를 작성했을때 다음과 같은 에러 메시지가 나오는데 rev 에 어떤 속성을 줘야되나요?
-
미해결(2025 최신 업데이트)리액트 : 프론트엔드 개발자로 가는 마지막 단계
더보기..
영상 밑에 더보기 주소가 안보입니다
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
버전 관리에 대한 궁금증이 있습니다.
react가 18버전으로 업그레이드 되었지만 실무에서는 안전한 17버전을 쓰고 next는 12.1.0 버전 react는 17.0.2 버전을 쓴다고 하셨는데, 이러한 정보들은 어디서 얻을 수 있나요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
비밀번호 수정 기능에 관해 궁금한 점이 있습니다.
마이페이지에서 비밀번호 수정 기능을 구현 중에 있습니다.현재 비밀번호와 새로운 비밀번호를 입력하고 뮤테이션을 날릴 때에는 새로운 비밀번호만 넣어서 저장을 하는 것으로 이해를 했습니다. 기존 비밀번호의 체크는 백엔드에서 이루어지는 과정이 따로 없는 것 같아서요. 제가 가볍게 생각해보기로는 loginUser api를 활용해서 체크를 해야하나 싶은데요, 현재 비밀번호 체크 로직이 이 과정에서 구현 가능한지 아니면 추가로 다른 기능이 있어야 가능한건지 궁금합니다!
-
미해결Slack 클론 코딩[실시간 채팅 with React]
로그아웃시 쿠키 남아있는것 관련 질문
안녕하세요 제로초님! 강의 잘 듣고 있습니다.다름이아니라 강의 내용대로 따라가면서 무리없이 로그인 로그아웃 동작하도록 만들었는데현재 상태는 로그아웃을 하게되면 swr을 revalidate 해서 로그아웃을 수행한 상태에서는 유저정보 api를 호출할 수 없으니 undifined가 되어서 그 값으로 페이지 이동을 제어한다 라고 이해를 했는데 혹시 맞을까요? 맞다면 로그아웃 후에도 클라이언트 사이드에 쿠키에 토큰값이 아직 지워지지 않은채로 남아있는데 백엔드에서는 로그인처리가 되었어도 프론트에서 쿠키값을 따로 지워줄 필요는 없는것인지 궁금합니다!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
파일 이동을 윈도우에서 사용법도 알고 싶습니다
우분투와 맥북 기준 말고윈도우에서는Alt -alt shift -이 두가지를 어떻게 사용 하나요?
-
미해결Slack 클론 코딩[실시간 채팅 with React]
axios로 api 호출 후, swr로 다시한번 get 요청을 하는 이유가 궁금합니다.
안녕하세요 제로초님 강의 잘 듣고 있습니다.우선 에러가 발생하여 질문하는 것은 아니구요. axios와 swr을 활용하는 과정에서 의문점이 생겨서 질문을 드렸습니다.axios 로 로그인 api를 호출하게되면 response에 로그인한 유저의 정보를 받을 수 있는데로그인이 성공한 후 swr을 사용해서 유저 정보 조회 api를 서버에 get요청으로 다시 받아 쓰는 이유가 뭔지 궁금합니다.
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
serializer에 왜 create/update/save함수가 있나요?
안녕하세요 수업 잘 듣고 있어요 :) DRF 시리얼라이저 궁금한 게 있는데..시리얼라이저에서 update, create, save를 오버라이딩 할 수 있는데, 이게 json으로 들어온 값을 객체로 만들어서 바로 DB에 넣기 위해 존재한다고 보면 맞을까요?장고는 MVT 모델이잖아요, 프론트엔드를 react로 하게 되면 DRF에서는 M, V만 건들면 될 것 같고Model을 수정하는 create, update, save 같은 로직은 view단에서 해야할 거 같은데 왜 이게 시리얼라이저에 들어가 있는 지 궁금해요 ㅜㅜ 예를 들어 회원가입 요청이 json, post요청으로 날아오면View단에서 CreateAPIView의 post 함수 오버라이딩 하면서 시리얼라이즈하면서 객체 A로 만들어주고, 이걸 someModel.objects.create (A)해야할 것 같은데, 이게 왜 serializer 속으로 들어가 있는 지 궁금합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
fetchPointTransactionsOfBuying API에서 특정 정보만 불러와지지 않습니다.
안녕하세요 강사님.마이페이지 내 포인트 화면의 구매내역 조회기능을 구현 중에 있습니다.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는 조회가 되지 않습니다.위와 같은 오류가 나오는데 제가 모르는 부분이 있는건지 데이터에 문제가 있는건지 잘 모르겠습니다.. !
-
미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
이미지가 안보인다 하셔서 다시 질문드립니다.
안녕하세요 선생님!말씀 주신대로 7-6강 보고 왔지만... 혼자서는 문제의 원인 파악이 힘들어서 다시 재질문 드립니다 ㅠㅠ로그를 확인해 보니 calculate.test.js에서 Fail이 발생되고 있지만, 원인 파악은 아직 못한 상태입니다 ㅠㅠ 레포지토리 주소도 같이 올려드립니다! PASS src/pages/OrderPage/tests/Type.test.js (7.469 s) FAIL src/pages/OrderPage/tests/Calculate.test.js (7.513 s) ● Console console.error Warning: An update to Type inside a test was not wrapped in act(...). When testing, code that causes React state updates should be wrapped into act(...): act(() => { /* fire events that update state */ }); /* assert on the output */ This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act at fn (D:\www\react-shop-test\src\pages\OrderPage\Type.js:8:17) 17 | try { 18 | const response = await axios.get(`http://localhost:5000/${orderType}`); > 19 | setItems(response.data); | ^ 20 | } catch (err) { 21 | setError(true); 22 | } at printWarning (node_modules/react-dom/cjs/react-dom.development.js:86:30) at error (node_modules/react-dom/cjs/react-dom.development.js:60:7) at warnIfUpdatesNotWrappedWithActDEV (node_modules/react-dom/cjs/react-dom.development.js:27589:9) at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:25508:5) at setItems (node_modules/react-dom/cjs/react-dom.development.js:17527:7) at loadItems (src/pages/OrderPage/Type.js:19:7) ● update product's total when products change expect(element).toHaveTextContent() Expected element to have text content: 0 Received: 총 가격: 6 | 7 | const productsTotal = screen.getByText("총 가격:", { exact: false }); > 8 | expect(productsTotal).toHaveTextContent("0"); | ^ 9 | 10 | // const americaInput = await screen.findByRole("spinbutton", { 11 | // name: "America", at Object.<anonymous> (src/pages/OrderPage/tests/Calculate.test.js:8:25) PASS src/App.test.js (7.781 s) ● Console console.error Warning: An update to Type inside a test was not wrapped in act(...). When testing, code that causes React state updates should be wrapped into act(...): act(() => { /* fire events that update state */ }); /* assert on the output */ This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act at fn (D:\www\react-shop-test\src\pages\OrderPage\Type.js:8:17) at div at div at OrderPage at div at App 17 | try { 18 | const response = await axios.get(`http://localhost:5000/${orderType}`); > 19 | setItems(response.data); | ^ 20 | } catch (err) { 21 | setError(true); 22 | } at printWarning (node_modules/react-dom/cjs/react-dom.development.js:86:30) at error (node_modules/react-dom/cjs/react-dom.development.js:60:7) at warnIfUpdatesNotWrappedWithActDEV (node_modules/react-dom/cjs/react-dom.development.js:27589:9) at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:25508:5) at setItems (node_modules/react-dom/cjs/react-dom.development.js:17527:7) at loadItems (src/pages/OrderPage/Type.js:19:7) console.error Warning: An update to Type inside a test was not wrapped in act(...). When testing, code that causes React state updates should be wrapped into act(...): act(() => { /* fire events that update state */ }); /* assert on the output */ This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act at fn (D:\www\react-shop-test\src\pages\OrderPage\Type.js:8:17) at div at div at div at OrderPage at div at App 17 | try { 18 | const response = await axios.get(`http://localhost:5000/${orderType}`); > 19 | setItems(response.data); | ^ 20 | } catch (err) { 21 | setError(true); 22 | } at printWarning (node_modules/react-dom/cjs/react-dom.development.js:86:30) at error (node_modules/react-dom/cjs/react-dom.development.js:60:7) at warnIfUpdatesNotWrappedWithActDEV (node_modules/react-dom/cjs/react-dom.development.js:27589:9) at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:25508:5) at setItems (node_modules/react-dom/cjs/react-dom.development.js:17527:7) at loadItems (src/pages/OrderPage/Type.js:19:7) Test Suites: 1 failed, 2 passed, 3 total Tests: 1 failed, 4 passed, 5 total Snapshots: 0 total Time: 13.137 s Ran all test suites related to changed files.👇 기존 질문https://www.inflearn.com/questions/985742
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
서버 배포 후 생기는 보안오류 문제
이렇게 pm2로 client, server를 둘다 실행 시켰고, 맨 처음 client만 실행했을 때는 포트 80번이 3000번으로 잘 우회되어 보여졌는데 서버 실행 부분을 따라하면서 pm2로 서버를 실행시킨 후 부터 보안오류가 떠서 사이트 접근이 막혔습니다..이러한 보안 오류가 떴습니다. 이후, EC2 인스턴스 퍼블릭 IPv4 DNS주소로 들어가기만 하면 저런 경고 사이트가 뜹니다.ㅠㅠ어떻게 해결할 수 있을까요?..아래에 작성한 코드 첨부 했습니다. server package.json 파일의 scripts 부분 코드 입니다. "scripts": { "start": "ts-node src/server.ts", "start:production": "env-cmd -f .env.production ts-node ./src/server.ts", "dev": "env-cmd -f .env.development nodemon --exec ts-node ./src/server.ts", "test": "echo \"Error: no test specified\" && exit 1", "typeorm": "typeorm-ts-node-commonjs" }, server의 .env.production 파일입니다. (token시크릿 키는 제외시킨 부분)PORT=4000 NODE_ENV=production APP_URL=http://ec2-54-81-196-163.compute-1.amazonaws.com:4000 ORIGIN=http://ec2-54-81-196-163.compute-1.amazonaws.com 추가적으로, pdf 파일에는 백엔드 서버 실행 다음 부분에 백엔드 서버와 데이터 베이스 도커를 통해 연결하기 파트가 있던데 해당 부분은 영상 제작에서 제외시키신 건가요? 아니면 배포 영상 쪽 말고 다른 영상에서 찍으신거면 어떤 영상에서 확인 가능한지 알려주시면 감사하겠습니다..!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
회원가입 과제
infor_box를 css에서 인식?을 못하는데 html 어디에 문제가 있는걸까요?ㅠㅠㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
husky 설치과정을 잘 모르겠습니다
영상에 나오는 것 처럼 따라하게 되면 npx husky install 부분에서 다음과 같은 오류가 나오게 되고 자료 집에 주신것처럼 husky ver4로 할 때 package.json 설정한 후에 어떻게 해야 될지 잘 모르겠습니다
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
git push origin master 입력시 오류가 발생해요!
git push origin master 입력시 위와 같은 오류가 나옵니다..! 확인부탁드립니다ㅠㅠ