[TIL] 220203-04

먼지·2022년 2월 2일
0

TIL

목록 보기
20/57
post-thumbnail

회고

  1. 오늘의 도전과 배움

  2. 궁금하거나 어려웠던점
    이전에 포기한 redux 그리고 왜 써야 하는지! 내일 생활코딩 강의 들어야겠다. 그리고 react hooks TT 공식문서 베타버전 봐야지...

  3. 내일 해보고 싶은 것들
    클린코드 복습 스토리북 마무으리, 원티드 Toggle.jsx checkbox css 이해하기 & README 작성, 스토리북 번역 다듬기, 팀프로젝트 react-query 적용 스타일 수정, 엄청나게 많군 시간을 소중히

기초부터 완성까지, 프런트엔드 책 구매할까 생각중

사이트 읽기
react-query
벨로그에 다크 모드 적용하기

  • 우우
  • 요즘 식습관 엉망

Redux 덕수

참고
Redux 이해하기!
RIDI-리덕스 잘 쓰고 계시나요?
당신에게 Redux는 필요 없을지도 모릅니다.

이벤트 소싱
이벤트 소싱(Event Sourcing) 개념
(어떤액션이일어났는지히스토리를기억
+1을했다

  • 1을했다
    검색 기록이나 구글 독스의 수정 기록
    )
    기록에 따라 리듀스 함수를 하나씩 돌림?
    직렬화 가능한 액션들의 히스토리 배열을 리듀스 하는 것이 현재 상태다.

reduce -> redux
평균, 합,
데이터를 하나로 요약, 축소한다

액션은 - 객체들의 배열
액션은 메시지(increment, decrement, ..)
복잡한 앱 상태와 서버 상태를 구분?
도메인에 따라 다름

앱상태가복잡한것과 서버상태가복잡한것을 구분

서버와 동기화되는 상태 => 서버에서 받아오는 데이터, 서버에 올리는 데이터(예-리월월드) => SWR, react-query, Relay
form 상태 => react-hook-form, formilk

앱 상태가 복잡하고 => 테스트하기 편했으면 좋겠네~, 버그 났을 때 어쩌다 버그났는지 알 수 있으면 좋겠네
history가 필요할 때
히스토리가 필요하며 (뒤로가기 구현)
원격으로 동기화 해야 한다던가,,

필요한앱상태
구글 독스, figma, 노션...

Redux styleguide 읽기

직렬화 가능한 action 의 히스토리를 단일한 진실의 원천으로 간주해서, reduce를 돌리면 현재 상태가 나온다!

직렬화 가능한?
JSON.stringify 가 된다.
Date 타입은 못 넣는다 => 문자열로 만들어서 넣어야 함

action은 어떤 일이 벌어졌는지 알려주는 메시지, 객체
action을 만들고 dispatch 배달한다
action => dispatch => store => history => reducer => 새로운 상태를 만듦! => view들에게 내려줌(useSelector)

직렬화 가능하다는 것은 상태들을 언제든지 문자열로 바꿀 수 있다는 것

레거시 - 유산


원티드 프리온보딩

내 깃허브 저장소
원티드 프리온보딩 프론트엔드 코스
어제 오후부터 오늘 오후까지 계속 원티드 과제를 만들었다. 과제의 문제가 전체적으로 쉬운 느낌이었는데 요구사항이 자세하게 적혀있진 않아서 혼자 다 만들고 오늘 탐토님께서 코드를 봐주셨는데 늦게 적어서 기억에 남는 리뷰?를 적어보자면

input에 있는 상태를 현재 입력 중인 input에서 focus out 상태 onBlur? 상태가 되면 밑에 각각 input의 value를 표시하는 문제에서 나는 ref를 써서 handleBlur 함수를 만들어 onBlur이면 ref.current.value를 가져왔는데 ref는 굳이 써야 하는 상황이 아니면 리액트에서 사용하지 않는 편이 낫다고 하셨다.

  • 배워야할것
    - setState에서 prev를 사용해야 하는 경우와 아닌 경우
    - ref

  • 배움
    - css의 focus-within 속성
    - indexOf -> includes
    - 컴포넌트는 함수다! 상태가 바뀔 때마다 다시 실행됨.

AutoComplete.jsx
여기서도 useEffect 의존성에 searchInput을 넣어서 검색 값이 바뀔 때마다 searchResult의 값을 설정해 줬는데 이미 search input을 상태로 관리하고 있어서 쓸 필요가 없었다..! 리액트와 훅,, 정말 아직도 새롭군

// 이전
useEffect(() => {
  const res = keywordArr.flter(kword => kword.indexOf(searchInput) > -1);
  setSearchResult(res); 
}, [searchInput]);
  
// useEffect x, includes
const AutoComplete = () => {
  const [searchInput, setSearchInput] = useState('');
  const searchResult = keywordArr.filter(keyword => keyword.includes(searchInput));
  
  // styled-components props
  const isSearching = searchInput !== '' && searchResult.length > 0;
  
  return ...

미량님과 이불님이 알려주신 방법!

// useState useEffect
useEffect(() => {
  const res= categories.filter(category=> (category.name).indexOf(searchInput)>-1);
  setSearchResult(res); 
}, [categories, searchInput]);

// datalist
<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
    <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
</datalist>

ClickToEdit.jsx

// 수정전 코드
const ClickToEdit = () => {
  const nameInputRef = usesRef();
  const [displayName, setDisplayName] = useState('');
  const handleBlur = () => setDisplayName(nameInputRef.current.value);
  return (
    <Container>
      <Title>ClickToEdit</Title>  
      <InputContainer>
        <label>
          이름
          <input
    		ref={nameInputRef}
            type='text'
            onChange={(e) => setNameInput(e.target.value)}
            onBlur={handleBlur}
           />
        </label>
      </InputContainer>
      <p>이름 {displayName}</p>
...
 

// 수정한 코드
const ClickToEdit = () => {
  // react 에서는 ref를 안 쓰는 것이 좋음.
  const [nameInput, setNameInput] = useState('');
  const [displayName, setDisplayName] = useState('');
  
  const handleBlur = () => {
    setDisplays({
      name: nameInput,
      age: ageInput
    })
  };
 
  return (
    <Container>
      <Title>ClickToEdit</Title>  
      <InputContainer>
        <label>
          이름
          <input
            type='text'
            name='name'
            onChange={(e) => setNameInput(e.target.value)}
            onBlur={handleBlur}
           />
        </label>
      </InputContainer>
      <p>이름 {displayName}</p>
    
    </Container>
  );
};

useRef hook을 써본 적이 많지 않아서 어떤 상황에서 쓰는지 아직 잘 모르기도 하고 controlled uncontrolled components의 개념도 클린코드 스터디를 하며 이번에 알았어서 ref가 왜 등장했는지와 또 어디서 써야 하는지 찾아봐야겠다.

참고
useRef() 는 언제 사용하는가?
useRef는 DOM에 접근할 때 뿐만 아니라 다양하게 응용할 수 있어요.


드림코딩 리액트

4.17 function 컴포넌트, memo 정리 :)

memo == PureComponent
props의 데이터가 변경되지 않으면, 컴포넌트를 업데이트하지 않아도 될 때 memo를 사용하면 됨.

4.18 React Hook 💎 (중요한 포인트)


팀프로젝트!

내가 뭘하고 싶은지를 명확하게 정하기

  // 검색어는 어딘가에서 유지되야 함=> keyword, index 상태를 boards 에 추가!
  // 주소창 search params로 현재 검색중인 검색어를 동기화 갱신, useEffect (주소창 갱신)
  // searchPosts를 이용해서... index랑 keyword 바뀔 때마다, if문으로 데이터 불러오기
  const onSubmit = (e) => {
    console.log(indexInput, '/', keywordInput);

    e.preventDefault();
    if (keywordInput.trim().length < 2) return;

    setBoards((prev) => ({
      ...prev,
      keyword: keywordInput,
      index: indexInput,
    }));
  };

3일 목요일!

커밋메시지를 미리 써놓고 작업하기
제발 커밋 까먹지막

검색어를 어딘가에 유지
useEffect - 의존성 배열이 다르기 때문에 (예-저장, 불러오기)

marked
MDN URLSearchParams

remark -> marked 로 parser 라이브러리로 바꿨당? migration?!
전 회고에서 <span style=..>어찌구 span으로 작성한 글이 p태그로 변경이 됐는데 나는 remark나 parser 원리를 잘 몰라서 적어뒀다 바아로,, 토끼님께 여쭤봤는데 예전에 블로그를 만드시면서 나와 비슷한 문제로 삽질을ㅎ 하신 적이 있다고 remark를 써보라고 해서 썼는데 잘 해결된 것 같다!!!!

Warning: 🚨 Marked does not sanitize the output HTML. Please use a sanitize library, like DOMPurify (recommended), sanitize-html or insane on the output HTML! 🚨 <= marked github에 있는 사용법에 적혀있던 문장! 전에도 parser 라이브러리를 알아보다 sanitize랑 DOMPurify 단어를 몇 번 봤는데 알아봐야 겠다.

그리고 검색 기능도 같이 구현했는데 예전에 내가 history.push로 url을 바꾸고 posts 상태를 바꾸는 것을 onSubmit 했을 때 일어나도록 구현했었는데 수정하다 이것저것 꼬여서 router로 만들었던 코드를 이전에 싹 갈아엎고 useEffect로 했는데 검색을 어떻게 구현할지 머리가 너~~무 안 돌아갔는데 url 변경하는 것을 useEffect로 구현하는 거라고 말씀하셨다.

난 react를 약 3달 정도 쓰면서 아직 hook이 어떤 원리로 돌아가는지와 어떨 때 쓰는지 정말 몰랐다ㅜㅜ useState도 남발하고 useEffect는 여러 번 쓰면 안 되는 줄 알았다. 아직 완전 이해하진 못했지만 상태로 관리해야 하는 값과 정적인? 값 등 토끼님이 정말 많이 알려주셔서 많이 배웠따. 잊기 전에,, 이게 젤 힘들지만 그만 정리하고 그날 이해해야겠다 🥴

그리고! 하나 더 여쭤보고 싶은 문제가 있었는데 코드 블럭을 쓸 때 어떤 언어를 쓸지 적을 수 있는데 저 뒤에 js, python 등 외의 잘못된 문자를 입력하면 먼가 콘솔이랑 화면에 에러가 떴는데 같이 볼 땐 안 나오는 것이었다..! 그래서 나중에 배포하거나 할 때 저 에러가 뜰까봐 불안했는데 당장 닥치지 않은 것은 미리 걱정하지 말기..!!

profile
꾸준히 자유롭게 즐겁게

0개의 댓글