수강이 제한됩니다.
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결React로 NodeBird SNS 만들기
몇가지 질문있습니다.
1.setCommentFormOpened(prev => !prev); => prev는 정해진 이름인가요? 예를들어 kimch 이런식으로 이름을 지어줘도 괜찮나요? 2. !me => me가 null 이면 !me 라고 생각해도 될까요? 3. useCallback() => 정확히 잘 모르겠습니다. "- useCallback으로 감싸는 함수기준은 자식 컴포넌트에 넘겨주는 함수는 무조건 감싸준다고 보면됨 " 으로 제가 정리해두기는 했지만 .. 넘겨준다는게 무슨 뜻인가요? 다른 컴포넌트에서 cosnt name => ({component})=>{}이런식으로 ({component}) << 이 부분에 들어갈수있는 모든것들은 useCallback()로 감싸주어야하나요? 4. useCallback() => 뒤에 .[] << 이부분의 정확한 용도가 무엇일까요? useEffect()의 .[] 처럼 대괄호 안에있는 변수나 조건등등이 바뀔때마다 렌더링된다로 이해하면 될까요? 마지막으로 긴 글 읽어주셔서 감사합니당!
- 미해결React로 NodeBird SNS 만들기
VSCode 사용중 입니다.
제 깃허브 주소 입니다. 링크 VScode 에디터 사용중이고 마켓에서 Prettier - Code formatter 인스톨한 상태입니다. 강좌에서처럼 코드 설정해줘도 오류 메시지가 안나오는데..Prettier - Code formatter 때문일까요?
- 미해결React로 NodeBird SNS 만들기
질문있어요
const fullPost = await db.Post.findOne({ where: { id: newPost.id }, include: [ { model: db.User } ] }); 게시글 등록하는 부분에서 이 부분은 attributes: ["id", "nickname"] 이렇게 비밀번호 안빼도 되나요??
- 미해결React로 NodeBird SNS 만들기
createdAt 타입 질문입니다.
Warning: Failed prop type: Invalid prop `post.createdAt` of type `string` supplied to `PostCard`, expected `object`createdA는 DB상에서는 확인해보니 datetime 타입으로 되어있고 이건 시퀄라이즈가 자동으로 생성한거니 제가 타입을 잘못 지정할수가 없는거고createdAt의 prop type을 string으로 바꿔서 해결은 되는데, 시퀄라이즈 버젼 올라가면서 타입이 object에서 string으로 바뀐건가요??
- 미해결React로 NodeBird SNS 만들기
2:55 쯤에 질문있습니다.
req.login(user, async(loginErr) => {}) ....... 이런식으로 나와있는데 async를 async(user, loginErr) 이렇게 안하고 loginErr에만 하신 이유가 있나요??
- 미해결React로 NodeBird SNS 만들기
회원가입할 때 질문있습니다.
const filteredUser = Object.assign({}, newUser.toJSON()); delete filteredUser.password; return res.status(200).json(filteredUser); 회원가입할 때도 이렇게 비밀번호는 안보내는게 좋나요???
- 미해결React로 NodeBird SNS 만들기
질문있습니다.
로그인할 때 크롬 개발자 도구 네트워크 탭에서 저 부분의 비밀번호는 안보이게 할 수 없나요?? 강의에서 응답부분은 제거하시는데 요청부분 저기는 냅두시는거 같아서 상관이없나....? 궁금해서 질문드립니다.
- 미해결React로 NodeBird SNS 만들기
질문이있습니다
저기 mainPosts에서 1번째에있는 프로퍼티에 useSelector로 가져와서 자바스크립트로 접근하려하는데 mainPosts[1].title mainPosts[1]['title'] 이런식으로 접근하면 에러가 납니다 저기에 접근하려면 어떻게 해야하나요
- 미해결React로 NodeBird SNS 만들기
제로초님
제로초님 안녕 하세요 질문이 있어서 글을 씁니다 웹팩을 사용 할때 경로를 가지고 있는 파일들 어떻게 혹시 웹팩을 사용 하시고 있으신지 궁금 하여 글을 씁니다. 웹팩을 사용하여 이미지 들은 가져 왔지만 파일의 이름이 다른 탓인지 이미지들을 가져 오지 못하는 현상이 있더라구여 그리고 background-image 를 사용 하는데 url(default:/dist/96313366086e423f5c54d03e200caca2.png;) 요기서 default: 와 뒤에 ; 이부분 삭제 하는 거 혹시 알 고 있으신 부분 있으면 가르쳐 주셨으면 감사하겠습니다. css는 styled-components로 css사용중입니다.
- 해결됨React로 NodeBird SNS 만들기
실무에서 퍼블리싱 적용은 어떻게 하나요?
보통 퍼블리싱이 넘어 올 때 html 파일이 와서 제가 기능을 적용하는데 이미 만들어진 디자인들에서 어떻게 쪼개서 리액트를 적용해야 할지 너무 막연한 느낌입니다. html 파일을 전부 쪼개서 js 파일로 만들어서 기능을 구현하는건가요? 혹시 강의 뒷 부분에서 다루나요?
- 미해결React로 NodeBird SNS 만들기
함수형 컴포넌트 질문드려요!
import React from 'react'; const LoginForm = () => { const onSubmitForm = () => { } const onChangeValue = () => { } return ( <Form onSubmit={onSubmitForm}> <input type="text" onChange={onChangeValue} /> </Form> ) } export default LoginForm; ----------------------------- import React from 'react'; const onSubmitForm = () => { } const onChangeValue = () => { } const LoginForm = () => { return ( <Form onSubmit={onSubmitForm}> <input type="text" onChange={onChangeValue} /> </Form> ) } export default LoginForm; 안녕하세요! 제가 실무에서 주로 loginform 외부에 필요한 함수를 지정해서 사용하는데 강의에선 내부에서 지정하더라구요! 혹시 두 방법의 차이가 있을까요?
- 미해결React로 NodeBird SNS 만들기
jsx파일 사용하지 않고 js파일 사용하는 이유는 뭔가요??
강의보다가 문뜩 생각이 나는데 jsx파일 사용하지 않고 js파일 사용이유를 알고싶어요 또 기초강의에서는 webpack설정하셨는데 next사용하면 webpack설정 안해도 되는건가요???아님 나중에 따로 webpack설정을 하는건가요??
- 미해결React로 NodeBird SNS 만들기
user.nickname이 동작하지 않습니다.
다음은 제 전체 코드인데요, 어떤거를 만져줘야할까요?.. 참고로 console.log(user);하면 객체형태로 state가 잘 출력되나 console.log(user.nickname);하면 언디파인이 나오네요.. import React, { useEffect } from "react"; import PostForm from "../components/PostForm"; import PostCard from "../components/PostCard"; import { connect } from "react-redux"; // 7.1.1 이상부터 사용가능 훅 사용하기위함임.. import { loginAction, logoutAction } from "../reducers/user"; // index.js는 타임라인 역할 const dummy = { isLoggedIn: true, imagePaths: [], mainPosts: [ { User: { id: 1, nickname: "정중식" }, content: "첫 번째 게시글", img: "https://img.hankyung.com/photo/201807/03.17342954.1.jpg" } ] }; const Home = ({ user, dispatch, login, logout }) => { useEffect(() => { login(); logout(); login(); console.log(user.nickname); }, []); return ( <div> {user ? ( <div>로그인 했습니다:{user.nickname}</div> ) : ( <div>로그아웃 했습니다.</div> )} {dummy.isLoggedIn && <PostForm />} {dummy.mainPosts.map(c => { return <PostCard key={c} post={c} />; })} </div> ); }; function mapStateToProps(state) { return { user: state.user }; } // 리덕스 state를 리액트state로 맵핑시켜주겠다. 리덕스 state인 user가 const Home({user}) 리액트 props인 user로 연결이 됨 function mapDispatchToProps(dispatch) { return { login: () => dispatch(loginAction), logout: () => dispatch(logoutAction) }; } // 액션 자체를 dispatch해서 리턴해줌 export default connect(mapStateToProps, mapDispatchToProps)(Home);
- 미해결React로 NodeBird SNS 만들기
에러페이지
안녕하세요 제로초님 항상 강의 잘 보고 있습니다 http://localhost:3000/11111 위 경로와 같이 아예 없는 페이지로 접근시 강의의 의도대로 404 에러 페이지로 진입이 되는데 http://localhost:3000/post/detail/11111 이런식으로 상세페이지 넘버만 바꾼 페이지의 경우 서버 에러가 났을때 에러 페이지가 아닌 아래와 같은 메세지가 뜹니다 500 에러 처리도 _error.js에서 원래는 가능한건가요?
- 미해결React로 NodeBird SNS 만들기
postman으로 한글이름으로 된 파일을 보낼시 깨짐때문에 문의드립니다.
postman으로 value가 한글을 보낼 때는 잘 되다가 한글이름의 파일을 전송하게 되는 경우에는 깨짐현상이 발생하는데 이를 해결하는 방법이 무엇이 있을까요? postman설정에서 다음과 같이 되어 있는데 일반 텍스트에서 한글을 보낼시에는 잘 되는데 한글이름의 이미지 파일을 보낼시에는 한글 깨짐 현상이 발생이 됩니다.
- 미해결React로 NodeBird SNS 만들기
next.config.js sass 적용 질문
next.config.js 에서 제가 잘못한건지... styled-components 적용하려고 하면 화면이 깜빡거리는 것 같은 현상을 겪어서 sass 로적용해보려고 @zeit/next-sass, @zeit/next-css 설치 후 기존 코드에 const withSass = require('@zeit/next-sass'); const withCSS = require('@zeit/next-css'); module.exports = withCSS( withSass( withBundleAnalyzer({ distDir: '.next', webpack(config) { const prod = process.env.NODE_ENV === 'production'; const plugins = [...config.plugins]; if (prod) { plugins.push(new CompressionPlugin()); } config.module.rules.push({ test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/, use: { loader: 'url-loader', options: { limit: 100000, }, }, }); return { ...config, mode: prod ? 'production' : 'development', devtool: prod ? 'hidden-source-map' : 'eval', plugins, }; }, }), ), ); 저런식으로 적용했는데 되질 않아서 ㅠㅠ 질문드려요 ㅠㅠ... 새로 프로젝트 만들어서 해보면 거기서는 적용이 되는데 지금 구조에서는 이게 불가능한건지... 암튼 도통 감이오질 않아 여쭙니다 ㅠㅠ
- 미해결React로 NodeBird SNS 만들기
Component와 store 매개변수(?) 이해가 잘안갑니다.
const NodeBird = ({ Component, store }) => { return ( <Provider store={store}> <Head> <title>NodeBird</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.25.3/antd.css" /> </Head> <AppLayout> <Component /> </AppLayout> </Provider> ); }; NodeBird.propTypes = { Component: PropTypes.elementType, store: PropTypes.object }; export default withRedux((initialState, options) => { const store = createStore(reducer, initialState); // 여기에다가 store 커스터마이징 할꺼. return store; })(NodeBird); ``` const NodeBird = ({ Component, store }) => {} 에서 Component, store 부분이 이해가 잘 안갑니다. 1. NodeBird는 모든 페이지들의 부모이고 모든 페이지들에게 유산을물려줍니다. 그러면 노드버드는 Component를 어디서 상속받나요? 최상위인 root 에서 받는건가요? 2. 1번과 유사한데, 노드버드는 스토어를 어디서 상속받나요? 맨 마지막 export default..... return store; < 여기서 리턴된 스토어가 노드버드의 매개변수(?)에 들어가는건가요? 콜백함수처럼요?.. 긴 글이였는데 읽어주셔서 정말 감사합니다.
- 미해결React로 NodeBird SNS 만들기
제로초님 질문이 있습니다.
쿠키를 전달 하는데 있어서 localhost로 접근을 하게 되면 쿠키가 전달이 되는데 127.0.0.1 ip로 접근을 하게 되면 쿠키 전달이 안되 더라구여 혹시 두가지다 쿠키를 전달 받으려면 혹시 설정 해줘야 하는게 있을까요?
- 해결됨React로 NodeBird SNS 만들기
에러가뜹니다
5강을 보고있는데 req.user.id가 어디서 오는지 모르겠습니다 content는 클라이언트쪽에서 넘기는값이라 나오는데 req.user는 계속 console.log쳐봐도 없다고나오네요...
- 미해결React로 NodeBird SNS 만들기
NODE_ENV
NODE_ENV가 무엇인지 궁금합니다. 또 보통 dotenv미들웨어를 이용해서 process.env.xxx 이렇게 작성하는걸 보았는데 dotenv를 받아서 쓸수있는건지아니면 그냥 process.env.NODE_ENV이렇게 쓸수있는건지 궁금합니다