티포의개발일지

Grid container 과 같은 mui에서 자체적으로 사용하는 props를 styled로 사용하는 방법은 다음과 같다.

이 방법만 알아도 왠만한 css는 정리가 가능할 것이다.

const GridContainer = styled((props) => <Grid container {...props} />) <any>`
    width: ${(props) => props.width || `100%`};
    height: ${(props) => props.height};
`

- 예시 전체 코드

import { Grid } from '@mui/material'
import { GetServerSideProps, NextPage } from 'next'
import { styled } from '@mui/material/styles'

const GridContainer = styled((props) => <Grid container {...props} />) <any>`
    width: ${(props) => props.width || `100%`};
    height: ${(props) => props.height};
`

const GridItem = styled((props) => <Grid item {...props} />) <any>`
    width: ${(props) => props.width || `100%`};
    height: ${(props) => props.height};
`

const Login: NextPage = () => {
    return (
        <>
            <GridContainer height={"300px"} >
            </GridContainer>
            <GridContainer height={"300px"} >
                <GridItem xs={12}>
                    <GridContainer
                        direction={"row"}
                    >
                        <GridItem xs={4}>
                            a
                        </GridItem>
                        <GridItem xs={4}>
                            b
                        </GridItem>
                        <GridItem xs={4}>
                            c
                        </GridItem>
                    </GridContainer>
                </GridItem>
            </GridContainer>
        </>
    )
}

export default Login;


export const getServerSideProps: GetServerSideProps = async (context) => {

    return {
        props: {
        },
    };
}

참고로 모듈로 styled 파일을 따로 빼둘 때에는 tsx 확장자로 해야한다.

.babelrc 에 { "runtime" : "automatic" } 추가

 - 전체코드 

{
    "presets": [
        "next/babel",
        [
            "@babel/preset-env",
            {
                "targets": {
                    "chrome": "91",
                    "firefox": "89"
                }
            }
        ],
        [
            "@babel/preset-react",
            {
                "runtime": "automatic"
            }
        ]
    ],
    "plugins": [
        "@emotion"
    ]
}

해당 에러는 vscode의 typescript와 로컬 typescript의 버전이 맞지 않아서 생긴다.

1. vscode의 settings.json 파일에 다음을 추가해준다.

작업 영역의 루트 폴더에서 해야한다. 경로 안의 프로젝트에 typescript를 설치했다면 경로를 인식하지 못한다.

또한 로컬 내에 타입스크립트의 버전과 vscode 타입스크립트의 버전을 꼭 확인해야한다.

{
	"typescript.tsdk": "node_modules/typescript/lib"
}

그 다음 vscode를 껐다 키고 f1을 누르면

이렇게 나오는데, 두 번째 작업 영역 버전을 사용하면 된다.

기존 js로 되어있던 프로젝트를 typescript로 변경해야 될 때가 있다.

1. 필요한 패키지 다운로드

$ npm i typescript ts-loader @types/node @types/react @types/react-dom @types/jest --dev

2. tsc 명령어 안먹힘

window로 작업하던 중 tsc 명령어가 안 먹히는 것을 보고 해결법을 찾았다. 아래와 같은 오류일 때 가능하다.

tsc : 'tsc' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 
 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오.

window 파워 셀을 관리자 권한으로 실행한 뒤 권한을 RemoteSigned로 바꿔준다.

3. tsconfig.json 파일 생성

tsc --init 명령어로 tsconfig.json 파일을 만든 뒤에 다음과 같이 작성한다. 옵션을 꼭 따라할 필요는 없다.

{
  "compileOnSave": true,
  "compilerOptions": {
    "target": "es2016",
    "jsx": "react-jsx",
    "module": "esnext",
    "sourceMap": true,
    "removeComments": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": false
  },
  "include": [
    "./src/*"
  ],
  "exclude": [
    "node_modules/*"
  ]
}

4. webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

기존 webpack 파일에 필요한 부분을 채워넣어준다.

혹시 기존에 babel 을 사용하고 있었다면 .babelrc 파일에 아래를 추가하고

"preset" : ["@babel/preset-typescript"]

webpack 파일에 다음을 추가해주자.

      {
        test: /\.(ts|js)x?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },

4. 컴파일

$ tsc

혹시 컴파일 시 결과를 터미널에서 알고 싶을 때는 tsconfig.json 폴더에서 noemit 부분을 false로 바꿔준다.

컴파일 하고 Cannot write file '경로' because it would overwrite input file.

이런 에러가 뜬다면

{
  "compilerOptions": {
    "outDir": "build",
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "build/**/*"]
}

outDir 폴더를 만들어주고, exclude 시켜준다.

tsc 명령어로 에러가 안뜬다면 webpack을 실행해준다.

$ npx webpack

참고로 tsc 다음에 파일 명을 쓴다면 tsconfig.json이 안먹힌다!

5. can only be default-imported using the 'esModuleInterop' flag

위와 같은 에러가 뜬다면 tsconfig.json 파일에 "esModuleInterop": true, 속성을 추가해주자.

기존 CommonJS 모듈을 ES6모듈 사양을 준수하여 가져올 수 있게 된다.

레거시 코드를 빌드하는데 에러가 떠버렸다.

누가 짰는진 모르겠지만 이 코드는 답이 없었다...

일단 오늘 빌드를 무조건 해야하는 상황이라 확실한 방법은 나중에 찾아봐야겠다.

다음 주부터 처음부터 다시 만들어야겠다.

module.exports = {
    webpack: (config, { isServer }) => {
        if (!isServer) {
             config.resolve.fallback.fs = false
             config.resolve.fallback.dns = false
             config.resolve.fallback.net = false
        }

        return config;
    }
}

React에서는 줄바꿈을 허용하지 않는다. 때문에 매핑하고 <br /> 태그를 임의로 주어서 줄바꿈을 표기해주자.

<Wrap ai={`start`} margin={`25px 0 0 0`}>
                {state.post_content.split("\n").map((line: any) => { //this.props.data.content: 내용
                  return (
                    <span>
                      {line}
                      <br />
                    </span>
                  );
                })}
              </Wrap>

// 스크롤이 50px 이상 내려올경우 true값을 넣어줄 useState
const [scroll, setScroll] = useState(false);

useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll); //clean up
    };
  }, []);

const handleScroll = () => {
	console.log("window.scrollY : ", window.scrollY)
  };

기준점을 잡고 현재 상태에서 올라갔는지 내려갔는지를 보려면 state가 아닌 일반 변수를 써야한다.

var scroll = 0;
    useEffect(() => {
        window.addEventListener('scroll', () => {
            // 검색등을 한 뒤 스크롤이 맨 위일 때는 임의로 컴포넌트를 보여주게 함.
            if (window.scrollY === 0) {
                dispatch({ name: "scrollUp", value: true })
            }
            // 스크롤이 맨 마지막에 도달했을 때
            else {
                if (Math.round(document.documentElement.scrollTop + window.innerHeight) - document.body.scrollHeight > -10) {
                    dispatch({ name: "scrollUp", value: false });
                }
                else if ((window.scrollY) < 10) {
                    dispatch({ name: "scrollUp", value: true });
                }
                else {
                    if (scroll < window.scrollY) {
                        dispatch({ name: "scrollUp", value: false });
                    }
                    else {
                        dispatch({ name: "scrollUp", value: true });
                    }
                }
            }

            scroll = window.scrollY;
        });
    }, []);

const beforeMinute = (date: any) => {
    const today = new Date();
    const timeValue = new Date(date);

    const betweenTime = Math.floor((today.getTime() - timeValue.getTime()) / 1000 / 60);
    if (betweenTime < 1) return '방금전';
    if (betweenTime < 60) {
        return `${betweenTime}분전`;
    }

    const betweenTimeHour = Math.floor(betweenTime / 60);
    if (betweenTimeHour < 24) {
        return `${betweenTimeHour}시간전`;
    }

    const betweenTimeDay = Math.floor(betweenTime / 60 / 24);
    if (betweenTimeDay < 365) {
        return `${betweenTimeDay}일전`;
    }

    return date;
}

const stringEllipsis = (str: string) => {
    let length = 30; // 표시할 글자수 기준
    if (str.length > length) {
        str = str.substring(0, length - 2) + '...';
    }
    return str;
}

1. 네이버 디벨로퍼 로그인

https://developers.naver.com/main/

2. 애플리케이션 등록

3. 환경 추가

개발 환경에서 실행해볼 것이기 때문에 일단은 localhost로 설정해둔다.

다 하고 애플리케이션을 확인하면 아래와 같은 화면을 볼 수 있다.

4._app.tsx 파일에  script 추가

const MyApp: NextPage<AppProps> = ({ Component, pageProps }: AppProps) => {


  return (
    <React.StrictMode>
      <Head>
        <title></title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />

        <script src="https://developers.kakao.com/sdk/js/kakao.js"
          defer
        >
        </script>
        
        <script src="https://static.nid.naver.com/js/naveridlogin_js_sdk_2.0.2.js"></script>


      </Head >
      <ThemeProvider theme={Theme}>
          <Component {...pageProps} />
      </ThemeProvider>


    </React.StrictMode>
  );
};

5. Component 구현 ( 전체 코드 )

import { GetServerSideProps, NextPage } from "next";
import { useRouter } from "next/router";
import { useEffect, useReducer, useState } from "react";

const Community: NextPage<any> = (props: any) => {
    const router = useRouter();

    const stateInit = {
        email: ""
    };

    const [state, dispatch] = useReducer(reducer, stateInit);

    function reducer(state: any, action: any) {
        switch (action.type) {
            case "init":
                return stateInit;
            default:
                return {
                    ...state,
                    [action.name]: action.value
                }
        }
    }



    useEffect(() => {
        const naver = (window as any).naver;
        let naverLogin: any;

        const login = () => {
            naverLogin = new naver.LoginWithNaverId({
                clientId: 'ClientID', // ClientID
                callbackUrl: 'Callback URL', // Callback URL
                isPopup: false, // 팝업 형태로 인증 여부
                loginButton: {
                    color: 'green', // 색상
                    type: 3, // 버튼 크기
                    height: '60' // 버튼 높이
                }, // 로그인 버튼 설정
            })

            naverLogin.init();
        }

        const getToken = () => {
            const hash = router.asPath.split('#')[1]; // 네이버 로그인을 통해 전달받은 hash 값
            if (hash) {
                const token = hash.split('=')[1].split('&')[0]; // token값 확인
                naverLogin.getLoginStatus((status: any) => {
                    if (status) { // 로그인 상태 값이 있을 경우
                        console.log(naverLogin.user.email); // 사용자 정보 조회

                        // if (!naverLogin.user.getAge()) { // 나이정보 제공을 동의하지 않았을 경우
                        //     alert('나이 정보는 필수입니다.');
                        //     naverLogin.reprompt(); // 정보제공창 다시 보여주기

                        //     return;
                        // }
                        dispatch({ name: "email", value: naverLogin.user.email })
                        // /community 페이지로 token값과 함께 전달 (서비스할 땐 token 전달을 하지 않고 상태 관리를 사용하는 것이 바람직할 것으로 보임)
                        router.push({
                            pathname: '/community',
                            query: {
                                token: token,
                            }
                        })
                    }
                });
            }
        }

        login();
        getToken();
    }, [])


    const kakaoInit = () => {
        const kakao = (window as any).Kakao;
        if (!kakao.isInitialized()) {
            kakao.init(process.env.NEXT_PUBLIC_KAKAO_SHARE_KEY);
        }

        return kakao;
    }

    const kakaoLogin = async () => {
        // 카카오 초기화
        const kakao = kakaoInit();

        // 카카오 로그인 구현
        kakao.Auth.login({
            success: () => {
                kakao.API.request({
                    url: '/v2/user/me', // 사용자 정보 가져오기
                    success: (res: any) => {
                        // 로그인 성공할 경우 정보 확인 후 /kakao 페이지로 push
                        console.log(res.kakao_account);
                        if (!res.kakao_account.email || res.kakao_account.email === "") {
                            alert("해당 계정의 이메일이 존재하지 않습니다.")
                        }
                        else {
                            dispatch({ name: "email", value: res.kakao_account.email })
                        }

                        // router.push('/kakao');
                    },
                    fail: (error: any) => {
                        console.log(error);
                    }
                })
            },
            fail: (error: any) => {
                console.log(error);
            }
        })
    }

    console.log("state : ", state)

    return (
        <>
            <button onClick={(e: any) => { kakaoLogin(); }}>
                카톡으로 로그인
            </button>
            <button id={`naverIdLogin`}>
                네이버 로그인
            </button>
        </>
    )
}

export default Community;

export const getServerSideProps: GetServerSideProps = async (context) => {
    return {
        props: {

        }
    }
}

네이버 로그인은 카카오톡과는 다르게 로그인이 성공하면 redirect 되면서 url에 파라미터가 넘어가는 형식으로 되어있다.

이 점을 유의하자.