Co Meet 프로젝트를 진행하며 내가 구현한 부분 복습 및 기록!!
구현한 기능
와!!!!!!!!!! 어떻게 코드를 짜야 할지 고민했던 삽질이 해결됐다!! 😆😆
지금 보면 어려운 기능은 아니지만 .. ㅎㅎ 그래도 내가 프로젝트에 조금이나마 기여를 했다는 점과 엉덩이 무겁게 앉아서 구글링을 한 나 자신의 대견함(👏), 오류 코드를 뚫고 문제를 해결했을 때의 쾌감을 감출 수가 없어서...
어차피 프로젝트에서도 많이 쓰이고, 써도 써도 헷갈려죽겠는 Map 함수를 까먹기 전에 다시 되새기면서 정복도 할 겸 Velog를 켰다!
아직 각 Stack 별 이미지를 구하지 않아서 이미지가 없는 Stack이 보이는데, 기능 구현은 해결됐으니 이제 천천히 찾아서 이미지만 넣으면 끝~!
그래서 어떤걸 구현 했는데?
바로 Json 값을 받아와 화면에 기술 스텍을 렌더링 하기!!
기존까지 작업된 데이터는 각 언어를 클릭했을 때 선택 및 해제가 되는데 더미 데이터로 만들어 놨다 보니 재정비가 필요했다.
기존까지 구현된 화면
구현된 화면 내부의 더미 데이터 코드.. 
백 DB에도 사용해야 하니 백 담당 형이 기술 스택에 리스트업 할 언어 리스트를 객체로 묶어 Json 파일로 새로 만들어서 줬고 나는 기존 코드를 새로 만들어서 줬고 나는 기존 코드를 새로 뒤집어엎어서 Json 파일에 기재된 객체 값을 불러오는 기술 스텍 렌더링을 했다.
그래서 무슨 고민을 했는데?
이걸 어떤 코드로 각 타이틀에 맞게 렌더링을 할 수 있을까 많은 고민을 했는데 (알고 보면 간단..)
[오늘 뭐 입지?] 프로젝트를 만들며 배웠던 Map 함수를 활용하여 기능을 구현했다! (돌려 막기 ㅎㅎ)
1. Json 파일 수정
형한테 받은 객체 데이터이다.
-
(key) : (value) 형식이라고 했을때, 백엔드 or DB에서 쓰는 형식이 (value). key값이 왼쪽의 (key).
naming convention은 value는 전부 대문자처리 & 띄워쓰기는 _ 처리 -
"_comment"는 json에서 주석처리 하는방법으로 실제 반영되지않는 데이터
이 상태에서 json을 파일을 import했는데 주석처리한 _comment 데이터가 받아와져서 찾아보니
JSON은 데이터만을 취급합니다. 주석을 달게 되면 그것까지 데이터로 취급됩니다.
Json 파일에서는 주석 처리가 처리되지 않는다고 한다! (이렇게 배워갑니다)
그리고 기존의 '프론트엔드', '백엔드', '모바일', '기타'로 나뉘어저있던 타이틀을
'언어', '프레임워크', '기타'로 나눌 겸 (추 후 변동 있을 수 있음) Json도 같이 수정을 했다.
깔끔 ✨
2. 코드 수정
각 타이틀에 맞는 변수를 만들어 준 뒤 경로를 지정하여 Map() 함수 사용!
LANGUAGE, FRAEMWORK, ETC로 각 변수를 설정하여 따로 맵핑을 했다.
자세하게 뜯어보면 단순 반복적인 코드라 머쓱하긴 하지만..
하나의 경로를 찾아 지정하고 이미지와 함께 렌더링하는 코드를 짜는데 엄청난 고민이 들어갔으니! (감격)
복습!
Map()함수란?
반복되는 컴포넌트를 렌더링하기 위해, 자바스크립트 배열의 내장 함수인 map() 을 사용한다!
파라미터로 전달된 함수를 사용해, 배열 내 각 요소를 원하는 규칙에 따라 변환한 다음 배열을 생성한다!
배열.map(함수를 담는다.)
arr.map(callbakFunction(currentValue, index, array), thisArg)-
callbackFunction : 새로운 배열의 요소를 생성하는 함수
-
currentValue : 현재 배열 내의 값을 의미
-
index : 현재 배열 내 값의 인덱스
-
array : 현재 배열을 의미
-
thisArg : callbackFunction 안에서 사용할 this 레퍼런스를 의미
즉, callbackFunction을 실행한 결과를 이용해 새로운 배열을 만들어 내는 함수이다.
Key?
Map() 함수를 사용할 때 빠질 수 없는 Key 값!
요소의 리스트를 만들 때, React가 어떤 Item이 바뀌었는지 추가 및 삭제되었는지를 인식하는 데 사용한다.
- key는 요소의 고유한 값이어야 함!
그러므로 배열 요소의 id or index로 사용한다.
(index는 배열 순서가 바뀌면 index도 바뀌기 때문에 권장하지 않음)
배열 렌더링은 이제 걱정 없는 걸로~ 힘내서 프로젝트 마무리까지 파이팅!!🙌
이미지 첨부 및 스타일링까지 완성!!
Done!! 👏
