안녕하세요 쌤 짧고 실무에 바로 써먹을 수 있는 좋은 강의 만들어주셔서 감사해요. 지금까지 코딩이 제 뇌와 맞지않는다고 느꼈는데 쌤의 짧고 핵심 위주 실습이 반영된 강의 덕분에 많은 도움을 받고있습니다. 다름이 아니라 Next 강의도 예정중이시라는 글을 봤는데 혹시 언제쯤 나오는지 대략적으로라도 알 수 있을까요? 다른 강사님의 강의는 안맞고 수코딩님 강의만 맞아서 next 도 수코딩님 강의로 시작하고싶어서요 React query 관련된 강의나 tanstack query, tanstack router 부분은 없는데 이유가 있을까요? 쿼리 부분은 혼자 공부해야하는 파트일까요? 종종 단톡방을 운영하시는 강사님을 보았는데 수코딩님 단톡방도 있는지 궁금합니다! 좋은 강의 만들어주셔서 정말 감사해요!
이런 경고가뜨는데 왜 뜨는걸까요? RootStoreProvider 쪽에서 문제가 되는것같아서 찾아봤는데 RootStoreProvider에서 경고가 뜨는데 저게 찾아보니 스택오버플로에 hooks 쓸때 16버전 부터는 useEffect() 로 감싸라는것같은데 서버사이드렌더링은 클라이언트에서 화면그리기전에 먼저 store 세팅하는거라 어떻게 해야될까요?
여기있는 예제를 보고 next 에서 mobx 사용중인데 https://dev.to/ivandotv/mobx-server-side-rendering-with-next-js-4m18 깃헙코드: https://github.com/ivandotv/mobx-nextjs-root-store 참고로 저 예제에선 rootStore를 각 store 마다 생성자에 넘겨주긴했지만 직접적으로 rootStore를 사용하지 않았습니다. 그러나 제가 사용하는 서비스는 A store B store가 있을때 B store에서 action이 발생했을때 A store 에대한 상태가 바뀌어야되서 rootStore를 생성자로 받아야될것같더라고요 이 예제를 참고했습니다. 저기서 store 만들떄 RootStore 만들고 Counter Store에 CountStore 에 this 를 넘겨줘서 이렇게 rootStore 를 받고있는데 mobx devtools 보니까 makeObservable 에 root 를 넣지도 않았는데 devtools 에서 countStore 안에 RootStore가 있고 그 RootStore 안에 countSotre가 있고 1. 이렇게 재귀처럼 state 가 존재하는데 성능에 영향을 미칠까요? 2. 특정 변수만 observe 하고싶지 않은데 어떻게 하는게 좋을까요? 전 makeobservable 에 observable을 설정안해주면 안될줄 알았는데 devtools를 보니 rootStore가 있어서요. devTools에 있는 이유가 아마 annotation 에서 observable를 세팅해주는건 observable한 값이 변경됬을때 observer() 를 감싼 컴포넌트에서 리렌더링 하기위해 있는것같더라고요 2-1. 제 개인적으로 이 문제를 해결해보고자 이런식으로 넣긴 했거든요 makeObservable 의 첫번째 인자가 target 인데 감지할 state 를 넣는것같더라고요 두번째 인자에는 annotation (action인지 observable인지)붙혀주는것같아서 첫번째 인자에서 this 는 클래스를 가르키니까, root 도 같이 traget 된것같아 this에 대한 값을 바꾸면 될것같아서 state 변수를만들고 const state = this; 를 하면 참조되는 문제때문에 {...this} 이런식으로 복사해주고 root를 undefined 해주고 makeObservable에 this 대신 state 변수를 넘기니 rootStore가 devtools에 안나오는데 이렇게 해도 되는건가요?
11:37 에 getStaticProps 가 이벤트페이지 같은거에 적합하다 하셨는데 getStaticProps 라는게 npm build 를 하거나 npm run dev 를해서 서버를 키면 getStaticProps가 html 을 정적으로 만드는것까지 이해가 가는데 만약 이벤트 페이지를 변경하거나 삭제하고싶을때 이벤트 정보가 담긴 DB 는 삭제 또는 수정해도 이미 html 로 만들어놔서 그대로 보여주고 서버를 껏다 켜야지만 삭제 또는 수정한 내용이 적용되는건가요?
mobx react next 로 하고 있는데 runInAction 에서 비동기처리를 하려면 어떻게 해야되나요? Component.tsx const store = useIndexStore(); useEffect(() => { const fetchData = async () => { await store.loadNewMemberData(); console.log(store.newMember) } fetchData(); }, []) 일단 훅스 컴포넌트에서 useEffect에서 store 에 저장된 정보를 불러와야되는데 Promise 기때문에 따로 함수를 만들어줘서 호출을 했고요. useEffect 뜯어보니 함수 리턴타입이 void|Destructor(?) 라 Promise 타입을 못받아서 저렇게 만들었습니다. 1. useEffect 에서 비동기 작업을 할때 저렇게 async 함수 만들어서 호출해야되는건가요? 2. async 함수를 만들었으면 꼭 await 으로 호출안해도 되는건가요? store.ts class IndexStore { root; repository rtrMenu: MenuItem[] = []// constructor(root: RootStore, repository: BaseRepository) { this.root = root this.repository = repository makeAutoObservable(this) } loadRealtimeRequestData = async (): Promise<void> => { runInAction(() => { this.rtrMenu =this.repository.getRealTimeRequestItem() }); } } store에선 loadRealtimeRequestData() 함수에서 네트워크 요청한 결과를 받습니다. await this.repository.... 여기가 await axios.get() 이런 역할을 하게 되는데 then 을 하면 쉽게 해결될문제지만 async awiat 으로 runInAction 안에서 처리할려면 어떻게 해야되나요?
안녕하세요 노드버드 강의를 듣고 혼자 next 프로젝트를 만들고 있는데요 항상 changes에 엄청나게 많은 caches 및 static의 파일들도 수정이 되고 있습니다 왜 그런지 궁금하며 어떻게 없앨 수 있는건지 궁금합니다 패키지의 스크립트는 아래와 같습니다 "scripts" : { "dev" : " next dev " , "build" : " next build " , "start" : " next start " },
리덕스에서 관리되는 데이터는 props로 넘기는 대신 redux 접근해서 바로 가져와도 성능적인면에서 크게 상관없나요? 컴포넌트끼리 props 넘기는 과정이 귀찮고 나중에 코드볼때 어떤 데이터가 넘어가야되는지 확인해야되서 리덕스로 웬만한건 다 처리하려고하는데 상관없나요?
로그인 폼에 ButtonWrapper, FormWrapper에 styled-components를 사용해서 마진 또는 패딩을 줬는데 페이지를 이탈 하거나 새로고침을 하면 styled-components가 적용이 안되는 문제가 있습니다. * 적용될 때 사진 * 적용 안될 때 사진
개인 토이 프로젝트를 하나 하고 있는데요, 혹시 next.js에서 도메인 라우팅 하는 방법이 있나요? 문제가 뭐냐면 제가 만든 토이 프로젝트가 있는데 http://www.hubfoodlink.com 으로 접속해서 해당 정보를 클릭하면 리엑트 컴포넌트 모달창이 띄워지는데, http://hubfoodlink.com 으로 접속하면 접속은 되는데 정보 클릭 시 리엑트 컴포넌트 모달창이 안뜨고 An unexpected error has occurred. 라고 떠서 문제가 발생되네요 ㅠ 아니면 http://hubfoodlink.com 접속시 www을 붙여서 http://www.hubfoodlink.com접속이 되게 하는 방법이 있을까요? 물론 강의와 관련없는 질문이긴한데 몇일간 찾아보고 고민해봐도 해결되지 않아서 염치불구하고 질문을 올려봅니다. 죄송합니다 ㅠ
next의 장점중 하나가 코드스플리팅을 자동으로 해주는 거라고 알고있는데 react를 쓰신이유는 프로젝트 취지가 ssr 할 필요가 없어서 인가요?? 그리고 궁금한게 cna로 프로젝트 세팅을할때 ssr할 목적없이 코드스플리팅과 폴더구조를 잡아준다는 이유로 쓰기엔 비효율적인가요? next를 사용하면 꼭 ssr을 사용해야되는지 궁금합니다
