react10 [합주시간표 프로젝트] 01# 기획과 구상, 시간표 만들기 01. 문제상황밴드 동아리에서 사용할 합주 시간표 마법사가 필요했다. 밴드 동아리 특성 상 합주를 해야하는 일이 많은데 기타2, 베이스1, 드럼1, 키보드1, 보컬1 총 6명이 공통으로 비어있는 시간을 맞추기란 쉽지가 않았다. 그래서 파이썬을 잘 다루는 동아리 부원중 한명이 파이썬 라이브러리로 히트맵을 만들어시각화해서 보여주는 합주 시간표 마법사를 만들었으나,일일이 데이터를 입력하여 캡쳐해서 단톡에 보내주는것이 꽤 불편해 보였다.. 그래서 그냥 필요한 사람들의 이름만 입력하면 자동으로 합주 가능한 시간을 보여주는웹사이트를 만들어 배포하면 친구의 수고로움도 덜고,다른 부원들도 직접 들어가서 확인할 수 있으니 좀 더 편리할것이라는 생각이 들었다. 그래서 경험도 쌓아 볼 겸 개인 프로젝트를 진행하기로 하였다... 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. [React] 이미지 업로드 & 미리보기 기능 만들기 (1) 리뷰 작성을 하는 창에서 사진 3개를 첨부할 수 있도록 하고, 사진 미리보기를 띄워주도록 해야했다. 이번 포스팅은 단순 기능 구현과 공부한것들의 기록이고, 다음 포스팅에서 서버와의 연결을 기록하도록 하겠다.✨알아야할것FileReaderWeb API웹 브라우저에서 제공하는 API개발자가 브라우저 상에 쉽게 개발할 수 있도록 도와주는 객체의 모음파일을 읽을 수 있게 해주는 객체File, Blob 객체를 핸들링할 때 사용됨.Blob : 이미지, 사운드, 비디오와 같은 멀티미디어 데이터 다룰때 사용데이터의 크기(Byte) 및 데이터 송수신을 위한 작은 Blob 객체로 나누는 등의 작업에 사용함.위의 객체를 사용해 특정 파일을 읽어들여 JS에서 파일에 접근할 수 있도록 도와줌readAsDataURL파일을 URL로.. 2023. 8. 24. 이전 1 2 다음
