수강이 제한됩니다.
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- React로 NodeBird SNS 만들기
프론트 백 연동
삭제된 글입니다
- React로 NodeBird SNS 만들기
AWS ROUTE
삭제된 글입니다
- 미해결React로 NodeBird SNS 만들기
질문이요
배열에 jsx 값을 쓰면 키값을 주라고 하셨는데, 1. 키값을 안 주면 뭐가 안 좋죠?? 2. 배열에 jsx 값을 넣을때만 , 키값을 주는건가요? 아니면 모든 jsx값에 키를 주어야 하나요 ? 3. Button, Input에 키값은 왜 안주나요?? renderItem= {item => ( <List.Item style={{marginTop:'20px'}}> <Card actions ={[ <Icon key="stop" type="stop"/> ]} > <Card.Meta description ={item}/> </Card> 4. renderItem 에서 dataSource값들이 하나하나 돌면서 Icon 들이 같이 생기잖아요. 그런데 모든 Icon의 값이 stop인데 상관 없는건가요 ?? 5. 팔로워 목록 과 팔로잉 목록의 키값이 stop 으로 똑같던데 상관은 없는건가요?
- 해결됨React로 NodeBird SNS 만들기
왜 user/0가 본인이 검색되는 거죠 ?
req.params.id가 0이면 req.user && req.user.id로 검색하는건 알겠습니다 하지만 왜 (req.user && req.user.id) 뒤에 || 0 도 붙이는거죠 ? user가 0이면 본인이 검색되는것 같은데 왜 그렇게 되는거죠 ? 감사합니다 router.get('/:id/posts', async (req, res, next) => { try { const posts = await db.Post.findAll({ where: { UserId: parseInt(req.params.id, 10) || (req.user && req.user.id) || 0, RetweetId: null, }, include: [{ model: db.User, attributes: ['id', 'nickname'], }, { model: db.Image, }, { model: db.User, through: 'Like', as: 'Likers', attributes: ['id'], }], }); res.json(posts); } catch (e) { console.error(e); next(e); } });
- 미해결React로 NodeBird SNS 만들기
질문이요
{dummy.imagePaths.map((v, i) => { return ( <img src={'http://localhost:3065/' + v} style={{ width: '200px' }} alt={v} /> <div> <Button>제거</Button> </div> </div> ) })} 이부분 정확히 이해가 안가네요 {'http://localhost:3065/' 이것은 무엇을 위한것인가요? ?
- 해결됨React로 NodeBird SNS 만들기
백엔드 서버 구동
삭제된 글입니다
- React로 NodeBird SNS 만들기
프론트 서버 배포
삭제된 글입니다
- 미해결React로 NodeBird SNS 만들기
useCallback 에서 props 로 넘겨주는 함수에 적용하라고하셧는데..
signup.js 내부에서 쓰는 이벤트인데 넘겨준다는말이 상위 컴포넌트인 AppLayout 을 말하는건가요? 자식컴포넌트에 넘겨준다고 하셧는데 상위컴포넌트 를 말씀하시는건가요
- 미해결React로 NodeBird SNS 만들기
질문이요
_app.js 를 다른 페이지들의 부모 컴포넌트라고 하신걸로 이해 했는데요, 정작 _app.js는 Component 라는 props 를 index.js 나 화면에 보이는 페이지들 로부터 받는거 아닌가요?? index.js 가 _app.js 에게 props 를주고 _app.js 는 AppLayouit 에게 props 를 주는 형태이면 index.js 나 다른 페이지들의 _app.js 는 자식이 되어야 하는거아닌가요 ???
- React로 NodeBird SNS 만들기
node server 관련
삭제된 글입니다
- React로 NodeBird SNS 만들기
npm run build
삭제된 글입니다
- 미해결React로 NodeBird SNS 만들기
REDUX-SAGA 동작에 대한 질문
//saga.js function* action() { yield axios.get('/').then(()=>{ console.log("API!") }) yield call(()=>{ console.log('ACTION!') }) } function* watchAction() { yield takeEvery(ACTION, action) } function* useSaga() { yield all([fork(watchAction)]) } //index.js const Index = () => { const dispatch = useDispatch() useEffect(() => { dispatch({ type: ACTION, }) console.log('INDEX PAGE') }, []) return ( <></> ) } INDEX PAGE API! ACTION 이순으로 콘솔이 찍히게 되는데욥 API! ACTION INDEX PAGE 이렇게 콘솔을 찍히게 할 수 있는 방법이 있을 까요?? //index.js const Index = () => { const dispatch = useDispatch() useEffect(() => { axios.get('/').then(()=>{ console.log("API!") return Promise.resolve() }) .then(()=>{ dispatch({ type: ACTION, }) return Promise.resolve() }) .then(()=>{ console.log('INDEX PAGE') }) }, []) return ( <></> ) } 이렇게 하면 동작은 되지만 REDUX-SAGA를 이용해서 해결을 하고 싶어서욥..
- 해결됨React로 NodeBird SNS 만들기
reducer 파일 initialState에도 왜 export를 해주는 지 궁금합니다.
3-3. 불변성과 리듀서 여러 개 합치기 강의 들으면서 스샷한 사진입니다. 제가 이 강의 듣기 전에 경험했던 프로젝트(리액트-리덕스 기반)에서는 initialState는 export 하지 않게 되어있더라고요. 외주 프로젝트 코드라 제가 짠 것은 아니지만요. initialState를 export하는 목적이 따로 있는지 제 수준에서는 잘 모르겠어서 질문드립니다.
- 해결됨React로 NodeBird SNS 만들기
2-7. 컴포넌트 분리하기 강의 듣고 2가지 질문
const PostCard = ({post}) => { return ( <Card key={+post.createdAt} cover={post.img && <img alt="example" src={post.img}></img>} actions={[ <Icon type="retweet" key="retweet"></Icon>, <Icon type="heart" key="heart"></Icon>, <Icon type="message" key="message"></Icon>, <Icon type="ellipsis" key="ellipsis"></Icon> ]}> <Card.Meta avatar={<Avatar>{post.user.nickname[0]}</Avatar>} title={post.user.nickname} description={post.content} /> </Card> ); }; 1. key 속성에 '+'를 붙이셨는데 이런 경우는 처음 보는거라 무슨 의미이고 왜 사용하는것인지 궁금합니다. 2. index.js를 보면 PostCard 컴포넌트 post props에 들어가는게 객체인데, PostCard 함수 매개변수에서 왜 또 post에 중괄호를 씌워주는지 궁금합니다.
- React로 NodeBird SNS 만들기
이미지 업로드 오류관련
삭제된 글입니다
- React로 NodeBird SNS 만들기
세션관련 오류
삭제된 글입니다
- 해결됨React로 NodeBird SNS 만들기
new react devtools에 대한 질문
그 이전 버전에서 Highlight Updates 기능을 자주 사용했는데요 그 기능은 없어진건가요?? react devtools의 새로운 버전에서 렌더링 체크하는 기능같은 거 혹시 알려주실 수 있을까요...ㅠㅠ?
- 미해결React로 NodeBird SNS 만들기
SSR 을 위한 데이터 처리
강의에서는 getInitialProps 가 서버, 클라이언트 모두 실행되기 때문에 ssr 처리를 위한 api 를 호출한다고 하신거 같은데 저는 nextjs 사용하면서 컴포넌트 내에 직접 api 호출 로직을 가지고 있고 싶지 않아서 ssr 처리를 위한 api 호출은 express 라우터 컨트롤러에서 호출하도록 하였습니다. 나머지 api 들은 사가에 넣고 처리하도록 하였구요. 이 부분까지는 어느정도 장단이 있거나 취향으로 생각할 수 도 있을 것 같은데 어떻게 생각하시는지 궁금합니다. 그리고 SSR 처리시 props 가 아닌 state 로 렌더링 하고 싶다면 createStore 실행 시점에 preloadState 에 해당 api 응답 값이 들어가서 store 가 생성되고 컴포넌트에 전달 되어야 컴포넌트 내에서 state 로 참조하여 렌더링할 수 있습니다. 하지만 언급하신 컴포넌트 내 getInitialProps 사이클에서 api 호출시 createStore 실행 시점에 preloadState 로써 값 전달이 힘들 것 같은데요. 이런 경우는 어떻게 처리할 수 있는지도 궁금합니다. 저는 getInitialProps 에서 api 호출하여 응답값을 컴포넌트의 props 로 넘기고 해당 값을 dispatch payload 값으로 넘겨 리듀서를 통해 store 에 넣었습니다. 그리고 나서 state 를 꺼내서 컴포넌트에서 참조하도록 하였는데 이 경우도 ssr 처리는 잘 되었지만 적절하지 않은 스토어 초기화를 위한 액션이 발생하는 것 자체가 부자연 스러운 것 같 습니다. 그래서 express 라우터 컨트롤러에서 호출하여 _app.js 로 넘겨 거기서 store 생성시 참조하도록 하고 있습니다. 혹시 더 좋은 방법이 있을까요?
- 해결됨React로 NodeBird SNS 만들기
react devtool 관련 질문
2-1. app.js로 레이아웃 분리하기 강좌를 보면서 리액트 데브툴 활용하는 부분을 보고 궁금증이 생겨 질문 드립니다. 1. 강좌 화면 중 리액트 데브툴 파트만 캡쳐한 사진입니다. Suspense나 Context.Provider가 App보다도 상위에 위치해 있는데 이것들은 무엇인지 왜 있는 것인지 궁금합니다. 제가 잘 모르지만 Context.Provider 같은 것은 Context api 같은 것 사용하지도 않았는데(지금 단계에서는) 왜 있는것인지 알고싶습니다.
- 해결됨React로 NodeBird SNS 만들기
배포 모드 질문입니다.
개발 모드에서는 해시태그나 유저 포스트 페이지에 직접 주소를 치거나 새로고침해도 정상이었는데, 배포모드에서는 위와 같이 했을 때 404페이지가 뜹니다. (메인페이지나 프로필은 둘 다 정상 동작합니다.) 제가 실수한 부분이 있는건가요? 아님 다른 설정이 필요한가요? 딱히 에러메세지가 뜨는게 없어서 감을 못잡겠습니다.