[20220409 S]

오늘은 (4) 월 (9) 일 / 날씨: (맑음)

한줄: 날씨가 워후🙌 햄벅 집에만 있기 아까운 날씨 🤔 밤샘각?

💻 1) WORK MEMO & REVIEW

22 to 24

✍️ 대제목:

• 소제목
• 소제목

💻 2) GRAMMAR OF JAVASCRIPT

6 to 8

✍️ Array 배열

• array
  • data structure 중 하나
  • const 배열 = new Array(1,2);
  • const 배열 = Array.of(1,2);
  • const 배열 = [1,2];
  • const another배열 = Array.from(배열) => 얕은 복사
    => 자바스크립트의 배열은 오브젝트와 유사
• add.delete array
  • 인덱스로 추가,삭제 x
• examples
  https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

const animals = ["hippo", "rabbit", "bird"];
console.log(animals.indexOf('rabbit')) // 1
console.log(animals.includes("rabiit")) // true

animals.push("crocodile"); 
animals.unshift("tiger"); 
animals.pop();
animals.shift();
animals.splice(start, deleteCount, item1, item2... ); // 중간에 삭제 및 추가

let newArr = animals.slice(start?, end);

const smallAnimals = ["rabbit", "cat"];
const bigAnimals = ["lion","tiger"];
const Animals = smallAnimals.concat(bigAnimals); // ["rabbit", "cat", "lion","tiger"];

reverse(); 거꾸로
flat(): 중첩단계 풀기
fill(value, start?,end?): 
join(): 배열 합치기

• 중요! 배열 자체 수정 or 새로운 배열?

💻 3) SNS PROJECT

10 to 16

✍️ project 관련

• reudx
  • HYDREATE
  • combined reducer

    const initialState={}
    const reducer = (state=initialState, action)=>{
    switch(action.type){
    default: return state;
    }
    }
    export default state;

  • 구조분해할당
  • action type 보통 상수로 지정
• other things

  • 서버개발자와 사전에 데이터에 대해 소통

  • index 를 key 로 쓰지 마세요

  • 이미지 업로드 창 띄우기 (ref 이용)

    const handleClickImageUpload = ()=>{
    imageInput.current.click()};
    
     <input type="file" multiple hidden ref={imageInput} />
     <Button onClick={handleClickImageUpload}>

  • 배열 안에 jsx 항상 key
    * 내가 쓴글/ 남이 쓴글 조건문

    로그인 상태 id 랑 === 게시글 id  

  • propType를 더 자세하게 적고 싶다면? object

    postCard.propTypes={
    post:propType.object.isRequired; 
    }

    대신에

    PostCard.propTypes={
    post: PropTypes.shape({
    id: PropTypes.number,
    user: PropTypes.object,
    comments: PropTypes.arrayOf(PropTypes.object),
    images: PropTypes.arrayOf(PropTypes.object)
    생략
    }).isRequired,
    }

  • optional chaning ?.
    https://dream-frontend.tistory.com/328

  • command+p vscode 파일명

  • const onToggleLike = ()= >{
    setLiked(pre=> !prev)
    }

• comments, posts .. form 태그 .. form 라이브러리?

🆎🎾 4) ENGLISH/ GERMAN / TENNIS

Monday/ Wednesday/ Thursday (Clarisse랑 날짜 조정하기)
Wednesday/ Saturday

• 18 to 20 tennis lesson
• 20 to 22 추가 레슨

📌 5) ETC (READING/ ECONOMY)

Free time

6) TODO & QUESTIONS

• 다음주 아프리카팸약속잡기/유림언니생일
• wrapper vs container 차이가 있나?
• 평일 모르는 부분 채우기
• 배열 트레이닝 문제 => 해결
• 자전거
• input=> useState이용하는 거랑 ref이용하는 거 차이
• onClick? handleClick 차이
• form

❤️ 4월 GOALS

• 루틴화하기(집중 안되더라도 습관화하기)
• 이해하고 넘어가도록 노력하기
• 업무 질문 많이많이하기
• es6 재정리하기/ SNS Project & Redux(4-5월)
• 테니스 시작 스트레스 풀기