지금껏 map과 forEach, 둘 다 원본 데이터를 기반으로새로운 데이터를 만든다고 알고있었고최근에 인터뷰를 진행하며 내가 잘못 알고있었다는 점을 깨닫게 되어정리를 해보았다.결론map은 배열을 리턴하는 callback,forEach는 순회하는 배열의 요소와 index를 기준으로내부 스코프에서 정의한 코드를 수행하고 아무것도 반환하지 않는 콜백이다.예시1) mapconst testArray = [1,2,3,4,5]const result = testArray.map((item, index) =>{ const eachItem = item*2; return eachItem;});// testArray 배열을 기준으로 순회하며 각 배열의 요소를 2씩 곱한 새로운 배열 생성console.log(result); ..

이전 회사에서 진행한 채팅 프로젝트에서 유저가 이미지를 첨부한 메시지가 많아질수록 이미지 로딩이 오래 걸리는 현상이 있었다. 대부분의 유저가 텍스트 메시지를 사용하기도 했고 이미지를 많이 보내는 유저도 드물었지만 유저는 항상 예측할 수 없는 행동을 하기에 대량의 이미지를 로딩해오는 부분에 대해 고려가 필요했다. 그 때 사용했던 것이 react-lazy-loading이었다. 웹 페이지의 성능 개선 중 하나이다. 효율적으로 import를 하는 것으로도 성능 개선이 가능하다. 모든 import를 한 번에 가져오는 것 보다 필요할 때만 가져와서 import를 해줌으로서 resource 낭비를 줄이기 때문이다. 그 방법으로 react-lazy-loading이라는 것이 있다. 쉬운 말로 해당 컴포넌트로 화면을 렌더..

인스타를 돌아댕기다가 JS의 형변환에 관한 짤을 보고 글을 작성하게 되었다. ↓ 문제의 짤 true / false인 이유 0 == '0'; // true 0 == [ ]; // true '0' == []; // false 3개의 연산 결과가 true/false인 이유에 대해 알아보자 나의 생각 결론부터 말하면 Null과 undefined로 접근을 했고, 틀렸다. 1) 0 == '0' 원시 데이터 타입 중 num과 string을 비교하는 것. 자바스크립트가 알아서 해주는 거 아녔나? 라는 생각이 들었다. 문득 값이 없는 것은 undefined가 아닐까라는 생각이 들었고, undefined == undefined 로서 true가 된 것 같았다. 2) 0 == [ ] 원시 데이터와 참조형 데이터를 비교하는 것..