1. 자바스크립트를 공부하게 된 배경
길고 길었던 스프린트를 마무리하고 내가 뭘 공부해야할까 라는 생각이 들었고 그 답은 자바스크립트, 리액트 공부였다.
물론 타입스크립트를 사용해 이번 결과물을 만들었지만 " 타입 지정 오류들을 겪으면서 이렇게 오류들을 보여주니까 런타임에서는 에러가 적어지는구나 라고 생각했고, 특히 협업 과정에서는 타입스크립트로 작성된 코드가 그 코드의 의도가 좀 더 명확히 보인다" 라는 점을 조금은 느꼈지만 완벽히 이해하진 못했다.
아직 저런 과정을 겪어본적도 크개 없을뿐더러 기술도 부족하기 떄문이다.
고로 이번에 리액트와 자바스크립트를 공부하기로 했고 드림코딩 리액트과정 강의를 수강했다.
2. 제목의 저3개가 이번에 글의 주제인 이유
운이 좋게도 개발자인 친구가 있는데 그 친구랑 커피타임을 가질떄 자바스크립트 굳이 다 알필요는 없고 특정 몇개를 알아두면 정말 좋다 라고 했었는데 그중에서도 본인이 생각하기에 map이 정말 많이 쓰인다고 했다.
처음에 커피타임을 가질떄는 이해하지 못했지만 리액트를 배우고 스프린트를 하고 겪어보고 나서야 왜 map이 많이쓰이는지 알게 됐다.
2.1 그래서 Map이란?
map의 사전적 의미는 아래와 같다.
조금더 첨언을 붙이자면 map은 배열을 반환하는데 본래 부모 map은 건들지 않으면서 새로운 값을 반환한다.
ex)
이런 값을 가지게되고 본래 number의 배열에는 아무런 변화가 없다.
이런 배열 자체 값도 변경가능하지만 이번에 공부하면서 배열안에 객체의 값을 필요했고 아래처럼 작성했다.
그리고 이제 아래에 foreach, filter도 마찬가지지만 주어진 콜백함수를 배열마다 한번씩돌면서 실행하기 때문에 change의 값은 배열의 총 length인 5가 나온다.
2.2 그래서 Filter란?
우선 Filter의 사전적 의미는 아래와 같다.
위에서 Map은 주어진 콜백함수의 조건에 응하는 형태로 새로운 배열을 반환하는 함수였다면 filter는 주어진 콜백함수에 만족하는 값의 배열만 반환하는 함수이다.
ex)
위와같이 작성시 testmap이란 배열은 [2,3,4,5]의 값을가진 배열을 return한다.
flilter의 영어사전적의미와도 비슷하게 그냥 어떤걸 걸러낸다고 이해하면 편하고 이번 리액트를 공부하면서 todo리스트들중 count가 1이상으로 활성화 돼있을때 navbar에 1씩 추가해주는 logic을 작성해야 했고 아래와 같이 해결했다.
이걸 보면서 흔히 검색에서 줄임검색기능 (ex) he is good을 검색하기 위해 hig만 입력해도 가능하도록 )을 내가 구현할 일이 생긴다면 filter를 사용하면 좋을것 같다는 생각을 했다.
2.3 그래서 Foreach란?
foreach의 사전적 의미는 아래와 같다.
map은 배열내의 값 바꾸기 filter는 배열내 값을 필터링하기 foreach는 배열내 요소마다 각각 콜백함수조건에 따라 한번씩 실행하는 함수이다.
3. 끝으로
요새 공부 관련해서 블로그에 글 남기기가 소홀했고 소홀해진만큼 머리에 남는것이 거의 없는것 같다는 생각이 들었다.
본래 이렇게 정리하면 기억에 오래 남아있는 편이기도 했고 저번 테오의 스프린트를 겪고난후 내글이 누군가에게 도움이 될지도 모른다는 생각에, 나를위한 또 한편으로는 남을위한 블로그 포스트를 꾸준히 열심히 할 생각이다!!
"기억보단 기록을"