문제상황

1. next-auth를 사용하여 구현한 소셜로그인이 로드벨런싱이 적용된 AWS 환경에서 리다이렉트 처리가 되지 않는 문제 발생
2. 프론트단에서 소셜로그인에 따라 (인가코드 발급 -> 로그인 토큰 요청 -> 사용자 정보 요청) 방식으로 SSR을 사용하여 리다이렉트 페이지 구현

SSR 인가코드 발급 -> 로그인 토큰 요청 -> 사용자 프로필 조회 -> 유틸 함수로 분기처리 및 props 리턴 -> /auth/(google,naver,kakao).tsx 파일에서 SSR로 리턴되는 props 사용 -> 유틸 함수 실행 -> 홈 리다이렉트

1. 인가코드 발급 로그인창 요청 -> 소셜 로그인

// 요청 URL의 상세 파라미터값은 공식문서를 참고해보길 바란다.

// 구글로그인 요청 URL은 https://accounts.google.com/o/oauth2/v2/auth 이다.  
const googleAuthURL = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID}&redirect_uri=${process.env.NEXT_PUBLIC_REDIRECT_URL}/google&response_type=code&scope=https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile`;
window.location.href = googleAuthURL;

// 네이버로그인 요청 URL은 https://nid.naver.com/oauth2.0/authorize 이다.
const naverAuthURL = `https://nid.naver.com/oauth2.0/authorize?response_type=code&client_id=${process.env.NEXT_PUBLIC_NAVER_CLIENT_ID}&redirect_uri=${process.env.NEXT_PUBLIC_REDIRECT_URL}/naver&state=1234`;
window.location.href = naverAuthURL;

// 카카오 로그인 요청 URL은 https://kauth.kakao.com/oauth/authorize 이다.
const kakaoAuthURL = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${process.env.NEXT_PUBLIC_KAKAO_CLIENT_ID}&redirect_uri=${process.env.NEXT_PUBLIC_REDIRECT_URL}/kakao`;
window.location.href = kakaoAuthURL;

2.로그인 완료 -> SSR 로그인 엑세스 토큰 요청 -> 사용자 정보 조회

• 리다이렉트 URL 경로 -> pages/auth/(google,naver,kakao).tsx a. 구글: http://localhost:3000/auth/google b. 네이버: http://localhost:3000/auth/naver c. 카카오: http://localhost:3000/auth/kakao

const getServerSideProps = ({ query }) => {
  // query 값
  {
    code: 'testestestestestest', // 발급받은 인가코드
    scope: 'email profile' // 범위,
    authuser: '0',
    prompt: 'none'
  }

  // 로그인 엑세스 토큰 요청
  const getLoginToken = await axios({
    method: 'POST',
    url: 'https://oauth2.googleapis.com/token',
    data: {
      grant_type: 'authorization_code', // 인증 구분 값
      client_id: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID, // 개발자센터에서 발급받은 클라이언트 아이디
      client_secret: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_SECRET, // 개발자센터에서 발급받은 CLIENT_SECRET
      redirect_uri: `${process.env.NEXT_PUBLIC_REDIRECT_URL}/google`, // 리다이렉트 URL 프론트 지정
      code: query.code, // 발급받은 인가코드 넣어주기
    },
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded', // 필수 값
    },
  });

  // 소셜 사용자 정보 조회
  const getProfile = await axios({
    method: 'GET',
    url: 'https://www.googleapis.com/oauth2/v3/userinfo',
    params: {
      access_token: getLoginToken.data.access_token,
    },
  });
}

3.유틸 함수 분기처리 및 SSR 프롭스 리턴

// 이 함수 또한 getServerSideProps에 포함되어 있다.
// 프로파일이 있을경우로 분기를 나누었다.
    if (getProfile) {
      return await socialLogin('GOOGLE', getLoginToken.data, getProfile.data);
    } else {
      return loginRedirect('프로필 정보를 가져오지 못했습니다. 로그인페이지로 이동합니다.');
    }

// 첫 번째 인자인 _provider 인자로 소셜 타입을 확인하여 이메일을 필터링한다.
// 두 번째 인자인 _tokenInfo 객체의 속성값인 access_token를 리턴해준다.
export const socialLogin = (_provider: string, _tokenInfo: any, _profileInfo: any) => {
  const filterSocialEmail =
    _provider === 'NAVER'
      ? _profileInfo.response.email
      : _provider === 'KAKAO'
      ? _profileInfo.kakao_account.email
      : _provider === 'GOOGLE' || _provider === 'FACEBOOK'
      ? _profileInfo.email
      : '';
  return {
    props: {
      userEmail: filterSocialEmail, // 소셜 타입에 따른 이메일
      access_token: _tokenInfo.access_token, // 로그인 엑세스 토큰
    },
  };
};

4./auth/(google,naver,kakao).tsx 파일 -> SSR 프롭스 사용 -> 리다이렉트 함수 실행

// SSR을 제외한 리다이렉트 컴포넌트의 코드이다.
const GoogleRedirectPage: NextPage = ({ userEmail, access_token }) => {
  useSocialLoginRedirect('google', userEmail, access_token);
  return <></>;
};

export default GoogleRedirectPage;

// useSocialLoginRedirect === 여러 컴포넌트에서 사용 가능하게 리액트 훅으로 사용하였다.
// useRouter를 함수의 인자로 넘겨주는 이유는 SSR 구성이라 useRouter를 ts 스크립트단에서는 사용하지 못하기 때문이다.
const useSocialLoginRedirect = (_provider: string, _userEmail: string, _access_token: string) => {
  const router = useRouter();

  useEffect(() => {
    if (_provider !== undefined && _userEmail !== undefined && _access_token !== undefined) {
      homeRedirect(router, _provider, _access_token);
    }
  }, [_provider, _userEmail, _access_token]);

  return <></>;
};

export default useSocialLoginRedirect;

// 해당 함수가 ts 파일에 있기 때문에 useRouter를 인자로 받아온다.
export const homeRedirect = (_router: NextRouter, _provider: string, _access_token: string) => {

  // 엑세스토큰 여부에 따라 router.replace로 홈 리다이렉트
  if (_access_token !== '') {
    const expires = dayjs().add(30, 'days').toDate();
    setCookie('provider', _provider, { expires, path: '/' }); // 유효기간 설정 소셜 타입 저장
    setCookie('sns_access_token', _access_token, { expires, path: '/' }); // 유효기간 설정 토큰 저장
    _router.replace('/'); 
  } else {
    console.log('소셜로그인 실패');
  }
};

요약 정리

• 예시는 모두 구글로 되어 있지만 방식에는 차이가 없기 때문에 소셜 타입만 바꿔주면 된다.

1. 로그인 창 요청 -> 인가코드 발급
2. 각 소셜로그인 개발자 센터에 등록된 리다이렉트 URL로 이동 ( /pages/auth/( google,naver,kakao ) )
3. SSR로 인가코드 받아와 로그인 토큰, 사용자 프로필 조회
4. 리다이렉트 유틸 함수 리턴 -> 엑세스 토큰 여부에 따라 홈 또는 로그인 페이지로 이동

1. 네이버 개발자센터 애플리케이션 등록
2. 인가 코드 발급
3. 로그인 토큰 발급
4. 사용자 정보 가져오기

1. 네이버 개발자센터 애플리케이션 등록

• 네이버 API 가이드가 워낙 쉽게 되어있어서 개발자센터만 들어가도 수월하게 구현 할 수 있다.

2. 인가코드 발급

• 네이버 로그인창 요청 URL은 https://nid.naver.com/oauth2.0/authorize 이다.

  // 샘플
  https://nid.naver.com/oauth2.0/authorize
  ?response_type=code
  &client_id=CLIENT_ID
  &state=STATE_STRING
  &redirect_uri=CALLBACK_URL
  

// 실제 요청 URL https://nid.naver.com/oauth2.0/authorize ?response_type=code &client_id=${process.env.NEXT_PUBLIC_NAVER_CLIENT_ID} &redirect_uri=${process.env.NEXT_PUBLIC_REDIRECT_URL}/naver &state=1234

// 응답 성공 시 출력 정보 // code: 인가권한코드, state: URL에 추가한 state 값 code: '', state: '1234'

<br/>

**네이버 로그인창 호출 필수 파라미터**
- client_id: 네이버 개발자센터에서 생성한 클라이언트 아이디
- redirect_uri: 네이버 개발자센터에서 설정한 리다이렉트 URL 이다. 내 프로젝트의 경우 http://localhost:3000/auth/naver로 설정하였다.
- response_type: 'code'로 고정이다. (인증과정에 대한 내부 구분값)
- state: 사이트 간 요청 위조(cross-site request forgery) 공격을 방지하기 위해 애플리케이션에서 생성한 상태 토큰값으로 URL 인코딩을 적용한 값을 사용을 위해 사용하지만 지금은 생략하겠다.
<br />


### **3. 로그인토큰 요청**
- 로그인 토큰 요청 URL은 https://nid.naver.com/oauth2.0/token 이다.

```typescript
// 샘플
https://nid.naver.com/oauth2.0/token
?grant_type=authorization_code
&client_id=jyvqXeaVOVmV
&client_secret=527300A0_COq1_XV33cf
&code=EIc5bFrl4RibFls1
&state=9kgsGTfH4j7IyAkg

// 실제 요청 URL
https://nid.naver.com/oauth2.0/token
?grant_type='authorization_code'
&client_id=process.env.NEXT_PUBLIC_NAVER_CLIENT_ID
&client_secret=process.env.NEXT_PUBLIC_NAVER_CLIENT_SECRET
&code=query.code
&state=query.state

// 응답 성공 시 출력 정보
access_token: ''  // 로그인 액세스 토큰
refresh_token: '', // 리프레쉬 토큰 갱신
token_type: 'bearer', // bearer 고정
expires_in: '3600' // 유효기간

네이버 로그인 토큰 발급 필수 파라미터

• client_id: 네이버 개발자센터에서 생성한 클라이언트 아이디
• client_secret: 네이버 개발자센터에 생성된 client_secret
• grant_type: 인증과정에 대한 구분값으로 발급에 해당하는 'authorization_code'로 요청
• code: 인가코드 -> SSR로 받은 query값 사용 (query.code)
• state: SSR로 받은 query값 사용 (query.state)
  

4. 사용자 정보 조회

• 네이버 사용자 정보 요청 URL은 https://openapi.naver.com/v1/nid/me 이다.
• 더 자세한 출력 정보는 [네이버 API 가이드](https://developers.naver.com/docs/login/devguide/devguide.md#2-2-1-%EC%86%8C%EC%85%9C-%EB%A1%9C%EA%B7%B8%EC%9D%B8) 여기서 확인 할 수 있다.

// 샘플
curl  -XGET "https://openapi.naver.com/v1/nid/me"
      -H "Authorization: Bearer AAAAPIuf0L+qfDkMABQ3IJ8heq2mlw71D"

// 실제 요청 URL
    url: 'https://openapi.naver.com/v1/nid/me',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        Authorization: 'Bearer ' + getLoginToken.data.access_token,
      }

// 응답 성공 시 출력 정보
  resultcode: '00', // API 호출 결과 코드
  message: 'success', // 호출 결과 메시지
  response: {
    id: '', // 동일인 식별 정보 고유 ID 값
    nickname: '달수박', // 닉네임
    gender: 'M', // 성별
    email: '', // 이메일
    name: '' // 이름
  }

구글로그인 구현 순서

1. 인가코드 발급
2. 로그인토큰 발급
3. 사용자 정보 받기

1. 인가코드 발급

• 해당 코드는 구글 로그인창을 띄우는 코드이며 구글 로그인 버튼을 클릭했을 때 실행되게끔 작업하였다. client_id와 같은 개인정보는 next.config로 환경변수 처리하였다.

  https://accounts.google.com/o/oauth2/v2/auth
  ?client_id=${process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID}
  &redirect_uri=${process.env.NEXT_PUBLIC_REDIRECT_URL}
  &response_type=code
  &scope=email profile

  
  

구글 로그인창 호출 필수 파라미터

• client_id: 구글 클라우드에서 생성한 클라이언트 아이디
• redirect_uri: 구글 클라우드에서 설정한 리다이렉트 URL 이다. 내 프로젝트의 경우 http://localhost:3000/auth/google로 설정하였다.
• response_type: 'code'로 고정이다.
• scope: 토큰 발급 이후 유저 정보에서 어떤 항목을 조회할것인지 작성해준다. 내 프로젝트의 경우 email과 profile만 조회하였다.
  

2. SSR로 로그인토큰,프로필 조회

사용자가 페이지 진입전 서버단에서 먼저 처리하기 위한 SSR

export const getServerSideProps = async ({ query }) => {

  // GOOGLE 토큰 정보 조회
  const getTokenInfo = await axios({
    method: 'POST',
    url: 'https://oauth2.googleapis.com/token',
    data: {
      grant_type: 'authorization_code',
      client_id: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID,
      client_secret: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_SECRET,
      redirect_uri: `${process.env.NEXT_PUBLIC_REDIRECT_URL}/google`,
      code: query.code,
      access_type: 'offline',
      prompt: 'consent',
    },
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
  });
}

// 응답 성공 시 출력 정보
{
    access_token: 'asdfasdfasdfasdf'
    expires_in: '30230'
    scope: 'asdfasdf'
    token_type: 'Bearer'
    id_token: 'asdfasdf'
}

구글 토큰 정보 조회 request

• grant_type: 'authorization_code' 고정
• client_id: 구글 클라우드에서 생성한 클라이언트 아이디
• client_secret: 구글 클라우드에서 생성한 보안비밀번호
• redirect_uri: 구글 클라우드에서 설정한 리다이렉트 URL
• code: 구글로그인후 받아온 쿼리의 인가코드
  

// GOOGLE 프로필 정보 조회
const getProfile = await axios({
      method: 'GET',
      url: 'https://www.googleapis.com/oauth2/v3/userinfo',
      params: {
        access_token: getLoginToken.data.access_token,
      },
    });

// 응답 성공 시 출력 정보
{
  sub: '1354315',
  name: 'asd',
  given_name: 'asd',
  family_name: 'asd',
  picture: 'https://lh3.googleusercontent.com/a/ACg8ocLcWGDZOGv560HyQIOatWSlqKZ4KA552xISUHACPpvIXsVrhQ=s96-c',
  email: 'eksh2@gmail.com',
  email_verified: true
}

1. google cloud 프로젝트 생성

• 구글 클라우드 페이지 접속 -> 오른쪽 상단 콘솔 클릭 -> API 및 서비스 클릭

• 프로젝트 생성

2. OAuth 동의 설정

• 왼쪽 네비게이션에서 OAuth 설정 클릭 -> 외부 선택

• 상단의 앱 정보와 하단의 개발자 정보 입력 -> 저장 후 계속

• 범위 선택 -> 상단의 3개 체크 후 저장 -> 저장 후 계속

• 내가 테스트에 사용할 계정 입력 -> 저장 후 계속 -> 완료

3. OAuth 클라이언트 ID

• 왼쪽 네비게이션 사용자인증정보 -> Oauth 클라이언트 ID 생성

• 필수 정보 및 URL 추가 -> 첫 번째 URL은 로컬 주소 입력 -> 리디렉션 URL은 구글 로그인후 리다이렉트 될 URL 입력

4. 대시보드를 확인해보면 클라이언트 ID 가 생성 되었을것이다.

Next.js + styled-components

• 평소에 emotion을 즐겨 사용하지만 Next.js ver14는 아직 서버컴포넌트에서의 emotion이 제대로 동작하지 않는다는 이슈가 있어 styled-components를 사용하였다.
• yarn add styled-components

styled-components 설정

• styleRegistry.tsx 파일을 생성한다. useServerInsertedHTML로 웹 구조를 읽어들일 때 head 태그에 style을 넣어주는 작업을 진행한다.

// 경로: /public/styles/styleRegistry.tsx_

'use client';
import React, { useState } from 'react';
import { useServerInsertedHTML } from 'next/navigation';
import { ServerStyleSheet, StyleSheetManager } from 'styled-components';

export default function StyledComponentsRegistry({ children }: { children: React.ReactNode }) {
  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());

  useServerInsertedHTML(() => {
    const styles = styledComponentsStyleSheet.getStyleElement();
    styledComponentsStyleSheet.instance.clearTag();
    return <>{styles}</>;
  });

  if (typeof window !== 'undefined') return <>{children}</>;

  return <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>{children}</StyleSheetManager>;
}

• 전역스타일 설정을 위해 GlobalStyle.tsx 파일을 생성해주고 'use client'를 꼭 명시해준다. reset 설정은 커스텀해서 작성해도 되지만 귀찮다면 styled-components에서 제공해주는 reset 모듈을 사용하여도 괜찮다.
• yarn add styled-reset

// 경로: /public/styles/GlobalStyle.tsx_

'use client';
import { createGlobalStyle } from 'styled-components';
import reset from 'styled-reset'; // reset 사용시

const GlobalStyles = createGlobalStyle`
${reset} // reset 사용시
`;

export default GlobalStyles;

• 마지막으로, layout.tsx에 두 파일을 import하여 선언해주면 설정 완료!!

  import StyledComponentsRegistry from './page';
  import GlobalStyles from '../../public/styles/GlobalStyle';
  

export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} ); }

```

개선할점

• 아직 새로고침을 하거나 새로 렌더링 될 때 스타일이 적용이 안되어있는 상태로 나타나는데 SSR 렌더링에 대해 더 알아볼 필요가 있다. 작업을 진행해보고 이후 글을 수정 할 예정이다.

문제발생

회사에선 보고서를 생성하는 솔루션을 서비스중이었다. 어느날, PDF 출력이 안된다는 고객 문의가 있었다. 테스트를 해보니 보고서의 양이 많으면 PDF 출력이 안되었다.

해결과정

• 기존 toPng 사용 후 PDF 출력 -> toJpeg 사용 후 PDF 출력
• 기존 png 파일들을 모아 PDF 출력하다보니 용량이 크고 시간을 초과하는 경우가 있었다. jpeg로 변환 후 출력해보니 문제가 해결되었다.
• png -> jpeg로 변경하며 PDF가 선명하지 않을것을 걱정했지만 선명하게 잘 보여 걱정을 덜었다.

  간단 요약

• 기존 png 변환 후 PDF 출력 이미지 38장 기준 1분7초 메모리 용량이 너무 커 pdf 저장 불가
• JPEG 로 변경 후 PDF 출력 이미지 38장 기준 50초 31.9MB 출력 가능

// 이미지 변환
const changeImg = async (_img: any) => {
  const canvas = await htmlToImage.toPng(_img,{}); // 기존
  const canvas = await htmlToImage.toJpeg(_img,{}); // 변경 후
  return canvas
};

// 변환된 이미지를 사용하여 PDF를 만드는 함수
const canvas = await converToImg();
const doc = new jsPDF({
  unit: 'px',
  orientation: 'p',
  format: 'a4',
});
doc.addImage(canvas, 'PNG', 0, 0, 길이, 높이); // 기존
doc.addImage(canvas, 'JPEG', 0, 0, 길이, 높이); // 변경 후

느낀점

• 처음에 이 문제를 맞닥뜨렸을때는 메모리 문제가 아닌가 하는 의견이 있었다. 해서 png로 변환한 이미지 파일이 메모리를 많이 잡아먹는게 아닌가 하는 생각이 들었고 jpeg로 변환 후 출력하여 문제를 해결했었다.
• 프론트단에서 항상 이슈가되는 이미지 최적화에 대해 이를 이용한 PDF 출력에 대해 더 공부해봐야겠다.

다음은 숫자의 일부 자릿수를 영단어로 바꾸는 예시입니다.

1478 → "one4seveneight" 234567 → "23four5six7" 10203 → "1zerotwozero3"

숫자에 대응하는 영단어

숫자 - 영단어 0 - zero 1 - one 2 - two 3 - three 4 - four 5 - five 6 - six 7 - seven 8 - eight 9 - nine

해답

• 이번 문제가 오래 걸렸던 이유는 문제 파악을 제대로 못했기 때문이다. 이 문제의 핵심은 문자에 대응되는 숫자로 바꿔주는것인데 나는 문자열 전체를 탐색해서 특정 문자를 찾는 방법을 생각했기 때문에 방향성부터 틀렸다고 볼 수 있다.
• 아래 코드를 보면 매우 간단하게 처리할수 있기 때문에 문제파악의 중요성을 느낄수 있는 문제였다.

function solution(s) {
    const arr = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine']
    arr.forEach((e,i) => {
        s = s.split(e).join(i)
    })
    return Number(s)
}

두 정수 left와 right가 매개변수로 주어집니다. left부터 right까지의 모든 수들 중에서, 약수의 개수가 짝수인 수는 더하고, 약수의 개수가 홀수인 수는 뺀 수를 return 하도록 solution 함수를 완성해주세요.

입출력 예

left - right - result 13 ~ 17 -> 43 24 ~ 27 -> 52

해답

• for문을 사용할때마다 몇번을 반복할지 고민하게 되는데 해당 문제에는
• 1 ≤ left ≤ right ≤ 1,000* 이라는 제한사항이 제시되어 있었기 때문에 입력 받는 left,right 값을 비교하여 while 문을 작성하였다.
• 처음엔 모든 약수를 더하는 코드를 짜게 되었는데 문제파악을 다시 하고나서 보니 각각의 left값에 따른 약수 개수에 따라 연산하는 문제였다.
• 첫번째 코드는 가장 좋아요를 많이 받은 풀이이다. 물론 해당 풀이를 보았지만 isInteger과 Math.sqrt에 대한 이해가 부족하여 사용하지는 않았다.
• 두번째 풀이를 보면 cnt의 값에따라 answer 변수의 값을 더하거나 빼주는 코드를 작성하였다. 이 풀이에서 눈여겨봐야할 점은 left++ 연산의 위치이다. 해당 연산이 윗줄에 있는지 아랫줄에 있는지에 따라 첫 left값을 포함하고 안하고를 결정하기 때문이다.
• 도중에 막혀서 풀이를 찾아보고 나름 내 풀이로 해석한 코드이다.

function solution(left, right) {
  var answer = 0;
  for (let i = left; i <= right; i++) {
    if (Number.isInteger(Math.sqrt(i))) {
      answer -= i;
    } else {
      answer += i;
    }
  }
  return answer;
}

function solution(left, right) {
    let answer = 0;

    while(left <= right) {
    let cnt = 0;
        for(let i = 0; i <= right; i++){
            if(left >= i) {
                if(left % i === 0) {
                    cnt++
                }
            }
        }
        answer = cnt % 2 === 0 ? answer + left : answer - left 
        left++
    }
    return answer
}

문자열 s는 한 개 이상의 단어로 구성되어 있습니다. 각 단어는 하나 이상의 공백문자로 구분되어 있습니다. 각 단어의 짝수번째 알파벳은 대문자로, 홀수번째 알파벳은 소문자로 바꾼 문자열을 리턴하는 함수, solution을 완성하세요.

입출력 예

input: "try hello world" output: "TrY HeLlO WoRlD"

해답

• 이중배열처럼 풀이해야 하는 문제는 항상 두개의 반복문을 사용하는 편이다.
• 이 문제의 핵심은 공백을 기준으로 단어를 나누는거라고 생각한다. 가장먼저 split() 가 생각났고 조건에 맞게 소문자 대문자를 구분해서 문자열을 추가해준뒤 첫번째 반복문이 끝날때 조건문을 설정하여 공백을 추가해주었다.
• 이후 리턴값에서는 다시 공백을 기준으로 정렬하고 join을 사용해 답을 내놓았다.

function solution(s) {
    let answer = '';
    s = s.split(' ')
    for(let i = 0; i < s.length; i++){
        for(let j = 0; j < s[i].length; j++){
            if( j === 0 || j % 2 === 0){
                answer += s[i][j].toUpperCase()
            }else {
                answer += s[i][j].toLowerCase()
            }
        }
        if(i < s.length - 1) {
            answer += '\n'
        }
    }
    return answer.split('\n').join(' ')
}

문자열 s에 나타나는 문자를 큰것부터 작은 순으로 정렬해 새로운 문자열을 리턴하는 함수, solution을 완성해주세요. s는 영문 대소문자로만 구성되어 있으며, 대문자는 소문자보다 작은 것으로 간주합니다.

입출력 예

input: "Zbcdefg"
output: "gfedcbZ"

해답

• sort() 함수의 경우 a,b 인자를 받는데 리턴하는 값이 0보다 작을 경우, a가 b보다 앞에 오도록 정렬하고,리턴하는 값이 0보다 클 경우, b가 a보다 앞에 오도록 정렬한다. 만약, 0을 리턴하면, a와 b의 순서를 변경하지 않는다.
• 내림차순이기 때문에 큰것이 앞에 와야한다.

function solution(s) {
    const res = [...s].sort((a,b) => a > b ? -1 : 1)
    return res.join('')
}

팰린드롬 확인 문제 팰린드롬이란 앞으로 읽을 때와 거꾸로 읽을 때 똑같은 단어를 말한다.

예제 입력 -> 출력

• 입력

  • level

• 출력

  • 1

풀이

• 문자열을 역순으로 바꾼뒤 입력값과 비교하는 방식으로 풀었다.
• 문자열을 역순으로 바꾸기 위해 split,reverse,join 을 사용하였다.
• reverse 메서드 사용을위해 split로 배열로 변환해준뒤 결과값은 join 사용하여 문자열로 출력되게 하였다.

// 통과한 코드
const input = require('fs').readFileSync('input.txt').toString().split('\n')

if(input[0].split('').reverse().join('') === input[0]){
    console.log('1')
}else {
    console.log('0')
}

두 양의 정수가 주어졌을 때, 첫 번째 수가 두 번째 수보다 큰지 구하는 프로그램을 작성하시오.

입력

두 수는 백만보다 작거나 같은 양의 정수이다. 입력의 마지막 줄에는 0이 두 개 주어진다.

출력

각 테스트 케이스마다, 첫 번째 수가 두 번째 수보다 크면 Yes를, 아니면 No를 한 줄에 하나씩 출력한다.

예제 입력 -> 출력

• 입력 1 19
  4 4
  23 14 0 0

• 출력 No No Yes

// 백준 플랫폼은 js 사용자한테는 너무 불친절한 느낌이다
// 기존 내 코드
const str = []
for(let i = 0; i < input.length; i++) {
    if(parseInt(input[i][0]) === 0 && parseInt(input[i][1]) === 0) {
        return
    }else if(parseInt(input[i][0]) > parseInt(input[i][1])){
        str.push('Yes')
    }else {
        str.push('No')
    }
}
console.log(str.join('\n'))

// 통과한 코드
for(let i = 0; i < input.length; i++) {
    if(parseInt(input[i][0]) === 0 && parseInt(input[i][1]) === 0) {
        return
    }else if(parseInt(input[i][0]) > parseInt(input[i][1])){
        console.log('Yes')
    }else {
        console.log('No')
    }
}

체스는 총 16개의 피스를 사용하며, 킹 1개, 퀸 1개, 룩 2개, 비숍 2개, 나이트 2개, 폰 8개로 구성되어 있다. 동혁이가 발견한 흰색 피스의 개수가 주어졌을 때, 몇 개를 더하거나 빼야 올바른 세트가 되는지 구하는 프로그램을 작성하시오.

입력

첫째 줄에 동혁이가 찾은 흰색 킹, 퀸, 룩, 비숍, 나이트, 폰의 개수가 주어진다. 이 값은 0보다 크거나 같고 10보다 작거나 같은 정수이다.

출력

첫째 줄에 입력에서 주어진 순서대로 몇 개의 피스를 더하거나 빼야 되는지를 출력한다. 만약 수가 양수라면 동혁이는 그 개수 만큼 피스를 더해야 하는 것이고, 음수라면 제거해야 하는 것이다.

예제

0 1 2 2 2 7 -> 1 0 0 0 0 1 2 1 2 1 2 1 -> -1 0 0 1 0 7

const input = require('fs').readFileSync('dev/stdin').toString().split(' ').map(num => parseInt(num))

const arr = [1,1,2,2,2,8]
const ar = []

for(let i = 0; i < arr.length; i++){
    if((input[i] - arr[i]) < 0){
        ar.push(Math.abs(input[i] - arr[i]))
    }
    else if((input[i] - arr[i]) > 0) {
        ar.push(-(input[i] - arr[i]))
    } 
    else if(input[i] === arr[i]) {
        ar.push(0)
    }
}
console.log(ar.join(' '))

트리구조에 대한 클래스 다이어그램, 유즈케이스 작성 기회가 있어 공부했던 내용을 정리해 보았다.

클래스다이어그램

1. 목적

   • 의사소통 또는 설계 논의를 위해
   • 전체 시스템의 구조 및 클래스의 의존성 파악을 위해
   • 유지보수를 위한 설계의 back-end 문서 제작을 위해

2. UML(Unified Modeling Language) 이란?

   • 시스템을 모델로 표현해주는 대표적인 모델링 언어

3. UML 클래스의 표현

   UML클래스다이어그램

   • 3-1) 가장 윗부분: 클래스 이름
   • 3-2) 중간 부분: 속성(클래스의 특징)
   • 3-3) 마지막 부분: 연산(클래스가 수행하는 책임)

   

4. 클래스 다이어그램 표현

• 접근제어자

  • (+) == public :: 어떤 클래스의 객체에서도 접근 가능
  • (-) == private :: 이 클래스에서 생성된 객체들만 접근 가능
  • (#) == protected :: 이 클래스와 동일 패키지에 있거나 상속 관계에 있는 하위 클래스의 객체들만 접근 가능
  • (~) == package :: 동일 패키지에 있는 클래스의 객체들만 접근 가능
    

• 관계 표현

  • 의존관계 - 점선화살표 :: 한 객체가 다른 객체에 있는 기능을 사용할 때 나타냄, 두 클래스의 관계가 메서드를 실행 하는 동안과 같은 짧은 시간만 유지된다는 점
    • 연관관계 - 실선이나 화살표 :: 클래스들이 개념상 서로 연결 되어있음을 나타낸다. 보통은 한 클래스가 다른 클래스에서 제공하는 기능을 사용하는 상황일 때 표시한다. 단방향은 화살표로 양방향은 실선으로 표시된다.
  • 일반화관계 - 속이 빈 화살표 :: 객체지향 개념에서 상속관계라고 말합니다. 한 클래스가 다른 클래스를 포함하는 상위 개념일 때 이를 IS-A 관계라고 하며 UML에서는 일반화 관계로 모델링합니다.
    1. 부모클래스 :: 추상적인 개념이며, 삼각형 표시가 향하는 방향을 의미합니다.
    2. 자식클래스 :: 추상적인 개념을 물려받은 구체적인 개념입니다. 삼각형표시가 없는쪽이며 부모클래스는 자식클래스의 공통적인 속성과 연산을 제공하는 틀입니다.
  관계표현 이미지

  

유즈케이스

• 시스템이 제공해주는 서비스와 기능을 나타내며 사용자의 요구사항을 구조화 한 것

1. 유즈케이스 작성시 주의사항

   • 어떻게가 아니라 무엇을 시스템이 하는가를 담는 것

2. 유즈케이스 다이어그램

   • 구성

     • 유스케이스: 시스템 내에서 일련의 작업을 수행하기 위한 행위들을 나타냄
     • 액터
       • 프라이머리 액터 (Primary Actor) : 시스템을 사용하고, 직접 이득을 보는 액터이며 졸라맨으로 표기합니다. 보통 시스템의 왼쪽에 표시합니다.
       • 세컨더리 액터 (Secondary Actor) : 프라이머리 액터가 목적을 달성하기 위해 도움을 주는 액터이며 사각형 박스에 << actor >>를 입력하여 표기합니다. 보통 시스템의 오른쪽에 표시합니다.

   • 관계

     • 연관관계: 유스케이스와 액터 사이에 상호작용이 있다는 뜻으로, 실선으로 표시합니다.

       연관관계 예시

       

     • 포함관계: 두 개의 유스케이스 간의 의존성을 나타내며 하나의 유스케이스가 실행될 때 포함 관계에 있는 유스케이스가 반드시 실행되어야 함, 점선화살표를 사용하며 << include >> 를 중앙에 표시해야한다.

       포함관계 예시

       

     • 확장관계: 두 개의 유스케이스 간의 확장성을 나타내며 하나의 유스케이스가 실행될 때 확장관계에 있는 유스케이스가 특정 상황에서만 실행되어야 함, 점선화살표를 사용하며 << extend >>를 화살표 중앙에 표시해야한다.

       확장관계 예시

       

     • 일반화관계: 부모와 자식 유스케이스들 간의 상속관계를 나타내며 특정 유스케이스들이 하나의 특수화된 유스케이스라 한다, 자식 에서 부모 유스케이스 방향으로 실선 화살표를 사용한다.

       포함관계 예시

       

마무리

• 개발에 앞서 전체적인 흐름에 대해 먼저 생각해보게 되었다.
• 틀을 짜놓은 상태에서 코드를 작성한다는 점이 좋았다.

프로젝트를 진행하면서 반복되는 PR 요청에 Test 코드 작성이라는 불호령이 떨어졌다. Next.js + TS + jest + redux-toolkit + reactQuery 사용하는건 뭐 이리 많은지 머리 깨질듯이 아파오는 테스트 코드 작성을 시작한다.

라이브러리 설치

yarn add -D jest @testing-library/jest-dom @types/jest babel-jest jest-environment-jsdom ts-jest

• 설치해야 하는 라이브러리 개수부터 두통이 아려온다. jest가 나오기 전에는 더 복잡했다고 한다.

Next.js 설정

• 우리는 Next를 사용하기 때문에 따로 설정 해줘야 하는 것들이 있다. 물론, 12버전 이상부터 jest가 next에 내장되어있어 설정이 비교적 간단하다.

.babelrc

• 루트폴더에 생성해준다. Next에서 지원해주다 보니 설정이 매우 간편하다.

  {
  "presets": ["next/babel"],
  }

jest.config.js

• 루트폴더에 생성해준다. 공식문서에 나와있는 그대로이다. 차이점은 moduleNameMapper 이것인데 테스트 파일에서 컴포넌트나 필요한 유틸 파일을 import 할 때 ../처럼 상대경로로 타고 올라가는게 맘에 안들어서 최상위 루트로 설정 해 놓았다.

  const nextJest = require('next/jest');
  

const createJestConfig = nextJest({ dir: './', });

const customJestConfig = { setupFilesAfterEnv: ['/jest.setup.js', 'jest-plugin-context/setup'], moduleDirectories: ['node_modules', '/'], testEnvironment: 'jest-environment-jsdom', moduleNameMapper: { '^@components(.*)$': '/src/components$1', }, };

module.exports = createJestConfig(customJestConfig);

#### jest.setup.js
- 위 jest.config.js에 setup.js를 명시해두었기 때문에 루트폴더에 생성해주면된다.
```typescript
import '@testing-library/jest-dom'; // 요거 한줄이면 된다. 저장.

테스트를 위한 설정 사전작업이 끝났습니다. 다음 글에는 컴포넌트를 테스트 하는 코드를 작성해보겠습니다.

문자열 배열 intStrs와 정수 k, s, l가 주어집니다. intStrs의 원소는 숫자로 이루어져 있습니다. 배열 intStrs의 각 원소마다 s번 인덱스에서 시작하는 길이 l짜리 부분 문자열을 잘라내 정수로 변환합니다. 이때 변환한 정수값이 k보다 큰 값들을 담은 배열을 return 하는 solution 함수를 완성해 주세요.

입출력 예

intStrs - ["0123456789","9876543210","9999999999999"] k - 50000 s - 5 l - 5 result - [56789, 99999]

해답

function solution(intStrs, k, s, l) {
    var answer = [];
    for(let i = 0; i < intStrs.length; i++) {
        if(intStrs[i].slice(s, s+l) > k) {
                   answer.push(Number(intStrs[i].slice(s, s+l)))
        }
    }
    return answer
}

숫자로 이루어진 문자열 t와 p가 주어질 때, t에서 p와 길이가 같은 부분문자열 중에서, 이 부분문자열이 나타내는 수가 p가 나타내는 수보다 작거나 같은 것이 나오는 횟수를 return하는 함수 solution을 완성하세요.

입출력 예

p의 길이가 1이므로 t의 부분문자열은 "5", "0", 0", "2", "2", "0", "8", "3", "9", "8", "7", "8"이며 이중 7보다 작거나 같은 숫자는 "5", "0", "0", "2", "2", "0", "3", "7" 이렇게 8개가 있습니다.

해답

function solution(t, p) {
    const ar = []
    let cnt = 0;
    let len = p.length;

    for(let i = 0; i < t.length; i++){
       if(t.slice(i, len).length === p.length) ar.push(t.slice(i, len))
        len++
    }

    for(let j = 0; j < ar.length; j++){
        if(Number(ar[j]) <= Number(p)) cnt += 1
    }

    return cnt
}

임의의 양의 정수 n에 대해, n이 어떤 양의 정수 x의 제곱인지 아닌지 판단하려 합니다. n이 양의 정수 x의 제곱이라면 x+1의 제곱을 리턴하고, n이 양의 정수 x의 제곱이 아니라면 -1을 리턴하는 함수를 완성하세요.

입출력 예

• 입출력 예#1 121은 양의 정수 11의 제곱이므로, (11+1)를 제곱한 144를 리턴합니다.

• 입출력 예#2 3은 양의 정수의 제곱이 아니므로, -1을 리턴합니다.

해답

function solution(n) {
    const num = Math.sqrt(n)
    return Number.isInteger(num) ? (num+1)**2 : -1
}

프로그래머스 모바일은 개인정보 보호를 위해 고지서를 보낼 때 고객들의 전화번호의 일부를 가립니다. 전화번호가 문자열 phone_number로 주어졌을 때, 전화번호의 뒷 4자리를 제외한 나머지 숫자를 전부 *으로 가린 문자열을 리턴하는 함수, solution을 완성해주세요.

입출력 예

"01033334444"->"***4444"

해답

function solution(phone_number) {
    const str = phone_number.slice(0, phone_number.length - 4);
    const last = phone_number.slice(phone_number.length - 4, phone_number.length);
    const ar = []
    for(let i = 0; i < str.length; i++){
       ar.push(i)
    }
    return ar.fill('*', 0 , phone_number.length - 4).join('') + last
}