$ npm init -y

2. typescript 설치

npm i -D typescript

3. tsconfig.json 설정

• terminal

  touch tsconfig.json

• tsconfig.json

  {
  "include" : ["src"] // src 폴더의 모든 파일을 확인한다는 뜻.
  "compilerOptions": {
    "outDir": "build", // 자바스트립트 파일이 생성될 디렉터리를 지정.
    "rootDir": "./", // 루트경로 바꾸기 (js 파일 아웃풋 경로에 영향줌)
    "target": "ES6", // 어떤 버전의 자바스크립트로 컴파일 할 것인지.
    "lib": ["ES6", "DOM"], // 합쳐진 라이브러리에서 정의된 파일을 특정 => 자바스크립트 코드가 어디에 동작할 것인지 작성.
    "strict": true, // 엄격하게 검사.
    "noImplicitAny": true, // any 타입 금지
    "noImplicitThis": true, // any 타입인 this 키워드 금지
    "allowJs" : true, // js 파일들 ts에서 import해서 쓸 수 있는지 
    "checkJs": true, // js 파일에서도 에러체크 할 것인지
    "esModuleInterop": true, // ES6 모듈 사양을 준수하여 CommonJS 모듈을 가져올 수 있다.
    "module": "CommonJS", //무슨 import 문법 쓸건지 'commonjs', 'amd', 'es2015', 'esnext'
    "jsx": "preserve", // tsx 파일을 jsx로 어떻게 컴파일할 것인지 'preserve', 'react-native', 'react'
    "declaration": true, // 컴파일시 .d.ts 파일도 자동으로 함께생성 (현재쓰는 모든 타입이 정의된 파일)
    "outFile": "./", // 모든 ts파일을 js파일 하나로 컴파일해줌 (module이 none, amd, system일 때만 가능)
    "removeComments": true, // 컴파일시 주석제거 
    "noUnusedLocals": true, // 지역변수 전부 사용해야 함
    "noUnusedParameters": true, // 파라미터 전부 사용해야 함
    "noImplicitReturns": true, // 모든 함수에 return이 포함되어야 함 
  }
  }

• package.json

  "scripts": {
    "build" : "tsc",
    "start": "node build/index.js"
  }

  4. ts-node & nodemon 설치

  ts-node : 빌드 없이 타입스크립트를 실행 nodemon : 서버를 재실행하지 않고, 자동으로 커멘드를 실행

• terminal

  $ npm i -D ts-node
  $ npm i nodemon

• package.json

  "scripts": {
    "build": "tsc",
    "dev": "ts-node src/index.js",
    "start": "node build/index.js"
  }

5. 타입 정의

$ npm i -D @types/styled-components
$ npm i -D @types/react-router-dom

참고 링크

https://www.typescriptlang.org/tsconfig

terminal

npm init -y

npm i -D webpack webpack-cli webpack-dev-server@next

용어설명

• webpack-cli: command line interface를 지원해주는 패키지. 해당 패키지로 webpack 명령을 사용할 수 있게 됨.
• webpack-dev-server: 코드 수정을 즉각적으로 확인 할 수 있는 개발 서버를 열어주는 패키지

  package.json

  "scripts": {
   "dev": "webpack-dev-server --mode development",
   "build": "webpack --mode production"
  },

2. 플러그인 설치

terminal

npm i -D html-webpack-plugin copy-webpack-plugin

용어설명

• html-webpack-plugin: webpack 번들을 제공하는 HTML 파일 생성을 단순화한다.
• 'copy-webpack-plugin': 지정한 폴더 안의 내용을 build된 폴더 안으로 들어 갈 수 있게 설정하는 플러그인.

3. module

terminal

npm i -D css-loader style-loader

용어설명

css-loader: js에서 css를 해석하는데 도움을 줌. style-loader: 해석된 css파일을 html파일에 삽입시키는 역할.

main.js

import '../css/style.css

3. autoprefixer

terminal

npm i -D postcss autoprefixer postcss-loader

용어설명

• postcss: 스타일의 후처리를 도와준다.
• autoprefixer: 공급업체 접두사를 자동으로 붙여준다.
• postcss-loader: webpack에서 postcss를 동작시킨다.

package.json

  // 현재 프로젝트가 어떤 브라우저를 지원하는 지 명시
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]

.postcssrc.js

module.exports = {
    plugins: [
      require('autoprefixer')
    ]
};

4. babel

terminal

npm i -D @babel/core @bable/preset-env @bable/plugin-transform-runtime babel-loader

용어설명

• @babel/core: babel을 사용하기 위한 필수 패키지
• @babel/preset-env: js 기능들을 별다른 명시없이 자동으로 사용할 수 있게 하는 기능.
• @babel/plugin-transform-runtime: 비동기처리를 위한 플러그인
• babel-loader: webpack에서 babel 기능을 사용할 수 있게 한다.

.babelrc.js

module.exports = {
    presets: ['@babel/preset-env'],
    plugins: [
      ['@babel/plugin-transform-runtime']
    ]
};

5. webpack.config.js

// import
const path = require('path');
const HtmlPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');

// export
module.exports = {
  // 파일을 읽어들이기 시작하는 진입점 설정
  entry: './js/main.js',

  // 결과물(번들)을 반환하는 설정
  output: {
      // path에 어떠한 결과물을 어디에 내어줄 것인지 설정.
      // path는 절대 경로를 필요로 함.
    // resolve는 첫 번째 인수와 두 번째 인수를 합쳐 준다.
    // __dirname은 현재 파일이 있는 경로를 지칭
    path: path.resolve(__dirname, 'dist'),
    // 어떤 파일 명으로 내보낼 것인지 설정
    filename: 'main.js',
    // 기존에 내보낸 파일을 제거.
    clean: true,
  },

  module: {
    rules: [
      {
        test: /\.css$/,
        // 순서가 중요. 맨밑에서 부터 읽힘.
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
        ]
      },
      {
        test: /\.js$/,
        use: 'babel-loader'
      }
    ]
  },

  // 번들링 후 결과물의 처리 방식 등 다양한 플러그인들을 설정.
  plugins: [
    new HtmlPlugin({
      template: './index.html'
    }),
    new CopyPlugin({
      patterns: [
        { from: 'static' }
      ]
    })
  ],

  // 서버 주소 설정
  devServer: {
    host: 'localhost'
  },
};

C언어를 독학하는데 있어서 가장 큰 문제는 C언어 강의나 서적들이 Window 운영체제를 기반으로 설명해준다는 것이다. 나는 맥북쓰는데... MacOS에서 알려주는 그런 강의없습니까... 서로 다른 운영체제를 쓰다보니, Window에서 사용가능한 코드가 MacOS에서는 작동하지 않는 경우가 종종 있다. 오늘이 그러했다...

왜 MacOS론 햄보칼수업써!!

경과시간 구하기

문제는 C언어로 경과시간을 구하면서부터 시작되었다. 특정 동작이 일어난 후 시작 시간에서부터 경과시간을 구하는 코드는 대충 아래와 같다.

#include <stdio.h>
#include <time.h>

int main(void) {
    long startTime = 0;
    long elapsedTime = 0;

    startTime = clock();

    /* ~~~ 특정 동작 실행 중 ~~~ */

    elapsedTime = (clock() - startTime) / CLOCKS_PER_SEC;

    printf("경과 시간 : %ld초\n", elapsedTime);

    return 0;
}

먼저 clock()을 사용해서 처음 시작 시간 값과 동작 종료 후 시간 값을 각각 구한다. 이후, 동작 종료 후 시간에 처음 시작 시간을 뺀 뒤 CLOCKS_PER_SEC로 나눠주면 초 단위로 값이 나오게 된다. 문제는 CLOCKS_PER_SEC이 Window에서는 1,000을 의미하지만, MacOS에서는 1,000,000을 의미한다. 즉 같은 코드지만, MacOS에서는 Window에서 출력된 경과시간과 같은 값을 얻기 위해 훨씬 더 긴 영겁의 시간(?)을 견뎌야 한다는 것.

gettimeofday()로 경과시간 구하기

구글링 끝에 gettimeofday()로 경과시간을 구하는 방법을 습득했다. 코드는 아래와 같다.

#include <stdio.h>
#include <sys/time.h>

int main(void) {
    struct timeval startTime;
    struct timeval endTime;
    int elapsedTime;

    gettimeofday(&startTime, NULL);

    /* ~~~ 특정 동작 실행 중 ~~~ */

    gettimeofday(&endTime, NULL);
    elapsedTime = endTime.tv_sec - startTime.tv_sec;

    printf("경과 시간 : %d", elapsedTime);

    return 0;
}

clock()을 사용했을때와 비슷한 구조다. gettimeofday()는 아래와 같이 두개의 인자를 갖는다. 첫번째 인자 tv는 현재 시스템 시간을 저장하기 위한 구조체, 두번째 인자 tz은 타임존을 설정하기 위해서 사용된다. 현재 tz는 사용하지 않기 때문에 NULL을 사용하면 된다.

#include <sys/time.h>

int gettimeofday(struct timeval *tv, struct timezone *tz);

// tv
struct timeval
{
    long tv_sec;       // 초
    long tv_usec;      // 마이크로초
}

// tz
struct timezone
{
    int tz_minuteswest:  // 그리니치 서측분차  
    int tz_dsttime       // DST 보정타입(일광 절약시간)
}

끝.

참고 : https://www.joinc.co.kr/w/man/2/gettimeofday

props 이용해 값 전달하기

그림을 그릴 수 있는 기능은 App.jsx에, 다른 기능들은 MenuBar.jsx에 코드를 작성했다. 따라서 App.jsx에 canvas 정보들을 MenuBar.jsx에 props를 사용해 전달했다.

• App.jsx

  // ~~~ 생략 ~~~
  import MenuBar from "./components/MenuBar";
  

return ( {/* ~ 생략 ~ */} );

- MenuBar.jsx

export default function MenuBar({ getCtx, getCanvas }) { return (); }

## <span style="color: #5fc69a">리셋 기능 구현하기</span>
리셋 기능은 `clearRect()` 메서드를 사용하면 쉽게 작업물을 초기화할 수 있다. `<RestartAltIcon />`은 mui 아이콘이니 신경쓰지말자.

export default function MenuBar({ getCtx, getCanvas }) {

const onReset = () => {
    getCtx.clearRect(0, 0, getCanvas.width, getCanvas.height);
  }

 return (
    <li onClick={onReset}>
        <RestartAltIcon className="icons" />
      </li>
  );

}

## <span style="color: #5fc69a">다운로드 기능 구현하기</span>

이미지 다운로드 기능은 노마드 코더 [바닐라JS로 그림 앱 만들기](https://nomadcoders.co/javascript-for-beginners-2) 강의와 다를 것이 없다. 뭔가 React스러운(?) 코드를 원했으나, 아직 괜찮은 코드를 찾지 못했다ㅠ. "으... React 저렇게 하는 거 아닌데..." 하시는 분은 제발 댓글로 알려줘잉...

export default function MenuBar({ getCtx, getCanvas }) {

const onSave = () => {
  const imageURL = getCanvas.toDataURL();
  const downloadImage = document.createElement("a");
  downloadImage.href = imageURL;
  downloadImage.download = "paint_image";
  downloadImage.click();
}

 return (
    <li onClick={onSave}>
        <SaveIcon className="icons" />
      </li>
  );

}

```

아직 디자인을 어떻게 할 지 몰라서 대충 배치했는데, 나에게는 아직 디자인이 제일 어려운 것 같다. 그쪽으로 감각이 없나? ㅠ. 다음은 색상선택, 지우개 기능을 하려고 하는데 노마드 코더 바닐라JS로 그림 앱 만들기에 없던 지우개, 이미지&텍스트 추가 기능이 새로 업데이트 되었다.(노마드로부터 돈 안 받았다.) 해당 강의를 다시 보면서 React로 바꿔보는 작업을 해봐야겠다.

끝.

노마드 코더 바닐라JS로 그림 앱 만들기 강의를 보며 진행했던 프로젝트를 React로 바꿔보고싶었다. 예전에 한 번 시도했었다가 막힌 이후로 다시 한 번 시도해보는 것이다.

국비 과정을 통해 다양한 React 프로젝트를 경험하다보니, 예전에 왜 실패했었는지 단번에 이해가 되었다. 옛날 실패했던 프로젝트 코드를 열어보니, 그때는 JavaScript에만 익숙했기 때문에 React App 위에 JavaScript를 얹혀놓은 괴상한 모습을 하고 있었다.

React Hook 사용하기

바닐라JS와는 다르게, React에서는 canvas와 getContext()를 사용하기 위해서는 먼저 useRef()와 useEffect(), useState()의 도움을 받아야 한다.

• Vanilla JS

  <body>
    <canvas id="canvas"></canvas>
  </body>
  <script>
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");
  </script>

• React

  import React { useEffect, useRef, useState } from "react";
  

export default function App() { const canvasRef = useRef(null); const [getCtx, setGetCtx] = useState(null);

useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext("2d");
    setGetctx(ctx);
}, [])

return (
    <canvas ref={canvasRef}></canvas>
);

}

## <span style="color: #5fc69a">addEventListener말고 Mouse Event 사용하기</span>

`canvas`에 대한 설정을 해준 다음에는, `canvas` 범위 내에서 현재 마우스의 위치 정보를 받아와야 한다. 그래야 그 위치에 그림을 그릴 수 있기 때문이다. 바닐라JS에서는 `addEventListener()`를 사용했지만, React에서는 `canvas` 태그에 Mouse Event를 사용하자.

- Vanilla JS

- React

return( <canvas ref={canvasRef} onMouseDown={() => setPainting(true)} onMouseUp={() => setPainting(false)} onMouseMove={e => drawFn(e)} onMouseLeave={() => setPainting(false)} > );

## <span style="color: #5fc69a">마우스 현재 위치 정보 가져와서 그리기</span>

위의 이벤트를 설명하자면, 마우스를 눌렀을 경우 그림을 그릴 수 있고, 마우스를 뗐을 경우나 `canvas` 범위 내에서 벗어날 때에는 그림을 그릴 수 없다. 그리고 마우스를 `canvas` 범위 안에서 움직일 때 움직인 위치 정보를 가져다주게 된다.

바닐라 JS는 `offsetX`와 `offsetY`로 위치 정보를 가져올 수 있는데, React에서는 `nativeEvent`로 한 번 거쳐서 `offsetX`와 `offsetY`를 가져와야 한다. `clientX`나, `pageX` 등은 `canvas` 범위를 기준으로 하지 않기 때문에 내가 그림을 그리려는 위치와 실제 그림이 그려지는 위치가 차이가 발생한다. 따라서 React에서는 `event.nativeEvent.offsetX`, `event.nativeEvent.offsetY`와 같이 사용해야 한다.

- Vanilla JS

- React

const [painting, setPainting] = useState(false);

const drawFn = e => { const mouseX = e.nativeEvent.offsetX; const mouseY = e.nativeEvent.offsetY; if (!painting) { getCtx.beginPath(); getCtx.moveTo(mouseX, mouseY); } else { getCtx.lineTo(mouseX, mouseY); getCtx.stroke(); } }

## <span style="color: #5fc69a">전체 코드</span>
- App.jsx

// react import React, { useRef, useEffect, useState } from "react"; // style import { CanvasStyle } from "./styles/cavas";

export default function App() { // useRef const canvasRef = useRef(null); // getCtx const [getCtx, setGetCtx] = useState(null); // painting state const [painting, setPainting] = useState(false);

useEffect(() => { // canvas useRef const canvas = canvasRef.current; canvas.width = 650; canvas.height = 540; const ctx = canvas.getContext("2d"); ctx.lineJoin = "round"; ctx.lineWidth = 2.5; ctx.strokeStyle = "#000000"; setGetCtx(ctx); }, []);

const drawFn = e => { // mouse position const mouseX = e.nativeEvent.offsetX; const mouseY = e.nativeEvent.offsetY; // drawing if (!painting) { getCtx.beginPath(); getCtx.moveTo(mouseX, mouseY); } else { getCtx.lineTo(mouseX, mouseY); getCtx.stroke(); } }

return (

```

결과물

일단 검은 선만 그을 수 있는 상태다. 다음번에는 노마드 코더 바닐라JS로 그림 앱 만들기 강의 내용처럼 색상선택이나 페인트 기능, 저장 기능 등을 구현해야하는데...(귀찮)

시간 날 때마다 계속 작업해보도록 하겠다.

끝.

다음 글 : React로 그림판 만들기2 : 리셋&저장

• NYT API로 뉴스 기사 검색 웹 페이지 만들기 1

Intersection Observer API

이전 글에서 NYT API를 사용해 뉴스 기사 정보들을 불러왔다. 그런데 문제는 한번 API를 호출할 때마다 뉴스 기사 정보를 페이지당 10개씩 가져온다는 것.

여러가지 방법이 있겠지만, 무한 스크롤을 통해 다음 페이지를 호출해보자.

React Intersection Observer 설치

React 환경에서 무한 스크롤은 react-intersection-observer을 사용하면 매우 간단하게 구현 가능하다.

$ npm install react-intersection-observer

위의 예시처럼 명령어를 입력해 설치를 끝냈으면 무한 스크롤을 구현하고 싶은 컴포넌트에 설치한 Intersection Observer API를 불러와주자.

무한 스크롤 만들기

무한 스크롤은 아래와 같이 단 몇 줄로 구현이 가능하다.

App.js

import { useInView } from "react-intersection-observer";

export default function App() {
    const [ref, inView] = useInView();

    // ~~~

    useEffect(() => {
        if (inView) {
              setPage(prev => prev + 1)
        }
      }, [inView])

    return (
        {/* ~~~ */}
        <div ref={ref} />
    );
}

useInView()의 초기 값은 false다. 아래 ref를 걸어놓은 div 태그가 화면에 보이면 inView는 true를 반환할 것이고, 아니라면 false를 다시 반환 할 것이다.

useEffect()로 inView가 true일때마다 API의 페이지를 1씩 증가시켜주면 무한 스크롤을 구현할 수 있다.

참고로 ref와 inView는 마음대로 바꿔서 쓰면 된다. 근데 다 이거 쓰는 것 같음...

아래는 코드 적용 화면

Options

useInView() 안에는 아래와 같이 여러가지 옵션을 지정할 수 있다.

• root : 관찰 대상의 경계를 지정한다. 기본 값은 뷰포트다.
• rootMargin : root에 margin을 설정한다.
• threshold : root와 관찰 대상의 교차영역을 비율로 지정한다. 0에서 1까지 값을 지정할 수 있다.

이외에도 다양한 옵션이 있는데, 자세한 내용은 https://www.npmjs.com/package/react-intersection-observer 에서 확인 가능하다.

끝.

영포자 경력 수십년차(전생에 위정척사파였던 듯) 간단한 영문 API 문서도 이해하고 활용하기가 쉽지 않다. 이번 프로젝트에 사용한 뉴욕타임즈 API도 쉬운 편에 속한다던데 이거 제대로 쓰는 데에도 한참 걸렸다.

근데 구글링 열심히해봤는데 왜 아무도 안알려주냐.. 진짜 안 찾아봐도 될 정도로 그렇게 쉬웠나ㅠ

나는 쓴다. NYT Article Search API.

뉴욕타임즈 뉴스 기사 검색 api는 아래 웹 페이지에서 회원가입을 해 받아올 수 있다.

https://developer.nytimes.com/

가입하면 위 사진처럼 자신의 계정 정보에 접근해 Apps 페이지로 들어가보자. My Apps 페이지에서 New App 버튼을 클릭하면 아래와 같은 화면이 나올 것이다.

Overview 항목에서는 App의 이름을 지정해주고, 따로 해당 App에 대한 설명이 필요하다면 적어주도록 한다.

APIs에서는 사용할 Api를 지정해주면 되는데, 기사 검색 기능만 필요하니 Article Search API만 Enable로 등록하면 된다. 저장하면 사용가능한 API key가 뜰 것이다. 해당 key를 가지고 기사 검색 기능을 구현하면 된다. . . . . . . ...까지만 적혀있더라...

사실 프로젝트를 완성한 입장에서 보면 별 것 아니었다. 공식문서에 다 적혀있고 차근차근 찾아보면 되는 부분인데...

아ㅎ 영어 안 읽음 ㅈㅅㅎㅎ 구글링하면 나오겠지ㅎㅎ

이딴 태도로 몇시간을 버렸던 것 같다. 영어 너무 싫엉...

뉴스 기사 검색 API 활용하기

NYT devolper 사이트의 APIs 탭에서 기사 검색 api 파트로 들어가면, 아래의 주소와 방금 만든 api key를 활용해 api를 사용할 수 있다.

https://api.nytimes.com/svc/search/v2/articlesearch.json?q=election&api-key=yourkey

해당 메뉴에서, PATHS 탭에 들어가면 검색 뿐만 아니라 여러 기능들을 쓸 수 있게 "영어"로 친절하게 안내해준다.

그 중에서 내가 쓴 기능은 뉴스 기사 검색(q), 페이지 정보(page), 정렬 방법(sort), 총 3개다. 이것을 api 주소에 적절하게 넣어주면 된다.

만약 한국을 검색하고, 페이지 수는 3페이지, 정렬방법을 최신순으로 지정해 출력하려면 아래와 같은 주소로 불러오면 된다.

https://api.nytimes.com/svc/search/v2/articlesearch.json?q=korea&page=3&sort=newest&api-key=yourkey

이렇게하면 최대 10개의 뉴스 기사들을 제공해준다. 하지만 내가 원하는 것은 10개 이상의 뉴스 기사들이 출력되는 것을 원한다. 그것은 다음 글에서 설명하겠다.

다음 글

• NYT API로 뉴스 기사 검색 웹 페이지 만들기 2

React 환경에서 Firebase GoolgeAuthProvider()를 사용해 구글 아이디로 회원가입 코드를 작성하던 중 아래와 같은 에러 메세지가 발생했다.

문제 해결

환경변수 설정 문제로, .env와 그것을 받는 파일에서 오타가 있어서 발생한 오류. React 환경에서는 환경변수를 사용할때 꼭 변수명 앞에 REACT_APP_을 붙여야 한다. 코드 작성시 오타에 유의하자.

끝.

문제설명

행렬의 덧셈은 행과 열의 크기가 같은 두 행렬의 같은 행, 같은 열의 값을 서로 더한 결과가 됩니다. 2개의 행렬 arr1과 arr2를 입력받아, 행렬 덧셈의 결과를 반환하는 함수, solution을 완성해주세요.

제한 조건

• 행렬 arr1, arr2의 행과 열의 길이는 500을 넘지 않습니다.

입출력 예

제출답안

function solution(arr1, arr2) {
    var answer = [];

    for(let i =0; i<arr1.length; i++){
        let res = []
        for(let j =0; j<arr1[i].length; j++){
            res.push(arr1[i][j] + arr2[i][j])
        }
        answer.push(res)
    }
    return answer
}
// => 테스트 통과!

Programmers JavaScript Lv.1 [x만큼 간격이 있는 n개의 숫자]

문제 설명

함수 solution은 정수 x와 자연수 n을 입력 받아, x부터 시작해 x씩 증가하는 숫자를 n개 지니는 리스트를 리턴해야 합니다. 다음 제한 조건을 보고, 조건을 만족하는 함수, solution을 완성해주세요.

제한조건

• x는 -10000000 이상, 10000000 이하인 정수입니다.
• n은 1000 이하인 자연수입니다.

입출력 예

제출답안

function solution(x, n) {
    var answer = [];
    for (let i = 0; i < n; i ++) {
        answer.push(x * (i + 1));
    }
    return answer;
}
// => 테스트 통과

Programmers JavaScript Lv.1 [수박수박수박수박수박수?]

문제 설명

길이가 n이고, "수박수박수박수...."와 같은 패턴을 유지하는 문자열을 리턴하는 함수, solution을 완성하세요. 예를들어 n이 4이면 "수박수박"을 리턴하고 3이라면 "수박수"를 리턴하면 됩니다.

제한 조건

• n은 길이 10,000이하인 자연수입니다.

입출력 예

제출답안

function solution(n) {
    var answer = '';
    for (let i = 1; i <= n; i ++) {
        if (i % 2 === 0) {
            answer += "박";
        } else {
            answer += "수";
        }
    }
    return answer;
}
// => 테스트 통과

끝.

문제설명

1937년 Collatz란 사람에 의해 제기된 이 추측은, 주어진 수가 1이 될때까지 다음 작업을 반복하면, 모든 수를 1로 만들 수 있다는 추측입니다. 작업은 다음과 같습니다.

1-1. 입력된 수가 짝수라면 2로 나눕니다. 
1-2. 입력된 수가 홀수라면 3을 곱하고 1을 더합니다.
2. 결과로 나온 수에 같은 작업을 1이 될 때까지 반복합니다.

제한 사항

• 입력된 수, num은 1 이상 8000000 미만인 정수입니다.

입출력 예

입출력 예 설명

입출력 예 #1 문제의 설명과 같습니다.

입출력 예 #2 16 -> 8 -> 4 -> 2 -> 1 이되어 총 4번만에 1이 됩니다.

입출력 예 #3 626331은 500번을 시도해도 1이 되지 못하므로 -1을 리턴해야합니다.

제출답안

function solution(num) {
    let answer = 0;

    while (num !== 1) {
        if (num % 2 === 0){
            num /= 2;
        } else {
            num = (num * 3) + 1;
        }
        answer += 1;
    }

    if (answer >= 500) {
        return -1;
    } else {
        return answer;
    }
}

// => 테스트 통과!!

API를 사용하는 방법은 독학이나 이번 과정에서 몇 번 해봤지만 아직까지 마냥 막막하고 손에 익지 않은 것 같다. 이때문에 이번 과제를 수행하는데 많이 해맸던 것 같다.

API... Reat... Redux 다 배운건데 어떻게 하더라...

알듯 말듯 될 듯 말듯 안되는 상황 속에 고전하고 있던 차에 수강생 한 분 께서 전체적으로 정리를 해주셨다. 덕분에 무사히 어떤 부분에서 이해가 부족했는지 알 수 있었고, 성공적으로 과제를 마칠 수 있었다.

프로젝트 준비하기

실습 과제는 아래와 같은 구조로 되어 있는 프로젝트다. LoginComponent.jsx는 아이디와 비밀번호를 입력할 수 있는 로그인 화면,MyPage.jsx는 로그인이 성공했을 경우 나타나는 페이지다.

실습 목표는 다음과 같다.

• 아이디와 비밀번호를 state, _input_으로 관리할 것.
• 로그인 버튼 클릭 시 빈 값이 하나라도 있다면, alert()로 _submit event_를 종료시킬 것.
• _axios_를 통신하는 동안 버튼이 클릭되지 않도록 할 것.
• axios 통신이 끝난 후 1.5초까지 'Loading...'을 출력할 것.

유저 정보는 다음과 같다.

• ID : fastcampus
• PW : 1234

API 명세서는 다음과 같다.

• 반드시 body(obj)를 같이 보내줄 것.

  • body.id : user.id
  • body.pw : user.pw

• 로그인 실패시

  • code : 400 = body 값이 비어 있을 때
  • code : 401 = 존재하지않는 id일 때
  • code : 402 = 비밀번호가 틀렸을 때

• 로그인 성공 시

  • code : 200
  • useInfo = object, user의 데이터가 넘어옴.

main.jsx

main.jsx에 Provider와 store를 아래와 같이 설정해준다.

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

import { Provider } from "react-redux";
import store from "./reducer/store.js";

ReactDOM.createRoot(document.getElementById('root')).render(
    <Provider store={store}>
      <App />
    </Provider>
)

store.js

configureStore()로 스토어를 만들어 준다. 리듀서는 userSlice.js에서 가져와주자.

import { configureStore } from "@reduxjs/toolkit";
import userSlice from "./userSlice";

export default configureStore({
  reducer: {
    user: userSlice,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
    }),
});

LoginComponent.jsx

먼저 로그인 컴포넌트를 완성해주자. 제일 먼저 아이디 input과 비밀번호 input, 그리고 로그인 버튼을 만든다. 그리고 input에 입력한 값은 useState()로 관리한다. 그 다음 버튼을 클릭했을때, axios를 이용해 서버와 통신하여 입력한 input 값이 정확한지 확인하도록 해야한다.

// API
let body = {
    id,
    password
}
axios.post(LOGIN_API_KEY, body).then(res =>{***})

서버와 통신하기 위해서 위와 같은 코드를 작성한다. body는 id와 password 값을 받아서 서버로 전달해준다. 현재 아이디 input의 값과 비밀번호 input의 값은 각각 id와 password이란 이름으로 지정했으므로, body가 필요한 값과 input 값의 이름이 같다. 따라서 id = id, password = password이므로 위와 같이 하나씩만 작성하는 것이 가능하다.

body에 담긴 값은 axios.post()를 통해 LOGIN_API_KEY로 전달된다. 그리고 그 정보는 then()을 통해서 res로 받을 수 있다. console.log(res)를 해본다면 아래와 같은 정보가 뜰 것이다.

우리가 필요한 것은 data 부분인데, 현재 input에는 아무것도 입력하지 않았기 때문에 code : 400이 뜬 것을 볼 수 있다. 이것을 가지고 다음 화면으로 넘어갈지, submit 이벤트를 종료할지 선택할 수 있다. 코드가 400대라면 alert()를 제공하고 submit 이벤트를 종료 시킬 것이고, 코드가 200이라면 로그인 성공 화면으로 넘어가게 할 것이다.

코드가 200이 나오기 위해서는 위의 예시처럼 id 값을 fastcampus, password 값을 1234로 입력시켜줘야한다.

console.log(res.data)를 입력했을때 코드가 200일 경우 userInfo를 통해 추가로 정보가 제공된다. 이것을 가지고 로그인 성공화면에서 텍스트로 "Welcome 패스트캠퍼스!"라는 안내 문구를 제공할 것이다.

조건문을 통해 코드가 400대일 경우 alert() 후 이벤트 종료, 200일 경우 해당 정보를 userDispatch()를 통해 userSlice.js의 loginUser() 리듀서로 넘겨주자. axios 통신이 끝나기 전 해당 조건문이 실행되면 제대로 동작하지 않기 때문에 then() 안에서 작성해야 한다.

.then(res => {
  const code = res.data.code;
  if (code === 400) {
      alert("비어있는 내용입니다.");
  } else if (code === 401) {
      alert("존재하지 않는 id입니다.");
  } else if (code === 402) {
      alert("비밀번호가 일치하지 않습니다.");
  } else {
      dispatch(loginUser(res.data.userInfo));
  }
});

무사히 userInfo 값을 리듀서에 전달 한 상황이다. 이제 버튼을 클릭했을때 "Loading..." 문구가 출력됐다가 이벤트까 끝나면 1.5초 뒤 사라져야하며, 그동안 버튼이 클릭되지 않도록 해야 한다.

로딩 메세지는 useEffect()를 사용해도 되지만, submit 이벤트가 발생할때 출력되도록 코드를 작성했다. 이 경우 then() 안에 setTimeout()을 통해 로딩 메세지가 axious 통신이 끝난 이후 1.5초 뒤 사라지게 하자.

그리고 버튼은 disabled={}에 들어갈 값을 useState()를 통해 관리해준다. 초기 값은 false, submit 이벤트가 발생하면 true, axious 통신이 끝나면 다시 false 값을 지정해주자.

위의 설명을 통해 아래와 같이 코드를 작성해보자.

import React, { useState } from "react"
import { useDispatch } from "react-redux";
import { loginUser } from "../reducer/userSlice.js";
import axios from "axios";
import "./Login.css"

function LoginComponent() {
    const dispatch = useDispatch();

    const [id, setId] = useState("");
    const [password, setPassword] = useState("");

    const [loading, setLoading] = useState(false);
    const [msg, setMsg] = useState("");

    const LoginFunc = (e) => {
        e.preventDefault();
        // Loading... 메세지 출력
        setMsg("Loading...");

        // API
        let body = {
            id,
            password
        }
        axios.post(LOGIN_API_KEY, body)
        .then(res => {
            // 2순위 통신이 끝나야 작동. 통신 이후 클릭이 되도록.
            setLoading(false);
            // Loading... 메세지가 통신이 끝난 후 1.5초 이후 없어짐.
            setTimeout(() => setMsg(""), 1500);
            // code = 데이터 상태
            const code = res.data.code;
            if (code === 400) {
                // 비어있는
                alert("비어있는 내용입니다.")
            } else if (code === 401) {
                // 존재하지 않는 id
                alert("존재하지 않는 id입니다.")
            } else if (code === 402) {
                // 비밀번호가 틀렸을때
                alert("비밀번호가 일치하지 않습니다.")
            } else {
                dispatch(loginUser(res.data.userInfo));
            }
        })
        // 1순위 로그인 버튼을 누르면 클릭이 안되도록.
        setLoading(true);
    }

    return (
        <>
            <h1>LoginComponent</h1>
            <form 
                onSubmit={LoginFunc}
                className="login-wrap"
            >
                <input
                        type="text" 
                        placeholder='아이디' 
                        className='id'
                        onChange={e => setId(e.target.value)}
                    />
                    <br />
                    <input 
                        type="password" 
                        placeholder='비밀번호' 
                        className='pw'
                        onChange={e => setPassword(e.target.value)} 
                    />
                <br />
                <button
                    disabled={loading} 
                    type="submit"
                    className='btn'
                >
                    로그인
                </button>
                <div
                    className='msg'
                >
                    {msg}
                </div>
            </form>
        </>
    )
}

export default LoginComponent

위 코드를 작성하면 아래와 같은 예제를 만들 수 있다.

아이디와 비밀번호를 모두 입력하지 않았을 경우

아이디는 정확하지만 비밀번호가 틀렸을 경우

비밀번호는 정확하지만 아이디가 틀렸을 경우

userSlice.js

userSlice.js에서는 loginUser()를 통해 초기 상태 값에 LoginComponent.jsx에서 받아온 userInfo 값을 집어 넣어 줄 것이고, clearUser()를 통해 받아온 값을 다시 비워주게 할 것이다.

먼저 createSlice()로 리듀서를 만들고 초기값을 다음과 같이 작성한다.

initialState: {
  name: "",
  id: "",
  isLoading: false, // optional
  isLogin: null,
 },

LoginComponent.jsx에서 받아온 userInfo의 값은 액션의 payload에 담겨져있다. 이것을 아래와 같이 loginUser()에서 initialState의 name과 id에 각각 넣어주자, 그리고 clearUser에는 넣어준 값을 다시 빈 값으로 만든다.

import { createSlice } from "@reduxjs/toolkit";

export const userSlice = createSlice({
    name: "user",
    initialState: {
        name: "",
        id: "",
        isLoading: false, // optional
        isLogin: null,
    },
    reducers: {
        // login 성공 시
        loginUser: (state, action) => {
            // name, id에 API 값 받아오기
            state.name = action.payload.name;
            state.id = action.payload.id;
            // state 변화를 알림
            return state;
        },
        // login 실패 시
        clearUser: (state) => {
            // name, id 값을 비워줌.
            state.name = "";
            state.id = "";
            // state 변화를 알림
            return state;
        },
    },
});

export const { loginUser, clearUser } = userSlice.actions;
export default userSlice.reducer;

App.jsx

LoginComponent.jsx와 Mypage.jsx 모두 App.jsx를 통해 화면에 출력되도록 구조를 설정했다. 그 이유는 App.jsx에서 특정 조건이 일어날 경우 한 컴포넌트만을 출력할 수 있도록 설정하기 위해서다. 아까 userSlice.js에서는 loginUser()가 실행될 경우 userInfo의 값이 state에 적용될 것이고, clearUser()가 실행된다면 state가 초기 값과 같은 빈 값으로 설정될 것이다. 이것을 아래와 같이 삼항연산자로 App.jsx에 작성하면 원하는 조건에 원하는 컴포넌트가 출력된다. 현재 state에서 변동이 일어나는 것은 id와 name이므로, 둘 중 하나를 선택해 작성한다.

import React from 'react';
import { useSelector } from "react-redux";
// import { BrowserRouter, Routes, Route } from 'react-router-dom';

import LoginComponent from './component/LoginComponent';
import MyPage from './component/MyPage';

function App() {
  const user = useSelector(state => state.user);

  return (
    <>
    {user.id !== "" ? <MyPage /> : <LoginComponent />}
    </>
  )
}

export default App

MyPage.jsx

Mypage.jsx에서는 useSelector()를 사용해서 userSlice.js에 있는 name 값을 가져와서 출력하고, useDispatch()를 통해서 버튼을 클릭하면 clearUser()를 실행시켜 값을 비워줘야 한다.

import React from 'react'
import { useSelector, useDispatch } from "react-redux";
import { clearUser } from "../reducer/userSlice.js";
import "./MyPage.css"

function MyPage() {
    const user = useSelector((state) => state.user);
    const dispatch = useDispatch();

    const LogoutFunc = () => {
        dispatch(clearUser(user));
    }
    return (
        <>
            <h1>MyPage</h1>
            <p>{`${user.name}(${user.id})`}님, 안녕하세요!</p>
            <button onClick={() => LogoutFunc()}>로그아웃</button>
        </>
    )
}

export default MyPage

위의 코드를 작성했을 경우 아래와 같은 예제가 출력된다.

끝.

리덕스는 상태 관리 라이브러리 중 하나로, 현재까지 가장 많이 쓰이고 있다.

상태 관리란 UI와 UX에 맞게 데이터를 관리하거나, 서버와 주고 받는 데이터를 관리하는 것을 말한다.

간단한 프로젝트라면 괜찮겠지만, 복잡하고 크기가 큰 대형 프로젝트라면 상태 관리의 난도는 크게 올라간다. 리액트의 state 끌어올리기를 생각해보자. 한 컴포넌트의 함수를 props 형태로 다른 컴포넌트로 전달하고 또 그것을 props 형태로 또 다른 컴포넌트로 전달하고... 이런 복잡한 구조는 불필요한 props 전달로 유지보수 또는 props 추적을 힘들게하는 Props drilling을 야기한다.

상태 관리 라이브러리는 이러한 문제들을 해결하기 위해 고안되었다.

위의 그림은 기존 상태 관리 방식을 시각화한 것이다. 위 그림처럼 상태 변경이 한 번 일어났을 뿐인데 해당 데이터를 변경하기 위해 또 다른 상태 변경이 여러 번 일어나고 있다. 이러한 구조는 오류를 야기할 수 있으며, 발생한 오류를 잡아내기도 쉽지 않다.

그러나 리덕스는 Reducer와 Store를 통해 상태 변경 과정을 간소화하여 기존의 문제를 해결했다. 이것은 복잡한 상태 관리를 매우 효율적이고 간편하게 변경하여 오류 발생률을 낮추게 한다.

Redux 기본 용어

리덕스의 기본 용어에 대해서 알아보자.

Store

스토어는 컴포넌트의 상태를 관리하는 저장소다. 하나의 프로젝트는 하나의 스토어만 가질 수 있다.

Action

스토어의 상태를 변경하기 위해서는, 액션을 생성해야한다. 액션은 객체이며, 반드시 type을 가져야 한다. 액션 객체는 액션생성함수에 의해서 만들어진다.

Reducer

리듀서는 현재 상태와 액션 객체를 받아 새로운 상태를 리턴하는 함수다.

Dispatch

디스패치는 스토어의 내장 함수 중 하나이며, 액션 객체를 넘겨줘 상태를 업데이트 시켜주는 역할을 한다.

Subscribe

스토어의 내장 함수 중 하나로, 리듀서가 호출될 때 서브스크라이브된 함수 및 객체를 호출한다.

아래의 그림으로 위의 용어들을 이해해보자.

1. UI가 처음 렌더링될 때, UI 컴포넌트는 리덕스 스토어의 상태에 접근하여 해당 상태를 렌더링한다.

2. 이후 UI에서 상태가 변경되면, 앱은 디스패치를 실행해 액션을 일으킨다.

3. 새로운 액션을 받은 스토어는 리듀서를 실행하고 리듀서를 통해 나온 값을 새로운 상태로 저장한다.

4. 서브스크라이브된 UI은 상태 업데이트로 변경된 데이터를 새롭게 렌더링한다.

Redux 사용하기

리덕스를 사용하기 위해서는 먼저 리덕스를 설치해야 한다.

$ npm install redux

리액트 환경이라면 추가로 react-redux를 설치해야한다.

$ npm install redux react-redux

Store 만들기

리덕스 설치가 완료되었다면, 스토어를 만들어 주자. 스토어는 createStore()를 통해 만들 수 있다.

import { createStore } from 'redux';

그러나 리덕스 4버전 이상일 경우 아래와 같은 경고 메세지가 나타난다.

경고 메세지는 스토어를 만들때 리덕스의 createStore()를 사용하기보단, 리덕스 툴킷의 configureStore()를 사용할 것을 요구한다.

리덕스 툴킷을 이용해 기존 리덕스 문법보다 훨씬 쉬운 방법으로 상태 관리를 할 수 있는데, 리덕스 개발사 쪽에서 리덕스 툴킷을 쓰라고 하는 것 같다.

Redux Toolkit 사용하기

리액트 환경에서 아래의 카운트업 코드를 리덕스 툴킷을 통해 만들어 보자.

// App.jsx

import React, { useState } from 'react'

export default function App() {
  const [counter, setCounter] = useState(0);

  const minus = () => {
    setCounter(prev => prev - 1);
  }
  const plus = () => {
    setCounter(prev => prev + 1);
  }

  return (
    <div>
      <button onClick={minus}>-</button>
      Value: { counter } 
      <button onClick={plus}>+</button>
    </div>
  );
}

리덕스 툴킷 역시 설치가 필요하다.

npm install @reduxjs/toolkit

리액트 환경이라면 react-redux 설치가 필요하다.

Store 연동하기

Provider는 react-redux에서 리액트 앱에 스토어를 연동할 수 있게 해주는 컴포넌트다. 아래와 같이 Provider 컴포넌트를 불러와 연동할 컴포넌트를 감싸준 뒤, Provider의 props로 사용할 스토어를 지정해주면 된다.

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

import { Provider } from "react-redux";
import store from "./store/store.js";

ReactDOM.createRoot(document.getElementById('root')).render(
    <Provider store={store}>
      <App />
    </Provider>
)

Store 만들기

먼저 store.js에 configureStore()로 스토어를 만들어주자.

// store.js

import { configureStore } from '@reduxjs/toolkit';

export const store = configureStore({
    reducer: counterSlice,
    middleware: [...middlewares]
})

기존 리덕스에서는 스토어 생성 후 미들웨어가 한 개 이상이라면, 여러 메서드를 통해 긴 코드를 작성해야 했다.

configureStore()는 별도의 메서드 없이 바로 미들웨어를 추가할 수 있다는 장점이 있다.

createSlice 생성

기존 리덕스에서는 액션을 디스패치하기 위한 별도의 함수가 필요했고, 액션의 객체를 리듀서를 통해 리턴하는 구조였다.

createSlice()는 액션에 대한 함수 설정과 리듀서를 따로 생성하지 않아도 된다.

아래는 createSlice()를 사용한 카운트업 코드와 그에 대한 설명이다.

// countSlice.jsx

import { createSlice } from '@reduxjs/toolkit'
export const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    plus: state => {
      state.value += 1
    },
    minus: state => {
      state.value -= 1
    },
  },
})

export const { plus, minus } = counterSlice.actions; 
export default counterSlice.reducer;

• initialState를 통해 state의 처음 상태를 정의한다.
• reducers에서 액션을 설정한다.
• _plus_와 _mius_를 export해서 _App.jsx_에 import한다.
• slice는 slice.reducer로 내보낸다. _store.js_는 위 파일을 전부 리듀서로 받는다.

useSelector, useDispatch로 상태 접근하기

useSelector()는 기존 리덕스의 connect()를 이용하지 않고 리덕스의 상태를 조회할 수 있다.

useDispatch()는 생성한 액션을 발생시키며, 액션생성 함수를 가져온다. 위 설명의 디스패치와 같다고 보면 된다.

아래는 useSelector()와 useDispatch()에 대한 설명이다.

// App.jsx

import React from 'react'
import { useDispatch, useSelector } from 'react-redux';
import { plus, minus } from './counter/countSlice01';

export default function App() {
  const count = useSelector(state => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <button onClick={() => dispatch(minus())}>-</button>
      Value: { count } 
      <button onClick={() => dispatch(plus())}>+</button>
    </div>
  );
}

• useSelector()로 스토어에서 현재 상태 값을 가져온다.
• useDispatch()를 통해 변경되는 값을 스토어로 전달한다.

끝.

React 16.8버전부터 새롭게 추가된 Hook은 기존 class를 사용하지 않고, React state와 lifecycle features를 연동할 수 있게 해주는 함수다.

기존 class를 사용한 React는 코드의 재사용성이 낮고, 작성하기 까다로우며, reloading이 신뢰하기 어렵다.

이러한 class가 가진 문제들을 함수형 컴포넌트 기능을 사용해 해결할 수 있는데, 함수형 컴포넌트는 state나 lifecycle을 직접 다룰 수 없다.

Hook은 함수형 컴포넌트가 class 컴포넌트의 역할을 할 수 있게 해준다.

useState

import React, { useState } frome 'react';
const [value, setValue] = useState(initialValue);

useState()는 함수형 컴포넌트에서도 가변적인 state를 지닐 수 있게 하는 Hook이다. useState()는 길이가 2인 배열을 반환하는데, 첫번째는 상태 값, 두 번째는 상태를 업데이트하는 함수이다.

_initalValue_는 초깃값으로 최초 렌더링 시에 한 번 사용된다. 해당 함수에 파라미터를 넣어 호출하면, 전달받은 바라미터 값이 바뀌고 컴포넌트는 정상적으로 리렌더링된다.

아래는 useState()를 사용해 만든 카운트업 예제

import React, { useState } from 'react';

export default function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      {`count: ${count}`}
      <button onClick={() => setCount(prev => prev + 1)}>+</button>
    </div>
  )
}

useRef

import React, { useRef } from 'react';
const valueRef = useRef(initalValue);

자바스크립트의 querySelector() 또는 getElememtById() 같이 DOM을 선택할때 사용하는 Hook이다.

React 컴포넌트에서 state는 상태를 바꾸는 함수를 호출한 이후 업데이트 된 상태를 조회할 수 있으나, useRef()를 사용할 경우 바로 조회가 가능하다.

아래는 useState()와 useRef()로 input에 입력한 value를 리셋하고 input 창을 포커싱하는 예제.

import React, { useState, useRef } from 'react'

export default function Practice09() {
  const input = useRef(null);
  const [text, setText] = useState("");

  const handleClick = () => {
    setText("");
    input.current.focus();
  }

  return (
    <div>
      <span>현재 value는 { text }입니다.</span><br />
      <input type="text" ref={ input } value={ text } onChange={(e) => setText(e.target.value)} />
      <button onClick={handleClick}>RESET</button>
    </div>
  )
}

useEffect

import React, { useEffect } from 'react';
useEffect(() => {}, []);

컴포넌트가 렌더링 될 때마다 특정 작업을 실행하게 하는 Hook.

useEffect()의 매개변수는 익명함수와 빈배열 두 가지 요소를 가진다. 배열은 빈 배열일때 처음 렌더링에만 실행되며, 값이 있으면 특정 상태 값이 업데이트 될 때만 실행된다. 마지막으로, 아예 배열이 생략된다면 리렌더링 될때마다 실행된다.

컴포넌트가 언마운트 되기전 또는 업데이트 직전 어떤 작업을 수행하고 싶다면, clean-up 함수를 반환해야한다.

clean-up 함수는 컴포넌트가 마운트 되기 전과 업데이트 전에 실행되며, 업데이트 전에 실행될 경우 업데이트 직전 state 값에 접근이 가능하다.

아래는 useState()와 useEffect()를 사용해 input 값이 3초 뒤 나오게 하는 예제로, useEffect()에 clean-up 함수를 넣어 value 값이 마지막 값으로만 나오게 설정했다.

import React, { useState, useEffect } from 'react'

export default function App() {
  const [value, setValue] = useState('');
  const [num, setNum] = useState("값을 입력하세요.");
  const [res, setRes] = useState("");
  useEffect(() => {
    if (value === "") {
      return setNum("값을 입력하세요.")
    } else {
      const a = setTimeout(() => setNum("3초 뒤 실행됩니다."), 0);
      const b = setTimeout(() => setNum("2초 뒤 실행됩니다."), 1000);
      const c = setTimeout(() => setNum("1초 뒤 실행됩니다."), 2000);
      const d = setTimeout(() => setNum("실행 완료"), 3000);
      const e = setTimeout(() => setRes(value), 3000);
      return () => {
        clearTimeout(a);
        clearTimeout(b);
        clearTimeout(c);
        clearTimeout(d);
        clearTimeout(e);
      }
    }
  }, [value]);
  return (
    <>
      <input 
        type="number"
        onChange={(e) => {setValue(e.target.value)}}
      />
      <br />
      { num }
      <br/>
      {`예상 값: ${ value }`}
      <br />
      {`출력 값: ${ res }`}
    </>
  )
}

useMemo

import React, { useMemo } from 'react';
const memoizationValue = useMemo(() => 함수, 배열);

React에서 컴포넌트의 렌더링은 계속해서 일어나고 있다. 간단한 구조라면 무리없이 재렌더링이 가능할 것이다. 그러나 복잡한 수식을 계산하는 등 리턴 값이 수초 이상 걸리는 구조라면 재렌더링할때마다 해당 수식이 다시 계산되는 일이 발생하며 UI에 지속적으로 지연이 발생된다.

이같은 상황은 memoization 기법을 활용하면 해결할 수 있다.

memoization은 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말한다. 중복 연산을 피할 수 있기 때문에 성능을 최적화할 수 있다는 장점이 있다.

useMemo()는 두 개의 인자를 받는다. 첫 번째는 결과값을 생성해주는 팩토리 함수이며, 두 번재는 기존 결과값을 재활용하는 입력값 배열이다.

useCallback

import React, { useCallback } from 'react';
const callBackValue = useCallback(() => 함수, 배열)

useCallback()은 함수를 memoization된 값을 반환하여 계속해서 동일한 값을 보내주는 역할을 한다.

useCallback()은 두 개의 인자를 가지며, 첫 번째는 인라인 콜백, 두 번째는 의존성 값의 배열을 받게 된다. 배열에 변경을 감지해야할 값을 넣어주면, 등록한 함수가 변경될 때마다 새로운 콜백함수를 생성하게 된다.

이것은 최적화된 자식 컴포넌트에 props로 콜백 함수를 내려줄 때 유용하다.

useMemo()는 memoization된 값을 반환하여 동일 계산 반복수행을 최소화시켜주는 반면, useCallback()은 memoization된 콜백을 반환하여 새로운 함수가 생성되는 것을 줄이는 역할을 한다는 차이점이 있다.

끝.

문제설명

자연수 N이 주어지면, N의 각 자릿수의 합을 구해서 return 하는 solution 함수를 만들어 주세요. 예를들어 N = 123이면 1 + 2 + 3 = 6을 return 하면 됩니다.

제한사항

• N의 범위 : 100,000,000 이하의 자연수

입출력 예

입출력 예 설명

입출력 예 #1 문제의 예시와 같습니다.

입출력 예 #2 9 + 8 + 7 = 24이므로 24를 return 하면 됩니다.

제출답안(오답)

function solution(n) {
    return String(n).split("").reduce((a, b) => Number(a) + Number(b));
}

풀이

function solution(n) {
    return String(n).split("").reduce((a, b) => Number(a) + Number(b), 0);
}

reduce() 메서드의 initialValue를 입력하지 않아 테스트를 통과하지 못했다. 꼭 써주도록하자.

문제설명

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

제한사항

• 문자열 전체의 짝/홀수 인덱스가 아니라, 단어(공백을 기준)별로 짝/홀수 인덱스를 판단해야합니다.
• 첫 번째 글자는 0번째 인덱스로 보아 짝수번째 알파벳으로 처리해야 합니다.

입출력 예

입출력 예 설명

"try hello world"는 세 단어 "try", "hello", "world"로 구성되어 있습니다. 각 단어의 짝수번째 문자를 대문자로, 홀수번째 문자를 소문자로 바꾸면 "TrY", "HeLlO", "WoRlD"입니다. 따라서 "TrY HeLlO WoRlD" 를 리턴합니다.

제출답안

function solution(s) {
    return s.split(" ").map(a => a.split("").map((b, idx) => idx % 2 === 0 ? b.toUpperCase() : b.toLowerCase()).join('')).join(' ');
}

풀이

"try hello world"를 예로 들어보자. 공백을 기준으로 짝수 홀수가 나누어진다. 따라서 split()로 문장을 단어로 한 번 나누고, 단어를 글자로 한 번 더 나눠야한다. 이것을 다시 이어 붙이려면 join() 역시 두 번 필요하다. 또한 그 내부의 map() 또한 두 개 필요하다. 마지막 map() 메서드에서 짝수와 홀수를 나눠 각각 대문자와 소문자로 구분해주면 답안을 완성할 수 있다.

Programmers JavaScript Lv.1 [하샤드 수]

문제설명

양의 정수 x가 하샤드 수이려면 x의 자릿수의 합으로 x가 나누어져야 합니다. 예를 들어 18의 자릿수 합은 1+8=9이고, 18은 9로 나누어 떨어지므로 18은 하샤드 수입니다. 자연수 x를 입력받아 x가 하샤드 수인지 아닌지 검사하는 함수, solution을 완성해주세요.

제한 조건

• x는 1 이상, 10000 이하인 정수입니다.

입출력 예

입출력 예 설명

입출력 예 #1 10의 모든 자릿수의 합은 1입니다. 10은 1로 나누어 떨어지므로 10은 하샤드 수입니다.

입출력 예 #2 12의 모든 자릿수의 합은 3입니다. 12는 3으로 나누어 떨어지므로 12는 하샤드 수입니다.

입출력 예 #3 11의 모든 자릿수의 합은 2입니다. 11은 2로 나누어 떨어지지 않으므로 11는 하샤드 수가 아닙니다.

입출력 예 #4 13의 모든 자릿수의 합은 4입니다. 13은 4로 나누어 떨어지지 않으므로 13은 하샤드 수가 아닙니다.

제출답안

function solution(x) {
    var answer = true;
    var arr = String(x).split("").reduce((a, b) => Number(a) + Number(b));
    answer = x % arr === 0 ? true : false;
    return answer;
}

풀이

split() 메서드는 string 값이어야 사용할 수 있다. x를 string 값으로 만들고 그것을 배열로 나눈 뒤 reduce()를 통해 이것을 더해야한다. 그러나 x의 값은 현재 string 값이기 때문에 number 값으로 변환해야한다.

Programmers JavaScript Lv.1 [시저 암호]

문제설명

어떤 문장의 각 알파벳을 일정한 거리만큼 밀어서 다른 알파벳으로 바꾸는 암호화 방식을 시저 암호라고 합니다. 예를 들어 "AB"는 1만큼 밀면 "BC"가 되고, 3만큼 밀면 "DE"가 됩니다. "z"는 1만큼 밀면 "a"가 됩니다. 문자열 s와 거리 n을 입력받아 s를 n만큼 민 암호문을 만드는 함수, solution을 완성해 보세요.

제한조건

• 공백은 아무리 밀어도 공백입니다.
• s는 알파벳 소문자, 대문자, 공백으로만 이루어져 있습니다.
• s의 길이는 8000이하입니다.
• n은 1 이상, 25이하인 자연수입니다.

  입출력 예

  s	n	result
  "AB"	1	"BC"
  "z"	1	"a"
  "a B z"	4	"e F d"

제출답안

function solution(s, n) {
    return s.split("").map((e)=>{
        if (e == " "){
            return e;
        }
        const a = e.charCodeAt()
        return e.toUpperCase().charCodeAt()+n > 90 
            ? String.fromCharCode(a+n-26) 
            : String.fromCharCode(a+n)
    }).join('');
}

풀이

아스키코드를 사용해서 문제를 풀어야 한다.

문제설명

이 문제에는 표준 입력으로 두 개의 정수 n과 m이 주어집니다. 별(*) 문자를 이용해 가로의 길이가 n, 세로의 길이가 m인 직사각형 형태를 출력해보세요.

제한사항

• n과 m은 각각 1000 이하인 자연수입니다.

입출력 예

process.stdin.setEncoding('utf8');
process.stdin.on('data', data => {
    const n = data.split(" ");
    const a = Number(n[0]), b = Number(n[1]);
    console.log(a);
    console.log(b);
});

제출답안

process.stdin.setEncoding('utf8');
process.stdin.on('data', data => {
    const n = data.split(" ");
    const a = Number(n[0]), b = Number(n[1]);
    const star = "*".repeat(a);
    for (let i = 0; i < b; i++) {
        console.log(star);
    }
});

// => 테스트 통과!

끝.

대충 아래와 같은...

대충 자바스크립트와 CSS로 슬라이드와 슬라이드 그리고 슬라이드를 만드는...

그런데 JSON 파일 데이터를 추출하는 건 배운 적이 없는데?

...

도와줘잉

JSON 파일 가져오기

아래의 list.json 파일을 js 파일로 가져와 보자. list.json 파일은 다는 아니고 몇개만 밑에 적어보겠다.(너무 길어)

[
  {
    "date": "2022.05.01",
    "inOut": "in",
    "type": "profit",
    "item": "용돈",
    "price": 300000
  },
  {
    "date": "2022.05.02",
    "inOut": "out",
    "type": "taxi",
    "item": "택시",
    "price": 8900
  },
  {
    "date": "2022.05.03",
    "inOut": "out",
    "type": "edu",
    "item": "교보문고",
    "price": 23000
  },
  {
    "date": "2022.05.04",
    "inOut": "out",
    "type": "eatout",
    "item": "스타벅스신사역점",
    "price": 18000
  },
  {
    "date": "2022.05.05",
    "inOut": "out",
    "type": "eatout",
    "item": "씨유화곡미라클점",
    "price": 3000
  },
  {
    "date": "2022.05.06",
    "inOut": "out",
    "type": "daily",
    "item": "다이소",
    "price": 12000
  },
  {
    "date": "2022.05.07",
    "inOut": "out",
    "type": "eatout",
    "item": "비트박스(강남점)",
    "price": 15000
  },
  {
    "date": "2022.05.08",
    "inOut": "out",
    "type": "eatout",
    "item": "매드클라운포갈릭(강남점)",
    "price": 230000
  }
]

위의 파일을 js 파일로 가져와보자.

fetch("./json/list.json")
.then((res) => {
  return res.json()
})
.then((obj) => {
  List(obj);
})

먼저 _fetch_에 url로 요청을 보내 바로 뒤에오는 응답에 대해 json()을 해줘야 한다.

fetch 를 실행하면, 원격 저장소의 최신 이력을 확인할 수 있다. 사실 경로를 보면 fetch 필요없다. import 쓰면 됨. 그러나 이번 토이 프로젝트에서 제공된 json 파일은 원격 저장소 주소로 요청을 보내는 것이었다.

이제 url로 요청을 한 뒤 .then을 이용해 바로 뒤 응답에 대해 json()을 해서 정보를 가져올 수 있지만, 이대론 가져온 정보를 바로 쓸 순 없다. 한번 더 .then을 사용해야 제대로된 정보를 가져올 수 있다.

받아온 정보를 이제 우리가 만들 List() 함수에 담아주면 json 정보를 사용할 수 있다.

HTML & CSS 구조 파악하기

우리가 만들어야할 리스트의 구조는 다음과 같다.

HTML에서 id 값을 "receipt"로 가지고 있는 ul 태그에 div 태그와 li 태그가 있다. 그리고 해당 태그 안에는 각각 span 태그 두 개가 위치하고 있다. HTML 코드로 표현하면 아래와 같다.

<ul id="receipt">
  <div>
    <span>2022.05.08</span>
    <span>238,000원 지출</span>
  </div>
  <li>
    <span>하늘섬플레이스(강남점)</span>
    <span>8,000원</span>
  </li>
  <li>
    <span>매드클라운포갈릭(강남점)</span>
    <span>23,000원</span>
  </li>
</ul>

ul 태그 내부에 span 태그들을 div로 감싼 형태로 한 것은 CSS 상에서 편의를 위한 것이다. 이렇게 표현했지만 ul 태그를 제외하고 전부 javascript에서 만들기 때문에 실제로 HTML 상 코드는 아래와 같다.

<ul id="receipt"></ul>

날짜 출력하기

funciton List(obj) {
  // ...
}

위와 같은 List() 함수가 실행되면, 먼저 예시처럼 "2022.05.08"과 같은 날짜 데이터를 출력한다. 그리고 해당 날짜 데이터를 기준으로 결내 내역 중 지출 가격을 모두 더해 따로 출력한다. 또 날짜 데이터를 기준으로 각각 결제 장소와 결제 가격을 출력하는데, 소득이 발생했을 경우 지출과 다른 색으로 출력할 수 있도록 할 것이다.

먼저 날짜 데이터를 추출해보자

const date = obj.map(v => v.date);
    const arr = new Array(date);
    const arrZero = arr[0];
    const arrUni = arrZero.filter((val, idx) => {
      return arrZero.indexOf(val) === idx;
    })
    const arrReverse = arrUni.reverse();
    for (let i = 0; i < arrReverse.length; i++) {
      const D = arrReverse[i];

      const ulEl = document.querySelector('#receipt');
      const dataWrap = document.createElement('div');
      const dateName = document.createElement('span');

      dateName.className = "dateName";
      dateName.textContent = D;

      ulEl.appendChild(dataWrap);
      dataWrap.appendChild(dateName);
}

먼저 map()을 통해 list.json에서 날짜(date)만 추출해 그것을 new Array(date)를 통해 배열로 만들어주자. 이렇게 하면 arr은 우리가 원하는 날짜 배열을 한번 더 감싼 형태로 값을 내보내준다. 즉 우리가 원하는 값은 arr[0]에 있다.

이것을 filter()와 indexOf() 메서드를 이용해 중복된 날짜 데이터들을 정리해주자.

위와 같이 출력된 날짜 데이터를 for 구문으로 돌리면 되겠지만, 문제는 우리가 표현할 리스트가 최신 날짜 순으로 되어있다. reverse() 메서드를 이용해 배열을 거꾸로 바꿔주자. 다음 for 구문을 통해 이것을 배열의 길이 값까지 반복시켜주자.

이 다음 div 태그와 span 태그를 만들고, span 태그에 textContent 내용을 for 구문을 반복시켜 추출한 값으로 지정해주자.

마지막으로 appendChild로 HTMl의 ul 태그 내부에 이때까지 만든 코드들을 붙여주자. 이렇게 하면 json 파일에 들어있는 날짜 5월 1일부터 8일까지가 하나 하나 리스트에 출력될 것이다.

일별 지출 금액 출력하기

const ulEl = document.querySelector('#receipt');
const dataWrap = document.createElement('div');
const plusPrice = document.createElement('span');
plusPrice.className ="plusPrice";

const DPrice = obj.map(
        v => v.date === D && v.inOut === 'out' ? v.price : null)
        .reduce((a, b) => {return a + b}, 0);

const changeD1Price = DPrice.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');

plusPrice.textContent = `${changeD1Price}원 지출`;

ulEl.appendChild(dataWrap);
dataWrap.appendChild(plusPrice);

먼저 map을 통해 json 파일 중 가격(price) 값을 가져올 것인데, 삼항연산자를 이용해서 날짜(date) 값이 똑같은 경우와 지출여부(inOut)가 'out'일 경우만 가져오도록 한다. 그리고 그것을 reduce() 메서드를 통해 더해주면 지출 값이 나온다.

이것을 아래와 같은 코드에 붙여 작성하면 값의 세자리마다 콤마를 찍어 출력할 수 있다.

.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');

그리고 그것을 백틱을 이용해 '원 지출'이라는 텍스트를 붙여 출력해주자.

결제 내역 출력하기

for (let i = 0; i < obj.length; i++) {
  const date = obj[i].date;
  const inOut = obj[i].inOut;
  const item = obj[i].item;
  const price = obj[i].price;
  const changePrice = price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');

  if (date === D) {
    const liItem = document.createElement('span');
    const liPrice = document.createElement('span');
    const listWrap = document.createElement('li');
    liItem.textContent = `${item}`;

    if (inOut === 'out') {
      liPrice.classList.add('out');
      liPrice.textContent = `${changePrice}원`; 
    } else {
      liPrice.classList.add('in');
      liPrice.textContent = `${changePrice}원`; 
    }

    ulEl.appendChild(listWrap);
    listWrap.appendChild(liItem);
    listWrap.appendChild(liPrice);
  }
}

for 구문을 이용해서 json 파일 배열의 길이만큼 반복해주자. 반복한 값 중 위의 for 구문을 통해 반복되고 있는 날짜(D)와 일치 할 때만 결제 장소(item)를 출력하게 하자. 그리고 그 중에서 지출여부(inOut)이 'out'일 경우 해당 span에 클래스 이름에 'out'을 더해주고, 'in'일 경우 'in'을 더해주면서 각각 결제금액을 출력하게 하자. 여기서 추가한 'in'과 'out'은 CSS 상에서 색상을 다르게 나타게 할 것이다.

위의 코드를 모두 합치면 다음과 같다.

fetch("./json/list-01.json")
.then((res) => {
  return res.json()
})
.then((obj) => {
  List(obj);
})

  function List(obj) {

    // 날짜 배열 추출
    const date = obj.map(v => v.date);
    const arr = new Array(date);
    const arrZero = arr[0];
    const arrUni = arrZero.filter((val, idx) => {
      return arrZero.indexOf(val) === idx;
    })
    const arrReverse = arrUni.reverse();
    for (let i = 0; i < arrSorts.length; i++) {
      const D = arrReverse[i]; // 날짜 추출

      // 지출 합산 & 날짜 표시 추출
      const ulEl = document.querySelector('#receipt');
      const dataWrap = document.createElement('div');
      const dateName = document.createElement('span');

      // 날짜 표시
      dateName.className = "dateName";
      dateName.textContent = D;

      // 지출 합산
      const plusPrice = document.createElement('span');
      plusPrice.className ="plusPrice";

      const DPrice = obj.map(
        v => v.date === D && v.inOut === 'out' ? v.price : null)
        .reduce((a, b) => {return a + b}, 0
      );

      const changeD1Price = DPrice.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');

      plusPrice.textContent = `${changeD1Price}원 지출`;

      ulEl.appendChild(dataWrap);
      dataWrap.appendChild(dateName);
      dataWrap.appendChild(plusPrice);

      // 결제 내역 추출
      for (let i = 0; i < obj.length; i++) {
        const date = obj[i].date;
        const inOut = obj[i].inOut;
        const item = obj[i].item;
        const price = obj[i].price;
        const changePrice = price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');

        if (date === D) {
          const liItem = document.createElement('div');
          const liPrice = document.createElement('div');
          const listWrap = document.createElement('li');

          liItem.textContent = `${item}`;

          if (inOut === 'out') {
            liPrice.classList.add('out');

            liPrice.textContent = `${changePrice}원`; 
          } else {
            liPrice.classList.add('in');
            liPrice.textContent = `${changePrice}원`; 
          }

          ulEl.appendChild(listWrap);
          listWrap.appendChild(liItem);
          listWrap.appendChild(liPrice);
        }
      }
    }
  }

출력 결과

Netlify 배포 링크

끝.

• React로 To Do List 만들기
• input 입력 값 15자로 제한하기
• To Do List 삭제하기
• To Do List 10개로 제한하기
• To Do List LocalStorage에 저장하기

코드 살펴보기

import './App.css';
import { useState, useEffect } from "react";

function App() {
  const [toDo, setToDo] = useState("");
  const [toDos, setToDos] = useState([]);
  const onChange = (event) => setToDo(event.target.value);
  const onSubmit = (event) => {
    event.preventDefault();
    if (toDo === "") {
      return;
    }
    if (toDos.length < 10) {
      setToDos((currentArray) => [toDo, ...currentArray]);
    } else {
      return alert("등록된 리스트가 너무 많습니다.");
    }
    setToDo("");
  };
  const onClick = (idx) => {
    setToDos(toDos.filter((_, toDoIdx) => idx !== toDoIdx));
  }
  useEffect(() => {
    const data = localStorage.getItem('toDoList');
    if (data) {
      setToDos(JSON.parse(data));
    }
  }, []);
  useEffect(() => {
    localStorage.setItem('toDoList', JSON.stringify(toDos));
  }, [toDos]);

  return (
    <div className="box">
      <div className="todo">
        <h1>너의 할 일은。</h1>
        <span className="sub">"아직 한 적 없는 일을, 찾고 있어"</span>
        <form
          className="list" 
          onSubmit={onSubmit}>
          <input 
            onChange={onChange} 
            maxLength={15}
            value={toDo} 
            type="text" 
            placeholder="Write your to do..." 
          />
          <button>
          <span className="material-symbols-outlined">add</span>
          </button>
        </form>
        <ul>
          {toDos.map((item, idx) => (
            <li 
              key={idx}
            >
              {item}
              <button onClick={() => onClick(idx)}>
              <span className="material-symbols-outlined">delete_forever</span>
              </button>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

export default App;

To Do List 만들기

input창에서 onChange를 사용해 입력된 값을 toDo와 setToDo를 이용해 받는다.

form 태그에 쌓여진 button 태그가 하나일때, button 태그를 활성화한다면 form 태그 전체를 활성화시킬 수 있다. 이것을 이용해 _button_를 누르면, onSubmit이 실행되도록 하자. onSubmit으로 인해 제출된 toDo는 값이 비었을 경우 아무것도 실행되지 않고, 값이 있을 경우 아래와 같은 코드로 실행된다.

setToDos((currentArray) => [toDo, ...currentArray]);

...은 기존의 배열 값을 의미한다. 아래와 같은 예시를 들어보자

const str1 = [1, 2, 3, 4];
const str2 = [5, str1];
const str3 = [5, ...str1];

console.log(str2); // => [5, Array(4)]
console.log(str3); // => [5, 1, 2, 3, 4]

위의 예시대로 ...을 사용하면 기존의 배열에 새로운 값을 더할 수 있다. 즉 기존의 toDo에 새로운 값을 계속 더할 수 있다는 의미다.

toDo가 onSubmit됐다면, input 창을 비워주기 위해 setToDo("");를 실행해준다. onSubmit으로 등록된 toDo 값은 하단의 _ul_태그에서 map()을 통해 출력된다.

map() 메서드 알아보기

map()은 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다. 사용방법은 아래와 같다.

arr.map(callback(currentValue, index, array), thisArg)

• currentValue : 현재 처리할 요소.
• index : 처리할 현재 요소의 인덱스.
• array : map()을 호출한 배열.
• thisArg : callback을 실행할 때 this로 사용되는 값.

map() 메서드 자세히 알아보기

여기서는 item 값만 줘도 되나, index 값을 따로 주지 않으면 콘솔 창에서 key 값을 줘야한다고 경고 메세지가 뜬다.

여기까지 코드를 작성했으면, 아래와 같이 input 창에 To Do List를 작성하고 To Do List를 ul 태그에 출력할 수 있을 것이다.

input 입력 값 15자로 제한하기

너무 많은 글자를 작성하지 못 하도록 input 태그에 maxLength를 사용하여 아래와 같이 글자 수를 제한할 수 있다.

<input maxLength={15} />

To Do List 삭제하기

To DO List가 추가된 ul 태그의 button 태그에 onClick 기능을 추가해 filter()를 활용한 함수를 실행하게 하자.

filter() 메서드 알아보기

filter()는 배열의 요소를 순차적으로 순회하면서 조건에 일치하는 요소를 모아 새로운 배열을 반환한다. 사용 방법은 아래와 같다.

arr.filter(callback(element, index, array), thisArg)

element : 처리할 현재 요소. index : 처리할 현재 요소의 인덱스. array : filter를 호출한 배열. thisArg : callback을 실행할 때 this로 사용하는 값.

filter()를 테스트를 통과한 요소들로 이루어진 새로운 배열이 반환되며, 어떠한 요소도 통과하지 못하면 빈 배열이 반환된다. 예를들어, 아래와 같은 배열에서 5의 배수인 요소만 추출하고 싶을때 filter() 메서드를 사용하면 된다.

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const answer = arr.filter(arr => arr > 5)
console.log(answer); // => [6, 7, 8, 9]

onClick(idx)을 통해 버튼을 클릭했을 때 삭제 기능을 넣은 함수를 실행하게 한 뒤 filter() 메서드를 사용해 코드를 아래와 같이 작성해보자. idx는 toDos의 배열 번호라고 생각하면 된다.

const onClick = (idx) => {
    setToDos(toDos.filter((_, toDoIdx) => idx !== toDoIdx));
  }

toDos 배열 안에서 filter() 메서드를 사용해서 배열 번호를 toDoidx로 선언해주자. 앞의 element요소는 삭제 기능에 필요없는 부분이므로 언더스코어(_)를 써준다. 작성을 하지않으면 삭제 기능이 이루어지지 않으니 꼭 작성해주자. 그리고 익명함수를 통해 우리가 클릭한 배열 번호(삭제할 To Do)가 현재 toDos가 가지고 있는 배열 번호 중 일치하지 않는 것만 출력해주도록 작성해주면 된다.

이렇게 코드를 작성하면 _li_에 속한 To Do List가 아래와 같이 삭제된다.

To Do List 10개로 제한하기

위의 To Do List 배열을 더해주는 코드에 if문을 씌워 10개 이하일때 동작하게하고, 10개 초과일시 alert()를 실행해 알림 메세지를 띄워주자.

if (toDos.length < 10) {
      setToDos((currentArray) => [toDo, ...currentArray]);
    } else {
      return alert("등록된 리스트가 너무 많습니다.");
    }

To Do List LocalStorage에 저장하기

To Do List를 LocalStorage에 저장하기 위해서는 useEffect()를 사용해야 한다. useEffect()는 React 컴포넌트가 렌더링될 때마다 특정 작업을 실행할 수 있도록하는 역할을 한다. useEffect()는 컴포넌트가 처음 렌더링될때 한 번 실행되고, 배열로 지정된 useState()의 값이 변경되면 다시 실행된다. 이러한 기능으로 하나의 값이 변동될때마다 전체 컴포넌트를 렌더링하지 않아 부담을 줄일 수 있다. 사용 방법은 아래와 같다.

const [name, setName] = useState();
useEffect(() => {
  console.log("Hello!");  
}, [name]);

첫 번째 렌더링이 될 때 console.log("Hello!")를 한 번, name이 변할 때마다 다시 console.log("Hello!")를 한 번 더 출력하는 코드다. 위의 예시를 이용해 To Do List를 LocalStorage에 저장해보자.

useEffect(() => {
    localStorage.setItem('toDoList', JSON.stringify(toDos));
  }, [toDos]);

위와 같이 'toDoList'라는 이름으로 새로 저장되는 배열 toDos를 LocalStorage에 저장할 수 있다. 이때 LocalStorage는 object를 저장할 수 없기에 JSON.stringify()를 이용해 string으로 바꿔 저장할 수 있다.

useEffect(() => {
    const data = localStorage.getItem('toDoList');
    if (data) {
      setToDos(JSON.parse(data));
    }, []);

저장된 값은 위의 getItem()을 이용해 불러올 수 있는데, 이때 string으로 변환된 값을 JSON.parse()을 이용해 object 값으로 다시 바꿔줘야한다. 또한 LocalStorage가 비어있을 경우 아무 것도 출력되지 않도록 if문을 추가한다.

배포 링크 코드 보기

끝.

문제설명

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

제한사항

• phone_number는 길이 4 이상, 20이하인 문자열입니다.

입출력 예

제출답안

<script>
  function solution(phone_number) {
    const asterlisk = "*".repeat(phone_number.length -4);
    const number = phone_number.substr(-4);
    const answer = asterlisk + number;
    return answer;
  }
  // => 테스트 통과!
</script>

정답해설

repeat 알아보기

repeat()는 문자열을 주어진 횟수만큼 반복해 붙인 새로운 문자열을 반환한다. 사용 방법은 아래와 같다.

<script>
  str.repeat(count);
</script>

count는 문자열을 반복할 횟수이고, 0과 양의 무한대 사이의 정수여야 한다.

substr, slice, substring 알아보기

substr()

substr() 문자열에서 특정 위치에서 시작하여 특정 문자 수 만큼의 문자들을 반환한다. 사용 방법은 아래와 같다.

<script>
  str.substr(start, length);
</script>

start는 추출하고자 하는 문자열의 시작 위치이며, length는 추출하고자 하는 문자열의 총 합이다. length 값을 지정하지 않으면 start부터 문자열 전체를 값으로 한다.

start가 양수일 경우, 문자의 길이 보다 작으면 빈문자열이 리턴된다. start가 음수일 경우, start의 _index_는 문자열의 뒤에서부터 시작된다.

** 그.런.데. **

MDN에서 위와 같은 경고 메세지가 있었다. 앞으론 slice() 써야겠지...

slice()

slice()는 어떤 배열의 시작부터 끝까지에 대한 얕은 복사본을 새로운 배열 객체로 반환한다. 원본 배열은 바뀌지 않는다. 사용 방법은 아래와 같다.

<script>
  str.slice(start, end);
</script>

start는 검색구간의 시작지점이며, end는 검색구간의 종료지점이다. end 값을 지정하지 않으면 str.length-1을 입력한 것과 같다. start가 음수일 경우, start의 _index_는 문자열의 뒤에서부터 시작된다.

substring()

substring은 string 객체의 시작 인덱스로 부터 종료 인덱스 전 까지 문자열의 부분 문자열을 반환한다. 사용 방법은 아래와 같다.

<script>
  str.substring(start, end);
</script>

start는 반환문자열의 시작 인덱스, end는 반환문자열의 마지막 인덱스이다. end가 생략된 경우, 문자의 끝까지 모든 문자를 추출한다. start와 end가 같을 경우 빈 문자열을 추출한다. start 값이 end 값보다 클 경우 두 개의 인자를 바꾼 듯 작동하게 된다. 아래의 예제를 보자.

<script>
  const str = "Hello";
  str.substring(1,3) // => "el"
  str.substring(3,1) // => "el"
</script>

정규표현식으로 표현하기

위의 문제는 정규표현식으로 출력할 수 있다.

<script>
  function solution(phone_number) {
    return phone_number.replace(/\d(?=\d{4})/g, "*");
  }
  // => 테스트 통과!
</script>

React 앱 환경에서 분명 아래와 같이 console.log()를 한 번 작성했는데 개발서버 화면에서는 두 번 출력되고 있었다.

<script>
  console.log('뭐지 콩신의 저주인가?')
  function() {
    return(
      <div>Hello World!<div>
    );
  }
  export default Hello;
</script>

이런 현상은 StrictMode 때문인데, React 환경에서 작성한 코드를 출력하기 위해 만든 index.js 파일에 가면 볼 수 있다.

<script>
  import { StrictMode } from "react";
  import { createRoot } from "react-dom/client";
  import Hello from "./hello";

  const rootElement = document.getElementById("root");
  const root = createRoot(rootElement);

  root.render(
    <StrictMode>
      <Hello />
    </StrictMode>
  );
</script>

StrictMode는 앱에서 잠재적인 문제를 알아내기 위한 도구로, Fragment와 같이 UI를 렌더링하지 않고 자손들에 대한 부가적인 검사와 경고를 활성화한다. StrictMode는 다음과 같은 부분에서 도움을 줄 수 있다.

• 안전하지 않은 생명주기를 사용하는 컴포넌트 발견
• 레거시 문자열 ref 사용에 대한 경고
• 권장되지 않는 findDOMNode 사용에 대한 경고
• 예상치 못한 부작용 검사
• 레거시 context API 검사

StrictMode는 개발 모드에서만 활성화되기 때문에, 프로덕션 빌드에는 영향을 끼치지 않는다. 즉 console.log()가 두 번 뜨는 것은 StrictMode로 인한 정상적인 상황으로, 만약 이것이 거슬린다면 index.js에서 출력할 파일을 감싸고 있는 <StrictMode></StrictMode>를 제거하면 된다.

StrictMode 자세히 알아보기