176만명의 커뮤니티!! 함께 토론해봐요.
미해결
[리뉴얼] React로 NodeBird SNS 만들기
강의에서 프로필 페이지 접근을 막기 위해 useEffect + redirect 패턴을 사용해주셨는데요, 특정 페이지 접근을 막는 좀 더 고차원적인 방법을 고민해보신 경험이 있는지 궁금합니다 현재 방식은 useEffect라 해당 페이지 한번은 렌더링되다보니, 접근 자체를 막는게 아니라 한번 갔다가 돌아오는 식이라 아쉬운 부분이 있습니다 최적화 관점 : 해당 페이지 js를 불러와야 함 등 보안 관점 : 명확치 않으나 왠지 hole이 있을 것 같음
미해결
[리뉴얼] React로 NodeBird SNS 만들기
createGlobalStyle이 컴포넌트 형태로 적용되다보니 마치 현재 컴포넌트 하위만 적용될 것 같은 느낌이 있는데요 실제 영향범위는 class 수정이므로 페이지 전체에 영향을 끼치다보니 개인적으로 비직관성이 느껴집니다 createGlobalStyle을 실제로 사용하신 경험이 있는지와 사용하셨다면 _app 외에 다른 위치에서도 쓰셨는지 궁금합니다
미해결
[리뉴얼] React로 NodeBird SNS 만들기
인라인 스타일 사용 시 style이라는 객체 prop이 매번 달라져 리렌더링이 발생한다고 해주신 부분 관련하여 질문드립니다 부모가 리렌더링되는 상황이라 이와 무관하게 자식의 리렌더링도 유발하게 될텐데요 자식 컴포넌트 자체에 memo를 적용하는 경우가 아니라면, useMemo를 쓰더라도 최적화 효과가 없을 것으로 보이는데 맞을까요?
미해결
따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
jsx파일의 코드를 수정하면 영상처럼 바로바로 바뀌어야하는데 웹을 클릭하면 새로고침되고 클릭안하면 업뎃이 안돼요
미해결
따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
강의 영상 2분에 보면 app.use('/users', require('./routes/users'));가 있는데 전 영상들에서 저런 코드는 없었는데 따로 추가해야하나요
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요. 강사님 mac os에서 react 실습을 위해 npm create vite@latest 명령으로 프로젝트 생성후 npm install 명령어 사용시 아래와 같은 에러가 발생하였습니다. npm error code EEXIST npm error syscall rename npm error path /Users/iyyu/.npm/_cacache/tmp/9f07dca7 npm error dest /Users/iyyu/.npm/_cacache/content-v2/sha512/49/2e/ac0ddadc45673e1875be27d9e800ecb71c6d19b3093d78eae941b57686d6db724a1416e97affe9b66f3897f6634e1238fad6515f2d530f293983e18230d3 npm error errno EEXIST npm error Invalid response body while trying to fetch https://registry.npmjs.org/json5 : EACCES: permission denied, rename '/Users/iyyu/.npm/_cacache/tmp/9f07dca7' -> '/Users/iyyu/.npm/_cacache/content-v2/sha512/49/2e/ac0ddadc45673e1875be27d9e800ecb71c6d19b3093d78eae941b57686d6db724a1416e97affe9b66f3897f6634e1238fad6515f2d530f293983e18230d3' npm error File exists: /Users/iyyu/.npm/_cacache/content-v2/sha512/49/2e/ac0ddadc45673e1875be27d9e800ecb71c6d19b3093d78eae941b57686d6db724a1416e97affe9b66f3897f6634e1238fad6515f2d530f293983e18230d3 npm error Remove the existing file and try again, or run npm npm error with --force to overwrite files recklessly. npm error A complete log of this run can be found in: /Users/iyyu/.npm/_logs/2025-07-05T06_41_32_142Z-debug-0.log iyyu@yuilyongui-MacBookAir session05 % npm install --force npm warn using --force Recommended protections disabled. npm error code EEXIST 이전에 설치한 npm pakage 버전과 충돌 문제가 발생하는 듯 합니다. 해결 방법을 알 수 있을까요?
미해결
따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
강사님께 어떻게 직접질문할수있어요??
미해결
따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
const함수같은거 기초강의는 어디있나요
미해결
따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
리덕스 참조챕터가 어딨어요? 미리듣고오라는데요
해결됨
React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
결제기능 관련은 혹시 추가하실 계획이 있으신지 궁급합니다.
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
현재 [그랩마켓] React로 웹 개발하기 -2 듣고 있는데요 , 1. 그랩 선생님 소스 코드와 동일 하게 아래 작성한 index.js 소스 첨부 하는데요, 실행 하면 , 1초 동안 잠깐 판매되는 상품들 이미지 없이 전체 페이지 뜨다 바로 아래 첨부한 그림과 같이 에러가 발생 합니다. 이 에러는 어떻게 해결 할 수 있을까요? -------- 2. index.js 소스 아래에 작성 첨부 합니다. import './index.css'; import axios from "axios"; import React from 'react'; function MainPage(){ const [products, setProducts]=React.useState([]); React.useEffect( function(){ axios.get("이곳에는 제 mock 목 서버 주소를 넣었습니다/products") .then(function(result){ const products=result.data.products; setProducts(products); }).catch(function(error){ console.error("에러 발생:",error); }); },[]); return ( <div> <div id="header"> <div id="header-area"> <img src="../images/icons/logo.png" /> </div> </div> <div id="body"> <div id="banner"> <img src="../images/banners/banner1.png" /> </div> <h1>판매되는 상품들</h1> <div id="product-list"> { products.map(function(product, index){ return ( <div className="product-card"> <div> <img className="product-img" src={product.imageUrl} /> </div> <div className="product-contents"> <span className="product-name">{product.name} </span> <span className="product-price">{product.price}원 </span> <span className="product-seller"> <img className="product-avatar" src="../images/icons/avatar.png" /> <span>{product.seller}</span> </span> </div> </div> ); }) } </div> </div> <div id="footer"></div> </div> ); } export default MainPage; 질문 하기 전 , 인프런 질문 올라와서 답변 올라온 것 다 적용해 보아도 해결이 안되어 이렇게 여쭈어 보게 되었습니다. 무엇이 문제인지, 그리고 해결 방법은 무엇인지 알려 주시면 고맙겠습니다.
해결됨
React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
npm create vite@latest . --template react 실행시면 설치 옵션에 바닐라랑 리액트가 있는데 리액트를 설치하는 거죠? 그 다음에 나오는 옵션에선 타입스크립트랑 자바스크립트가 있는데 그것도 그냥 하나씩만 있는 게 아니고 js+SWC 이런 것도 있는데 뭐 설치해요?
미해결
대용량 채팅 TPS 처리를 위한 웹소켓 통신 만들며 학습하기
대규모 트래픽 환경에서 broadcasting을 잘 처리하는 방법이 궁금합니다. 만약 파드가 60개가 띄워져 있고 60명의 유저가 각 파드에 한 명씩 room에 배치되었다고 할 때, a 유저의 메시지를 60명의 유저에게 보여져야 한다고 가정해 보겠습니다. 이때, 한 파드에 유저 모두가 room에 들어와 있는 게 아니라 각 파드 별로 room에 유저가 한 명씩 배치되어 있다고 하면, 모든 유저에게 broadcast를 해야 할텐데 어떻게 해야 효율적으로 처리할 수 있을까요? 만약 단일 메시지만 전달해야 한다면, redis pub/sub 구조로 충분히 처리할 수 있을 것 같은데 streaming으로 작은 chunk 단위로 메시지를 보내야 하는 경우는 redis network bandwitdh를 가뿐히 뛰어넘을 것 같습니다. room의 기준이 되는 id를 hash화하여 특정 파드에 클라이언트의 socket 연결을 고정하는 방법도 사용하나요? 예를 들어, room의 기준이 되는 id를 hash화 한 후에 한 채팅방 세션에 속한 유저들이 한 파드에 Socket 연결을 몰아서 이어버린다면, broadcasting을 하지 않아도 될 것 같은데 이런 접근법은 많이 쓰이는지 궁금합니다. 감사합니다!
미해결
따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
// src/App.jsx import { useState } from 'react' import viteLogo from '/vite.svg' import reactLogo from './assets/react.svg' import './App.css' function App() { const [count, setCount] = useState(0) return ( <div className="App flex items-center justify-center h-screen"> <h1 className="text-3xl font-bold underline"> Hello world </h1> </div> ) } export default App
미해결
따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
마지막까지 다했는데 크롬 개발자도구에 redux란이 없습니다. 그리고 강의영상에선 아래코드에서 코드를 작성하면 젤 위에 import쪽도 자동 생성되던데 그건 혹시 어떻게 하는건가요
미해결
따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
https://github.com/nature1339/react_shoppingmall
미해결
따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
쇼핑몰기능중 찜하기 기능은 어떻게 구현하나요
미해결
실무 중심! FE 입문자를 위한 React
Recoil 지원 중단 문제로 강의에 나온 Recoil 관련 내용을 Jotai 라이브러리로 대체했습니다. 여러 수강생 분들이 같은 문제를 겪는 듯해서 제가 사용한 코드를 공유합니다. recoil 제거 & jotai 설치 npm uninstall recoil npm install jotai atom.js 변환 코드 : jotai 의 atom 에선 key 값이 없습니다. import {atom} from "jotai"; const testState = atom(['a', 'b', 'c', 'd']); export default testState; testWithComma.js : 마찬가지로 키 값이 없으며, 좀 더 단순하게 사용 가능합니다. import {atom} from "jotai"; import testState from "./atom.js"; const testWithComma = atom((get) => { const abcdArr = get(testState) return abcdArr.join(','); }) export default testWithComma; CompletionPage.jsx : useRecoilValue -> useAtomValue 로 변경하시면 됩니다. const testValue = useAtomValue(testWithComma); Jotai 와 Zustand 중 고민하다가 Jotai가 Recoil과 더 유사하다고 하여 우선 Jotai로 학습 진행했습니다. 강의 수강에 참고가 되길 바랍니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
제 노트북이 램이 8G인데 Ubuntu 설치해서 이용가능할까요?
미해결
실무 중심! FE 입문자를 위한 React
리코일 에러 나시는분들 보세요 최근에 강의 시작하셨으면 리액트가 19로 설치되셨을탠데 리코일이 리액트 18까지만 지원하고있습니다. 원활하게 나머지 진행하시기위해서 npm install react@18 react-dom@18 --save 으로 react18로 버전 낮춰주시면 나머지 진행 가능하십니다.
