이메일링 서비스 구현을 위해서 

nodemailer 와 mailgun 을 알게 되었다.

nodemailer는

"Nodemailer is a module for Node.js applications to allow easy as cake email sending. "

Nodemailer는 케이크처럼 쉽게 이메일을 보낼 수 있도록 하는 Node.js 애플리케이션용 모듈입니다

https://nodemailer.com/about/

mailgun

이메일전송 서비스 제공해주는 사이트

https://www.mailgun.com/

In short, SMTP is an open and established protocol with large ecosystem, while Mailgun API is better long term performance and maintenance wise.

요컨대, SMTP는 대규모 에코시스템을 갖춘 개방적이고 확립된 프로토콜인 반면 Mailgun API는 장기적 성능과 유지 관리 측면에서 더 좋습니다.

SMTP란? (Simple Mail Transfer Protocol)

전자 메일 전송을 위한 표준 프로토콜이다. 

이메일을 송수신하는 서버가 SMTP서버라고 한다.

nodemailer가 SMTP를 사용한다. 그리고 mailgun에서도 smtp를 사용할 수 있다고 한다.

https://next-auth.js.org/providers/email

nextauth 자체 기능을 사용해서 진행했다

signin 시에 provider에서 해당 email있는지 확인하는 로직으로 넘어간다

혼자서 따로 구현해봐야겠다...

undefined 뜸~

graphql문제~

const Test1 = () => {

  const [tableNumber, setTableNumber] = useState('')


const CHECKTXID = gql`쿼리함수~~~`

const [
    FindTX,
    { loading: loadingCheckTxid, error: errorCheckTxid, data: dataCheckTxid },
  ] = useLazyQuery(CHECKTXID, {
    variables: {
      where: {
        //테이블번호
        id: Number(tableNumber),
      },
    },
  })



  console.log(tableNumber)
  return (
    <Layout title="Grid">
      <Row>
        <Col breakPoint={{ xs: 12 }}>
          <Card>
          
            <CardBody>
          
       
              <div>
                <Input fullWidth size="Small">
                  <input
                    type="text"
                    placeholder="tx테이블번호"
                    onChange={(e) => setTableNumber(e.target.value)}
              
                  />
               
                  <Button onClick={() => CheckTxid()}>출금txid요청</Button>
                </Input>
              </div>
            </CardBody>
          </Card>
        </Col>
      </Row>
    </Layout>
  )
}
export default Test1

쿼리 에러 뜬 이유!!!

input 

type을 text로 잡아놔서 string이 들어가는데

쿼리에도 string으로 id가 잡혀서 였음

type을 number로 바꾸거나 ->>>  안됨..

위처럼 id를 number로 감싸야한다.

Unhandled Runtime Error

Error: Objects are not valid as a React child (found: object with keys {findFirstTransaction}). If you meant to render a collection of children, use an array instead.

const check = () =>{

const { loading, error, data } = useQuery(CHECK_WITHDRAW, {
    variables: {
    
    },
  })


return (
<>{data}</>
)



}

data가 객체여서 뜨는 에러!!!

JSON.stringfy(data, undefined, 2)

하면 잘뜨는거 확인할 수 있음!

usequery는 렌더될 때 바로 실행돼서

버튼 할때만 하는 useLazyquery로 수정해야겠다...

둘의 차이는 자꾸 까먹으니까 정리해라 네네~

https://velog.io/@leehyunho2001/React-Query%EC%97%90%EC%84%9C-%EB%B2%84%ED%8A%BC-%ED%81%B4%EB%A6%AD%EC%8B%9C%EC%97%90-%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%A5%BC-%EC%9A%94%EC%B2%AD%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95-feat.-useQuery

yarn build시 에러

 Build optimization failed: found page without a React Component as default export in
pages/types

error Command failed with exit code 1.

페이지마다 export default ,

default를 기본으로 하는애가 있어야한다고 이해해서 

페이지 types에 없어서 그런가 해봤는데 해결안됨

오히려 타입안에 인터페이스에 default붙이니까 못읽음

찾아보다가 

구성 요소를 페이지 폴더 외부로 이동해야 합니다. Pages/는 Next.js 라우팅이 구조를 기반으로 하므로 페이지 구성 요소에만 사용해야 합니다.  

Next.js에는 페이지 개념을 기반으로 구축된 파일 시스템 기반 라우터가 있습니다. 

파일이 페이지 디렉토리에 추가되면 자동으로 경로로 사용할 수 있습니다. 

위의 동작이 기본 동작이지만 페이지 디렉토리에 페이지가 아닌 파일을 포함하도록 Next.js 앱을 구성할 수 있습니다. 

이렇게 하려면 아래와 같이 next.config.js 파일의 pageExtensions 항목을 수정하면 됩니다. 그런 다음 .page(_document.page.js, _app.page.js, index.page.js 등)를 포함하는 파일 확장자를 갖도록 페이지 구성 요소의 이름을 바꿉니다.

 module.exports = {

    pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js']

}

이 구성을 사용하면 Next.js는 페이지/API 경로 및 라우팅을 구축하기 위해 .page를 포함하지 않는 모든 파일을 무시합니다.

이거보고 next.config.js에서 페이지별 설정 넣어야한다는 공식문서보고 혹시 넣어봤는데 build되네 호..

잘 모르겠음 그리고 빌드를 하면 out에 서버페이지가 생기는 거 맞나? 

dev는 개발모드고

정확한 차이를 정리해봐야겠다.

이 공식문서 봄

https://nextjs.org/docs/api-reference/next.config.js/custom-page-extensions#including-non-page-files-in-the-pages-directory

next.config.js

파일에 이거 추가함

module.exports = {
  pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js'],
}

다시 원위치..

문제는 이거를 넣으면 

기존 경로

local:3000 이 404로 페이지를 찾을 수 없다고 뜨고 안열린다. 

원래대로 지워줘야 뜨네 흠.. 

아 문서를 읽어보니 

pageExtensions를 넣고 나서 

이름을 바꿔줘야되는구나 

이름 바꿔줌

해결됨

라고 생각했는데 안떠서 다시..

https://stackoverflow.com/questions/65598753/cant-build-react-next-project-found-page-without-a-react-component-as-default

server.js에서 db확인할게 있어서

npm start했는데

UnhandledPromiseRejectionWarning: Error: Could not find a production build in the 

이 에러 뜸

그래서 

npm run build

했는데 에러

 throw er; // Unhandled 'error' event
      ^

Error: EPERM: operation not permitted, open 경로
Emitted 'error' event on WriteStream instance at:

해결: 실행해놓은 npm run dev 취소하고 하니까 됨

이거 하기 전에 build해야되는거임

빌드 잘됨