inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

173만명의 커뮤니티!! 함께 토론해봐요.

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 조회수 520

도저히 모르겠어서 질문 남깁니다

미해결

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의

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 조회수 474

안녕하세요 제로초님 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

4-3 함수선언방식 질문

미해결

초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트

function motion() { //스크롤할때마다 작동할 함수 setProperty(); changeBg(); parallaxMove(); } function init() { motion() }; $(window).scroll(function(e) { motion(); }); init(); //이런식으로 함수끼리 연결?하는방식으로 하셨는데 $(window).scroll(function(e) { setProperty(); changeBg(); parallaxMove(); }); /** 이런식으로 해도 작동이되는거같아서 왜 함수를 스크롤함수,init함수,motion함수 각각 만들어서 연결하는방식으로 하신이유가있을까요? */

  • 인터랙티브-웹
  • jquery
  • HTML/CSS
  • javascript
임보라 댓글 1 좋아요 0 조회수 307

모달창 밖에 스크롤 이벤트는 어떻게 끌 수 있을까요?

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

안녕하세요. 모달창 을 띄우고 스크롤을 하면 모달창 밖에 화면이 스크롤이 되는데 이부분도 useRef를 이용해서 막을 수 있을까요??

  • typescript
  • react
  • tdd
  • redux
  • Next.js
조찬호 댓글 1 좋아요 1 조회수 3108

Suspense 관련해서 질문드립니다

해결됨

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1

안녕하세요. 유익한 강의 너무 잘 듣고 있습니다. 다름이 아니라, 팩토리 패턴으로 리팩토링 한 코드에 대해 질문이 있어서 글을 적게 되었습니다. lazy를 사용하지 않고 import('') 구문 만으로는 동적으로 모듈을 임포트 할 수 없나요?? 컴포넌트가 모두 마운트 된 후 레이지 컴포넌트가 동적으로 임포트가 모두 완료된 상태인데도 suspense가 꼭 필요하나요?? 레이지 컴포넌트에 접근할 땐 이미 임포트가 완료된 후라는 생각이 들어서 여쭤봅니다!

  • react
  • devtools
정세연 댓글 1 좋아요 2 조회수 381

eslint,prettier 오류

미해결

Vue.js 끝장내기 - 실무에 필요한 모든 것

eslint, prettier 설정하고 컨솔에서 아래와 같은 오류가 계속나네요.. 강의에서는 에디터에서 나는 걸로 설명하셨는데요.. 컨솔에서 계속 에러가 나네요.. node module 폴더 삭제도 해보고 setting.json 파일 수정해도 동일합니다. 확인 부탁드려요.

  • vuejs
  • javascript
  • vuex
김재기 댓글 2 좋아요 1 조회수 907

포트폴리오 css 스택을 어떻게 가져가는게 좋을까요?

해결됨

웹 게임을 만들며 배우는 React

6개월 학원 수료를 한 상태이고, 프론트엔드쪽 웹 개발자를 지망하고 있습니다. 추가적으로 공부를 하고 웹사이트를 하나 더 만들어볼 생각을 하고 있는데 css 전처리기, 프레임워크, css in js 등등 여러가지 기술이 많은데 면접에서 어필을 하려면 대부분의 것을 기본 CSS위주로 짜서 CSS기본이 탄탄한 것을 어필해야 할지, sass나 styled component, tailwind 등의 기술 중 하나를 써서 할줄 아는 스택이 있다는것을 어필해야할지, antd, 부트스트랩 등의 프레임워크를 부담없이 떡칠해서 써서라도 화면을 깔끔하게 만드는것이 중요할지 판단이 잘 안서네요. 혹시 조언을 좀 해주실 수 있으신가요?

  • react
kenny 댓글 1 좋아요 0 조회수 364

폰트 어썸 사이트 - Kit's Code로 넣기

미해결

Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex

폰트 어썸 사이트가 버전업이 됐는지 밑에 있는 질문들에서 대응하기 힘들어서 제가 한 방식 적어볼게요. 혹시나 막히는 분들은 도움이 되면 좋겠습니다. 2022-9-15기준 홈페이지 화면에서 kits선택 로그인 하면 해당 화면이 보이는데 이름 클릭 script 태그를 index.html 에 link대신 추가했습니다. 강의에 적힌 디자인이 없는지 대응이 안되길래 plus로 검색해서 비슷한 디자인 넣었습니다

  • javascript
  • vuejs
  • es6
  • vuex
박종률 댓글 3 좋아요 4 조회수 973

권한요청드립니다.

미해결

Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex

인프런 아이디 : 인프런 이메일 : 깃헙 아이디 : 깃헙 Username:

  • vuex
  • vuejs
  • es6
  • javascript
댓글 1 좋아요 1 조회수 265

ec2 에 배포시 500 (Internal Server Error) 에러가 뜹니다.

미해결

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

안녕하세요? 강의를 무사히 다듣고 따라 했는데 로컬에서는 문제가 없다가 .env파일과 next.config, 하드코딩된 url 주소를 다 바꿔주었는데도 ec2 환경에서 에러가 뜹니다.

  • react
  • nodejs
  • docker
  • typescript
  • postgresql
  • Next.js
  • 클론코딩
댓글 1 좋아요 0 조회수 1413

로그인을 안한 상태에서 에러질문 드립니다(재작성)

해결됨

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

로그인을 하지않은 상태에서는 loadUser함수에 의해 /auth/me로 router로 호출이 되어 user미들웨어는 담긴 쿠키가 없으니 next()로 넘어서 auth미들웨어에서 unauthenticated 에러가 뜹니다 로그인을 안한 상태라고 401 에러가뜨는게 맞는건지.. 강의대로 재대로 따라했는지 잘 모르겠어서 질문드립니다 제공된 소스코드랑 비교해도 다른점을 모르겠네요 로그인만 하면 에러는 당연히 안뜨네요

  • docker
  • nodejs
  • react
  • typescript
  • postgresql
  • 클론코딩
  • Next.js
댓글 1 좋아요 0 조회수 371

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 조회수 2218

권한 요청드려요~

미해결

Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex

인프런 아이디 : dtg3431@gmail.com 인프런 이메일 : dtg3431@gmail.com 깃헙 아이디 : dtg3431@gmail.com 깃헙 Username: jaehong2

  • javascript
  • es6
  • vuejs
  • vuex
댓글 1 좋아요 1 조회수 227

이중 포문은 별로일까요 :(?

미해결

자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)

일단 이런식으로 끝나는 시간으로 배열정렬의 기준을 잡고 sum으로 겹치는 사람들 계산해주면서 그 값을 answer배열로 넣어준 후 ...answer을 이용해서 그 중에 가장 큰 값을 답으로 해보았는데 괜찮은건가요?

  • 코테 준비 같이 해요!
  • javascript
David Bang 댓글 0 좋아요 0 조회수 371

이메일 아이디는 findOneBy를 이용하였는데 서브레딧제목은 왜 QueryBuilder를 사용하나요?

해결됨

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

const emailUser = await User.findOneBy({ email }); const usernameUser = await User.findOneBy({ username }); if (emailUser) errors.email = '이미 사용 중인 이메일입니다.'; if (usernameUser) errors.username = '이미 사용 중인 이름입니다.'; if (Object.keys(errors).length > 0) { return res.status(400).json(errors); } 이런방식과 QueryBuilder는 뭐가 다른지 왜 그렇게 하는지 궁금합니다.. 연휴에도 질문드려 송구하네요..에고 ^^

  • postgresql
  • docker
  • typescript
  • nodejs
  • react
  • Next.js
  • 클론코딩
댓글 1 좋아요 1 조회수 482

react 18에 맞춰서 작성한 코드입니다.

미해결

처음 만난 리액트(React)

바뀐 react 18에 따라서 작성된 코드입니다. 바뀐 리엑트로 어떻게 코드 작성해야하는지 모르겠는 분들은 참고하시면 좋을것 같습니다! https://github.com/matt700395/first-meet-react/commit/7df1b7367e6a2c00f21ae30a92e39102959e373f

  • react
  • HTML/CSS
  • javascript
베이스 캠퍼스 댓글 3 좋아요 6 조회수 717

도커를 이용하여 postgresql을 사용하는것에 이점이 있나요?

해결됨

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

도커를 사용하지 않으면 postgresql을 사용하지 못하는것인가요? 정말 잘 몰라서 그러는데 도커를 사용해 postgresql을 이용하는것에 장점이 궁금합니다

  • nodejs
  • typescript
  • docker
  • postgresql
  • react
  • 클론코딩
  • Next.js
댓글 1 좋아요 0 조회수 373

GET /api/auth/me 304

해결됨

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

커뮤니티생성 - 커뮤니티 생성핸들러 생성하기(2) 까지 강의를 들은 상황에서 첫 로그인은 network status가 200이 뜨는데 그 다음부터는 어느 페이지든 접근시 GET /api/auth/me 304 가 나옵니다. routes/auth.ts 에서 [변경전] const me = async (_: Request, res: Response) => { return res.json(res.locals.user) } [변경후] const me = async (_: Request, res: Response) => { return res.status(200).json(res.locals.user) } 바꾸었으에도 계속 그러네요.. 왜 그런지 아시나요 아래와 같은 글을 발견했지만 캐싱 이후 그냥 304를 날린다는데 이게 맞는건가요..? https://www.inflearn.com/questions/14571

  • 클론코딩
  • Next.js
  • docker
  • nodejs
  • postgresql
  • typescript
  • react
heonpage 댓글 1 좋아요 0 조회수 352

npm run start 오류 제발요,,ㅠ

미해결

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의

위와 같이 정상적으로 컴파일 되었다고 하지만, 이렇게 오류가 뜹니다... 도저히 해결 방법을 모르겠어요!! proxy설정 전에는 정상적으로 작동해서 다시 proxy에 관한 코드를 다 주석처리하고 해봤는데 저렇게 뜨네요 ㅠㅠ

  • nodejs
  • react
강창민 댓글 3 좋아요 1 조회수 810

인기 태그

인프런 TOP Writers

주간 인기글