map3 Array.from 이용해서 새로운 배열로 별점 생성하기 삼항연산자로 후기가 없을 경우 처리하기 이번 포스팅에서는 유저에게 이미 적힌 리뷰들을 볼 수 있는 리뷰 리스트를 구현해보도록 하자. 먼저 후기가 하나도 없는 유저라면 배열로 오는 데이터의 길이가 0일 것이기 때문에 그에 해당하면 후기가 없다는 것을 삼항연산자를 통해 보여주었다. {reviewData.length === 0 ? ( 아직 후기가 없습니다. ) : ( 후기 있는 경우 ) } new Array로 숫자를 별점 아이콘으로 만들기 후기가 있는 경우 백엔드에게 받아오는 후기의 평점는 양의 정수였는데 이 데이터를 별 아이콘으로 보여지도록 가공해야했다. 방법을 찾는 중에 멘토님께서 new Array()라는 것을 알려주셨고, new Array(숫자)를 넣어주면 숫자만큼의 길이를 가진 배열을 생성할 수 있었다.. 2023. 9. 24. 댓글 컴포넌트화해 분리하고 props로 데이터 전달하기 새로 만들어진 댓글을 컴포넌트화 해서 새 파일로 빼고 관련된 내용을 부모에서 자식으로 데이터를 전달해보도록하겠다. 이미 만들어진 기능을 다시 컴포넌트로 분리하라니...머리가 아파왔다. 기존의 코드는 이렇게 생겼고 반복될 부분만 컴포넌트화 해주기로 했다. 여기서 반복되는 부분은 return 중 p 태그다. {saveComment.map((ele, idx) => { return wecode {ele}; })} 반복되는 p 태그를 빼고 만들어준 CommentFull 컴포넌트에 건내줄 userComment의 요소와 index 값을 props로 넘겨준다. return ( {saveComment.map((ele, idx) => { return ; })} ) 아까 뺐던 반복되는 p 태그를 CommentFull 컴포.. 2023. 6. 19. filter method 이용해서 아이디 검색 기능 구현하기 이번 과제 중에 제일 어려웠던것 같다. 다른것들도 하루종일 고민했지만 이건 하루종일 고민해도 너무 어려웠다. 다른 기능은 다 구현했는데 여기서 filter를 통해 원하는 검색결과만 보이게 하는 기능이 제일 어렵게 느껴졌다. 실제 인스타 nav 검색창에 아이디를 입력 시 검색 기능이 실행됩니다. 아이디 데이터를 담고 있는 배열을 선언해주세요. 검색 창에 텍스트 입력 시 배열의 요소 중 해당 텍스트에 일치하는 아이디만 보일 수 있도록 구현해주세요. for 문이 아닌 다른 array method를 사용해 구현해주세요. DB가 아닌 그냥 간단하게 보여줄 정도라서 javascript 파일 상단에 배열로 id list를 만들어준다. let userArray = [ { id: "wecode_bootcamp", sub.. 2023. 6. 13. 이전 1 다음
