오늘 해야 할 일
스파르타 강의 독파 (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좀 제발 한 페이지라도 보도록 하자.
