강력 새로고침
해결됨
프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1
6분33초에 있는 강력 새로고침은 어떻게 뛰우나요? 우클릭은 안되네요
- react
- devtools
나두코딩
댓글 1
좋아요 1
조회수 349
묻고 답해요
172만명의 커뮤니티!! 함께 토론해봐요.
reducer는 함수라고 해서 function을 넣으셨는데...
미해결
(2025 최신 업데이트)리액트 : 프론트엔드 개발자로 가는 마지막 단계
1. reducer는 함수라고 해서 function을 넣으셨는데... 화살표 함수는 안쓰는 이유가 따로있는건가요?? 아니면 써도 상관없나요?? 2.dispath에 type은 늘 대문자로 쓰시던데...그것도 또한 어느정도 약속이 되어있는 문법인가요??
- redux
- react
- web-api
O_O Kero
댓글 1
좋아요 0
조회수 325
serve -s build가 되지 않습니다..
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Windows PowerShell Copyright (C) Microsoft Corporation. All rights reserved. PS C:\Users\PC\Desktop\emotion diary> npm install -g serve changed 89 packages, and audited 90 packages in 10s 23 packages are looking for funding run npm fund for details PS C:\Users\PC\Desktop\emotion diary> cd hello PS C:\Users\PC\Desktop\emotion diary\hello> serve -g build serve : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\PC\AppData\Roaming\npm\ser ve.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies( https://go.mic rosoft.com/fwlink/?LinkID=135170)를 참조하십시오. 위치 줄:1 문자:1 + serve -g build + ~~~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess PS C:\Users\PC\Desktop\emotion diary\hello> npm run build > hello@0.1.0 build > react-scripts build Creating an optimized production build... Compiled with warnings. [eslint] src\components\DiaryItem.js Line 32:16: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text src\components\DiaryList.js Line 1:15: 'useEffect' is defined but never used no-unused-vars src\components\EmotionItem.js Line 6:13: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text src\pages\Diary.js Line 20:7: React Hook useEffect has a missing dependency: 'id'. Either include it or remove the dependency array react-hooks/exhaustive-deps Line 37:7: React Hook useEffect has a missing dependency: 'navigate'. Either include it or remove the dependency array react-hooks/exhaustive-deps Line 58:25: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text src\pages\Edit.js Line 5:9: 'getStringDate' is defined but never used no-unused-vars Line 22:7: React Hook useEffect has a missing dependency: 'id'. Either include it or remove the dependency array react-hooks/exhaustive-deps Line 39:7: React Hook useEffect has a missing dependency: 'navigate'. Either include it or remove the dependency array react-hooks/exhaustive-deps Search for the keywords to learn more about each warning. To ignore, add // eslint-disable-next-line to the line before. File sizes after gzip: 54.79 kB build\static\js\main.544a876e.js 1.42 kB build\static\css\main.b7fc6af2.css The project was built assuming it is hosted at /. The build folder is ready to be deployed. You may serve it with a static server: serve -s build Find out more about deployment here: https://cra.link/deployment PS C:\Users\PC\Desktop\emotion diary\hello> serve -s build serve : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\PC\AppData\Roaming\npm\ser ve.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies( https://go.mic rosoft.com/fwlink/?LinkID=135170)를 참조하십시오. 위치 줄:1 문자:1 + serve -s build + ~~~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess PS C:\Users\PC\Desktop\emotion diary\hello> npm install -g serve와 npm run build를 했습니다 you may serve it with a static server라는 메시지와함께 serve -s build라는 메세지도 떴는데 serve -s build라고 명령어를 입력했는데도 입력이 되지 않습니다... 루트폴더 문제인가요? 문제가 무엇인가요
- react
- nodejs
- javascript
HongWon Kim
댓글 3
좋아요 0
조회수 1022
안녕하세요. invailhost header 질문
미해결
Slack 클론 코딩[실시간 채팅 with React]
현재 슬랙클론 수강중인 학생입니다. 저는 군대에서 독학으로 공부중입니다. 현재 제로초님 깃허브에서 git clone 하여 그대로 데모버전을 사용하고 있습니다. 제가 사용하는 에디터는 구름ide를 사용하고 있는데 구름 ide 에서는 localhost를 제공해주지 않고, 제가 port를 설정하면 구름에서 제공해주는 사이트 주소를 사용하는 식으로 운영됩니다. 제가 본 영상에서와 같이 dependency까지 그대로 다운받고, npm run dev 명령어를 실행하면 당연히 localhost가 없기때문에 사이트 접속이 힘듭니다.... 그래서 port 3090에 맞게 url에 접속하면 invaild host header 에러가 나옵니다.. 전에 위 에러를 만났을 때는 항상 cra로 개발했기 때문에 금방 구글링으로 해결을 했는데 현재는 어떻게 해결해야 할지 모르는 상황입니다..
- babel
- Socket.io
- typescript
- react
- 웹팩
- 클론코딩
댓글 2
좋아요 0
조회수 259
class name 질문
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요. classname 작성하실때 어떤건 className = {name} 이런식으로 괄호 안에 넣고 어떤건 단순히 className = "name" 이렇게 하시는데 혹시 어떤 차이가 있고 이유는 무엇인지 궁금합니다 ㅠㅠ 이미 가르쳐주셨던건데 제가 모르는거 같기도 하네요
- react
- nodejs
- javascript
ch2323
댓글 1
좋아요 0
조회수 398
cookie-parser Invalid or unexpected token error
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
영상에 따라서 단순하게 cookie-parser 설치하고 import cookie-parser 한다음에 app.use(cookieParser()) 진행하면 상단에 이미지처럼 에러가 발생하더라구요. cookie-parser을 제거하면 cookie가 정상적으로 저장되는 것을 볼 수 있었습니다. 어떤 부분을 놓친 것일까요 server.ts import express from "express"; import morgan from "morgan"; import { AppDataSource } from "./data-source" import authRoutes from "./routes/auth"; import subRoutes from "./routes/subs"; import cors from 'cors'; import dotenv from 'dotenv'; import cookieParser from "cookie-parser"; const app = express(); dotenv.config(); app.use(cors({ origin: process.env.ORIGIN, credentials: true })) app.use(express.json()); app.use(morgan('dev')); app.use(cookieParser()) app.get("/", (_, res) => res.send("running")); app.use('/api/auth', authRoutes); app.use("/api/subs", subRoutes); const PORT = process.env.PORT; console.log('PORT', PORT) app.listen(PORT, async () => { console.log(`server running at http://localhost:${PORT}`); AppDataSource.initialize().then(async () => { console.log("data initialize...") }).catch(error => console.log(error)) })
- react
- nodejs
- typescript
- postgresql
- docker
- 클론코딩
- Next.js
박준희
댓글 0
좋아요 0
조회수 262
Router 예제 복붙 - 오류
미해결
따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
20강에서 Router 예제 복붙 시 오류안나는 최종본입니다 !! import React from "react"; import { Route, Routes, BrowserRouter } from "react-router-dom"; import LandingPage from "./components/views/LandingPage/LandingPage"; import LoginPage from "./components/views/LoginPage/LoginPage"; import RegisterPage from "./components/views/RegisterPage/RegisterPage"; function App() { return ( <BrowserRouter> <div> {/* A <Switch> looks through its children <Route>s and renders the first one that matches the current URL. */} <Routes> <Route exact path="/" element={LandingPage()}/> <Route exact path="/login" element={LoginPage()}/> <Route exact path="/register" element={RegisterPage()}/> </Routes> </div> </BrowserRouter> ); } export default App;
- nodejs
- react
jysrho12
댓글 2
좋아요 3
조회수 1110
useMemo hook 질문
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
강의 내용 중 useMemo 부분의 실습이 없어서 질문드립니다. Component.js로 컴포넌트를 작성하고 App.js에서 컴포넌트를 호출해봤는데요. App.js .. <div>{<Component a={1} b={5} />}</div> ... Component.js ... useMemo(() => compute(a,b),[a,b]); ... 이렇게 작성했을 때 useMemo가 제대로 작동하고 있는지 확인하고 싶은데요. useEffect는 console.log로 확인이 됐는데 useMemo는 어떻게 확인을 할 수 있을까요? (useEffect랑 useMemo는 방식이 달라서 useEffect에 로그를 찍어봤자 useMemo를 확인할 수 없었어요...)
- Next.js
- tdd
- redux
- react
- typescript
jh0416
댓글 0
좋아요 1
조회수 231
return문
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
자바스크립트 함수 인강에서 return문 개념이 너무 헷갈려서요. function getArea(width*height){ let area = width* height; return area; } let area1 = getArea(100,200); return을 쓰면 위와 같이 항상 새로운 변수를 지정해서 getArea함수를 호출해야하나요? 왜 return을 사용하는지 잘 모르겠어요..
- react
- javascript
- nodejs
소연
댓글 0
좋아요 1
조회수 295
CREATE 상태변화 로직 분리 시 newItem 생성을 reducer에서 하는 이유
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요~ 강의 듣던 중 궁금증이 생겨 질문 남깁니다 useReducer로 CREATE 상태 로직을 분리할 때, 기존과 다르게 newItem을 reducer에서 생성하는 이유가 무엇인가요? 아래처럼 기존과 동일한 방식으로 newItem을 onCreate 내에서 생성했을 경우에도 정상 동작하는 것 같은데 혹시 동작이나 성능면에서 차이점이 있나요? +) 계속 생각할수록 로직을 분리할 때 어디서부터 어디까지 분리해야할지 기준을 잘 모르겠어요,,ㅠ 강의에서 CREATE로직 분리 시 newItem을 reducer에서 생성한 것 처럼, INIT로직 분리 시에도 initData를 reducer에서 생성 할 수 있을 것 같은데(아래 코드).. 분리하는 로직의 기준점? 같은걸 어떻게 잡아야할지 잘 모르겠습니다ㅜㅜ 혹시 어떤 기준으로 분리해야할지 규칙이나 팁같은게 있을까요?
- nodejs
- react
- javascript
팀오
댓글 1
좋아요 0
조회수 417
onCreate에서 data상태 관련 질문입니다
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요 강사님! 최적화3 - useCallback 강의 듣던 중 의문점이 생겨 질문 남깁니다. onCreate에 useCallback을 사용하고 의존성 배열을 빈 값으로 두면 mount시에 한번만 실행되기 때문에 data state가 초기값인 빈 배열인 상태이다 <= 까지는 이해하였습니다. 그런데 함수형 업데이트를 이용해서 인자로 data를 전달하면 최신 data state를 반영할 수 있다는 부분이 잘 이해가 안갑니다. onCreate가 mount시에 생성되고 생성시의 data state가 계속 유지된다면 인자로 전달되는 data state또한 초기값인 빈 배열이 들어가게되어 결국 setData(([]) => [ newItem, [] ]) 처럼 동작해야 하는것이 아닌가요? 어떻게 인자로 전달되는 data에는 최신 상태가 반영되는건가요??
- nodejs
- react
- javascript
팀오
댓글 1
좋아요 0
조회수 519
도저히 모르겠어서 질문 남깁니다
미해결
따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
TypeError: user.comparePassword is not a function >>비주얼에서는 이런식으로 자꾸 오류가 뜨고, 포스트맨에서는 Could not get response Error: read ECONNRESET 이렇게 뜹니다,,!!! post는 http://localhost:5000/api/users/login 이던 http://localhost:5000/login이던 다 안돼요,,, 답변 부탁드립니다ㅠㅠㅠㅠㅠㅠ
- nodejs
- react
시크한 두꺼비
댓글 2
좋아요 0
조회수 473
안녕하세요 제로초님 redux-persist 질문 드립니다.
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님 redux-toolkit에 next-redux-wrapper와 redux-persist 연결하는데 질문드립니다. import userReducer from "@slice/userSlice"; import commonSlice from "@slice/commonSlice"; import localSlice from "@slice/locals"; export const persistConfig = { key: "root", version: 0, whitelist: ["locals"], storage, }; export const rootReducer = (state, action) => { if (action.type === HYDRATE) { return { ...state, ...action.payload, }; } return combineReducers({ user: userReducer, common: commonSlice, locals: localSlice, })(state, action); }; export const reducer = persistReducer(persistConfig, rootReducer); 이렇게 초기 셋팅을 해주었고, export const store = configureStore({ reducer, middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: { ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER], }, }).concat(logger), devTools: process.env.NEXT_PUBLIC_NODE_ENV !== "production", }); export const persistor = persistStore(store); const setupStore = (context: any): EnhancedStore => store; const makeStore: MakeStore<any> = (context: any) => setupStore(context); export const wrapper = createWrapper<Store>(makeStore); export default wrapper; 이렇게 스토어를 만들었습니다. 그런데 문제가.. persist에서 rehydrate에서는 저장된 값이 유지 되어있으나. next-redux-wrapper의 hydrate에서 초기 스테이트값을 다시 저장해버리는 문제가 있습니다. 둘중 하나를 버려야 할까요? 아니면 셋팅이 잘못된걸까요?
- redux-persist
- express
- react
- nodejs
- redux
- Next.js
정문채
댓글 2
좋아요 0
조회수 1139
모달창 밖에 스크롤 이벤트는 어떻게 끌 수 있을까요?
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
안녕하세요. 모달창 을 띄우고 스크롤을 하면 모달창 밖에 화면이 스크롤이 되는데 이부분도 useRef를 이용해서 막을 수 있을까요??
- typescript
- react
- tdd
- redux
- Next.js
조찬호
댓글 1
좋아요 1
조회수 3105
Suspense 관련해서 질문드립니다
해결됨
프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1
안녕하세요. 유익한 강의 너무 잘 듣고 있습니다. 다름이 아니라, 팩토리 패턴으로 리팩토링 한 코드에 대해 질문이 있어서 글을 적게 되었습니다. lazy를 사용하지 않고 import('') 구문 만으로는 동적으로 모듈을 임포트 할 수 없나요?? 컴포넌트가 모두 마운트 된 후 레이지 컴포넌트가 동적으로 임포트가 모두 완료된 상태인데도 suspense가 꼭 필요하나요?? 레이지 컴포넌트에 접근할 땐 이미 임포트가 완료된 후라는 생각이 들어서 여쭤봅니다!
- react
- devtools
정세연
댓글 1
좋아요 2
조회수 377
포트폴리오 css 스택을 어떻게 가져가는게 좋을까요?
해결됨
웹 게임을 만들며 배우는 React
6개월 학원 수료를 한 상태이고, 프론트엔드쪽 웹 개발자를 지망하고 있습니다. 추가적으로 공부를 하고 웹사이트를 하나 더 만들어볼 생각을 하고 있는데 css 전처리기, 프레임워크, css in js 등등 여러가지 기술이 많은데 면접에서 어필을 하려면 대부분의 것을 기본 CSS위주로 짜서 CSS기본이 탄탄한 것을 어필해야 할지, sass나 styled component, tailwind 등의 기술 중 하나를 써서 할줄 아는 스택이 있다는것을 어필해야할지, antd, 부트스트랩 등의 프레임워크를 부담없이 떡칠해서 써서라도 화면을 깔끔하게 만드는것이 중요할지 판단이 잘 안서네요. 혹시 조언을 좀 해주실 수 있으신가요?
- react
kenny
댓글 1
좋아요 0
조회수 364
sudo certbot --nginx 중에 에러가 발생해 질문합니다.
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요. 제가 동영상 으로 진행하다가 404 에러가 발생하여 댓글에 있는 포스트를 이용해서 진행하려고 했으나, sudo certbot --nginx 과정에서 에러가 발생하여 질문하고자 합니다. // etc/nginx/nginx.conf 저는 localhost:3000으로 진행했어서 127.0.0.1:3000으로 기입했습니다.
- nignx
- certbot
- Next.js
- react
- https
- redux
- nodejs
- express
조찬호
댓글 2
좋아요 0
조회수 863
ec2 에 배포시 500 (Internal Server Error) 에러가 뜹니다.
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
안녕하세요? 강의를 무사히 다듣고 따라 했는데 로컬에서는 문제가 없다가 .env파일과 next.config, 하드코딩된 url 주소를 다 바꿔주었는데도 ec2 환경에서 에러가 뜹니다.
- react
- nodejs
- docker
- typescript
- postgresql
- Next.js
- 클론코딩
댓글 1
좋아요 0
조회수 1411
로그인을 안한 상태에서 에러질문 드립니다(재작성)
해결됨
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
로그인을 하지않은 상태에서는 loadUser함수에 의해 /auth/me로 router로 호출이 되어 user미들웨어는 담긴 쿠키가 없으니 next()로 넘어서 auth미들웨어에서 unauthenticated 에러가 뜹니다 로그인을 안한 상태라고 401 에러가뜨는게 맞는건지.. 강의대로 재대로 따라했는지 잘 모르겠어서 질문드립니다 제공된 소스코드랑 비교해도 다른점을 모르겠네요 로그인만 하면 에러는 당연히 안뜨네요
- docker
- nodejs
- react
- typescript
- postgresql
- 클론코딩
- Next.js
댓글 1
좋아요 0
조회수 368
rendered HTML error 관련
해결됨
풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
MsgItem 을 이용하여 MsgList 50개를 뽑는 과정에서 Error: Text content does not match server-rendered HTML. Error: Hydration failed because the initial UI does not match what was rendered on the server. Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering. 오류를 만났습니다. 혼자서 분석해본결과 jay와 roy를 랜덤으로 얻기위한 const getRandomUserId = () => UserIds[Math.round(Math.random())]; 이라는 함수를 이용하면 이런에러가 나는것으로 확인되었습니다 선생님 .fill(0).map() 함수에서 getRandomUserId() 를이용하지않고 직접 이름을 "roy" 로 작성하니 오류가 나오지않습니다.. 구글링을해봐도 이유를 알기 어려워서 질문을남깁니다 왜 이런오류가 나오는걸까요.?
- graphql
- rest-api
- react
박세영
댓글 2
좋아요 2
조회수 2215
인기 태그
인프런 TOP Writers
주간 인기글
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 IT 공부는 했는데 왜 아직도 안 될까요? | AI와 함께 실무 중심 IT 모임 🤖 NOESIS
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv