오늘의 TIL
1. 나 이제 for문 안 쓸래 : map / filter
- 실무에서 for문은 거의 사용되지 않는다.
- 배열의 내장함수인 map과 filter에 대해서 배운다.
for문 대신 map과 filter를 활용할 수 있다. for문은 배열 안의 모든 요소에 대해 적용시켜주고, filter는 조건에 해당하는 원소를 필터링해준다.
주로 컴포넌트의 리턴값 안에서 많이 사용하게 될 것이고, map을 리턴값 안에서 사용하려면 {}으로 감싸서 사용하면 된다.
{배열.map((el)=><div>{el}</div>)}
2. 최신 데이터 가져와 줘
- 데이터 변경(삭제) 후 최신 데이터로 다시 fetch해주는 refetchQuery를 사용한다.
DELETE_BOARD가 실행되면 데이터가 삭제는 되지만 화면에는 바로 반영되지 않는다. 화면을 바로 새로 불러오려면 다시 fetch가 이루어져야 하고, Apollo에서 제공하는 기본 기능인 refetchQueries 키를 사용하여 최신 목록을 다시 조회할 수 있다.
3. 왜 삭제가 안되지?
- map의 index 사용법과, index를 key로 사용했을 때 발생하는 문제점을 파악한다.
map의 두번째 인자로 index를 입력하면 index를 사용할 수 있다. 하지만 index를 key로 사용할 경우, 해당 데이터가 삭제되면 새로운 index가 부여되므로 index를 부여한 열의 값은 제거되지 않는다. 따라서 key를 지정할 때는 고유한 키(ex ID)를 사용해야 한다.
JavaScript 기초 수업
- 스코프, 스코프 체인
변수의 유효범위인 스코프는 전역공간/지역공간으로 나뉘고, 변수는 전역변수/지역변수로 나뉜다.
전역변수는 어디에서나 사용 가능하지만, var 사용 시 전역 변수가 선언되지 않은 블록 안에서 해당 변수 사용 이후에 해당 변수를 선언하게 되면, 호이스팅으로 인하여 그 변수는 undefined가 출력된다.
알고리즘 수업
- slice 함수로 문자열 자르기
- reduce 함수로 배열의 평균값 구하기
누적값을 구하는 reduce는 각 원소에 대해 콜백 함수를 실행하고 하나의 결과 값을 반환해준다. 주로 총 원소의 합을 구할 때 사용하고 입력값으로 누적값, 현재값 그리고 초기값(선택)을 가지고 콜백함수를 수행한다.
예제를 보고는 원리를 이해할 수 있지만 사용하기에는 아직 낯설게 느껴진다. 사용법을 익혀서 활용하면 유용하게 쓰일 것 같다.
Self Study
- Map/Filter를 이용해서 배열에 원하는 값 수정/추가
- FETCH_PRODUCTS를 활용해서 상품 목록 화면 출력
- DELETE_PRODUCT를 활용해서 상품 삭제 및 refetch
- 포트폴리오 게시글 목록 화면 구현, 상세 화면에서 삭제 기능 구현
포트폴리오에 목록 화면이 추가되었다. 목록 화면에서 게시글을 눌렀을 때 해당 게시글 상세로 넘어가는 기능을 추가하려고 했는데, presenter에 넣은 onClick 이벤트가 버튼을 누르지 않아도 저절로 실행되어 목록 화면을 진입하자마자 상세 화면으로 넘어가는 현상이 있었다. ㅠㅠ
알고보니 onClick 이벤트에 인자를 넣어서 클릭을 하지 않아도 바로 실행이 되는 것이었다.(DOM event??) 이벤트 함수에 인자를 넣어서 보내는 게 아니라 해당 태그에 id로 필요한 값을 보내고, container에서 함수를 선언하는 부분에 event.target.id로 읽어와서 사용했더니 라우팅이 올바르게 실행되었다! 굿
