[TIL] 2022-03-23

금방 고쳐줄게 좀만 참아 얘들아...🙈

오늘의 TIL

1. 함수의 재사용

• 함수 export/import

  공통적으로 쓰는 함수를 한 곳에 저장해놓고 매번 새로 만드는 것이 아니라, Import해서 가져와서 사용해봤다. Date 객체를 사용해서 날짜 데이터를 정제하는 함수를 만들어서 library / utils 폴더에 넣어놓았다.

2. 컴포넌트의 재사용성

• 하나의 컴포넌트를 props, 삼항연산자 등의 개념을 활용하여 재사용

  ProductWrite 컴포넌트를 상품 등록과 상품 수정에 사용하기 위해서 각각에 isEdit=true/false 값을 주고 컴포넌트를 불러올 때 같이 값을 보내서 같은 컴포넌트이지만 화면에 나타나는 문구나 버튼을 눌렀을 때 실행되는 함수를 다르게 설정했다.
  기획자로 일할 때 어떤 화면은 페이지를 따로 빼고, 어떤 화면은 때에 따라 다르게 보여주지만 한 화면으로 처리하기도 하고 해서 그 기준이 궁금했는데, 오늘 배운 개념을 이용해서 처리하는 것 같다. 결국 만드는 사람 마음..?
  처리하는 방법도 크게 어렵지 않아서, 기획 단계에서 이런 재사용이 가능한 페이지를 미리 구상하는 것도 중요할 것 같다! 공수 차이가 어마어마 할듯~

알고리즘 수업

• isNaN 함수로 숫자인지 검증하기 (Num.isNaN과의 차이)
• filter 활용하기
• reduce 활용하기
• 알고리즘 테스트

  어제 배운 reduce를 활용해서 문제 풀이를 해주셨는데,, 조금 더 써봐야 나도 문제에 직접 적용해 볼 수 있을 것 같다. filter는 크게 어렵지 않고 유용한 것 같아서 오늘 과제 할 때도 써봤다.
  isNaN 함수로는 숫자열인지 문자가 섞여있는지 검증하는 문제를 풀었고, Num.isNaN 함수는 isNaN과 비교했을 때 기준이 더 엄격해서 보통 숫자인지 검증할 때는 isNaN을, NaN인지 검증할 때는 Num.isNaN을 쓴다고 한다.
  아직까지 isNaN은 어따 써먹어야 할 지 잘 모르겠다...
  그리고 오늘 처음으로 알고리즘 테스트를 봤다. 3문제가 나왔는데 모두 조건문으로 해결 가능한 문제였다.. 너무 시시해서 쵸큼 실망.. 그래서 삼항연산자를 써서 연습하면서 아쉬움을 달랬다ㅎㅎㅎ 첫주여서 그런 거 같고 다음주부터는 점점 어려워질 것 같다! 언제 또 훅 치고 올라갈 지 모르니까 부지런히 연습해둬야겠다~!

Self Study

• ProductWrite component를 활용해서 상품 등록과 수정에 사용하기 & UPDATE_PRODUCT
• 포트폴리오 게시글 등록 화면을 수정 화면으로 재사용하기 & UPDATE_BOARD
• 체크박스 전체 체크 & 개별 체크 구현하기

  수정 화면 연결하고 update 후 다시 상세 화면으로 보내는 건 이전에 했던 등록, 조회 같은 기능과 크게 다르지 않아서 별로 어렵지 않았다. 그런데 submit 버튼에 기능을 넣으니까 또 이벤트가 폭발^^해버려서 이벤트를 막는 함수를 추가해줬더니 금방 잠잠해졌다 ㅎㅎ
  어제의 고난도 퀴즈인 체크박스 전체 체크 구현하는 건 어제부터 계속 매달렸지만 잘 안된다..ㅠㅠ 지금까지 배운 방식으로 해결하고 싶어서 이 방법 저 방법 해보고 있다. 전체 체크가 구현이 되면 개별 체크가 안눌리고 개별이 눌리면 또 그 반대고.. 그래도 아예 안되는 건 아니고 조금씩 바뀌긴 하니까 재밌다 ㅋㅋ 역시 프론트 하길 잘한듯 ㅎㅎㅎㅎㅎ 굿