2022-11-23T15:26:37.495Z

0

github에 보면 ImagesZoom 안에 index.js가 없는데 처음부터 다시 해야 하나요??

0

https://github.com/ZeroCho/react-nodebird/blob/master/ch7/front/components/ImagesZoom/index.js

이렇게 있어야합니다

0

git status 하니까 ImagesZoom/index.js 초록색 떠있어서 add 파일이름 해서 깃헙에 넣었어요

그리고 다시 git commit -am "내용"

git push origin master 하고

우분투 front 와서 git pull , npm run build 했어요

ubuntu@ip-172-31-37-255:~$ git pull

There is no tracking information for the current branch.

Please specify which branch you want to merge with.

See git-pull(1) for details.

git pull <remote> <branch>

If you wish to set tracking information for this branch you can do so with:

git branch --set-upstream-to=origin/<branch> master

ubuntu@ip-172-31-37-255:~$ npm run build
npm ERR! code ENOENT

npm ERR! syscall open

npm ERR! path /home/ubuntu/package.json

npm ERR! errno -2

npm ERR! enoent ENOENT: no such file or directory, open '/home/ubuntu/package.json'

npm ERR! enoent This is related to npm not being able to find a file.

npm ERR! enoent

npm ERR! A complete log of this run can be found in:

npm ERR! /home/ubuntu/.npm/_logs/2022-11-24T16_43_16_098Z-debug.log

ubuntu@ip-172-31-37-255:~$

이 상태인데 어떻게 해야하나요..ㅜ 무슨 브런치가 꼬인건지..모르겠네요

0

올바른 폴더에 들어가셔야죠. 프로젝트 폴더에요.

0

front 폴더에 안들어가셨어요

0

ubuntu@ip-172-31-37-255:~/react-nodebird/front$ git pull

Already up to date.

ubuntu@ip-172-31-37-255:~/react-nodebird/front$ npm run build

> react-nodebird-front@1.0.0 build /home/ubuntu/react-nodebird/front

> cross-env ANALYZE=true NODE_ENV=production next build

Browserslist: caniuse-lite is outdated. Please run:

npx browserslist@latest --update-db

info  - Using external babel configuration from /home/ubuntu/react-nodebird/front/.babelrc

info  - Creating an optimized production build

Failed to compile.

ModuleNotFoundError: Module not found: Error: Can't resolve './ImagesZoom' in '/home/ubuntu/react-nodebird/front/components'

> Build error occurred

Error: > Build failed because of webpack errors

    at build (/home/ubuntu/react-nodebird/front/node_modules/next/dist/build/index.js:15:918)

    at runMicrotasks (<anonymous>)

    at processTicksAndRejections (internal/process/task_queues.js:95:5)

npm ERR! code ELIFECYCLE

npm ERR! errno 1

npm ERR! react-nodebird-front@1.0.0 build: cross-env ANALYZE=true NODE_ENV=production next build       

npm ERR! Exit status 1

npm ERR!

npm ERR! Failed at the react-nodebird-front@1.0.0 build 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/ubuntu/.npm/_logs/2022-11-25T14_02_53_009Z-debug.log

git pull 까진 된거 같은데요

npm run build는 어디서 문제인가여ㅠ ImagesZoom 왜 이럴까여 ㅠㅠ

ImagesZoom/index.js

 import React, { useState } from 'react';
    import PropTypes from 'prop-types';
    import Slick from 'react-slick';

    import { Overlay, Global, Header, CloseBtn, ImgWrapper, Indicator, SlickWrapper } from './styles';

    const ImagesZoom = ({ images, onClose }) => {
    const [currentSlide, setCurrentSlide] = useState(0);
    return (
        <Overlay>
        <Global />
        <Header>
            <h1>상세 이미지</h1>
            <CloseBtn onClick={onClose}>X</CloseBtn>
        </Header>
        <SlickWrapper>
            <div>
            <Slick
                        initialSlide={0} 
                        beforeChange={(slide, newSlide) => setCurrentSlide(newSlide)}
                        infinite 
                        arrows={false} 
                        slidesToShow={1}
                        slidesToScroll={1} 
                        >
                {images.map((v) => (
                <ImgWrapper key={v.src}>
                    <img src={`http://localhost:3065/${v.src}`} alt={v.src} />
                </ImgWrapper>
                ))}
            </Slick>
            <Indicator>
                <div>
                    {currentSlide + 1}
                    {' '}
                    /
                    {images.length}
                </div>
            </Indicator>
            </div>
        </SlickWrapper>
        </Overlay>
    );
}; 

ImagesZoom.propTypes = {
    images: PropTypes.arrayOf(PropTypes.object).isRequired,
    onClose: PropTypes.func.isRequired,
};

export default ImagesZoom;

components/PostImages.js

import React, { useCallback, useState } from 'react';
import PropTypes from 'prop-types';
import { PlusOutlined } from '@ant-design/icons';

import ImagesZoom from './ImagesZoom';

const PostImages = ({ images }) => {
  const [showImagesZoom, setShowImagesZoom] = useState(false);

  const onZoom = useCallback(() => {
    setShowImagesZoom(true);
  }, []);
  const onClose = useCallback(() => {
    setShowImagesZoom(false);
  }, []);

  if (images.length === 1) {
    return (
      <>
        <img role="presentation" src={`http://localhost:3065/${images[0].src}`} alt={images[0].src} onClick={onZoom} />
        {showImagesZoom && <ImagesZoom images={images} onClose={onClose} />}
      </>
    );
  }
  if (images.length === 2) {
    return (
      <>
        <img role="presentation" style={{ width: '50%', display: 'inline-block' }} src={`http://localhost:3065/${images[0].src}`} alt={images[0].src} onClick={onZoom} />
        <img role="presentation" style={{ width: '50%', display: 'inline-block' }} src={`http://localhost:3065/${images[1].src}`} alt={images[1].src} onClick={onZoom} />
        {showImagesZoom && <ImagesZoom images={images} onClose={onClose} />}
      </>
    );
  }
  return (
    <>
      <div>
        <img role="presentation" style={{ width: '50%' }} src={`http://localhost:3065/${images[0].src}`} alt={images[0].src} onClick={onZoom} />
        <div
          role="presentation"
          style={{ display: 'inline-block', width: '50%', textAlign: 'center', verticalAlign: 'middle' }}
          onClick={onZoom}
        >
          <PlusOutlined />
          <br />
          {images.length - 1}
          개의 사진 더보기
        </div>
      </div>
      {showImagesZoom && <ImagesZoom images={images} onClose={onClose} />}
    </>
  );
};    

PostImages.propTypes = {
  images: PropTypes.arrayOf(PropTypes.object).isRequired,
};

export default PostImages;

ImagesZoom Import 해오는곳은 여기인데 이곳 문제인가여..

깃헙 ImagesZoom에는 두개 js파일 들어있어요

0

로컬에는 있을지몰라도 우분투에 없는 걸겁니다. 우분투 폴더에서 ImagesZoom 폴더가 있는지 확인하세요. 내부 파일도요.

0

찾다가 깃헙에 imagesZoom 소문자로 되있어서 파일명 소문자로 바꾸고 다시 git pull 했어요

막 수정하다가 대문자로 바꿧나봅니다..

다시 npm run build 했는데 about 뭔가 나오네요ㅠ

ubuntu@ip-172-31-37-255:~/react-nodebird/front$ npm run build

> react-nodebird-front@1.0.0 build /home/ubuntu/react-nodebird/front

> cross-env ANALYZE=true NODE_ENV=production next build

Browserslist: caniuse-lite is outdated. Please run:

npx browserslist@latest --update-db

info  - Using external babel configuration from /home/ubuntu/react-nodebird/front/.babelrc

Webpack Bundle Analyzer saved report to /home/ubuntu/react-nodebird/front/.next/server/analyze/client.html 

Webpack Bundle Analyzer saved report to /home/ubuntu/react-nodebird/front/.next/analyze/client.html        

info  - Creating an optimized production build

info  - Compiled successfully

info  - Collecting page data

[    ] info  - Generating static pages (0/2)getStaticProps

{ type: 'LOAD_USER_REQUEST', data: 1 }

{ type: '@@redux-saga/CHANNEL_END' }

[=   ] info  - Generating static pages (0/2)AxiosError: connect ECONNREFUSED 127.0.0.1:3065

    at Function.AxiosError.from (/home/ubuntu/react-nodebird/front/node_modules/axios/dist/node/axios.cjs:725:14)

    at RedirectableRequest.handleRequestError (/home/ubuntu/react-nodebird/front/node_modules/axios/dist/node/axios.cjs:2465:25)

    at RedirectableRequest.emit (events.js:400:28)

    at ClientRequest.eventHandlers.<computed> (/home/ubuntu/react-nodebird/front/node_modules/follow-redirects/index.js:14:24)

    at ClientRequest.emit (events.js:400:28)

    at Socket.socketErrorListener (_http_client.js:475:9)

    at Socket.emit (events.js:400:28)

    at emitErrorNT (internal/streams/destroy.js:106:8)

    at emitErrorCloseNT (internal/streams/destroy.js:74:3)

    at processTicksAndRejections (internal/process/task_queues.js:82:21) {

  port: 3065,

  address: '127.0.0.1',

  syscall: 'connect',

  code: 'ECONNREFUSED',

  errno: -111,

  config: {

    transitional: {

      silentJSONParsing: true,

      forcedJSONParsing: true,

      clarifyTimeoutError: false

    },

    adapter: [Function: httpAdapter],

    transformRequest: [ [Function: transformRequest] ],

    transformResponse: [ [Function: transformResponse] ],

    timeout: 0,

    xsrfCookieName: 'XSRF-TOKEN',

    xsrfHeaderName: 'X-XSRF-TOKEN',

    maxContentLength: -1,

    maxBodyLength: -1,

    env: { FormData: [Function], Blob: null },

    validateStatus: [Function: validateStatus],

    headers: AxiosHeaders {

      'User-Agent': 'axios/1.1.2',

      'Accept-Encoding': 'gzip, deflate, br',

      [Symbol(defaults)]: [Object]

    },

    baseURL: 'http://localhost:3065',

    withCredentials: true,

    method: 'get',

    url: '/user/1',

    data: undefined

  },

  request: <ref *1> Writable {

    _writableState: WritableState {

      objectMode: false,

      highWaterMark: 16384,

      finalCalled: false,

      needDrain: false,

      ending: false,

      ended: false,

      finished: false,

      destroyed: false,

      decodeStrings: true,

      defaultEncoding: 'utf8',

      length: 0,

      writing: false,

      corked: 0,

      sync: true,

      bufferProcessing: false,

      onwrite: [Function: bound onwrite],

      writecb: null,

      writelen: 0,

      afterWriteTickInfo: null,

      buffered: [],

      bufferedIndex: 0,

      allBuffers: true,

      allNoop: true,

      pendingcb: 0,

      prefinished: false,

      errorEmitted: false,

      emitClose: true,

      autoDestroy: true,

      errored: null,

      closed: false

    },

    _events: [Object: null prototype] {

      response: [Function: handleResponse],

      error: [Function: handleRequestError],

      socket: [Function: handleRequestSocket]

    },

    _eventsCount: 3,

    _maxListeners: undefined,

    _options: {

      maxRedirects: 21,

      maxBodyLength: Infinity,

      protocol: 'http:',

      path: '/user/1',

      method: 'GET',

      headers: [Object: null prototype],

      agents: [Object],

      auth: undefined,

      beforeRedirect: [Function: dispatchBeforeRedirect],

      beforeRedirects: [Object],

      hostname: 'localhost',

      port: '3065',

      agent: undefined,

      nativeProtocols: [Object],

      pathname: '/user/1'

    },

    _ended: true,

    _ending: true,

    _redirectCount: 0,

    _redirects: [],

    _requestBodyLength: 0,

    _requestBodyBuffers: [],

    _onNativeResponse: [Function (anonymous)],

    _currentRequest: ClientRequest {

      _events: [Object: null prototype],

      _eventsCount: 7,

      _maxListeners: undefined,

      outputData: [],

      outputSize: 0,

      writable: true,

      destroyed: false,

      _last: true,

      chunkedEncoding: false,

      shouldKeepAlive: false,

      _defaultKeepAlive: true,

      useChunkedEncodingByDefault: false,

      sendDate: false,

      _removedConnection: false,

      _removedContLen: false,

      _removedTE: false,

      _contentLength: 0,

      _hasBody: true,

      _trailer: '',

      finished: true,

      _headerSent: true,

      socket: [Socket],

      _header: 'GET /user/1 HTTP/1.1\r\n' +

        'Accept: application/json, text/plain, /\r\n' +

        'User-Agent: axios/1.1.2\r\n' +

        'Accept-Encoding: gzip, deflate, br\r\n' +

        'Host: localhost:3065\r\n' +

        'Connection: close\r\n' +

        '\r\n',

      _keepAliveTimeout: 0,

      _onPendingData: [Function: noopPendingOutput],

      agent: [Agent],

      socketPath: undefined,

      method: 'GET',

      maxHeaderSize: undefined,

      insecureHTTPParser: undefined,

      path: '/user/1',

      _ended: false,

      res: null,

      aborted: false,

      timeoutCb: null,

      upgradeOrConnect: false,

      parser: null,

      maxHeadersCount: null,

      reusedSocket: false,

      host: 'localhost',

      protocol: 'http:',

      _redirectable: [Circular *1],

      [Symbol(kCapture)]: false,

      [Symbol(kNeedDrain)]: false,

      [Symbol(corked)]: 0,

      [Symbol(kOutHeaders)]: [Object: null prototype]

    },

    _currentUrl: 'http://localhost:3065/user/1',

    [Symbol(kCapture)]: false

  },

  cause: Error: connect ECONNREFUSED 127.0.0.1:3065

      at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1159:16) {

    errno: -111,

    code: 'ECONNREFUSED',

    syscall: 'connect',

    address: '127.0.0.1',

    port: 3065

  }

}

TypeError: Cannot read property 'data' of undefined

    at loadUser (/home/ubuntu/react-nodebird/front/.next/server/pages/_app.js:593:27)

    at loadUser.throw (<anonymous>)

    at next (/home/ubuntu/react-nodebird/front/node_modules/@redux-saga/core/dist/redux-saga-core.prod.cjs.js:1071:32)

    at currCb (/home/ubuntu/react-nodebird/front/node_modules/@redux-saga/core/dist/redux-saga-core.prod.cjs.js:1196:7)

    at /home/ubuntu/react-nodebird/front/node_modules/@redux-saga/core/dist/redux-saga-core.prod.cjs.js:347:5

    at processTicksAndRejections (internal/process/task_queues.js:95:5)

The above error occurred in task loadUser

    created by takeLatest(LOAD_USER_REQUEST, loadUser)

    created by watchLoadUser

    created by userSaga

    created by rootSaga

Error occurred prerendering page "/about". Read more: https://err.sh/next.js/prerender-error

TypeError: Cannot read property 'data' of undefined

    at loadUser (/home/ubuntu/react-nodebird/front/.next/server/pages/_app.js:593:27)

    at loadUser.throw (<anonymous>)

    at next (/home/ubuntu/react-nodebird/front/node_modules/@redux-saga/core/dist/redux-saga-core.prod.cjs.js:1071:32)

    at currCb (/home/ubuntu/react-nodebird/front/node_modules/@redux-saga/core/dist/redux-saga-core.prod.cjs.js:1196:7)

    at /home/ubuntu/react-nodebird/front/node_modules/@redux-saga/core/dist/redux-saga-core.prod.cjs.js:347:5

    at processTicksAndRejections (internal/process/task_queues.js:95:5)

> Build error occurred

Error: Export encountered errors on following paths:

        /about

    at exportApp (/home/ubuntu/react-nodebird/front/node_modules/next/dist/export/index.js:25:1103)        

    at processTicksAndRejections (internal/process/task_queues.js:95:5)

    at async build (/home/ubuntu/react-nodebird/front/node_modules/next/dist/build/index.js:39:69)

[    ] info  - Generating static pages (0/2)npm ERR! code ELIFECYCLE

npm ERR! errno 1

npm ERR! react-nodebird-front@1.0.0 build: cross-env ANALYZE=true NODE_ENV=production next build

npm ERR! Exit status 1

npm ERR!

npm ERR! Failed at the react-nodebird-front@1.0.0 build 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/ubuntu/.npm/_logs/2022-11-25T14_45_34_539Z-debug.log

pages/about.js

import React from 'react';
import { useSelector } from 'react-redux';
import Head from 'next/head';
import { END } from 'redux-saga';

import { Avatar, Card } from 'antd';
import AppLayout from '../components/AppLayout';
import wrapper from '../store/configureStore';
import { LOAD_USER_REQUEST } from '../reducers/user';

const About = () => {
const { userInfo } = useSelector((state) => state.user);

return (
    <AppLayout>
    <Head>
        <title>ZeroCho | NodeBird</title>
    </Head>
    {userInfo
        ? (
        <Card
            actions={[
            <div key="twit">
                게시글
                <br />
                {userInfo.Posts}
            </div>,
            <div key="following">
                팔로잉
                <br />
                {userInfo.Followings}
            </div>,
            <div key="follower">
                팔로워
                <br />
                {userInfo.Followers}
            </div>,
            ]}
        >
            <Card.Meta
            avatar={<Avatar>{userInfo.nickname[0]}</Avatar>}
            title={userInfo.nickname}
            description="노드버드 매니아"
            />
        </Card>
        )
        : null}
    </AppLayout>
);
};

export const getStaticProps = wrapper.getStaticProps(async (context) => {
console.log('getStaticProps');
context.store.dispatch({
    type: LOAD_USER_REQUEST,
    data: 1,
});
context.store.dispatch(END);
await context.store.sagaTask.toPromise();
});

export default About;

혹시 여기 ServerSide로 바꿔야 하나요??

0

백엔드 서버를 안 켜신 건데요. 백엔드 서버가 같은 인스턴스에 들어있는건가요? 아니면 백엔드 서버 ip를 적으셔야 합니다. localhost:3065 대신에요. 백엔드가 켜져있어야 프론트 빌드가 가능합니다.