[TIL] 220214-15

2022-02-14~15 월화요일ㅋ

2.15 화

오늘 푼 알고리즘 문제 - 하샤드 수

내 풀이

function solution(num) { 
    const numStr = String(num);
    const test = Array.from({length: numStr.length}, (_,i) => Number(numStr[i])).reduce((prevVal, curVal) => prevVal + curVal, 0);
    return num % test === 0;
}

다른 사람 풀이
https://programmers.co.kr/learn/courses/30/lessons/12947/solution_groups?language=javascript

---

2.14 월

회고

하드 트레이닝도 졸면서 듣고 오후에 자버렸다 흑 이제부터 괜히 쓸데없이 뭘 더 공부하겠다고 잠 아끼지 말고 수면습관 잘 바꿔서 열심히 공부해야지

그리고 부수 효과, 관심사 분리, 컴포넌트 분리 이게 너무 헷갈린다 props는 뭘 내리고 정확히 어떤 역할을 해야 컴포넌트를 잘 분리했다고 말할 수 있는지도 모르겠고, 리액트 훅도 언제 쓰는지 모르니 남용하고ㅜㅜ useState, useEffect 등 리액트 다시 제대로 공부해야 할 듯..

---

팀프로젝트

[JavaScript] URL 인코딩 디코딩 방법 정리

useEffect

리액트 훅(React Hooks) #3 useEffect😃 /공식 문서 번역
리액트의 Hooks 완벽 정복하기

React로 페이지네이션 UI 구현하기

React Query

React Query 한글 메뉴얼
리액트 쿼리로 에러처리하기

웨일로 리액트 공식문서 베타버전 읽기

블로그 뭐 읽을지 써놓기만 하고 정신없고 피곤해서 하나두 못 읽었다ㅜㅜ 어제 바보같이 밤을새서 하루 종일 집중 못 하고 강의 조금 듣고 팀프로젝트만 계속 끄적거리고 마무리,, 그래도 오늘 pageList state 빼고 다 없애고 전부 queryParams로 바꿨따..!

history.push 할 때 앞부분 url은 직접 입력하는 거랑 이전 pathname 참조하는 것 중에 머가 올바른 방법일까? 일단 밑의 코드에선 둘 다 작동을 했는데
history.push(/board/${boardType}? + searchParams.toString());
history.push(${history.location.pathname}? + searchParams.toString());

const Board = () => {
  const user = useUser();
  const location = useLocation();
  const boardType = location.state?.type || location.pathname.split('/')[2];
  const boardTitle =
    (boardType === 'qna' && 'Q&A') ||
    (boardType === 'tech' && 'Tech') ||
    (boardType === 'free' && '자유게시판');

  const history = useHistory();

  const searchParams = new URLSearchParams(location.search);
  const sort = searchParams.get('sort') || 'createdDate';
  const curPage = Number(searchParams.get('page')) || 1;
  const searchMode = searchParams.get('searchMode') || '';
  const keyword = searchParams.get('keyword') || '';

  const [pageList, setPageList] = useState([1, 2, 3, 4, 5]);

  const [searchModeInput, setSearchModeInput] = useState('title');
  const [keywordInput, setKeywordInput] = useState('');

  const handleClick = (pageNumber) => {
    const searchParams = new URLSearchParams(location.search);
    searchParams.set('page', pageNumber);
    history.push(`/board/${boardType}?` + searchParams.toString());
  };

  const { isLoading, data } = useQuery(
    [`${boardType}Board`, curPage, sort, searchMode, keyword],
    async () => {
      if (!keyword) {
        return boardApi
          .getPosts(curPage, sort, boardType)
          .then((res) => res.data);
      } else {
        return boardApi
          .searchPosts(keyword, curPage, searchMode, boardType)
          .then((res) => res.data);
      }
    }
  );
  console.log('Board data', data);

  const handleSearch = (e) => {
    e.preventDefault();
    if (keywordInput.trim().length < 2) {
      alert('검색어는 2글자 이상 입력해주세요.');
      return;
    }
    searchParams.set('sort', 'createdDate');
    searchParams.set('searchMode', searchModeInput);
    searchParams.set('keyword', keywordInput);
    history.push(`${history.location.pathname}?` + searchParams.toString());
  };

  const clearSearch = () => {
    searchParams.set('page', 1);
    searchParams.get('searchParamsMode') && searchParams.delete('searchMode');
    searchParams.get('keyword') && searchParams.delete('keyword');
    setSearchModeInput('title');
    setKeywordInput('');
  };

  const handleOrderListClick = (name) => {
    clearSearch();
    // search.set('page', 1);
    searchParams.set('sort', name);
    history.push(`/board/${boardType}?` + searchParams.toString());
  };

  const handleCancelSearch = () => {
    // '궁극적으로' 주소창을 바꿔야 함. searchMode와 keyword를 주소창에서 제거하도록 해야 함.
    // https://developer.mozilla.org/ko/docs/Web/API/URLSearchParams?
    clearSearch();
    console.log(`${history.location.pathname}?` + searchParams.toString());
  };

  return ( ...

---