다들 기말은 잘 치셨나여. ㅎㅎ 본격적인 첫 미션에 오신걸 환영합니다~~
이 레퍼런스는 여러분이 미션을 진행하는데에 있어서 조금 더 편하고! 확실한 방향성을 드리기 위해서 열심히 작성 중 입니다!
부디 잘 읽어주시구, 또 궁금한 점 있거나 미션 진행중 어려움을 마주쳤다면 꼭 선배들에게 질문 해 주세용. 꼭... 꼭...!!
가장 먼저 알려드릴건 json 입니다. 여러분 이 폴더 중 "data.json" 을 들어가서 보고 다시 돌아오세용.
어때요? JSON은 쉽게 말하면, 데이터를 모아둔 곳 이라고 설명 할 수 있어요. 즉... -> Javascript 객체 문법으로 구조화된 데이터를 표현 하기 위한 것이라고 할 수 있죠.
원래는 백엔드에서 필요한 데이터를 넘겨줘야하는데, 저희는 현재 프론트엔드만을 사용하고 있으니, JSON을 사용해서 사용할 데이터를 예시로 만들어준 거에요. (백엔드에서 넘겨주는 데이터도 JSON 형식이 대부분이랍니다!)
저렇게 데이터를 JSON으로 만들어서 관리하면, 실제 코드가 훨~씬 짧고 효율적이에요. 직접 사용 해 보시면 뼈저리게 느낄 거에요.
여러분 당근마켓 클론코딩 할 때 상품리스트 화면... 어떻게 개발하실건가여.
<div>
<img src="상품사진" />
<p>상품명1</p>
</div>
<div>
<img src="상품사진" />
<p>상품명2</p>
</div>
. . .대충 이런 코드를 원하는 리스트 개수만큼 복붙을 해야겠다는 생각이 들죠?
근데... 이게 5~10개 정도면 어떻게든 하겠는데, 만약 100개가 넘는 상품이 있다면? 그걸 다 복붙을 해야할까요?
방법 은 있습니다. 그거슨 바로~~~ MAP 입니다.
Map이 무엇일까요. 아마 제가 지금까지 프론트엔드를 하면서 가장 많이 써온 것이 MAP 이라고 자신있게 말 할 수 있어용.
제가 처음 MAP을 공부할 때 -> 배열의 각 요소에 대해 callback을 실행하고 실행결과를 모은 새 배열을 리턴 배열을 순회하므로 중간에 "break;" 문을 사용할 수 없음. 이런 경우라면 for( )문을 사용해야함
라고 정리를 해 두었었네용.
즉 다들 잘 아시는 for문과 비슷한 반복문이라고 설명할 수 있어요.
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(function (number) {
return number * 2; // 매핑된 결과를 새로운 배열로 반환
});
console.log(doubledNumbers);
// 출력: [2, 4, 6, 8, 10]이것은 MAP의 예시 코드입니다. 물론 실제로 사용하는 방법과는 좀 다르겠지요? 하지만 형식은 비슷하다는 점! 기억하기~~
또한 MAP에서 가장 중요하다고 말할 수 있는 KEY 라는 것이 있는데요! KEY는 리액트에서 MAP을 사용할 때 꼭 필요한 존재입니당 KEY는 각 컴포넌트를 고유하게 식별하기 위해 꼭 필요한 존재에요 자세한 부분은 리액트를 사용할 때 다시 만나기로 해용
여러분들은 이번 당근마켓 클론코딩을 하시면서 data.json 과 MAP 을 통해 효율적으로 다양한 데이터를 보여주어야 합니다! 현재 제가 data.json을 만들어드렸는데요. 이 json 파일을 사용해서 당근마켓의 물품리스트를 만들어주시면 됩니다.
+data.json은 다 쓰셔도! 쓰지 않으셔도! 좋습니다. 또!한! 더 추가하셔도~ 관계없습니당.
하~나도 어렵지 않아요. 솔직히 제가 말씀드린 것만 알고 해도 할 수 있을걸..요?
여러분!!!!!!! 당연히 어렵고 모를 수 있지만!!!!! 중요한것은 중.꺾.마 입니다~~~ 구글링 도 필수적으로 하시면 좋을 것 같구용. 또... 저희도 존재하는거 아시져? 질문도 퐉퐉 그냥 질문공세 환영이니 언제든 해주세용.