본문 바로가기

✨ FrontEnd20

[합주시간표 프로젝트] 01# 기획과 구상, 시간표 만들기 01. 문제상황밴드 동아리에서 사용할 합주 시간표 마법사가 필요했다. 밴드 동아리 특성 상 합주를 해야하는 일이 많은데 기타2, 베이스1, 드럼1, 키보드1, 보컬1 총 6명이 공통으로 비어있는 시간을 맞추기란 쉽지가 않았다. 그래서 파이썬을 잘 다루는 동아리 부원중 한명이 파이썬 라이브러리로 히트맵을 만들어시각화해서 보여주는 합주 시간표 마법사를 만들었으나,일일이 데이터를 입력하여 캡쳐해서 단톡에 보내주는것이 꽤 불편해 보였다.. 그래서 그냥 필요한 사람들의 이름만 입력하면 자동으로 합주 가능한 시간을 보여주는웹사이트를 만들어 배포하면 친구의 수고로움도 덜고,다른 부원들도 직접 들어가서 확인할 수 있으니 좀 더 편리할것이라는 생각이 들었다. 그래서 경험도 쌓아 볼 겸 개인 프로젝트를 진행하기로 하였다... 2024. 9. 11.
[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.