게시판 작업시 해당 게시글 클릭하면 파라미터 id값에 맞춰 콘텐츠 맵핑하는 방법

📍 api 주소도

[mock.js]

server.get('/api/v1/cms/notice/detail/:boardID')`

📍 게시판 상세 페이지

import { useParams } from 'react-router';

// 상세 페이지 콘텐츠 내용 불러오기 위해서 useParams를 사용한다.
// useParams는 react-router에서 제공해주는 메서드다.

const path: BoradProps = useParams();
const [notice, setNotice] = useState<string>('');

useEffect(() => {
  if (path.boardID) {
   try {
      const getNotice = async () => {
       const data = await 불러오는메서드.get(`/api/v1/cms/notice/detail/:${boardID}`);
       setNotice(data.data);
    }
     
   // 💛 api 불러오기
    getNotice();
   } catch (error) {
      console.log('error---->', error);
    }
 }
},[path]);

📍 라우터

import { Route } from 'react-router';

<Route exact path={'menu/board-view/:boardID'} component={BoardView} />

라우트 할 주소의 파라미터값도 boardID 이 동일한 값으로 해주어야 받아올 수 있다.

⭐️ 파라미터 값은 동일해야 된다! 가 상세페이지 만드는 데 포인트다. ⭐️

설정

1. Preferences > Plugins > Prettier를 검색해서 설치 후 재부팅

설치

npm install --save-dev --save-exact prettier
또는
yarn add --dev --exact prettier

경로지정

JavaScript 기준으로,
Preferences > Languages & Frameworks > JavaScript > Prettier > Prettier package에서 prettier 관련된 경로를 선택

module.exports = {
  bracketSpacing: false, // 객체 리터럴의 괄호 사이의 공간
  jsxBracketSameLine: true, // JSX 요소의 마지막 라인에 '>' 특수기호를 같은 라인|다음 라인
  singleQuote: true, // 쿼테이션 마크를 1개|2개
  trailingComma: 'all', // 끝에 ','를 붙임('es5'(기본), 'none', 'all' 3개의 옵션)
  tabWidth: 2, // 탭의 넓이
};

더 많은 옵션들

https://prettier.io/docs/en/options.html

참고 : https://kotlinworld.com/266

글로벌 설정

git config --global user.name "[user name]"
git config --global user.email "[user emial]"

로컬 설정

git config --local user.name "[user name]"
git config --local user.email "[user emial]"

import { Outlet, useLocation } from 'react-router-dom'; 리액트 라우트 돔에서 제공해주는 useLocation은 window.location을 의미한다.

이가 제공하는 메서드는 이러하다.

• hash
• pathname
• search
• state

    const useLink = currentLocation.pathname.split('/')[1];

pathname은 /project/파라미터값 이렇게 출력 되는데, / 이 짝대기 기준으로 단어들을 쪼갠 후 배열화시켜서 거기서 project가 있는 값을 뽑아내면 된다.

실제값 -> ["", "project", "파라미터값"] 이렇게 출력돼 나온다.

그러면 이제, 내가 원하는 값은 project이기 때문에 const useLink = currentLocation.pathname.split('/')[1]; 이렇게 표현한 것이다. [1]

조건식

const sameLink = (bgImgLink: string) => {
        switch (bgImgLink) {
            case 'project':
            case 'document':
            case 'member':
            case 'faq':
                return false;
            default:
                return true;
        }
    };

project, document, member, faq 단어가 들어간 링크에는 wrap이라는 클래스를 적용하고 싶지 않아서, switch 문으로 해당 링크일 때는 split으로 쪼갠 현재 위치를 넣어서 return 시 false으로 출력되지 않도록 했다. 그리고 기본적으로는 wrap이라는 클래스가 적용되도록 default 값을 ture로 해주었다.

😁 적용한 태그

<div className={cx('ctnbody', sameLink(useLink) && 'wrap')}>
      <Outlet />
 </div>

이처럼 sameLink 라는 함수에 useLink 라는 쪼갠 키워드를 파라미터로 넘겨주어서 그게 합당하다면 wrap이라는 클래스를 적용 하건 말건 하는 코드를 구현했다.

결과

project, document ... 등등을 제외한 나머지 페이지들은 wrap이라는 클래스가 적용됐다.

위 처럼 구현하기 전 실수했던 것들.

OR 연산자인 || 를 사용해서

<div className={cx('ctnbody', sameLink('project' || 'member' || 'faq') && 'wrap')}>
      <Outlet />
 </div>

이렇게 했었는데 그렇게 하면 첫 번째 값만 인정됐다. 그래서 내가 원하는 결과가 안나왔음. 내가 원하는 결과가 나오게 하려면 switch 문으로 조건식을 제대로 걸어서 작업해야 결과가 나왔다.

참고하기 : https://ko.javascript.info/nullish-coalescing-operator

핫 리로드 설정하기

• 저장하면 알아서 자동으로 반영된다.

$npm i react-hot-loader 설치하기

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Board1 from './pages/board1';
import Board2 from './pages/board2';
import { hot } from 'react-hot-loader';

const App = () => {
    return (
        <Router>
            <Routes>
                <Route path="/" element={<Board1 />} />
                <Route path="/board2" element={<Board2 />} />
            </Routes>
        </Router>
    );
};

export default hot(module)(App);

✨ 리액트 폴링 Polling 하는 방법

아래와 같이 api 변수를 만들어서 setState에 데이터를 넣어준다.

       const domesticState = async (dayParams: {}) => {
        const rankApi = await fetcher(METHOD.GET, `/domestic/rank?toDate=${dayParams}`);
        const globalKrwApi = await fetcher(METHOD.GET, `/domestic/total?toDate=${dayParams}`);
        const coinListApi = await fetcher(METHOD.GET, `/domestic/coinList?toDate=${dayParams}`);

        setRankList(rankApi.data);
        setGlobalKrw(globalKrwApi.data);
        setCoinList(coinListApi.data);
    };

 useEffect(() => {
        let polling = setInterval(() => {
            domesticState(todayCall);
        }, 60000);

        if (clickDay.replaceAll('-', '') !== todayCall) {
            clearInterval(polling);
            domesticState(changeDay);
        } else {
            domesticState(changeDay);
        }

        // 페이지에 벗어날 경우 polling X
        return () => {
            clearInterval(polling);
        };
    }, [clickDay]);

그리고 setInterval 를 사용하여 주기 시간을 넣고 (60000 = 1분)
1분에 한 번씩 api를 새롭게 call 시킴으로서 실시간으로 변동되는 api를 보여줄 수가 있다.
그리고 만일에 조건에 따라 polling을 멈추어야 한다면 if문을 사용해서 clearInterval를 해준다.
clearInterval를 해줄 때는 setInterval로 id값을 넣어서 중지시켜준다 !

📍그리고 useEffect를 사용해서 페이지가 벗어날때 willdidmount
됏을 때를 생각해서도 retrun문 안에다가 clearInterval을 해준다.

🟡 Axios

Axios는 Promise 기반으로 XHRHttpRequests 요청을 쉽게 할 수 있습니다.

예제

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })

여기서 {} 안에 있는 것이 params 이다.

fetcher 라는 모듈 생성

import axios from 'axios';
import { METHOD } from './type';

const apis = axios.create({
    baseURL: `${process.env.REACT_APP_CMS_URL}`, // 기본 서버 주소 입력
});

const fetcher = async (method: METHOD, url: string, params?: any) => {
    try {
        // 📍 method = get, post, put, delete 여부 & url = baseURL 뒤에 올 api 주소 & params 는 config
        const res = await apis[method](url, {params});
        return res.data;
    } catch (error: any) {
        console.log('error-->', error);
        return error;
    }
};

export default fetcher;

fetcher 라는 모듈을 만들어서 데이터 불러올 때 매개변수 값을 넣어 받아오는데, 매개변수 값에 params 라는 이름으로 config 의 값을 넣는다.

params 사용

const res = await fetcher(METHOD.GET, `/api/v1/cms/notices`, {
            pageNo: boardInfo.pageNumber,
            pageSize: boardInfo.size,
            categoryId: boardInfo.categoryId
        });

fetcher 라는 모듈을 사용한 예제이다. 세번째 파라미터가 바로 config 역할을 하는데, 이 config는 api 주소인 /api/v1/cms/notices의 파라미터 역할을 해준다. /api/v1/cms/notices?pageNo=${boardInfo.pageNumber}?pageSize=${boardInfo.size}?categoryId=${boardInfo.categoryId} 라고 보면된다.

config 타입 AxiosRequestConfig

axios.get(url: string, config?: AxiosRequestConfig<any> | undefined)

이런식으루 지정하여

const res = await axios.get('https://fake-api.kindacode.com/tutorials', {
        params: {
          paramOne: 'one',
          paramTwo: 'two',
          paramThree: 'three',
          foo: 1,
          bar: 2,
        },
      });

이렇게 config 값을 넘겨 줄 수도있다. 넘겨줄 때는 params 라는 명명으로 넘겨줘야한다.
저 위에있는 내용과

https://fake-api.kindacode.com/tutorials?paramOne=one&paramTwo=two&paramThree=three&foo=1&bar=2

이 url은 동일한 결과값을 나타낸다.

참고 : https://www.kindacode.com/snippet/axios-passing-query-parameters-in-get-post-requests/

moment.js

• 시간이 포함된 데이터를 받아 조작해야 할 경우 많이 사용되는 편리한 라이브러리입니다.
• 시간에 따라 실시간으로 변경 되게 만드는 것이 목표라면 사용해볼만 하다.
• moment에 대한 사용 설명법은 맨 아래에 기재 예정

설치

$npm i moment

선언

import moment from 'moment';
import 'moment/locale/ko';

현재 시간

const nowTime = moment().format('YYYY-MM-DD HH:mm:ss');
console.log('현재 시간', nowTime);

이 상태라면 F5 키를 눌렀을 때만 시간이 변경된다.

setInterval 사용하여 실시간 반영하기

• 실시간으로 시간을 변경하거나, 데이터를 갱신시킬 때는 setInterval을 사용해야한다.
• 다만, 리액트 훅에서 setInterval을 사용했을 때 예상대로 작동하지 않는 문제가 발생한다.

참고 https://overreacted.io/making-setinterval-declarative-with-react-hooks/

간략 설명하면, 다소 직관적이지 않다.

  useInterval(() => {
    // Your custom logic here
    setCount(count + 1);
  }, 1000);

이것을 사용하는 것을 더 추천한다. 왜냐면, 이것과 setInterval의 차이점은 인수가 '동적'이다.

• 아무튼 이런 복합적인 이유와 성능상의 이슈 때문에 커스텀 hook을 생성하여 setInterval을 사용할 수 가 있다.

커스텀 use Hooks setInterval

// useInterval.js 작성
import { useRef, useEffect } from "react";

export default function useInterval(callback, delay) {
    const savedCallback = useRef();

    useEffect(() => {
      // useEffect에 매개변수로 받은 콜백을 현재 Ref로 선언해준다.
      savedCallback.current = callback;
    });

    useEffect(() => {
      function tick() {
        savedCallback.current();
      }
        // useEffect에 Ref의 current를 setInterval를 delay 시간동안 해준다.
      let id = setInterval(tick, delay);
      // 언마운트되기전 clearInterval을 해준다.
      return () => clearInterval(id);
    }, [delay]);
  }

또 다른 방법으로, react-use의 useInterval 사용하기

📍import { useInterval } from 'react-use';

const LiveTimeContainer = () => {
  const [realTime, setRealTime] = useState(Date.now());

  // useInterval
  📍useInterval(() => {
    setRealTime(Date.now());
  }, 1000);

  return <div>{seconds}</div>
}

참고 https://haranglog.tistory.com/10

4. 얕은복사 깊은복사 개념

🎈4-1. 얕은복사 (shallow copy)란 ?

얕은복사

const obj1 = { a : b, b : 2 };
const obj2 = obj1;
 
console.log( obj1 === obj2 ); // true
console.log(obj1); // {a: 1, b: 2}
console.log(obj2); // {a: 1, b: 2}

이 예시처럼 객체를 직접 대입하는 경우 참조에 의한 할당이 이루어지므로 둘은 같은 데이터 (주소)를 가지고 있다. 이것을 얕은 복사라고 한다.

🎈4-2. 깊은 복사 (Deep copy)란 ?

깊은복사

const dog = {a: 1, b: 2};
const cat = {...dog};
cat.a = 100;
console.log(dog === cat) // false
console.log(cat.a) // 1

...(spread) 연산자를 통해 블록 안에 dog의 속성을 복사하며 cat에 할당하였다. 이제 dog와 cat은 다른 주소를 갖게 되었다. 메모리 참조가 다른 것.

파일 import 해올 때 파일 경로 깔끔하게 떨어지도록 하는 방법.

import fetcher from 'lib/api';
import { METHOD } from 'lib/type';

// jsconfig.json 또는 tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "src"
  }
}

https://abangpa1ace.tistory.com/255

💙 document.execCommand (deprecated)

export const clip = (): void => {
  let url = '';
  const textarea = document.createElement("textarea");
  document.body.appendChild(textarea);
  url = window.document.location.href;
  textarea.value = url;
  textarea.select();
  document.execCommand("copy");
  document.body.removeChild(textarea);
}

• url 변수를 생성한다.
• textarea는 임시로 생성하는 textarea 요소를 가르킨다. 이를 body에 추가한다.(appendChild)
• url에 현재 주소를 할당한다.(window.document.location.href) 그리고, textarea의 value에 이 url 값을 넣어준다.
• textarea를 선택한다.(select) 그 다음에, execCommand('copy') 메서드로 클립보드에 복사한다.
• 마지막으로, 불필요한 textarea 를 removeChild() 로 지워준다.

현재 링크 위치

const url = document.URL;

useRef로 엘리먼트 잡을 경우에는

$elSlide 이렇게 달러표시랑 el로 네이밍 지정하기
엘리먼트 포커스 뿐만 아닌 그냥 변수 저장하기 위해서는

const variable = useRef<{
   // 슬라이드 애니메이션 멈추기 위한 고유 id값
   slideStop: number,
   // 슬라이드 전체너비 - 유저 디바이스 너비 = slide 가장 끝 X 지점
   slideWidth: number,
   // 슬라이드 X값 위치
   slideCurrent: number,
   // 메인 Top10 이니?
   bTopTenMain: boolean
}>({
   slideStop: 0,
   slideWidth: 0,
   slideCurrent: 1,
   bTopTenMain: type === TopTenType.Main
});

이렇게 묶어서 사용하기.
boolearn 값이면 b로 시작하는 네이밍으로 짓기
왠만하면 const 사용하기. 그리고 타입 지정 꼭 하기
주석은 디테일하게 적을수록 좋다.

똑같은 && 연산자가 중복돼서 사용하게 될 경우에는

if() 쓰기

타입정의할 때 any는 쓰지말기. 하지만 모달일 경우는 어쩔 수 없음.

회사 업무 작업하면서 가상자산 코인 인기 TOP 10 의 리스트 아이템들이 자동 슬라이드되는 작업을 했다.

조건

• 슬라이드 스크롤 했을 경우 슬라이드 일시정지
  (1) 마우스 또는 터치 클릭했을 때 멈추고 땠을 때 2초뒤에 재실행
  (2) 스크롤 너비 끝까지 도달했을 경우 슬라이드 정지
  (3) 슬라이드는 추천 페이지라는 해당 페이지에서만 동작하고 메인 페이지에서는 미동작
  (4) 슬라이드는 X축 기준 좌우를 자유롭게 움직일 수 있도록

첫 번째 방식 (부드럽게 스크롤링 되도록)

자동 슬라이드 구현에 대한 구글링 예제들을 찾아보다가 CSS의 translateX 좌표를 이용하여 슬라이드 동작되도록 작업해봤다.
먼저 첫 페이지 진입할 때는 슬라이드 시작점인 0과 가상자산의 li 값 너비만큼 움직이기 위해 useState를 사용하여 상태관리를 선언했음

const [currentPos, setCurrentPos] = useState<number>(0); // 시작점 0,   변경될 위치값

• 슬라이드 스크롤 했을 경우 슬라이드 정지하기 위해서 useEffect로 제어
  그래서 slideEvent이라는 슬라이드 정지시켜주는 이벤트 함수를 따로 선언해놓고,
  스크롤을 하게 될 경우 슬라이드 정지 1번 작업을 해줬다.

• slideEvent 함수에다 setTimeout을 사용해서 일정시간을 주고 무한루프 돌게해서 슬라이드 동작되게 했다.

useEffect(() => {
   $elSlide.current.addEventListener('scroll', slideEvent);
 
   return () => {
      if ($elSlide.current) {
         $elSlide.current.removeEventListener('scroll', slideEvent);
      }
   };
}, []);

그리고 ul 태그의 스크롤 너비를 useRef로 측정해서 보기에 2번 작업했다.
x축의 스크롤 너비 메서드 = element.current.scrollWidth
유저 디바이스 너비 = element.current.clientWidth

<ul xss=removed>
    <li></li>
    <li></li>
    <li></li>
    
    (...)
</ul>

그리고 위처럼 useRef로 잡은 ul 태그에 직접적으로 스타일을 줘서 currentPos 상태를 제어했다.
그래서 이 너비 측정을 이용해서 스크롤이 되면서 x축의 스크롤이 전체 너비의 끝에 도달했을 경우
slideEvent 이 이벤트 함수에다가 clearTimeout 메서드로 setTimeout 으로 동작되는 것을 슬라이드 멈추게 함
그리고 clearTimeout 할 때는 이것도 useRef로 콜백함수를 넣어줄 고유 아이디 값을 선언해야한다.

const slideId = useRef<{timeId: number}>({timeId: 0})
이런식으로 사용할 수 있음. 그래서 이 slideId를 setTimeout을 걸어주는 곳에다가 대입하고, clearTimeout할 때는
clearTimeout(slideId) 해서 하면 setTimeout 걸어준 동작들이 멈춘다.

그리고 원래는 딱딱하게 움직였는데 스타일 쪽에다가

transition: 5s;
transition-timing-function: linear;

위와 같은 속성을 넣으니 부드럽게 움직였다.

메인화면에는 슬라이드가 미동작하고, 추천 화면에서는 슬라이드가 동작되게 하려면 이것도 useEffect 에다가 조건문을 걸어서 main 타입이 아닌 경우 (=추천 페이지화면)에 만 슬라이드 동작되는 이벤트를 호출해줌으로서 3번 작업도 완료했다,

😇 그래서 다 작업완료하고 나니 일어난 이슈

이렇게 translate를 제어하면서 작업하니 스크롤이 안되는 현상이 생겼다.
왜냐면 이미 translateX값이 지나버렸기 때문이다 ;;;

🙏 아무튼 스크롤의 전체 너비까지 도달했을 때 멈추고 스크롤이 되게 하기 위한
해결방법

requestAnimationFrame , cancelAnimationFrame, scrollTo (scrollLeft) 

위와 같은 메서드 사용했다.

requestAnimationFrame 란 ?

• 마치 setTimeout과 같은 역할을 해주는데 최적화된 속도로 부드러운 애니메이션을 표현하면서 성능은 최대한 확보해주는 역할을 해준다. setTimeout 사용할 때는 부드럽게 애니메이션을 주려면 별도로 스타일도 줘야했는데 이 메서드는
  이 메서드 자체에서 부드럽게 표현도 해주니 ㄱㅇㄷ임

👋 사용방법은 이렇다.

const fnSlideRender = () => {
   if (!$elSlide.current) {
      return;
   }
 
   // 슬라이드 X값 위치 0.3px씩 움직이기
   variable.current.slideCurrent += 0.3;
 
   // 스크롤 X축 현재 위치 (scrollLeft)
   $elSlide.current.scrollLeft = variable.current.slideCurrent;
 
   // 애니메이션 동작 시키기
   variable.current.slideStop = requestAnimationFrame(fnSlideRender);
 
   // X축 너비 끝까지 도달 시 애니메이션 멈추어
   // 현재 슬라이드 x값이 (스크롤 전체 너비 - 유저 디바이스 너비) 보다 작거나 크면
   if (variable.current.slideCurrent >= variable.current.slideWidth) {
      cancelAnimationFrame(variable.current.slideStop);
   }
};

기능 추가

• 스크롤 또는 터치로 인해 멈춰진 코인 슬라이드가 2초 후에 다시 움직이도록 하기

👅 구현 방법

const variable = useRef<{
   // 멈춘 슬라이드 2초 뒤 재실행
   timeOutRePlay: NodeJS.Timeout | 0
}>({
   timeOutRePlay: 0
});

(...)
 
const fnSameEvent = () => {
   cancelAnimationFrame(variable.current.slideStop);
 
   // setTimeout 이벤트가 2번 걸리지 않도록
   variable.current.timeOutRePlay && clearTimeout(variable.current.timeOutRePlay);
 
   // 멈춘 슬라이드 2초 뒤 재실행
   variable.current.timeOutRePlay = setTimeout(() => {
      // 멈춰진 곳 left 위치
      variable.current.slideCurrent = $elSlide.current?.scrollLeft || 0;
 
      // 슬라이드 실행
      variable.current.slideStop = requestAnimationFrame(fnSlideRender);
   }, 2000);
}

setTimeout으로 2초 후에 재실행 되도록 했다. 그리고 clearTimeout을 해주기 위해 id값을 받아와야 하는데 useRef에다가 timeOutRePlay 라는 값을 저장해서 clearTimeout할 때 이와같은 값으로 이벤트를 clear 시켰다.

🏳️ (warning)warning 발생

// addEventListener
const slideStopEvent = (eventName: string) => {
   $elSlide.current && $elSlide.current.addEventListener(eventName, fnSameEvent, { passive: true });
};
 
// removeEventListener
const slideStopCleanUp = (eventName: string) => {
        $elSlide.current && $elSlide.current.removeEventListener(eventName, fnSameEvent);
    };

addEventListener를 해줄 때 코드 안에 passive: true를 선언해줘야 한다.

그 이유는 passive 옵션의 기본 값은 항상 FALSE다. 그러나 이 기본 값으로 인해 터치 이벤트 등 일부 이벤트의 수신기가 스크롤을 처리 중인 브라우저 메인 스레드를 블록할 가능성이 생긴다. 따라서 스크롤 성능이 크게 저하될 수 있다.

그래서 이 문제를 방지하기 위해 일부 브라우저에서는 문서 레벨 노드인 window, document, touchstart, touchmove 이벤트에 대해서는 passive의 기본 값을 true로 바꿔서 적용한다.

이 passive 이벤트 수신기는 이벤트를 취소할 수 없으므로 사용자가 스크롤할 때 브라우저의 렌더링을 방해하지 않는다.

메인스레드란 ?

자바스크립트 코드 실행이나 브라우저 렌더링을 맡는 등 브라우저의 주된 동작이 수행되는 곳이다.

🔥 자동 슬라이드 부들거림 현상

다른 모바일 기기에서는 아무런 현상이 없었지만 특정 핸드폰인 <아이폰 10>에서 발생하는 이슈였다.
이러한 현상은 setInterval을 사용하여 개발하여 발생한 것임. 자바스크립트로 애니메이션을 구현할 경우 1초에 60프레임을 찍어내게 된다.
즉 1프레임을 찍어내는데 16.6ms를 초과하게 될 경우 리플로우 현상이 일어난다.
리플로우 현상이란 브라우저 렌더링하는 과정에서 [레이아웃 - 페인트 - 합성] 이런 과정이 발생하는 것인데, 이같은 현상 때문에 화면이 버벅거리는 이슈가 나타나게 된 것이다. 그래서 이를 해결하기 위해서 애니메이션을 최적화 해주는 메서드인 requestAnimationFrame 를 사용해서 해당 이슈를 해결해 나갈 수 있었다.

이 메서드는 브라우저 리소스와 컴퓨터의 CPU 성능을 고려하여 1초당 프레임 수를 조절해주어 애니메이션을 최적화 해주는 기능이 있다고 한다. 그래서 이를 통해 FPS (모니터 주사율) 제어함으로써 최종 결과물은 애니메이션 동작히 부들거림 현상이 사라졌다.
그래서 아이폰10 에서도 코인리스트의 자동 슬라이드가 부드럽게 렌더링 되도록 성능 최적화 됨

참고자료 : https://curryyou.tistory.com/520

antd 라이브러리 사용하였고 컴포넌트는 datePicker 사용했다.
오늘 날짜 이후로 미래 날짜를 클릭하지 못하게 비활성화 시키는 방법은
아래와같이 작업하면 된다.

<DatePicker
                onChange={onChange}
                className="dataInput"
                defaultValue={moment(today, 'YYYY-MM-DD')}
                👉disabledDate={(current: any) => {
                    const start: any = moment('2020-01-01', 'YYYY-MM-DD');
                    return current < start || current > moment();
                }}
            />

결과물

A 날부터 ~ B 날까지만 허용하고 그 외에는 닫아 버리기

코드펜 예제 코드

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import { DatePicker } from 'antd';

function disabledYear(current) {
  // return current.year() === 2021; // disabling 2021
  // return current.year() !== 2021; // disabling everything besides 2021
  // return current.year() !== (new Date).getFullYear(); // disabling everything besides current year
  // return current.year() > 2021; // disabling everything further than 2021
  return current.year() < 2021; // disabling everything in the past before 2021
  return [2018, 2019].includes(current.year()); // disabling 2018 and 2019
}

ReactDOM.render(
  <div>
    <DatePicker format="YYYY-MM-DD" disabledDate={disabledYear} />
  </div>,
  document.getElementById('root')
);

😵 실제 구현해본 코드

<DatePicker
                onChange={onChangeDate}
                className="dataInput"
                format="YYYY-MM-DD"
                disabledDate={(current: any) => {
                    return current.year() < 2020 || current >= moment().subtract(1, 'days').toDate();
                }}
            />

참고 https://stackoverflow.com/questions/46358603/disable-date-and-time-for-antd-datepicker
https://ant.design/components/date-picker/#header

버그 상황

파일은 보이나 폴더가 보이지 않습니다.

해결 방법

1. File -> Project Structure 클릭

2. Modules 클릭

3. +을 눌러 Import Module 클릭 합니다.

4. 자신의 프로젝트 Root 폴더를 선택 -> Next 클릭

5. OK 클릭

끝 ~~

이 방법이 안된다면 루트 디렉토리 안에 .idea 폴더를 삭제했다가 재실행 할 경우 오류 해결된다고 한다.

☠️ react for 문으로 JSX 리턴하기

const arrDealList = () => {
        const list = []; // 👉 담아낼 변수

        // 👉 실제 배열 변수 선언해야함 _ 배열의 길이만큼 반복문을 돌리자.
        for (let i = 0; i < domeRankList.length; i++) {
            list.push(<DealList rankName={domeRankList[i]} listName={coinList[i]} key={i} />);
        }
        // 👉 리턴 !
        return list;
    };

JSX

 return (
        <div className="domestic__coinlist">
            <Division coinName={coinList[0]} />
            {arrDealList()}  // 👉 리턴 된 함수 선언하여 list 뿌려주기
            (...)
        </div>
    )   

발표식으로 말하기

리덕스의 특징

• action, dispatch, reducer, store가 있다.
• action : action은 state를 바꾸는 방식이다. 반드시 type필드가 있어야 한다.
• dispatch : action을 발생시키는 것으로 action 객체를 파라미터로 받는다.
• reducer : 변화를 일으키는 함수로 action의 결과로 상태를 어떤 식으로 바꿀지 구체적으로 정의하는 부분
• store : 리덕스를 적용하기 위한 중앙 저장소 이며, 단 한 개만 가질 수 있다. 상태를 읽을 때는 getState() 상태를 바꿀 때는 dispatch()를 호출한다.
• 데이터 흐름을 단방향으로 흐르게 한다.
• 상태를 전역적으로 관리하기 때문에 어느 컴포넌트에 상태를 둬야할지 고민할 필요가 없게 한다.
• 상태관리에서 불변성 유지가 매우 중요하다. immer.js 라이브러리를 사용하여 불변성 유지를 따로 해주어야한다.
• flux 아키텍처를 따른다. 비동기 처리시 redux-saga나 redux-thunk같은 미들웨어가 필수이다.
• flux 구조란 ? 단방향 데이터 흐름을 가지는 구조는 데이터는 단방향으로만 흐르고, 새로운 데이터를 넣으면 처음부터 다시 시작되는 방식으로 설계되어있다.
• 데이터 흐름은 dispatch -> store -> view 순서이다. view에서 입력이 발생하면 액션을 통해 디스패치로 향하게 된다.
• 여러 라이브러리를 함께 사용하게 되니 러닝커브가 높은 편
• 액션 하나 추가하는데 작성이 필요한 부분이 많고 컴포넌트와 스토어를 연결하는 필수적인 부분들이 있어서 코드량이 상대적으로 많아진다.

import produce from "immer";

// 👉 초기상태 정의
const initialState = {
  movies: [],

  loadMovieLoading: false,
  loadMovieDone: false,
  loadMovieError: null,
};

// 화면 로딩 👉 타입정의
export const LOAD_MOVIES_REQUEST = "LOAD_MOVIES_REQUEST";
export const LOAD_MOVIES_SUCCESS = "LOAD_MOVIES_SUCCESS";
export const LOAD_MOVIES_FAILURE = "LOAD_MOVIES_FAILURE";

// 첫 번째 인수 현재 상태 (즉, 초기상태)
// 두 번째 인수 액션이 일어나야 될 상태 (dispatch)
// 👉 리듀서
const movies = (state = initialState, action) =>
  produce(state, (draft) => {
    switch (action.type) {
      case LOAD_MOVIES_REQUEST: {
        draft.loadMovieLoading = true;
          draft.loadMovieDone = false;
        break;
      }
      case LOAD_MOVIES_SUCCESS: {
        draft.movies = draft.movies.concat(action.data);
        draft.loadMovieLoading = false;
        draft.loadMovieDone = true;
        break;
      }
      case LOAD_MOVIES_FAILURE: {
        draft.loadMovieError = action.error;
        break;
      }

      default:
        return state;
    }
  });

  export default movies;

middleware 적용

import axios from "axios";
import { all, fork, call, put, takeLatest, delay } from "redux-saga/effects";

import {
  LOAD_MOVIES_REQUEST,
  LOAD_MOVIES_SUCCESS,
  LOAD_MOVIES_FAILURE,
} from "../reducers/movies";

function loadMoviesAPI() {
  return axios.get("https://yts-proxy.now.sh/list_movies.json?sort_by=rating");
}

function* loadMainPosts() {
  try {
    console.log("saga Movies");
    const result = yield call(loadMoviesAPI);
    yield delay(1000);

    yield put({
      type: LOAD_MOVIES_SUCCESS,
      data: result.data,
    });
  } catch (err) {
    console.error(err);
    yield put({
      type: LOAD_MOVIES_FAILURE,
      error: err.response.data,
    });
  }
}

function* watchLoadMainPosts() {
  yield takeLatest(LOAD_MOVIES_REQUEST, loadMainPosts);
}

export default function* postSaga() {
  yield all([fork(watchLoadMainPosts)]);
}

/*
  📍 fork : 함수호출(비동기)
  📍 call : 함수호출(동기)
  📍 put : 액션 dispatch
  📍 takeLatest : 액션이 dispatch되는 것을 기다려서 dispatch될때 generator를 호출 (맨 뒤에꺼만)
  📍 takeEvery : 액션이 dispatch되는 것을 기다려서 dispatch될때 generator를 호출 (전부)
*/

리덕스는 이러한 플로우를 지닌다.

mobx로 get 한 데이터들을 조회 할 때,
콘솔 로그로 찍어보니 Proxy {0: ... } 형태로 출력이 될 경우에 해결한 방법이다.

toJS(데이터값);

이렇게 호출하면 Proxy가 벗겨지고 내가 원하는 값이 나오게 된다.

렌더링된 DOM노드에 dangerouslySetInnerHTML태그를 사용하여
직접적으로 HTML을 삽입할 수 있습니다.

이러한 링크들은 미리 검사하여 방지할 필요가 있습니다.
dangerouslySetInnerHTML prop에 지정되기 전에 모든 값들을
dompurify와 같은 sanitization library를 사용하여 sanitize해주어야 합니다.

import purify from "dompurify";

(...)

<div dangerouslySetInnerHTML={{ __html:purify.sanitize(data) }} />

따라서 컨텐츠를 DOM nodes의 직접적으로 넣으려 DOM에 접근해서는 안됩니다.
dangerouslySetInnerHTML 태그를 사용할 경우 dompurify를 사용하여 HTML이 삽입되기 전 sanitize해주어야 합니다.

Recoil

참고 : https://recoiljs.org/ko/

특징

• 리코일은 페이스북에서 직접 만든 상태관리이다.
• 오직 리액트를 위한 상태관리이다
• 인터페이스 문법은 hook 함수처럼 사용된다.
• atom과 selector만을 사용해서 상태관리를 이룰 수 있다.

😶‍🌫️ Atoms는 컴포넌트가 구독할 수 있는 상태의 단위다.

😶‍🌫️ Selectors는 atoms 상태값을 동기 또는 비동기 방식을 통해 변환한다.

atoms

const fontSizeState = atom({
  key: 'fontSizeState',
  default: 14,
});

• key : 고유한 키가 필요

• default : React 컴포넌트의 상태처럼 기본값도 가진다.

• 컴포넌트에서 atom을 읽고 쓰려면 useRecoilState라는 훅을 사용한다. React의 useState와 비슷하지만 상태가 컴포넌트 간에 공유될 수 있다는 차이가 있다.

1. IntelliJ + git

이전에 커밋 내역으로 되돌리기
터미널 창 여는 곳에서 git 클릭 → 작업한 브런치의 작업 내역 (트리) 보면 되돌리고자 하는 커밋내역에 우클릭 → Reset Current Branch to here 클릭 → Hard 선택하고 Reset 클릭 하면 된다.

2. 다른 브런치 체크아웃 하기

상단 nav바에서 git 클릭 → Fetch 클릭 → Fetch 성공적으로 뜨면 하단 오른쪽에 브런치명 클릭 → 그럼 드롭리스트에 로컬 브런치랑 remote 브런치가 있음 → remote 브런치에 있는 브런치 체크아웃 해와야한다.

telnet 텔넷 설치

$brew tap theeternalsw0rd/telnet 
$brew install telnet

2. telnet 실행tel net 실행telnet

$telnet host_ip port

리액트에서 HTML 코드를 동적으로 추가하기 위해서는 기존에 JS에서 사용하던 방식과 다르다.
기존의 자바스크립트에서는 innerHTML를 사용해서 넣어준다면 정상적으로 동작했지만 리액트에서는 아래와 같이 작업을 해야 원하는 결과가 나온다.

import React from 'react';

export default () => {
   const htmlCode = "<div>안녕</div>";
   return <div dangerouslySetInnerHTML={{ __html: htmlCode }}>{htmlCode}</div>;
}

리액트에서는 dangerouslySetInnerHTML={{ __html: htmlCode }} 이와 같은 형태로 추가해줘야한다.

🟠 내가 사용한 방법

const [htmlCode, setHtmlCode] = useState<string>('');

useEffect(() => {
  try {
    const getNotice = async () => {
      const data = await httpService.get('데이터 주소');
      // 변경 될 상태관리에 data.content 넣기
      setHtmlCode(data.data.content);
   };
  getNotice();
  } catch (error) {
    console.log('error-->', error);
 }
},[])

🎈 특징

• Javascript에서 정수는 최대 15 자리까지 정확하다
• 정밀도 손실을 방지하려면 10진수 값을 숫자가 아닌 문자열로 직렬화
• Big number를 다루는 라이브러리 사용
• 빠르고 작으며 사용하기 쉽습니다.
• 8KB 축소 및 gzip

숫자에서 BigNumber를 생성할 때 BigNumber는 toString()기본 이진 값이 아닌 숫자의 10진수 값에서 생성됩니다. 후자가 필요한 경우 숫자 toString(2)값을 전달하고 기수 2를 지정합니다.

BigNumber를 쓰는 이유는 큰 단위의 수를 천단위(1,000)로 표기해주기 위해서 사용한다.

new BigNumber(Number.MAX_VALUE.toString(2), 2)

npm install bignumber.js

예를들어 큰 수를 다룰 때 쓰는데 보통 금액적인 것에 대해 이 라이브러리를 사용한다.
변동률 등락할 때 비교 기준을 잡고 BigNumber 라이브러리 메서드중 isGreaterThan은 0보다 값이 클 경우 사용.
isLessThan은 0보다 값이 작을 경우를 비교하여 쓴다.

그래서 주식창 같은데다 등락표시할 때 up & dwon 작업시 className을 적용해서 빨간색 파란색을 나타낸다.
0일 때는 검정색으로 적용시켜야 됨.

{new BigNumber(Math.abs(oRowData.chgRate)).toFormat()}%

실제 view 단에서 표기될 값은 실제 변동률로 보여준다.

🎈 isEqual

이것의 사용 방법은 isEqual(매개변수1, 매개변수2) 로 쓰이는데,
매개변수 1과 매개변수 2가 서로 같니? 라는 뜻으로 쓰는 메서드다.

isEqual 예제

if (_.isEqual(oCoinData, oldRowData)) {
   oldRowData.current = oCoinData;
   setRowData(oCoinData);
}

⭐️ props로 함수 데이터도 내려받을 수 있음

참고자료
https://github.com/MikeMcl/bignumber.js

모든 파일들 다른 폴더에 옮기기

파일 이동 명령어, 어떤 파일 옮길것인지, 어디에 옮길것 인지.

 mv * ../

현재 경로에 어떤 파일들이 있는지

ls

여기서 숨긴 파일까지 보고싶다면 ?

ls -al

[짤막글] Custom Hooks을 만들어보자!

https://velog.io/@kysung95/%EC%A7%A4%EB%A7%89%EA%B8%80-Custom-Hooks%EC%9D%84-%EB%A7%8C%EB%93%A4%EC%96%B4%EB%B3%B4%EC%9E%90

mobx 비동기 처리 예제로 알아보기

https://kyounghwan01.github.io/blog/React/mobx/async/#async-await-runinaction

[React] 부모-자식 컴포넌트 간의 데이터 전달 방법

https://technicolour.tistory.com/56

리액트 라우터(React Router) - URL Parameters, Query Parameters (+URLSearchParams)

https://velog.io/@wiostz98kr/TIL51-l-React-Router-3%ED%83%84

다크모드 구현

https://keating.vercel.app/2020-06-09-dark-mode/

최근 검색어 기능 구현해보기

https://velog.io/@hoon_dev/%EB%A6%AC%EC%95%A1%ED%8A%B8%EB%A1%9C-%EC%B5%9C%EA%B7%BC-%EA%B2%80%EC%83%89%EC%96%B4-%EA%B8%B0%EB%8A%A5-%EA%B5%AC%ED%98%84%ED%95%B4%EB%B3%B4%EA%B8%B0

Toast UI (react 및 JS 관련 지식 모음)

https://ui.toast.com/posts/ko/react

[짤막글] useRef가 뭔가요?

https://velog.io/@kysung95/%EC%A7%A4%EB%A7%89%EA%B8%80-useRef%EA%B0%80-%EB%AD%94%EA%B0%80%EC%9A%94#useref%EB%A1%9C-%EB%A6%AC%EB%A0%8C%EB%8D%94%EB%A7%81-%EB%B0%A9%EC%A7%80

[React] useEffect 를 이용해 스크롤 감지

https://velog.io/@dltmdwls15/React-useEffect-%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%B4-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EA%B0%90%EC%A7%80

[JS] 페이지 내 특정 위치로 스크롤 이동하기

https://gurtn.tistory.com/127

Element.getBoundingClientRect() DOMRect요소의 크기와 브라우저 뷰포트에 상대적인 위치에 대한 정보를 제공 하는 객체를 반환합니다.

https://kyounghwan01.github.io/blog/JS/JSbasic/getBoundingClientRect/#%E1%84%80%E1%85%AE%E1%84%86%E1%85%AE%E1%86%AB

06. useEffect Hook

https://2oneweek.dev/frontend/react/006.%20Hook%20-%20useEffect/

자바스크립트 이벤트 메서드 addEventListner 등등

https://chlolisher.tistory.com/10

componentDidMount 와 useEffect

https://velog.io/@ryong9rrr/componentDidMount-%EC%99%80-useEffect

[JS] 📚 window.open / close (새창 열기/닫기) 사용법 💯 정리

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-windowopen-%EC%A0%95%EB%A6%AC

🧏‍♀️ Kakao 소셜 연동 API 작업할 때

src/react-app-env.d.ts 파일에다가

interface Window {
   Kakao : any;
}

이런식으로 선언해서 사용할 때는

const kakao = window.Kakao;

이렇게 사용할 수 있다.

그리고 public/index.html 파일에

<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>

이렇게 상단에다 선언해주어야 카카오 소셜 공유하기 가능.
💁🏻‍♀️ 그리고 반드시 키값이 있어야한다.
키값은 카카오 developer 에 가서 앱 등록하면 키 값 얻어오기 가능하다.

JavaScript 키 : f661d4bba439f1455cefe8dfdfaa2b4513ee04 키값은 이렇게 생겨먹음.
이걸 env 환경 파일에다가 선언해서 갖다 쓰면된다.

• 📁 .env

REACT_APP_KAKAO_KEY=f661d4bba439f1aaaaa455cefe82b4513ee04

요런식 ! 갖다 쓸 때는 kakao.init(process.env.REACT_APP_KAKAO_KEY 이렇게 쓰면 된다.

🌚 다크모드 구현에 알아야 할 지식들

로컬 스토리지에 저장하고 테마 여부에 따라 다크모드 또는 라이트모드로 설정해주었다.

<Helmet>
   <html data-theme={mobx 상태관리에서 저장한 테마의 값을 불러옴} />;
</Helmet>

JSX 상에서는 이라는 react-helmet 라이브러리를 사용하여 다크모드 테마의 설정된 상태값을 불러온다.

🌤 react-helmet 특징

1. 서버 측 렌더링을 지원한다. (즉 SPA의 단점을 극복해줌)
2. 메타 태그를 각 페이지마다 다르게 정의할 수 있다.
3. SEO(검색엔진최적화) 가능. 이게 중요한 이유는 크롤러가 읽기 쉽도록 메타태그를 설정하여 사이트 정보를 제공하는 것이다.

🌚 localStorage

4가지 메서드가 있다 (setItem, getItem, clear, remove)

• setItem : 스토리지에 데이터를 넣어주는데, 반드시 key와 value로도 이루어진다. (객체 데이터 또한 사용이 가능하다)
  브라우저가 닫혀도 그대로 유지가 된다.
  세션 스토리지와 차이점은 개발자가 remove나 clear를 하기 전까지 삭제가 되지 않는다.
  setItem의 파라미터 매개변수 타입은 string이기 때문에 오브젝트로 되어있는 데이터 값을 JSON.stringity를 사용하여 string 타입으로 변환시켜주어야 한다.

그리고 조회를 할 때는 객체형으로 불러 와야하기 때문에 string화 된 타입을 다시 JSON.parse로 object식으로 변환하여 조회(get)한다.

✨ 로컬스토리지 메서드 종류

// JSON 으로 로컬 스토리지 데이터 생성
localStorage.setItem('key', JSON.stringity({ a: value }));
 
// JSON으로 스토리지 데이터 조회
JSON.parse(localStorage.getItem('key'));
 
// key에 해당하는 스토리지만 삭제
localStorage.remove('key')
 
// 모든 스토리지 삭제
localStorage.clear('key')

hook이란 ?

• 리액트 버전 16.8에 도입된 기능

함수형 컴포넌트

🖐 useState

초기 렌더링 시에 사용하는 값이다.
상태에 변화를 준다.

const [color, setColor] = useState<string>('red');

• useState 사용 예

const [color, setColor] = useState<string>('red');
 
const handleChange = () => {
    setColor('pink');
}
 
return (
    &lt;>
        &lt;button onClick={handleChange}&gt;
            컬러 변경
        &lt;/button&gt;
 
 
        <div xss=removed>컬러변경 버튼을 클릭하면 색깔이 변해요</div>
    &lt;/>
)

🖐 useEffect

브라우저가 화면을 그리고 난 뒤에 렌더링이 된다.
비동기로 호출해준다.

• useEffect 사용 예

useEffect(() => {
         
        감시 대상이 변하면 동작 할 콜백
 
    return () => {
 
 
    }
},[감시대상])

• useEffect 사용 예

// 첫 렌더링 후 실행된다
useEffect(() => {       
   콜백
},[])
 
 
// 페이지에서 떠날 때 실행
useEffect(() => {       
    return ()=> {
        console.log('bye~')
    }
},[])

 
// 감시대상이 변하면 동작되는 콜백함수
useEffect(() => {       
    콜백
},[감시 대상])
 
useEffect(() => {       
    consoloe.log(감시 대상)
    return ()=> {
        console.log('bye~')
    }
},[감시 대상])

🖐 useLayoutEffect

동기로 호출해준다.
브라우저가 화면을 그리기도 전에 실행해준다.

• useLayoutEffect 사용 예

useLayoutEffect(() => {
     
    return () => {
 
 
    }
},[])

만약 이 useLayoutEffect 안에 연산량이 많은 코드가 들어가게 된다면 사용자의 화면은 버벅임을 느낄 수가 있다.
그래서 브라우저가 화면을 그리고 난 뒤에 렌더링을 해주는 useEffect를 사용하는 것이 좋다.

메모제이션 훅

🖐 useCallback

렌더링 성능을 위해 사용

• 인터페이스

useCallback(() => {
    콜백함수
},[의존성])

// 매번 새롭게 생성된다
const hyunju = () => { }
 
// 매번 새롭게 생성되지 않는다.
const hyunju = callback(() => {
 
 
},[])
 
// a값이 변하지 않는 이상 매번 새롭게 생성되지 않는다.
const hyunju = callback(() => {
 
},[a])

DOM에 직접 접근하자 !

🖐 useRef

DOM 요소에 직접 접근하기 위해 돔 요소에 포커스를 줄 때 사용
렌더링과 무관한 값을 저장한다.
어떤 값이든 저장할 수 있다.
useState 처럼 초기값도 넣을 수 있다.

• 인터페이스

const TextInput = () => {   
    const inputRef = useRef<HTMLInputElement>(null);
     
    useEffect(() => {
     inputRef.current.focus();
    }, [])
 
    return (
    &lt;>
        &lt;input type="text" ref={inputRef} /&gt;
        &lt;button&gt;저장&lt;/button&gt;
    &lt;/>
  )
}

Window.localStorage

읽기 전용 속성을 사용하기 위한 것. 저장한 데이터는 브라우저 세션 간 공유된다.
로컬스토리지는 세션 스토리지와 비슷하지만 로컬스토리지의 데이터는 만료되지 않고, 세션 스토리지의 데이터는 페이지 세션이 끝날 때, 즉 페이지를 닫을 때 사라진다.

myStorage = window.localStorage;

추가

localStorage.setItem('키', '값');

읽기

const cat = localStorage.getItem('키');

제거

localStorage.removeItem('myCat');

로컬스토리지 전체 제거

localStorage.clear();

로컬스토리지는 문자열만 받아오기 때문에 number 값을 받아오고 싶다면

Number(localStorage.getItem("counter");

이런식으로 사용해줘야한다.

공지사항에 게시물이 롤링되는 작업을 했었다.

하는 방법

🍎 비즈니스 로직

  const [idx, setIdx] = useState(0);
  const idxRef = useRef(0);
  const [pressRelease, setPressRelease] = useState<MainPost[]>([]);

  (...)

  const getMainPressRelease = async () => {
        try {
            const res = await axios.get("/api/v1/cpc/main/board/list?board_master_id=CPC_PRESS_RELEASE&size=6");
            const resMobile = await axios.get("/api/v1/cpc/main/board/list?board_master_id=CPC_PRESS_RELEASE&size=1");
            setPressRelease(res.data);
            setPressReleaseMobile(resMobile.data);
            console.log(res.data);
        } catch (error) {
            console.log(error);
        }
    };

 // api 데이터 가동시키기
  useEffect(() => {
        getMainPressRelease();
    }, []);

// 🍒 가장 중요한 부분이다.
  useEffect(() => {
        // 롤링되도록 setInterval을 선언.
        const timer = setInterval(() => {
            const rolling = Number(idxRef.current) + 1;
            idxRef.current = rolling % 5; // 게시물 갯수
            setIdx(idxRef.current);
            console.log(idxRef.current);
        }, 3000);

      // 물론 clearInterver도 설정해줘야한다.
        return () => {
            console.log("clean interval");
            clearInterval(timer);
        };
    }, [ pressRelease.length]);

🍎 view 단 (=JSX)

return (
 <ul className={styles.article_list}>
                                    {contents.map((item: MainPost) => (
                                        <div key={item.id} style={{ transform: `translateY(-${28.8 * idx}px)`, transition: idx === 0 ? "" : "1s all" }}>
                                            <li>
                                                <Link className={styles.a} to={`/boardView/CPC_NOTICE/${item.id}`}>
                                                    <span className={styles.title}>{item.title}</span>
                                                    <span className={styles.date}>{moment(item.create_date).format("YYYY-MM-DD")}</span>
                                                </Link>
                                            </li>
                                        </div>
                                    ))}
                                </ul>
)

🍎 CSS 스타일

.article_list {
        font-size: 18px);
        line-height: 1.3;
        height: 50px;
        overflow: hidden;
}

이렇게 해주면 완성 !

https://safe.bithumbsystems.com/ --> 해당 사이트 메인 부분에 공지사항이랑 보도자료 부분 롤링되는 부분 구현 내용입니다.

🤵🏻‍♀️ 배포를 위한 과정들

전역 설정과 같은 환경변수를 사용하기 위해 env 파일을 활용할 수 있다.
앱의 버전 정보 또는 api 주소와 같은 정보를 전역변수처럼 사용할 수 있다.

$npm i env-cmd

설치!

1. env 파일을 추가한다.

• 변수명은 무조건 REACT_APP_로 시작해야 한다.

env 파일

REACT_APP_SERVER_API=http://localhost:8080

이런식으로 상용하는데 싱글 쿼터는 필요없다.
불러서 사용할 때는 이처럼 사용할 수 있다.

const serverAPI = process.env.REACT_APP_SERVER_API

.env 파일은 개발환경과 배포에 따라 다수의 파일을 생성하여 활용할 수 있다.
예를 들자면 이렇게.

.env-dev
.env-production
.env-local
.env-test
.env

앱 빌드에 따라서 적용되는 파일 우선순위는 이와 같다.

pagakage.json 파일속 script 부분

npm start: .env-dev, .env
npm run build: .env-production, .env
npm test: .env-test, .env

모든 env 파일은 중첩이 되고 왼쪽 파일이 우선순위가 가장 높다.
이 말은 즉슨 똑같은 환경변수가 선언된 경우 우측의 .env파일의 규칙이 가장 우선순위가 낮음.
뒤늦게 선언할 수록 우선순위 낮음

"scripts": {
    "start": "react-scripts start",
    "build": "env-cmd -f .env react-scripts  build",
    "build:prod": "env-cmd -f .env.production react-scripts  build && move build ./build_prod",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },

👨🏻‍✈️ 로컬 개발 .env.local

.env.local 파일은 .env를 덮어 쓰는 파일로 test 환경 외의 모든 환경에서 로딩된다.

👨🏻‍✈️ 개발환경 .env.development

$ npm run start
$ yarn start

👨🏻‍✈️ 서버 배포시 .env.production

.env.production 파일은 배포 환경 시 사용되며, 아래의 명령어를 치면 자동으로 사용된다. 만약, .env.production.local이 있다면, .env.production을 덮어쓴다.

$ npm run build 
$ yarn build

👨🏻‍✈️ 테스트 환경 .env.test

$ npm run test
$ yarn test

📒 자바스크립트 엔진 (동작하는 과정)

브라우저 자체에 내장되어있는 JS 엔진이 필요하다. 이것이 동작하는 시간을 런타임이라고 하는데 런타임 하는 과정에서 코드를 한 줄 한 줄 읽고 번역해서 실행을 해주는 것이 인터프리터 라고 한다. 보통 다른 프로그래밍 언어에서는 컴파일러가 필요하다. 컴파일러가 동작하는 방식은 자바로 예를 들면, 우리가 작성한 코드를 바로 실행할 수 있는 것은 아니고 실행하기 전 모든 코드를 컴파일링 하여 컴퓨터에서 실행할 수 있도록 한다.

📕 ECMAScirpt?

자바스크립트를 실행하기 위해서는 자바스크립트 엔진이 필요하고 각각의 브라우저 마다 각기 다른 엔진을 가지고 있고 그 버전 별로 작동되는 것도 다 다르다.
버전 5에서 strict mode와 getter, setter가 추가됐다.
이렇듯 버전이 새로워지면 추가된 것 기능들도 각기 다르기 때문에, 바벨을 사용한다.

바벨을 사용하면 버전 신경 안쓰고 사용할 수 있다.

📍 자바스크립트의 특징

자바스크립트는 가볍고 인터프리터를 이용해서 런타임 시 한 줄 한 줄 번역한다.
일급 함수를 가진 언어이다. 자바스크립트 엔진이 있는 어떤 곳이든 사용할 수 있다.
자바스크립트는 프로토타입을 베이스로 다양한 스타일로 구현이 가능하고 멀티 페러다임이다. 절차지향으로도 가능하고 객체지향으로도 가능하다. 싱글 쓰레드고, 다이나믹한 언어이다.

자바스크립트 언어 자체만으로는 할 수 있는 것이 그리 많지 않다.
브라우저에 무언가를 출력하고 싶다면 외부환경에 출력 할 만한 라이브러리를 사용해야 한다.
그리고 네트워크 통신을 하려면 통신을 할 라이브러리를 사용해야 한다.
이와 마찬가지로 브라우저에 동작하고자 한다면 프론트엔드 지식이 있어야한다.

🌐 브라우저

• 특정한 UI 요소를 보여주는 DOM API
• 네트워크를 통신 해줄 네트워크 API
• 오디오와 비디오를 제공해주는 오디오 관련된 API
• 콘솔로그에 관련된 API

이와 같은 지식들도 필요하다. 자바스크립트는 그냥 언어일 뿐이다.
자바스크립트를 잘하면 브라우저와 노드 JS를 넘나들며 프론트와 백엔드도 능숙능란하게 다룰 수 있다.

PC와 MO버전 같이 작업하는 반응형 웹 프로젝트 작업 중에 일어난 경우다.
localhost:3000에서 pc로 봤을 때는 잘 보이는데, 개발자도구에서 모바일로 변경 후 새로고침하면
모바일 버전으로 맞춤형 돼서 잘 나와야하는데 인터넷 연결이 실패됐다는 크롬 다이노와 함께 에러 문구가 떳다.

이런 상황에서 크롬 디버그 먹통이라고 한다.
또 다른 예로는 console.log('text')라는 코드가 있어도 콘솔창에 메시지가 뜨지 않는 경우를 볼 수가 있다.
버튼에 이벤트를 줘도 이벤트가 실행이 되지 않을 경우도 마찬가지다.

크롬 디버그 먹통 해결방법

설정들을 원상복구 해주면 된다.

이와같이 톱니바퀴(=setting)를 클릭하면 디버그 모드 설정창으로 전환된다.

Restore defaults and reload 라는 버튼을 클릭하면 된다.
무슨 의미냐면 모든 크롬 디버그 설정들을 기본값으로 되돌리면 된다는 의미다. (= 크롬 디버그 설정 초기화)
이렇게 하고나니 크롬 디버그 먹통, 멈춤 현상을 사라지고 제대로 잘 작동 되는것을 볼 수 있었다.

목차

1. toFixed() 함수
2. Math.round() 함수
3. Math.floor() 함수
4. Math.ceil() 함수
5. toPrecision() 함수

1. toFixed() 함수

소수 자릿수로 반올림된 숫자를 문자열 타입으로 반환한다.

(123.678).toFixed();
// 124

(123.678).toFixed(1);
// 123.7

2. Math.round() 함수

가장 가까운 정수로 반올림된 숫자를 반환합니다.

Math.round(123.456);
// 123

Math.round(123.678);
// 124

Math.round(123.9191);
// 124

3. Math.floor() 함수

가장 가까운 정수로 내림된 숫자를 반환

Math.floor(123.456);
// 123

Math.floor(123.678);
// 123

4. Math. ceil() 함수

가장 가까운 정수로 올림된 숫자를 반환

Math.ceil(123.456);
// 124

Math.ceil(123.678);
// 124

5.toPrecision() 함수

전달된 값만큼 표현할 수의 길이를 제한하며, 숫자를 문자열 타입으로 반환

이밖에 다양한 숫자관련 메서드가 존재한다.

참고
https://developer-talk.tistory.com/304
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/random

🍊 모바일일 때 텍스트 긴거 ... 처리

JSX 코드

    {
          item.title!.length<25
          ? <span className={`${styles.title} ${styles.shorts}`}>{item.title}</span>
          : <span className={styles.title}>{item.title}</span>
      }

이렇게 텍스트 길이로 측정해서 스타일을 주는 방법도 있다.

CSS

 .title {
              🍓 display: inline-block;
              🍓 white-space: nowrap;
              🍓 overflow: hidden;
              🍓 text-overflow: ellipsis;
              🍓 width: 58% !important;
              &.shorts {
                  width: 55% !important;
                  text-overflow: clip;
              }
          }

이렇게 width 값을 주고 ... 처리하기 위해서는 🍓 로 표기해놈

👉 현재 브라우저가 어떤 것인지 알기 위해 userAgent를 사용한다.

userAgent란 ?

브라우저에 대한 식별 코드로 사람으로 생각하면 "주민 등록증" 과 같은 것 식별되는 것은 컴퓨터(단말기)에 대한 OS 정보, 브라우저 버전, 레이아웃 엔진 종류 등 담아서 항상 서버와 통신할 때 접속자 정보를 뜻한다.

코드예제

var userAgent = window.navigator.userAgent;
var isChrome = userAgent.indexOf('Chrome');
var isChromeMobile = userAgent.indexOf('CriOS');
var isSamsungBrowser = userAgent.indexOf('SamsungBrowser');
var isWindows = userAgent.indexOf('Windows NT');
var isEdge = userAgent.indexOf('Edge');
var isIE = userAgent.indexOf('Trident');

이런 느낌으로 사용하면 되고, IF문으로 작업할 때는

var isChrome = userAgent.indexOf('Chrome');

// 크롬일경우
if(isChrome > -1) {

}

// 크롬이 아닐 경우
if(isChrome === -1) {

}

이런식으로 사용하면 된다. if문으로 적절하게 커스텀해서 사용하면됨.

Navigator 란?

Navigator 인터페이스는 사용자 에이전트의 상태와 신원 정보를 나타내며, 스크립트로 해당 정보를 질의할 때와 애플리케이션을 특정 활동에 등록할 때 사용합니다.

Navigator.userAgent.indexOf('브라우저명')

if(navigator.userAgent.indexOf('SamsungBrowser') > -1){
     
}

👉 참고자료
codepen 예시
https://codepen.io/zineeworld/pen/oJyZOq
[JS] User Agent 브라우저 정보 얻기 (크롬인지 아닌지 체크하기)
https://zinee-world.tistory.com/512
https://developer.mozilla.org/ko/docs/Web/API/Window/navigator#%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80_%ED%98%B8%ED%99%98%EC%84%B1
Window.navigator MDN
https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%9B%B9%ED%8E%98%EC%9D%B4%EC%A7%80%EC%97%90-%EC%A0%91%EC%86%8D%ED%95%98%EB%8A%94-%EA%B8%B0%EA%B8%B0%EB%AA%A8%EB%B0%94%EC%9D%BC%ED%83%9C%EB%B8%94%EB%A6%BFPC-%EA%B5%AC%EB%B6%84%ED%95%98%EA%B8%B0

🎽 메모리

• 하드디스크 / 계산하는데 필요한 연산CPU / 메모리
• 메모리 셀은 1byte로 만들어져있다.
• 어플리케이션을 구동하는데는 메모리 코드, 변수 데이터, 실행순서를 보관하는 스택, 여러가지 데이터를 묶어놓은 객체 heap 이 필요하다.

😒 어플리케이션 실행

1. 입력
2. 처리 ---> 프로세스
3. 출력 ---> 스토리지 같은 곳에 저장도 가능하다.
   ⭐️ 프로그래밍에 있어서 입력 처리 출력 가장 중요 ! ⭐️
   제일 기본적인 것은 처리다.
   처리 하기 위해서는 변수가 필요하다.

🧐 변수란 ?

• 값을 저장하는 공간을 의미
• 자료를 저장할 수 있는 이름이 주어진 기억 장소다.
• let, const 같은 키워드를 사용할 수 있다.
• 변수 선언 let a;
• 값을 할당하고자 한다면 ? let a = 0;
• let은 값을 재할당할 수 있다. a = 1; 이처럼 값을 재할당함ㅎㅎ
  그러면 메모리 어딘가에 0이라는 값이 저장되어 있다. 그럼 이제 메모리 셀에 메모리 주소들이 들어있다. 그리고 저 변수의 이름은 a라고 한다. 변수이름이라고 부르기도하고 식별자라고 부르기도 한다.

🤩 변수 이름 짓기

• 저장된 값을 잘 나타낼 수 있는 의미 있는 이름
• 구체적일 수록 좋다.
• 예약어(키워드)를 사용하면 안된다. ex) if, for, functinon, import 뭐 이런 것들
• 라틴문자(0-9, a-z, A-Z), _, 대소문자 구분, camelCase (단어가 2개 일 때), 한국어는 쓰지말기
• 숫자로 시작하는 방식도 안된다.
• 특수문자도 안된다. (_, $ 이 2가지 제외)
• 이모지 사용도 안된다.
• 변수는 항상 영어로 시작해야한다.
• 여러개의 변수를 1,2,3 숫자로 구분하는 것도 안좋다.

🤬 나쁜예제

// 나쁜 예
let number = 20;

// 좋은 예
let myAge = 20;

이런식으로 구체적으로 이름을 짓는 것을 선호한다.

😳 데이터 타입

원시형(단일 데이터)과 객체형(복합 데이터)으로 나눌 수가 있다. 단일 데이터 (number, string, boolean, null, undefined, symbol) 복합 데이터 (object, array, function)

(1) 숫자형

• 정수, 음수, 실수, 2진수, 8진수, 16진수 모두 변수에 담을 수 있다.

let integer = 123; // 정수
let negative = -123; // 음수
let double = 1.23; // 실수

let binary = 0b1111011; // 2진수
let octal = 0o173; // 8진수
let hex = 0x7b; // 16진수

만일 숫자를 출력할 때 출력값이 infinity나 -infinity 값이 나오면 안된다.
그리고 숫자와 텍스트를 조합하여 계산식을 낸다면 NaN이라는 값이 출력된다.

(2) 문자열

• string을 의미한다. "" 쌍따옴표나 '' 싱글따옴표로도 나타낼 수 있다. 또 다른 방법으로는 `` 꺽세를 사용해서 문자열을 나타낼 수 있다.
• 템플릿 리터럴 : `` 꺽세를 사용해서 문자열과 객체를 한 번에 불러오는 방식을 말한다. ex) '안녕!', ${title} 이런식으로 사용할 수 있다.

(3) 불리언 타입 (boolean)

• 참 true / 거짓 false 에 따른 결과값을 얻는다.

let isFree = ture; // 참인 값
let isActivated = false; // 거짓인 값

console.log(!!0); // flase 값이 나온다.
console.log(!!-0); // flase 값이 나온다.
console.log(!!''); // flase 값이 나온다.
console.log(!!null); // flase 값이 나온다.
console.log(!!undefined); // flase 값이 나온다.
console.log(!!Nan); // flase 값이 나온다.

console.log(!!1); // true 값이 나온다.
console.log(!!-1); // true 값이 나온다.
console.log(!!'text'); // true 값이 나온다.
console.log(!!{}); // true 값이 나온다.
console.log(!!Infinity); // true 값이 나온다.

느낌표 2개를 붙히면 값을 true나 flase로 변환할 수 있다.
느낌표 2개 + 텅텅 빈 애들은 false 값이 나오고 느낌표 2개 + 무언가가 있는 애들은 true 값이 나온다고 보면 된다.

(4) null과 undefined 타입

• 이 둘은 비슷한 것 같지만 미묘하게 다르다.
• value : 뭔가 있음
• null : 뭔가 없음
• undefined : 아무것도 확정되어있지 않음.

let title; // 아직 활성화 된 무언가가 있는지 없는지 모르는 상태
title = null; // 활성화된 무언가가 없는 상태

그래서 null을 할당하면 object로 취급한다.
하지만 undefined는 아무것도 확정되지 않은 상태이기 때문에 콘솔로그에 출력하게 된다면 그대로 undefined가 출력된다.

typeof

• 어떤 타입인지 확인할 수 있는 키워드

복합데이터인 객체를 알아보자. Object

• 상태나 행동을 묶어 나타낼 수 있다.

{ key : value }

이렇게 나타낼 수 있다.

앱에 메모리 상에 data와 stack에는 원시형 데이터가 들어가게 된다. 그리고 heap존에는 객체가 들어가게 된다.

let apple = {
  name: 'apple',
  color: 'red',
  display: '🍎'
}

이렇게 생긴 것을 객체로 볼 수 있다.

🥯 값과 참조의 차이

let a = 1;
let b = a; // 1

b=2; // 재할당시 ? 이제 2가 된다.

• 이 원리를 copy by value 라고 말한다.

그리고 이런 동작이 객체로 가면 달라진다

let apple = {
   name : 'apple'
}
let orange = apple; 

• 오렌지에 애플을 할당한다면 ? 저 주소값이 복사되어 할당된다.
• 이 원리를 copy by reference 라고 말한다.

apple.name = 'orange'

라고 바꾸면 name이 동일하게 orange로 변경된다.

🥨 정리

• 원시타입은 값이 복사되어 전달된다.
• 객체타입은 참조값(메모리주소, 레퍼런스)이 복사되어 전달된다.

상수 변수 const

• let은 재할당이 가능하다.
• const 재할당이 불가능하다.

let a = 1;
a = 2; // ---> 가능

const text = 'hello';
text='bye'; // ---> 불가.

• 상수는 항상 대문자로 사용해주는 것이 좋다.
• 재할당 불가능한 상수변수 또는 변수

const MAX_FRUITS = 5;

const apple = {
  name: 'apple',
  color: 'red',
  display: '🍎'
}

하지만 객체에 있는 내용물들을 변경할 수 있는 방법이 있다.

apple.name = 'orange'; // 이렇게 해주면
console.log(apple); // 결과값이 바뀐 것을 볼 수 있다.

얘네 들이 가르키고 있는 특정한 object 내부를 수정하는 것이므로 변경이 가능하다.

타입 확인하는 법 typeof

• 데이터 타입을 확인한다.
• 값을 타입 문자열로 반환

let variable;
console.log(typeof variable); // undefined

variable = '';
console.log(typeof variable); // string

variable = 1;
console.log(typeof variable); // number

자바스크립트는 동적으로 실행될 때 어떤 값이 할당 됐느냐에 따라 타입이 결정된다.

🔎 검색 구현

(1) 최근 검색한 키워드 → 키워드를 검색 후 해당 아이템을 클릭 했을 때 이벤트 걸기

중복된 검색어가 있을 경우 옛날 기록은 지워지고 최신 기록을 앞으로 당긴다.
검색 키워드 내역 10개 까지만 보여지도록 ! 11개 째부터 사라지고 새롭게 추가된다.

사용한 메서드 filter, _(lodash), unshift, pop, localstorage

조건 1. 중복된 검색어가 있다면

_ lodash

if (_.filter(검색된 리스트, 검색한 키워드).length > 0) {
    ...
}

검색된 리스트에 내가 검색한 키워드 값이 있다면 1 없다면 -1이다. (indexOf) 같은 역할을 해준다.

그러므로 있을 경우 0보다 클테니 부등호를 사용하여 조건을 걸어주고 블록안에 새로운 배열을 만들어질 수 있도록 코드 로직을 생성한다.

📍 filter

keywordList = keywordList.filter((item) => {
   // item의 검색명과 내가 클릭한 검색 결과 아이템이 다른 애들은 앞으로 보내기
   return item.coin !== newCoinMarket.coin || item.market !== newCoinMarket.market;
});

// 새로운 배열에 내가 클릭한 객체를 새로 추가해주자
keywordList.unshift(newCoinMarket);
}

filter와 map은 새로운 배열을 만들어주는 ES6 문법이다. 그래서 전역변수로 선언된 keywordList의 새로운 배열값을 만들어주는데, 이처럼 반환된 값이 현재 있던 item의 coin과 내가 찾고자 한 coin이 일치하지 않으면서 ~ ( || (OR) 연산자) market 또한 일치하지 않는 다른 애들은 앞으로 보내준다. (unShift) 이렇게 filter로 하여금 새로운 배열을 만들어준다.

그리고 새로운 배열이 만들어진 keywordList 배열에 내가 클릭한 아이템을 새로 추가해줌으로서 최근 검색한 검색명에 중복된 애들은 한 번에 취합돼서 최신 기록 순서로 옮겨지게 되고 중복된 값들은 앞으로 가면서 new 배열값이 생기도록 했다.

📍 작업하면서 헷갈린 것.

화살표함수에서 값을 반환할 때, function 함수와는 달리
const sum = (num1, num2) => num1 + num2 이렇게 블록 없이 처리가 가능하다.

하지만 블록안에서는 retrun을 사용해야한다.

arrow 함수 return?

const sum = (num1, num2) => {
 return num1 + num2;
}

조건 2. 중복된 아이템이 없을 경우 → 보여질 수 있는 아이템은 최대 10개 처리

unShift로 리스트에 아이템 추가하기

조건 3. 10개가 초과 됐을 경우 ?

• 마지막 순서에 위치한 리스트 아이템 제거하기 (pop)
• 그리고 새로운 아이템 최신 순서로 추가하기 (unShift)
• 결론적으로 이렇게 조건문을 거친 애들은 로컬스토리지에 저장해준다.

그렇게 최근 검색한 가상자산 기능 구현 완료

(2) 검색 필터링

1. 검색명 (한글, 영어)
   2.검색한 키워드의 심볼명
2. 한글 초성
3. 영어로 '검색명' 입력할 때, 이 4가지 조건이 성립돼서 검색시 찾고자하는 결과물이 나와야한다.

그렇게 하기 위해서 다양한 로직으로 조건문을 만들어서 작업해봤으나, 시간 지연으로 이미 만들어진 컴포넌트를 사용했다.
검색할 때 특히 가장 어려웠던 것이 무엇 이냐면 한글 검색할 때는 초성, 종성, 중성 그리고 자음과 모음이 있고 '읻'을 입력해도 이더리움이라는 결과물이 나오기 위해서는 두벌식도 고려해서 해야한다. 근데 그것을 전부 처리해주는 한글 라이브러리가 있었다. → hangul.js 참고하기

hangul.js에서 제공해주는 메서드 기능도 다양하다 !

(3) 입력된 키워드만 색깔입히기 (하이라이터)

현재 내가 입력한 키워드에 대해서 하이라이터 효과를 주기 위해서도 indexOf, split, splice, join 등등 여러 메서드들을 잘 활용해야되는데
하다가 구조요청했다. 암튼 배열 쪼개고 붙히고 하는 능력도 부족한 것 같다. 따로 연습해보자 !

ios에서는 스크롤이 부드럽게 움직이지 않는 현상을 발견했다.

참고 : https://github.com/magic-akari/seamless-scroll-polyfill
https://joonfluence.tistory.com/entry/IOS-Chrome-Safari%EC%97%90%EC%84%9C-Smooth-Scroll%EC%9D%B4-%EC%95%88%EB%90%A0-%EB%95%8C-%ED%95%B4%EA%B2%B0%EB%B2%95

CSS

html {
 scroll-behavior: smooth;
}

JS

 document.getElementById(아이디).scrollIntoView({
   behavior: 'smooth',
 });

쿠키란?

쿠키는 클라이언트(브라우저) 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일입니다.
사용자 인증이 유효한 시간을 명시할 수 있으며, 유효 시간이 정해지면 브라우저가 종료되어도 인증이 유지된다는 특징이 있습니다.
쿠키는 클라이언트의 상태 정보를 로컬에 저장했다가 참조합니다.
클라이언트에 300개까지 쿠키저장 가능, 하나의 도메인당 20개의 값만 가질 수 있음, 하나의 쿠키값은 4KB까지 저장합니다.
Response Header에 Set-Cookie 속성을 사용하면 클라이언트에 쿠키를 만들 수 있습니다.
쿠키는 사용자가 따로 요청하지 않아도 브라우저가 Request시에 Request Header를 넣어서 자동으로 서버에 전송합니다.

쿠키의 구성 요소

이름 : 각각의 쿠키를 구별하는 데 사용되는 이름
값 : 쿠키의 이름과 관련된 값
유효시간 : 쿠키의 유지시간
도메인 : 쿠키를 전송할 도메인
경로 : 쿠키를 전송할 요청 경로
쿠키의 동작 방식

클라이언트가 페이지를 요청
서버에서 쿠키를 생성
HTTP 헤더에 쿠키를 포함 시켜 응답
브라우저가 종료되어도 쿠키 만료 기간이 있다면 클라이언트에서 보관하고 있음
같은 요청을 할 경우 HTTP 헤더에 쿠키를 함께 보냄
서버에서 쿠키를 읽어 이전 상태 정보를 변경 할 필요가 있을 때 쿠키를 업데이트 하여 변경된 쿠키를 HTTP 헤더에 포함시켜 응답

쿠키의 사용 예

방문 사이트에서 로그인 시, "아이디와 비밀번호를 저장하시겠습니까?"
쇼핑몰의 장바구니 기능
자동로그인, 팝업에서 "오늘 더 이상 이 창을 보지 않음" 체크, 쇼핑몰의 장바구니

01. 추천하는 컴포넌트 파일 작성법

타입 정의는 맨 위에
연관 된 기능의 useState와 useEffect는 묶어서 두기
복잡한 코드는 hook으로 분리하기

02. 속성값 타입 정의하기

자바스크립트는 동적 타입 언어이기 때문에 정적 타입 언어인 타입스크립트를 사용하는 것이 좋다.
타입 오류를 사전에 예방할 수 있다.
함수에 대한 타입은 주석으로 달아두는 것이 좋다. (반환값에 대해서도...)
타입스크립트가 없을 때에는 prop-types라는 패키지를 설치해서 속성값 타입을 정의

03. 가독성을 높이는 조건부 렌더링 방법

조건부 렌더링이란 ? 선택적으로 렌더링하는 것을 말한다.

👎 안좋은 예

삼항연산자

{isLogin ? (
    <div>
        <p>{name}님 안녕하세요</p>
    </div>
    ) : null}

삼항연산자 사용의 좋은예

👍 개선된 코드

좀 더 개선된 코드

{isLogin && (
    <div>
        <p>{name}님 안녕하세요</p>
    </div>
}

&& (AND) 연산자

const num = 'ab' && 0 && 2;
// result
 
const num = 'ab' && 2 && 3;
// result

거짓을 만나거나 마지막까지 평가될 때 그 것이 답이된다.

👎 안좋은 예

<div>
    {cash && <p>{cash}원 보유 중</p>} // ----&gt; 0일 경우
    {memo && <p>{200 - memo.length}자 입력 가능</p>} // ----&gt; '' 빈 문자열일 경우
</div>

👍 개선된 코드

아래와 같이 명확하게 처리해주기

<div>
    {cash !== null && <p>{cash}원 보유 중</p>} // ----&gt; 0일 경우
    {memo !== null && <p>{200 - memo.length}자 입력 가능</p>} // ----&gt; '' 빈 문자열일 경우
</div>

|| (OR) 연산자

const v1 = 'ab' || 0;
// result
 
const v2 = '' || 0 | 3;
// result

처음으로 참을 만날 때 값이 된다.

?? nullish 방식

const msg = null ?? 'hello';
const msg = undefined ?? 'hello';

null 이나 undefined가 아닌 값을 출력해준다.

false로 취급하는 값

0
-0
NaN
' ' (빈 문자열)
null
undefined
false

04. 재사용성을 고려한 컴포넌트 구분법

→ 관심사의 분리를 하자

관심사의 분리란 ?

비슷한 기능을 하는 코드끼리 모은다. (ex. UI를 처리하는 코드, 서버 API를 호출하는 코드, DB를 관리하는 코드)
연관된 컴포넌트끼리 폴더를 만들어서 관리한다.

재사용하기 좋은 컴포넌트

비즈니스 로직이 없다.
상탯값이 없다.

05. useEffect 실전 활용법

• 의존성 배열 관리하는 방법

useEffect(() => {
        (...)
    },[의존성 배열])

의존성 배열에 담긴 내용이 변경 될 경우 부수 효과 함수가 실행됨
API 호출하고자 할 때, useCallback 의존성 배열에 값이 없어도 새로운 값 생성해주기 위해서 사용

function Profile({ userId }) {
    const [user, setUser] = useState();
 
 
    useEffect(() => {
        (...)
    },[user])
}

useCallback(() => {
    함수
}, [변경될함수])

가장 베스트 방법

if문을 사용해서 분기처리하여 api 호출 실행 시점을 관리한다.

2. async await를 부수효과 함수에 사용하고 싶을 경우

useEffect(async () => {
     const data = await fetchUser(A,B);
},[])

부수효과 함수의 반환값은 항상 함수 타입이어야 한다.
async await 함수는 promise 객체를 반환.

(1) useEffect 안에다가 사용하는 방법

useEffect(() => {
    async function test () {
       const data = await fetchUser(A,B);
    }
},[])

(2) 함수를 재사용하고 싶을 때

async function test () {
       const data = await fetchUser(A,B);
    }
 
 
useEffect(() => {
    test()
},[])

06. 렌더링 속도를 올리기 위한 성능 최적화 방법

리액트에서 최초 렌더링 후, 데이터 변경 시 렌더링을 하는데 이와 같은 단계를 거친다.

이전 렌더링 결과를 재사용할지 판단한다.
컴포넌트 함수를 호출한다.
가상 돔끼리 비교해서 변경된 부분만 실제 돔에 반영한다.

React.Memo

컴포넌트의 리렌더링을 막아준다.

function MyComponent(view){
    // ...
}

React.memo(MyComponent, view);
속성값과 비교해서 같다면 참을 반환하여 이전의 값을 재사용을 한다.

속성값과 비교하여 다르다면 거짓을 반환하여 새로운 값을 다시 리렌더링 해준다.

useMemo : 값을 메모제이션
useCallback : 함수를 메모제이션

Git Cheat Sheet

Set up

Git Config

모든 구성 보기

git config --list #show all the settings in gitconfig

편집할 구성 열기

git config --global -e #open .gitconfig file

기본 편집기 설정

git config --global core.editor "code --wait" # set default text editor for git 

사용자 설정

git config --global user.name "name" #set user.name
git config --global user.email "email" #set user.email
git config user.name #check user.name
git config user.email #check user.email

자동 CRLF 설정

git config --global core.autocrlf true #for Windows
git config --global core.autocrlf input #for Mac

Git Aliases

git config --global alias.co checkout
git config --global alias.br branch
git config --global alias.ci commit
git config --global alias.st status

Help

Git official site

https://git-scm.com/docs

See help

git config --help #detail
git config -h #short

Basic

Git 초기화

git init #initialise git 
rm -rf .git #delete .git 

작업 트리 상태 표시

git status #full status
git status -s #short status

Ignoring Files

Add files that should be ignored in .gitignore in project directory

For example:

# ignore all .a files
*.a

# but do track lib.a, even though you're ignoring .a files above
!lib.a

# only ignore the TODO file in the current directory, not subdir/TODO
/TODO

# ignore all files in any directory named build
build/

# ignore doc/notes.txt, but not doc/server/arch.txt
doc/*.txt

# ignore all .pdf files in the doc/ directory and any of its subdirectories
doc/**/*.pdf

Staging files

git add a.txt #stage a.txt file
git add a.txt b.txt #stage a.txt, b.txt files
git add *.txt #stage all files ends with .txt 
git add * #stage all files except deleted files and files that begin with a dot
git add . #stage everything 

Modifying files

Removing files

rm file.txt #delete file
git add file.txt #add to staging area
git rm file.txt # removes file from working directory and staging area
git rm --cached file.txt #removes from staging area only
git clean -fd #removes all untracked files

Moving files

git mv from.txt to.txt
git mv from.text /logs/from.text

Viewing the Staged/Unstaged changes

git status #full status
git status -s #short status
git diff #changes in working directory
git diff --staged #changes in staging area
git diff --cached #same as --staged

Visual Diff Tool

Open .gitconfig and add below

[diff]
    tool = vscode
[difftool "vscode"]
    cmd = code --wait --diff $LOCAL $REMOTE

Run Git Diff tool

git difftool

Commit

git commit #commit stagged files
git commit -m "Commit message" #commit stagged files with commit message
git commit -am "Commit message" #commit all files with commit message

Log · History

See history

git log #list of commits 
git log --patch #shows the difference introduced in each commit
git log -p #same as --patch
git log --state #abbreviated states for each commit
git log --oneline #oneline
git log --oneline --reverse #oneline, from the oldest to the newest 

Log Formatting

git log --pretty=oneline #same as --oneline
git log --pretty=format:"%h - %an %ar %s" #formatting
git log --pretty=format:"%h %s" --graph #show graph
git log --graph --all --pretty=format:'%C(yellow)[%ad]%C(reset) %C(green)[%h]%C(reset) | %C(white)%s %C(bold red){{%an}}%C(reset) %C(blue)%d%C(reset)' --date=short

Log Filtering

git log -2 #shows only the last n commits
git log --author="ellie" 
git log --before="2020-09-29"
git log --after="one week ago"
git log --grep="message" #finds in commit messages
git log -S="code" #finds in the code
git log file.txt #logs only for file.txt

History of a file

git log file.txt #history of file.txt
git log --state file.txt #shows statistics
git log --patch file.txt #show the changes

HEAD · Hash code

git log HEAD
git log HEAD~1
git log hash

Viewing a commit

git show HEAD #shows the last commit
git show hash #shows the given commit
git show hash:file.txt 

Comparing

git diff hash1 hash2 #all changes between two commits
git diff hash1 hash2 file.txt #changes to file.txt only

Tagging

Creating

git tag v1.0.0 #lightweight tag on latest commit
git tag v1.0.0 hash #lightweight tag on the given commit
git show v.0.0 #shows the tag
git tag -a v.1.0.0 -m "message" #annotated tag

Listing

git tag #all the tags
git tag -l "v1.0.*" #search certain tags

Deleting

git tag -d v1.0.0 #delete the given tag

Syncing with Remote

git push origin v1.0.0 #sharing the given tag with remote
git push origin --tags #sharing all the tags
git push origin --delete v1.0.0 #delete a remote tag 

Checking out Tags

git checkout v1.0.0 #checkout certain tag
git checkout -b branchName v1.0.0 #create a new bracnh with the given tag 

Branch

Creating branch

git branch testing #create a new branch called testing
git checkout testing #switches to testing branch
git switch testing #same as the above
git checkout -b testing #create and switch to testing 
git switch -C testing #same as the above

Managing Branch

git branch #simple listing of all branches
git branch -r #sees the remote branches
git branch --all #list including remote branches
git branch -v #sees the last commit on each branch
git branch --merged #sees merged branches
git branch --no-merged #sees not merged branches
git branch -d testing #deletes the branch
git push origin --delete testing
git branch --move wrong correct #rename
git push --set-upstream origin correct #push new name

Comparing

git log branch1..branch2 #all the commits between branch1 and branch2
git diff branch1..branch2 #all the changes between branch1 and branch2

Merge

git merge featureA #merges featureA branch into the current one
git merge --squash featureA #suqash merge, only one commit
git merge --no-ff featureA #creates a merge commit 
git merge --continue 
git merge --abort
git mergetool #opens merge tool 

Merge tool Config

[merge]
    tool = vscode
[mergetool]
	keepBackup = false
[mergetool "vscode"]
    cmd = code --wait $MERGED
[mergetool "p4merge"]
    path = "/Applications/p4merge.app/Contents/MacOS/p4merge"

Rebasing

git rebase master #rebase current branch onto the master
git rebase --onto master service ui #take commits of the ui branch forked from the service branch and move them to master

Cherry picking

git cherry-pick hash #applies the given commit 

Stashing

Saving

git stash push -m "message" #make a new stash
git stash #same as above
git stash --keep-index #stash but keep them in the staging area
git stash -u #--include-untracked 

Listing

git stash list #see all the stashes
git stash show hash #see the given stash
git stash show hash -p #see the given stash with details 

Applying

git stash apply hash #applies the given stash
git stash apply #applies the latest stash
git stash apply --index #apply the stated changes
git stash pop #apply and drop 
git stash branch branchName #apply stash in a new branch

Deleting

git stash drop hash #deletes the given stash
git stash clear #deletes all the stashes

Undo

Local Changes

Unstaging a staged file

git reset HEAD file.txt

Unmodifying a modified file

git checkout -- file.txt

Discarding local changes

git restore --staged file.txt #unstaging a staged file
git restore file.txt #unmodifying a modified file
git restore . #unmodifying all modified files in the directory
git clean -fd #removes all untracked files

Restoring file from certain commit

git restore --source=hash file.txt
git restore --source=HEAD~2 file.txt

Commit

Amending the last commit

git commit --amend

Reset

git reset --soft HEAD # 준비 영역에서 커밋 및 유지 변경 사항을 제거합니다.
git reset --mixed HEAD # 작업 디렉터리에서 커밋 및 유지 변경 사항을 제거합니다.
git reset --hard HEAD # 커밋을 제거하고 코드를 유지하지 않음

Undo action - reflog

git reflog
git reset --hard hash

Revert

git revert hash # 지정된 커밋을 되돌립니다.
git revert HEAD~1 
git revert --no-commit hash # 커밋 되돌리기 없이 지정된 커밋을 되돌립니다.

Interactive Rebasing

git rebase -i HEAD~2
git rebase --continue
git rebase --abort

Remote

git clone URL #cloning
git remote -v #shows all the remote URLs
git remote add name URL #add a new remote with name

Inspecting

git remote
git remote show 
git remote show origin

Syncing with remotes

git fetch #pulls down all the data from remote 
git fetch origin #same as the above
git fetch origin master #pulls down only master branch
git pull #fetch and merge
git pull --rebase #use rebase when pulling instead of merge
git push
git push origin master 

Renaming or Removing

git remote rename sec second
git remote remove second

Tools

Basic Debugging

git blame file.txt

Bisect

git bisect start
git bisect good hash
git bisect good 
git bisect bad
git bisect reset

Config

[alias]
	s = status
	l = log --graph --all --pretty=format:'%C(yellow)%h%C(cyan)%d%Creset %s %Cgreen(%cr) %C(magenta)<%an>%Creset'
	up = !git fetch origin master && git rebase origin/master
	co = checkout
	ca = !git add -A && git commit -m 
	cad = !git add -A && git commit -m "."
	c = commit
	b = branch
  list = stash list
  save = stash save 
	pop = stash pop
	apply = stash apply
	rc = rebase —continue
	get = "!f(){ git fetch && git checkout $1 && git reset --hard origin/$1; };f"
	new = "!f(){ git co -b ellie-$1 origin/master && git pull; };f"
	st = status
	hist = log --graph --all --pretty=format:'%C(yellow)[%ad]%C(reset) %C(green)[%h]%C(reset) | %C(white)%s %C(bold red){{%an}}%C(reset) %C(blue)%d%C(reset)' --date=short

공통 : 휴대폰 케이블을 연결한다.
안드로이드 기준 윈도우에, 아이폰일 경우에는 맥에다가 연결해야한다.

📲 안드로이드 디버깅 방법

⭐이 주소로 접근하기 -> chrome://inspect/#devices

chrome inspect 클릭해서 확인하면 된다.

📲 아이폰 디버깅 방법

사파리 브라우저에서 확인 할 수 있다.
⭐Safari -> 상단탭에서 Develope -> 아이폰 어쩌고 저쩌고 -> 디버깅 클릭

아이폰 설정 -> 사파리 -> 고급 -> 자바스크립트, 웹속성 활성화

디버깅 화면에서 탭 [Sources]에 들어가서 [Search] 에 있을만한 내용 검색하면 더 빨리 쉽게 찾을 수 있다.
그리고 디버깅 걸 소스 코드에다가 브레이크 포인트 (마커) 잡고 디버깅 하면 된다.

📲 디버깅 실행 시키는 단축키

ctrl + enter

다음 플로우에 디버깅 타는지 확인할려면 F10 눌러서 한줄 한줄 다음 코드 실행하면 된다.

react 메인 페이지에서 SIMPLE 서비스 툴팁 말풍선 띄우면서 배운점 정리

// 스크롤 이벤트와 클릭 이벤트 실행시 말풍선 사라지도록
useEffect(() => {
   window.addEventListener('scroll', handleScroll);
   window.addEventListener('click', handleScroll);
   return () => {
      window.removeEventListener('scroll', handleScroll);
      window.removeEventListener('click', handleScroll);
   };
}, []);
 
// 스크롤, 클릭 이벤트
const handleScroll = (e) => {
   // 스크롤 시, 아무곳 클릭시 simpleTip 말풍선 사라지게
   if (window.scrollY >= 100 || onModal && (!el.current || !el.current?.contains(e.target))){
      setOnModal(false)
   }
};

useEffect를 사용해서 스크롤 이벤트랑 click 이벤트가 일어날 때 handleScroll 이라는 함수가 동작되도록 했다.
그래서 useEffect 기능내에 있는 retrun 값을 통해 cleanup 작업까지 했다. (removeEventListener == 이벤트를 지워주는)

그리고 서비스 툴팁 말풍선이 사라지는 조건은 2가지다

1. 스크롤 시
2. 아무 곳 클릭할 때

근데 작업하면서 문제점이 무엇이냐면,
메인페이지에 첫 번째로 나타나는 모달을 클릭하여 닫게 될 경우, 이벤트 버블링이 일어나서 말풍선까지 동시에 사라진다.
그래서 첫 번째로 나타나는 모달을 닫을 때에 close 되는 이벤트 쪽에다가 이벤트 버블링을 아래 메서드를 사용해서 막아주었다.

event.stopPropagation()
을 사용해주면 된다.

🐥 이벤트 버블링이란 ?

이벤트가 연속하여 발생하는 버블 현상을 의미한다.
자식 엘리먼트에서 이벤트 발생 시, 부모 엘리먼트에 같은 이벤트가 설정되어 있다면 해당 이벤트에 할당된 기능도 함께 실행된다.
그래서 이 같은 현상을 막기 위해서는 e.stopPropagation() 을 사용해서 막아주면 된다.

🤖 Lodash

lodash는 자바스크립트의 인기있는 라이브러리 중 하나 입니다.

자바스크립트에서 배열 안의 객체들의 값을 핸들링 할 때 유용합니다.

이러한 점으로 인해 JS 의 복잡한 알고리즘 코드를 구현할 필요 없이 lodash 로 하여금 손쉽게 구현할 수 있어서 코드량도 줄여주고 빠른 작업에 도움이 됩니다 !

⭐️ 특히 front-end 환경에서 많이 사용됩니다.

설치 명령어

$ yarn i --save lodash
$ yarn i --save @types/lodash

사용법

import _ from 'lodash';

(...)

_.(배열변수)

lodash를 사용하는 이유

• 브라우저에서 지원하지 않는 성능이 보장되어있는 다양한 메서드를 가지고 있다.
• 퍼포먼스 측면에서 native보다 더 나은 성능을 가짐
• npm이나 기타 패키지 매니저를 통해 쉽게 설치하여 사용 가능합니다.

👨🏼‍🍳 몇 가지 유용한 메서드 example

1. 원하는 index 값 구하기

var myFriend = [
 {name:'kys',job:'developer',age:27},
 {name:'cys',job:'webtoons man',age:27},
 {name:'yhs',job:'florist',age:26},
 {name:'chj',job:'nonghyup man',age:27},
 {name:'ghh',job:'coffee man',age:27},
 {name:'ldh',job:'kangaroo father',age:27},
 {name:'hsy',job:'monk',age:27},
];

// 콜백함수를 통해 나이가 26인 객체가 처음으로 나오는 index 반환
_.findIndex(myFriend, (friend) => {
  return friend.age === 26;
});

2. 다차원 배열 내 요소 출력

_.flatten(arraym[isDeep])

사용법

_.flatten([1, [2, 3, [4]]], true);
// → [1, 2, 3, 4]

기존 알고리즘이랑 비교

• 이게 얼마나 편리한지 lodash 사용하기 전에 코드와 비교해보겠습니다.

JSON

const myFriend = [
	{'name':'돼지'},
	{'name':'마라탕'},
	{'name':'곱창'},
	{'name':'토이스토리'}
]

👩🏻‍🎓 lodash 사용전 vs 사용후

myFriend.map((item) => {
	return {
		item.name
	}
}

_.map(mayFriend, 'name')

✨ 깔끔 그자체 ✨

Lodash 공식문서

[Lodash](https://lodash.com/)

• 수많은 메서드들을 제공해주니 공식문서 보고 필요에 따라 사용하세요 🙃👍

💞 SNS 소셜 공유하기 작업

• 페이스북
• 트위터
• 라인
• 카카오
• 텔레그램

const url = encodeURI(window.location.href);

// Facebook
const shareFacebook = () => {
  window.open("http://www.facebook.com/sharer/sharer.php?u=" + url);
}

// Twitter
const shareTwitter = () => {
  window.open("https://twitter.com/intent/tweet?url=" +  url)
}

// 라인

// 텔레그램
const shareTelegram = () => {
  window.open("https://telegram.me/share/url?url=" + url);
}

카카오는 방식이 다름

• 개발자 등록, 키 발급, 전역 설정 등이 필요하다.

(1) 카카오 개발자 등록 및 키 발급
먼저, 카카오 개발자 페이지에 접속하여 개발자 계정으로 가입한다. (링크 : developers.kakao.com/)

• 내 애플리케이션으로 이동해서 애플리케이션을 추가해준다.

• 여기서 설정하는 앱 아이콘, 앱 이름은 카카오톡 공유시에 노출되는 사진 및 타이틀이 된다.
• 이제 애플리케이션 화면으로 진입하면, 발급받은 앱 키들을 확인할 수 있다. 여기서, Javascript 키를 프로젝트에 사용해야한다.
  또한, 플랫폼 메뉴에 가서 적용할 사이트의 도메인을 등록해준다!

참고자료 : https://abangpa1ace.tistory.com/255