[20220404 M]

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

한줄: 헤롱헤롱 월요일..날씨 좋음?🙄

💻 1) WORK MEMO & REVIEW

8 to 17, 4 to 6

✍️ 코드관련

• 소스코드

  • 인라인 스타일링 ? => <div style={{width: "100px"}}>
    • 이 경우 리랜더링 ! 성능최적화를 위해 useMemo로 감싸서 넣어주기

• usequery

• style jsx & style jsx global

• useState 초기값에 대하여
  

• input

  const [value, setValue] = useState("");
  const handleChagne= (e)=>setValue(e.target.value);

  <input value={value} onChange={handleChange}>

  function useInput(initialValue= null){
  const [value, setValue] = useState(initialValue);
  const handler = useCallback(e=> {setValue(e.target.value)},[])
  return [value, handler];
  }
  

💻 2) GRAMMAR OF JAVASCRIPT

morning

✍️ 객체(Object)

• object

  • 객체 리터럴 -> {key:value}
  • new Object()
  • Object.create();
  • 접근은 마침표 or 대괄호로(동적 접근에 사용)
    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object

• 객체 동적접근
  function addKey(obj,key,val){obj[key]=val};
  function deleteKey(obj,key){delete obj[key]};
  

• key 와 name 이 같을 때 하나로

• 속성과 매서드가 있는 객체

• 생성자 함수 <= 비슷한 객체를 만들 때 매번 리터럴로 x

function Person(name, age){
this.name= name;
this.age = age;
this.introduce = ()=>{
console.log(`${this.name}:${this.age}`)}
}
const bit4 = new Person("bit4",26);
console.log(bit4)

💻 3) SNS PROJECT

2 to 4

✍️ ui & 관련 자료

• npm trends https://www.npmtrends.com/
• prop-types (안정성을 위해서 )
• verticalAlign="middle"
• 반응형
  • 모바일부터 제작해야 효과적
  • gutter: column 사이 간격
• 로그인/회원가입 페이지
  • 프론트엔드 임시처리-> 나중에
• 컴포넌트에 props로 넘기는 함수는 useCallback
• return 될 때 바뀌는 부분만 다시 그려짐
• styled-components
• 리액트 배열 키
• PropTypes.shape
• {} === {} //false , 얕은복사, 불변성
  https://velog.io/@th0566/Javascript-%EC%96%95%EC%9D%80-%EB%B3%B5%EC%82%AC-%EA%B9%8A%EC%9D%80-%EB%B3%B5%EC%82%AC

const ButtonWrapper = styled.div`
  margin-top: 10px;
`;

🆎🎾 4) ENGLISH/ GERMAN / TENNIS

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

• expressions
  • were surrounded by
  • I didn't know what would happen
  • kiddie rides
  • keep on having~
  • when was your last at ~

📌 5) ETC (READING/ ECONOMY)

Free time

6) TODO & QUESTIONS

• usequery 랑 style jsx 이따가 정리
• 소스코드
• class 랑 hooks 바꾸는 거 (주말에 연습)
• validation prop-types 필요성?

❤️ 4월 GOALS

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