본문 바로가기

❄️ React13

[React] 이중리스트 이차원리스트 이차원 배열 병합, 정렬, 중복 제거 하기 현재 진행하는 개인 프로젝트에서 이차원 리스트를 합쳐야했다. 그런데 그냥 합치는게 아니라 각각의 행들끼리 합치고싶었다.합쳐도 그대로 이차원 리스트가 나오도록!✏️병합 : concat()두 개 이상의 배열을 병합할 때 사용한다.기존의 배열을 변경하지 않고, 새로운 배열을 return한다. ✔️사용법const array1 = ['a', 'b', 'c'];const array2 = ['d', 'e', 'f'];const array3 = array1.concat(array2); => 결과로 Array ["a", "b", "c", "d", "e", "f"] 가 도출된다.✏️행끼리 병합 : map() 사용하기이럴때 map을 사용해야한다. let newlist = list3.map((arr, index) => a.. 2024. 9. 11.
[React] map() 메서드, map() 함수란? ✏️Array.prototype.map()map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. ✔️ 그래서 이게 뭔데?1. 반복되는 컴포넌트를 렌더링 하기 위해 사용한다. => 즉 반복문이라고 생각하면 편할것 같다.2. 기존의 배열에 새로운 규칙을 추가하여 계산한 다음, 새로운 배열을 만들어낸다.=> 즉 원본 배열 + 이렇게 변화시켜줘! 하는 규칙 = 네가 원하는 배열 로 나온다고 생각하면 된다. 그러니까 반복문인데 새로운 배열을 뱉어내는 반복문. 으로 나는 이해하였다. 예시를 하나 먼저 보겠다.const numbers = [1, 2, 3, 4, 5];const doubled = numbers.map((number) => number * 2).. 2024. 9. 11.
[React/Google Map] 구글맵 기본 마커 지우기 이번 프로젝트에서는 구글맵을 이용해서 웹사이트를 만들어야 했다.그래서 구글맵을 다루는 방법을 차근차근 기록하려한다.이번 포스팅은 구글맵에서 기본적으로 표시되는 마커를 지우는 방법이다. 구글맵을 리액트로 불러와준다. (이건 나중에 제대로 익히고 나서 포스팅하도록 하겠다.) 1. 기본으로 출력되는 지도구글맵 API를 사용하면 기본적으로 랜드마크, 식당, 주차장 등 마커들이 표시된 지도가 출력 된다.내가 사용해야할 지도는 이러한 정보가 필요 없었기 때문에, 최대한 깔끔한 지도를 출력하고 싶었다. 2. 마커 출력 설정 해주기구글맵에서 기본으로 제공해주는 기능이다. 아래의 사이트로 들어간다.https://mapstyle.withgoogle.com/ Styling Wizard: Google Maps APIsTo i.. 2023. 11. 14.
[http-server] 페이지 로드하기 http 서버를 실행할 때 아래와 같은 명령어를 실행한다. http-server --proxy http://localhost:8080? ./build http-server 설치 → 빌드 하고 → http-server --proxy http://localhost:8080? ./build 참고자료 React router with http-server we use react-roucter-dom with http-server , when user loads main page and click navigation links , new pages will loaded perfectly , but when user refresh page in that route , it returns 404 . It m... st.. 2023. 11. 14.
[http-server] 이 시스템에서 스크립트를 실행할 수 없으므로~ 오류 해결 해커톤 준비를 하며 간단한 웹서버 사용을 위해 http-server를 사용해야했다. http-server 설치는 다음과 같이 하면 된다.npm install --global http-server 그리고 이 서버를 실행하기 위해서는 http-server라는 명령어를 입력하면 된다.http-server 하지만 이 코드를 입력하니 에러 메세지가 발생하였다.해결방법PowerShell을 관리자 권한으로 연다.ExecutionPolicy을 입력하면 Restricted  설정된것이 보일것이다.Set-ExecutionPolicy Unrestricted를 입력하면위와 같은 메세지가 뜰것이다. Y를 입력해준다. 그리고 다시ExecutionPolicy를 입력하면 Unrestricted 로 바뀐것을 확인할 수 있다.다시 ht.. 2023. 11. 13.
[React] 이미지 업로드 & 미리보기 기능 만들기 (1) 리뷰 작성을 하는 창에서 사진 3개를 첨부할 수 있도록 하고, 사진 미리보기를 띄워주도록 해야했다. 이번 포스팅은 단순 기능 구현과 공부한것들의 기록이고, 다음 포스팅에서 서버와의 연결을 기록하도록 하겠다.✨알아야할것FileReaderWeb API웹 브라우저에서 제공하는 API개발자가 브라우저 상에 쉽게 개발할 수 있도록 도와주는 객체의 모음파일을 읽을 수 있게 해주는 객체File, Blob 객체를 핸들링할 때 사용됨.Blob : 이미지, 사운드, 비디오와 같은 멀티미디어 데이터 다룰때 사용데이터의 크기(Byte) 및 데이터 송수신을 위한 작은 Blob 객체로 나누는 등의 작업에 사용함.위의 객체를 사용해 특정 파일을 읽어들여 JS에서 파일에 접근할 수 있도록 도와줌readAsDataURL파일을 URL로.. 2023. 8. 24.