TIL. React. <22.04.06>

오늘 해야 할 일

스파르타 강의 독파 (V)
드림코딩 엘리 보기 (V)
리덕스 독스 읽기 (V)

오늘 배운 것

Preview 만들기

업로딩은 바깥에서 조절 하는게 아님.
모듈(리덕스) 안에서만 호출이 되어야 함.
바깥(export)에서 업로드 시작하고 강제로 트리거를 주면 안됨.

게시글 작성할 때 이미지를 업로드

이미지 url이 같이 업로드가 됨.
이미지 url을 알려면 어떻게 해야하나?
스토리지에 일단 저장.
그 다음 다운로드 url 가지고 옴.
이 url이 가지고 와 지면
그때 파이어스토어에 저장하면 됨.

...styles 쓰는 이유는

const styles = {
    src: src,
    size: size,
  };
  
if (shape === 'circle') {
    return (
      <ImageCircle {...styles}></ImageCircle> //styles 들어가는것 이해 안됩니다.
    );
  }

const styles를 설정하여 안에 내용들을 가져다가 쓰기 위해.

수정버튼 누를 시(id페이지로 넘어갈 시) 고민할 기능들

1.props.match.params.id

...

  console.log(props.match.params.id); //

  const post_id = props.match.params.id; //주소창의 아이디를 params로 가져옴
  const is_edit = post_id ? true : false;

  const { history } = props;
  // 작성모드일때와 수정모드일때 구분하기
  let _post = is_edit ? post_list.find((p) => p.id === post_id) : null;
  

콘솔에 id들어온거 가지고 수정이다 아니다를 판별 할 수 있다. 왜냐하면 게시글 작성에서는 경로가 write이다. (뒤에 아이디가 없다) ex) http://localhost:3000/write/9A6N8SjaMtIXYGNTf9KH

2. 리덕스 vs 파이어베이스

이번 로직에는 수정버튼을 눌렀을 때 바로 수정페이지로 넘어가는 것이므로(리덕스) 새로고침을 한다는 상황은 염두에 두지 않을것이다. 새로고침 하면 뒤로가기로 함. (파이어베이스 안씀)

오늘 공부 한 것

게시글 작성 할 때 이미지를 업로드 하는 방법은 다양하지만, preview를 만들때 쓰던 url이 있으니 그것을 활용해봐야 함. 즉 있는 것 써보자.

getState: 스토어에 있는 정보의 접근을 할 수 있게 함.

return;의 위력: 파이어스토어에 데이터가 쌓이지 않게 리턴(실행이 안되게)함.

onChange는 콜백을 계속 요청한다.(이벤트가 계속 일어남) => 너무 많이 요청하는 것 막아줘야 한다. => 실행의 콜백을 효과적으로 제어하는 아래의 두 기능.

• debounce: 콜백을 기다립니다. 새로운 이벤트가 들어오면 기다림 시작을 반복함.
• throttle: 일정시간 동안 일어난 이벤트를 모아 가장 최근 것을 실행.

console.log(e.target.value): e.target.value는 e를 매개변수로 return의 인풋태그를 가져와서 입력값을 하나씩 생성되는 무언가로 가져오는 것.

인풋의 value를 state에 넣어서 관리 한다면?
: Search가 함수형 컴포넌트이기 때문에 debounce가 onChange와 같이 리렌더링, 즉 초기화 됨. => 초기화 안되기 위해 useCallback()씁니다.

const Search = () => {
  const [text, setText] = React.useState('');

  const debounce = _.debounce((e) => {
    console.log('debounce ::: ', e.target.value);
  }, 1000);

  const throttle = _.throttle((e) => {
    console.log('throttle ::: ', e.target.value);
  }, 1000);

  //메모이제이션: useCallback을 사용. 컴포넌트가 리렌더링 되더라도 함수를 초기화하지 말고 어디다가 저장하라
  const keyPress = React.useCallback(debounce, []);

  const onChange = (e) => {
    // console.log(e.target.value); //onChange의 매개변수 e가 콘솔로그에 찍히는 것은 input이 실행되서.
    setText(e.target.value);
    keyPress(e);
  };

  return (
    <div>
      <input type='text' onChange={onChange} value={text} />
    </div>
  );
};

React.useCallback(debounce, []) [text]라면 text가 변할때 함수도 변함. 즉 초기화 조건을 넣음.

나중에 비슷한 뷰가 나오면 갖다쓰기 위해 중간단위 컴포넌트로 바꿔놓는다.

오늘의 공부 키워드

useCallback. 메모이제이션

리덕스 vs 파이어베이스

화이트큐브 최혁준 대표 강연

• 챌린저스의 도메인은 건강.의학 앱으로 확장하려 함. 건강 슈퍼앱. 슈퍼 회사.
• 30명 개발 그룹 향 후 60명 확장 예정
• 프로젝트 내에서 무언가 하고 싶다면 내부에서 조정 가능.
• 사수역할은 CTO가 잘 해줄 예정
• 시니어. 주니어 채용 사이클 있음
• B2C 서비스이므로 사람들이 접근하는데 이 앱을 쓰면 건강해 질 수 있다고 느껴지게 만들고자 함. 그 정도의 매력을 만들 수 있는 역량과 열정이 구직자는 필요함.
• 주노헤어 데이터 수집을 생각해 볼 정도의 열정?
• 단편적인 건강에 대한 열정 예: 사람들에 대한 관심. 책. 샐러드. PT 등등

마무리

오늘 해야 할 일을 마무리 못 지었다. 왜냐하면 할 일이 많아져서다. 앞으로의 취업시 준비해야 할 것과 실전 프로젝트에 무엇을 하면 좋을지의 고민이 누적되어간다.

개인적인 상황들이 자꾸 생기니 앞으로 팀 문제의 대처를 어떻게 해야 할까 걱정이 된다.

내일은 다시 cs공부를 시작한다. 과제 마무리 잘 하고, 그리고 리덕스 docs좀 제발 한 페이지라도 보도록 하자.