묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
Next 13으로 작업 중 Login 실행에서 경고를 받았습니다.
Layout.tsx의 return을 return ( <html lang="en"> <AuthProvider> <body>{children}</body> </AuthProvider> </html> )위와 같이 수정했을 때에, 경고가 Login을 실행했을 때 발생했습니다. 무시하면 안 되는 경고인것 같아 어떻게 해결하는지 궁금하여 질문 남깁니다.경고 내용:Warning: Cannot update a component (`Router`) while rendering a different component (`Login`). To locate the bad setState() call inside Login, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
-
해결됨따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
강의 리뉴얼 일정을 알 수 있을까요?
"따라하며 배우는 리액트, 파이어베이스"이 강의를 리뉴얼 예정이라고 하셨는데언제 완성이 될지 일정을 알 수 있을까요?
-
미해결처음 만난 리액트(React)
실습 강의 미니프로젝트 const {} = props ;
function MainPage(props) {const {} = props ;props 에다 중괄호에 아무것도 없이 쓰는 건 객체를 선언하기 위함인가요? 무슨 기능을 하는지 모르겠어요 이 코딩 한 줄 쓰는 이유가 뭔가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강의 ver1, ver2 뭘듣고 있는지 어떻게 알수있나요?
강의 ver1, ver2 뭘듣고 있는지 어떻게 알수있나요? ver1, ver2 표시가 안되어있어서요!html, css, javascript 는 노션 링크 따로있나요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
리렌더링 동작에 따른 상태의 변화
안녕하세요? 질문 드립니다. state가 바뀔 때 마다 해당 컴포넌트에 대해 리렌더링이 발생한다고 하셨습니다. 리렌더링은 해당 컴포넌트를 반환하는 함수의 재호출로 인한 결과일텐데 어떻게 상태값이 다시 새로 초기화되지 않고 변화한 값을 들고 있는지 궁금합니다. 임의의 state에 대해 useState()로 인한 초기화가 매번 새롭게 호출될텐데 해당 state는 초기화값을 계속 할당받는 것이 아닌 변화한 값을 인식하고 있습니다. 내부의 원리가 궁금합니다.
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
diaryList 를 컴포넌트 porps으로 안내리고 map을 돌린 뒤 값을 prop 하는 이유가 궁금합니다.
<div> {diaryList.map(it => { <DiaryItem key={it.id} {...it} /> })} </div>강의중 궁금한부분이 있습니다. 반복문 map 돌려서 컴포넌트에 값을 주고 있는데요. 왜 컴포넌트에 통째로 diaryList를 props로 내리지 않는지 궁금합니다. 만약 내린다면<DiaryItem itemList={diaryList} />위처럼 내려서 해당 컴포넌트에서 map을 돌리지 않는 이유가 궁금합니다!
-
미해결Slack 클론 코딩[실시간 채팅 with React]
(배포 이슈)webpack 빌드 후 index.html을 열어보았는데 router부분이 실행이 안되는거같습니다..
App.tsx부분입니다. 여기에서 Router부분 주석처리하고 테스트중입니다라는 텍스트만 적어놓고 npm run build 후 생긴 index.html을 클릭하면 아래 이미지처럼 텍스트가 제대로 나오는거까진 확인을 하였습니다. 그런데 텍스트를 지우고 index.html 을 실행하면 화면에 아무것도 나오질 않습니다. 코드대로라면 백엔드와 통신이 안될 땐 로딩중입니다는 텍스트가 떠야하는데 말이죠.. import React, { FC } from 'react'; import './App.css'; import { Router } from '../router'; const App = () => { return ( <div className="App"> <Router /> </div> ); }; export default App; -npm run build 후 App.tsx에 <Router/> 주석 후 테스트중입니다 텍스트 입력 후 index.html 실행 화면-npm run build 후 App.tsx에 <Router/> 주석 해제 후 index.html 실행 화면 및 네트워크 개발자도구 -npm run dev (정상일 경우 동작해야하는 화면)제가 이 질문을 드린건 지금 s3에 버킷 생성 후 dist에 있는 폴더를 아래처럼 다 올렸습니다. 그 후 엔드포인트에 접속했는데 아무것도 안 뜨길래 로컬에서 빌드 후 생긴 index.html에 로딩중입니다가 떠야 s3 엔드포인트에 접속했을 때도 로딩중입니다가 뜰 거 같아서 로컬에서 문제를 해결해보고 있습니다.-s3 파일 업로드 화면- 아래는 웹 시작초기에 관련 있는 코드들이라 생각되어 같이 올립니다. client.tsx부분입니다. import 'core-js/stable'; import 'regenerator-runtime/runtime'; import React from 'react'; import { render } from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; import axios from 'axios'; import App from './layouts/App'; axios.defaults.withCredentials = true; axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? 'http://localhost:3095' : 'http://localhost:3095'; render( <BrowserRouter> <App /> </BrowserRouter>, document.querySelector('#app'), ); index.html입니다. <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>주식 캘린더</title> <style> html, body { margin: 0; padding: 0; overflow: initial !important; } body { font-size: 15px; line-height: 1.46668; font-weight: 400; font-variant-ligatures: common-ligatures; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } * { box-sizing: border-box; } </style> <!-- <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon.png" /> --> </head> <body> <div id="modal"></div> <div id="app"></div> <script src="./dist/app.js"></script> </body> </html> 하루 반나절동안 잡고 있는데도 해결이 안되어서 질문드립니다.. ㅠㅠ... 도와주세요 제발...ㅠㅠㅠㅠ
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
onChangePasswordCheck [password] 인자 문의
안녕하세요 zerocho 님아래 코드에서 const onChangePasswordCheck = useCallback( (e) => { console.log("onChangePasswordCheck1 :" + e.target.value); console.log("onChangePasswordCheck2:" + passwordCheck); //전 값을 참조함 setPasswordError(e.target.value !== password); setPasswordCheck(e.target.value); }, [password] //passwordCheck 로 바꾸어도 전 값을 참조함 ); 1.[password] 부분을 [] 바꾸어도 정상 작동 하는 것 같구요 [] 의미는 최초 render 시에만 함수를 생성한다는 의미로 알고 있습니다만...2.[passwordCheck]로 바꾸면... [웹 게임을 만들며 배우는 React/6-5. useMemo와 useCallback] 강의에 의하면 onChangePasswordCheck 안에서 passwordCheck 가 정상 참조 되어야 할 것 같은데.. 이전 값으로 참조 되는 것 같습니다. 2번째 인자 작동 방식이 정확히 이해 되지 않습니다.다시 한번 설명 부탁 드려도 될까요? (참고자료나, zerocho님, 다른 강의 부분 알려 주시면 직접 찾아 보겠습니다.)감사합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
깃주소
깃주소 알려주세요, 뭐 다 들어야 깃 주소를 아는건지 왜 찾을수가 없나요
-
미해결이미지 관리 풀스택(feat. Node.js, React, MongoDB, AWS)
es6 스타일로 Import 할때 동작하지 않습니다.
다른 모듈들은 정상적으로 사용이 가능한데 mime 모듈만 사용이 되지가 않아요..결과 값이 이렇게 저장이되는데 es6스타일로 사용이 안되는것인지요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
[강의 23:38] 비동기 처리 중 console.log() 호출 순서
안녕하세요 정환님, 인프런에 많은 강의를 들어보며 이렇게 만족스러운 강의가 있었나 싶을만큼 좋은 강의 제공해주셔서 감사드립니다. 비동기 처리 과정에 대해 질문드립니다.비동기 처리 결과를 다시 인수로 받아 연이어 사용하는 callback hell을 보여주시면서 실행 순서를 말씀해주셨습니다. 이때 call stack에 쌓이는 function context는 taskA()가 앞서지만 함수의 구현부가 비동기 함수로만 이루어져 WebAPIs에서 대기를 하게되고 이동안 taskA()의 다음 순서인 console.log()가 호출되는걸로 이해하면 될까요? 다시한번 좋은 강의 감사드립니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
중고마켓 게시물 Pick
혹시 중고마켓에서 게시글들어갈때 해당 게시글을 찜했는지 알 수 있는 API가 있을까여?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
이미지 못찾겠네요
강력한 css 섹션 5 단위심화 강의에서 고슴도치 이미지 파일을 자료에 올려놨다고 하는데 못찾겠어요 ㅡㅡ...뭔 자료를 이렇게 찾기 힘들게 올려논건지?장난하나.. 이미지 찾다가 시간 다갔네
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
serverState undefine 출력
import { configureStore } from "@reduxjs/toolkit"; import { createWrapper } from "next-redux-wrapper"; import reducer from "../reducers"; function getServerState() { return typeof document !== "undefined" ? JSON.parse(document.querySelector("#__NEXT_DATA__").textContent)?.props .pageProps.initialState : undefined; } const serverState = getServerState(); console.log("serverState", serverState); const makeStore = () => configureStore({ reducer, devTools: true, middleware: (getDefaultMiddleware) => getDefaultMiddleware(), preloadedState: serverState, // SSR }); const wrapper = createWrapper(makeStore); export default wrapper;ssr 문제를 계속 해결해보고 있는데 지금 보니 console.log()에 serverState가 undefined가 나옵니다 이게 혹시 문제의 원인인가 싶어서 그런데 serverState는 무었이고 왜 undefined가 나오나요?
-
해결됨웹 게임을 만들며 배우는 React
npx webpack 실행 시에 Debugger attached가 됍니다
2-5. 웹팩으로 빌드하기 수강 중에npx webpack 실행 시 밑에 사진처럼 오류가 발생됍니다client.jsx 파일입니다index.html 파일입니다package.json 파일입니다("main": "index.js" 밑에 debug라고 생성됐습니다)webpack.config.js 파일입니다WordRelay.jsx 파일입니다
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
DB만 도커 컨테이너로 올리는 이유?
안녕하세요 선생님, 좋은 강의 항상 감사드립니다^^현재 이 강의에서 DB를 Docker Container 안에 올렸는데, 이 이유가 궁금합니다. 구글링 했을 때는 DB가 안전하게 관리되는 것이 최우선이기 때문에, 현업에서는 On-premise 환경에서 구축한다는데,현재 저희는 빠르게 배포하는 것이 목적이기 때문에 docker 환경에 구성하는 것일까요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
is defined but never used 에러가 발생해요ㅠㅠ
[plugin:vite-plugin-eslint] /Users/--/Desktop/fullstack-app/frontend/src/layout/Footer/index.jsx 1:8 error 'React' is defined but never used no-unused-vars ✖ 1 problem (1 error, 0 warnings) 라는 에러가 계속 발생하여 구글링해서main.jsx 첫번째 줄에import React from 'react' //eslint-disable-line no-unused-vars 과 같이 주석을 달았는데도 오류가 해결이 안되어서 질문 올립니다ㅠㅠ
-
미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
마지막에 "" 로 채워주는 이유가 있을까요?
마지막에 setContent("")로 해주는 이유가 있을까요?
-
미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
React-router-dom을 설치하고 react app이 크롬에서 실행되지 않습니다.
똑같은 버전 설치하고, 코딩을 따라서 입력했는데 BrowserRouter을 사용한 후로 크롭에서 실행되지 않습니다.해결방법이 있을까요?
-
미해결Slack 클론 코딩[실시간 채팅 with React]
현재 깃허브는 셋팅이 완료되있는 상태인가요?
안녕하세요 선생님 다름 아니라 현재 세팅하기 부분 강의 듣고있는데,화면과 다른게 제가 클론해온 파일은 alecture 폴더에 셋팅이 다 완료되어있는것같아서 문의드립니다.https://github.com/zerocho/sleact/tree/master여기서 클론 해왔구요그러면 현재 셋팅하는 강의는 다 건너뛰고 바로 회원가입 파트로 넘어가면 되는지요?
