수강이 제한됩니다.
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결React로 NodeBird SNS 만들기
grid 관련 질문 있습니다.
https://www.inflearn.com/questions/41166 위에서 답변 남기신 내용인 2. List에서 grid props 설정이 적용 안 된 것 같습니다. 이 부분이 무슨말씀이신지 혹시 링크나 키워드라도 주실 수 있을까요..
- 해결됨React로 NodeBird SNS 만들기
넥스트에 정적으로 파일을 삽입하는 방법이 따로 있을까요?
{/* <img alt="fortest" src="/home/gksdudxkr/제로초/homepage/pages/logo.jpg" style={{width:"600px", height:"600px"}}/> */} <img alt="fortest" src={require("../public/logo.jpg").default} style={{width:"600px", height:"600px"}} ></img> 로 이미지를 정적으로 삽입을 하려고 하는데요 public폴더에다 사진을 불러올려고 하는데 사진을 인식을 못하는 것 같습니다. 사진저장장소를 옮겨봤지만 그래도 계속 인식을 못하는 것 같습니다. "../public" 하고 사진이 나와야 하는데 나오지를 않고 있어요.... 삽입하는 방법이 혹시 따로 있을까요?
- 미해결React로 NodeBird SNS 만들기
npm run dev
1. next는 에러뜨면 다시 껏다가 켜야되는건가요?아님 제가 못하고 있는걸까요?저장을 해도 안되네요...2.ㄴdata들이 옆으로 나열된게 아니라 세로로 나열됐는데 뭐가 이상한걸까요??
- 미해결React로 NodeBird SNS 만들기
next버전에따라서 이 틀이 바뀔수가있나요?
// 기존 컴포넌트의 기능을 확장해준다. // NodeBird= ({store})에서 store를 props로 넣어준다 export default withRedux((initialState, options) => { const middlewares = []; // []안에 사용할 미들웨어를 적어주면된다. const enhancer = compose( applyMiddleware(...middlewares), !options.isServer && typeof window.__REDUX_DEVTOOLS_EXTENSION__ !== "undefined" ? window.__REDUX_DEVTOOLS_EXTENSION__() : (f) => f ); const store = createStore(reducer, initialState, enhancer); return store; })(NodeBird);
- 미해결React로 NodeBird SNS 만들기
혹시 버전관리 문제인걸까요?
(사진)
- 미해결React로 NodeBird SNS 만들기
제로초님 안녕하세요 아직 강의 초반부입니다.
강의 후반부에 서버사이드렌더링이나 그외것들을 설정하실때, 강의에서 웹팩과 바벨을 만져주나요? 제로초님은 강의이다보니 npm i next로해서 하나씩 설정같은도 보여주시는듯한데, npm next cli 을하게되면 바벨이나 웹팩을 안만져도되는걸까요?
- 미해결React로 NodeBird SNS 만들기
읔..프로필 들어가면
제로초님이 알려주신대로라면 0이 되어야 하는데, 1이 넘어갑니다..
- 미해결React로 NodeBird SNS 만들기
Error: React.Children.only expected to receive a single React element child.
에러 해결 도움 부탁드립니다. import React from "react"; import { Menu, Input } from "antd"; const AppLayout = ({ children }) => { return ( <div> <Menu mode="horizontal"> <Menu.Item key="home">노드버드</Menu.Item> <Menu.Item key="profile">프로필</Menu.Item> <Menu.Item key="email"> <Input.Search enterButton style={{ verticalAlign: "middle" }} /> </Menu.Item> </Menu> {children} </div> ); }; export default AppLayout; import React from "react"; import Link from "next/link"; import Head from "next/head"; import AppLayout from "../components/AppLayout"; const Home = () => { return ( <> <Head> <title>NodeBird</title> <Link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.16.2/antd.css" /> </Head> <AppLayout> <Link href="/about"> <a>about</a> </Link> <div>Hello, Next!!</div> </AppLayout> </> ); }; export default Home;
- 미해결React로 NodeBird SNS 만들기
서버사이드 렌더링이 안 되는 문제에 대해 질문했던 사람입니다!
https://www.inflearn.com/questions/39556 위 주소는 기존 질문입니다. 제가 계속 제로초님 깃허브 코드를 복사해보고 해도 해결이 안 되어 고민을 해본 부분이 있는데 제가 화면을 넘어갈 때 가독성이 안 좋다면 죄송합니다 postcard.js에서 이렇게 card meta 안에 description에 Link를 걸어서, post.id로 넘어가게 했는데 혹시 이 부분에 대해 순서나 그런 이슈가 있을까요? 강좌를 다시 들어보면서 순서에 대한게 갑자기 생각나서요 ㅠㅠ 아무리 생각해도 화면에만 노출이 안 되고 sinlgePost가 계속 null로 들어가는게 혹시 이 부분은 아닐까 하는 생각이 들었습니다. (주소로 바로 들어가면 잘 들어가집니다) 혹시 이 부분에서 문제가 생길 수 있을지 궁금합니다 ㅠㅠ description 부분 클릭 시 주소 자체는 http://localhost:3060/post/58 이런식으로 주소 자체는 잘 전송이 되고 있습니다.
- 미해결React로 NodeBird SNS 만들기
제로초님
제로초님 리뉴얼 까지 잘봤습니다 매번 강의 잘해주셔서 감사합니다 질문이 있어서 글을 남기게 되었습니다. 게시판에서 데이터가 1000개 가량이 되는 데이터를 처리 하려고 하는데 1000개를 들고오게 되면 과부하에 걸릴것 같은데 리액트에서 서버사이드데이터테이블을 사용하고 싶은데 antd table에서 서버사이드는 까지는 안될것같고 제로초님 블로그 등을 사용 하셨을때 많은 데이터 사용 해보셨을 것 같은데 혹시 사용하신 모듈이나 사용을 안하셨으면 혹시 어떤 방법이 있을지 해서 글남기게 되었습니다.
- 미해결React로 NodeBird SNS 만들기
ctx.isServer
정확히 이해가 안가는데.. 클라이언트에서 요청한다. 서버에서 요청한다.. 그 것을 isServer로 구분하시던데... 음.. 정확히 와닫지 않네요.. 그러니까 서버사이드 렌더링 할 때는 클라이언트->프론트서버(isServer)->백엔드서버 서버사이드 렌더링 아닐 때는 클라이언트 -> 백엔드 서버 이런 맥락으로 이해하면 될까여?
- 미해결React로 NodeBird SNS 만들기
IOS에서만 세션이 유지되지 않는 이유가 뭘까요??ㅠㅠ
윈도우와 안드로이드에서는 새로고침을해도 로그인이 유지되는데 유독 아이폰이나 아이패드에서만 새로고침을하거나 하면 세션이 초기화되버리네요.. 어떤 부분을 고려해야 할까요?? 감이 안잡힙니다 ㅠㅠ
- 미해결React로 NodeBird SNS 만들기
sharp 설치가 안됩니다.
> node-addon-api@3.0.0 install /home/donggun/Desktop/Project/Nodebird/lambda/node_modules/node-addon-api > node-gyp rebuild gyp: binding.gyp not found (cwd: /home/donggun/Desktop/Project/Nodebird/lambda/node_modules/node-addon-api) while trying to load binding.gyp gyp ERR! configure error gyp ERR! stack Error: `gyp` failed with exit code: 1 gyp ERR! stack at ChildProcess.onCpExit (/home/donggun/.nvm/versions/node/v10.13.0/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:336:16) gyp ERR! stack at ChildProcess.emit (events.js:182:13) gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:240:12) gyp ERR! System Linux 5.3.0-61-generic gyp ERR! command "/home/donggun/.nvm/versions/node/v10.13.0/bin/node" "/home/donggun/.nvm/versions/node/v10.13.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild" gyp ERR! cwd /home/donggun/Desktop/Project/Nodebird/lambda/node_modules/node-addon-api gyp ERR! node -v v10.13.0 gyp ERR! node-gyp -v v3.6.0 gyp ERR! not ok npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! node-addon-api@3.0.0 install: `node-gyp rebuild` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the node-addon-api@3.0.0 install script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /home/donggun/.npm/_logs/2020-07-03T10_35_58_675Z-debug.log 밑에 코드를 pakage.json에 추가했는데도 해결이 되지 않습니다. "repository": { "type": "git", "url": "git+https://github.com/bathingape/Nodebird.git" }, "bugs": { "url": "https://github.com/bathingape/Nodebird/issues" }, "homepage": "https://github.com/bathingape/Nodebird#readme"
- 미해결React로 NodeBird SNS 만들기
쿠키통일은 되는데 다른유저와 공유되는 것 같습니다.
쿠키통일은 완료됐습니다. 1번유저가 사이트에 접속을 해서 로그인을 하고 2번유저가 사이트에 접속할 때 1번유저의 로그인 상태로 접속이 됩니다...
- 해결됨React로 NodeBird SNS 만들기
아래의 에러가 뜨는데 왜그런걸까요?ㅠㅠ
npm i antd를 실수로 다른 폴더에서 깔아서, 다시금 npm uninstall antd 한 뒤에 다시 front폴더에서 npm i antd를 실행시켜 깔았더니 이런 에러가 뜨네요 ㅠㅠㅠ
- 미해결React로 NodeBird SNS 만들기
antd 작동되지않아서 질문올립니다
안녕하세요 제로초님 이번에 영상을 보고 typescript로 한번 바꾸어보려고 시도중인데 app.tsx import 'antd/dist/antd.css'; import React, { Component } from "react"; import AppLayout from '../components/AppLayout' import Head from 'next/head'; const TypeBird=({Component}:{Component:React.ReactType})=>{//Component는 any가 맞나? return ( <> <Head> <meta charSet="utf-8" /> <title>TypeBird</title> </Head> <AppLayout> <Component /> </AppLayout> </> ); } export default TypeBird; AppLayout.tsx import React, { ReactNode } from 'react'; import Link from 'next/link'; import {Menu} from 'antd/lib'; const AppLayout:React.FC=({children}:{children:ReactNode})=>{//children을 사용하여서 React.FC를 사용하였다. return ( <div> <Menu mode="horizontal"> <Menu.Item> <Link href="/"> <a>타입버드</a> </Link> </Menu.Item> <Menu.Item> <Link href="/profile"> <a>프로필</a> </Link> </Menu.Item> <Menu.Item> <Link href="/signup"> <a>회원가입</a> </Link> </Menu.Item> </Menu> {children} </div> ); } export default AppLayout; 이렇게 작성하였더니 next-dev.js:48 Error was not caught TypeError: Cannot read property 'parentNode' of null at Object.push../node_modules/antd/dist/antd.css.options.insert (antd.css?5e0f:14) at insertStyleElement (injectStylesIntoStyleTag.js:109) at addStyle (injectStylesIntoStyleTag.js:208) at modulesToDom (injectStylesIntoStyleTag.js:81) at push../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js.module.exports (injectStylesIntoStyleTag.js:239) at Object../node_modules/antd/dist/antd.css (antd.css?5e0f:29) at __webpack_require__ (bootstrap:862) at fn (bootstrap:150) at Module.<anonymous> (module.js:22) at Module../pages/_app.tsx (_app.tsx:20) at __webpack_require__ (bootstrap:862) at fn (bootstrap:150) at next-client-pages-loader.js:5 at register (page-loader.js:278) at PageLoader.registerPage (page-loader.js:307) at Array.register [as push] (index.js:54) at Object../node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?page=%2F_app&absolutePagePath=private-next-pages%2F_app.tsx!./ (next-client-pages-loader.js:2) at __webpack_require__ (bootstrap:862) at fn (bootstrap:150) at Object.0 (_app.tsx:20) at __webpack_require__ (bootstrap:862) at checkDeferredModules (bootstrap:45) at Array.webpackJsonpCallback [as push] (bootstrap:32) at _app.js?ts=1593532548146:1 안녕하세요 제로초님 이번에 영상을 보고 typescript로 한번 바꾸어보려고 시도중인데 app.tsx import 'antd/dist/antd.css'; import React, { Component } from "react"; import AppLayout from '../components/AppLayout' import Head from 'next/head'; const TypeBird=({Component}:{Component:React.ReactType})=>{//Component는 any가 맞나? return ( <> <Head> <meta charSet="utf-8" /> <title>TypeBird</title> </Head> <AppLayout> <Component /> </AppLayout> </> ); } export default TypeBird; AppLayout.tsx import React, { ReactNode } from 'react'; import Link from 'next/link'; import {Menu} from 'antd/lib'; const AppLayout:React.FC=({children}:{children:ReactNode})=>{//children을 사용하여서 React.FC를 사용하였다. return ( <div> <Menu mode="horizontal"> <Menu.Item> <Link href="/"> <a>타입버드</a> </Link> </Menu.Item> <Menu.Item> <Link href="/profile"> <a>프로필</a> </Link> </Menu.Item> <Menu.Item> <Link href="/signup"> <a>회원가입</a> </Link> </Menu.Item> </Menu> {children} </div> ); } export default AppLayout; 이렇게 작성하였더니 next-dev.js:48 Error was not caught TypeError: Cannot read property 'parentNode' of null at Object.push../node_modules/antd/dist/antd.css.options.insert (antd.css?5e0f:14) at insertStyleElement (injectStylesIntoStyleTag.js:109) at addStyle (injectStylesIntoStyleTag.js:208) at modulesToDom (injectStylesIntoStyleTag.js:81) at push../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js.module.exports (injectStylesIntoStyleTag.js:239) at Object../node_modules/antd/dist/antd.css (antd.css?5e0f:29) at __webpack_require__ (bootstrap:862) at fn (bootstrap:150) at Module.<anonymous> (module.js:22) at Module../pages/_app.tsx (_app.tsx:20) at __webpack_require__ (bootstrap:862) at fn (bootstrap:150) at next-client-pages-loader.js:5 at register (page-loader.js:278) at PageLoader.registerPage (page-loader.js:307) at Array.register [as push] (index.js:54) at Object../node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?page=%2F_app&absolutePagePath=private-next-pages%2F_app.tsx!./ (next-client-pages-loader.js:2) at __webpack_require__ (bootstrap:862) at fn (bootstrap:150) at Object.0 (_app.tsx:20) at __webpack_require__ (bootstrap:862) at checkDeferredModules (bootstrap:45) at Array.webpackJsonpCallback [as push] (bootstrap:32) at _app.js?ts=1593532548146:1 이런 에러가 나와서 질문 올립니다..antd 타입에러인 거같은데 무엇이 문제인지 자세히 모르겟어서 질문올립니다
- 미해결React로 NodeBird SNS 만들기
안녕 하세요
제로초님 antd에서 모달창을 띄워서 사용 하려고 하고 있는데 모달창에서 디스패치를 하였을 때 에러가 Provider 가나던데 이런 에러가 나던데 function success() { Modal.success({ content: <PageData />, }); } 함수 안에서 실행되는거라 디스패치가 사용이 안되는 건가요? 혹시 어떤 점에서 잘 못 사용 하고 있는지 가르쳐 주실 수 있을까요?!
- 미해결React로 NodeBird SNS 만들기
제로초님~
제로초님 안녕 하세요 궁금 한게 있어서 물어 봅니다. const [ testList, srtTestList ] = useState([ "test1", "test2", "test3", "test4", "test5"]) const [ list, setList ] = useState({ test1: "", test2: "", test3: "", test4: "", test5: "", }) if(v == "test1"){ setList((prevState) => ({ ...prevState, test1: aa })); } if(v == "test2"){ setList((prevState) => ({ ...prevState, test2: aa })); } if(v == "test3"){ setList((prevState) => ({ ...prevState, test3: aa })); } if(v == "test4"){ setList((prevState) => ({ ...prevState, test4: aa })); } if(v == "test5"){ setList((prevState) => ({ ...prevState, test5: aa })); } {testList.map((v, i) => <div key={v}> <div >{v}</div> <input type="text" onChange={test1(v)}/> <div> {v}</div> </div> )} --------------------- 제가 위와 같은 코드를 줄일 려고 하는데 const test1 = (v) => (e) => { const aa = e.target.value for(let i = 0; i < testList.length; i++){ if(testList[i] == v){ setList((prevState) => ({ ...prevState, `${testList[i]}`: aa })); } } 이런 식으로는 useState는 사용이 안되더라구여 혹시 어떤 방법이 있을지 해서 물어 보게 되었습니다.
- 해결됨React로 NodeBird SNS 만들기
궁금한게 있어서 여쭤봅니다.
혹시 express에도 장고와 같은 admin page 기능이 있을까요??
- 해결됨React로 NodeBird SNS 만들기
map 함수
안녕하세요. 제로초님 map함수에 궁금하게 생겨서 react 강좌에서는 그냥 변수.map((c) => { return ( ) }) 이렇게 하셧잖아요? 근데 이렇게해서 데이터가 안나타서 변수.map(c => ) 이런방식으로 하니깐 되더라고요... 둘의 방식 차이가 먼지 모르겠습니다. ㅠㅠ 둘다 똑같은 매개변수 집어넣은거같은데