[React] 리액트에서 classList 수정하기, 조건에따라 className 변경하기

문제입력에따라 tailwind 스타일을 적용하기위해 요소의 className을 추가하거나 제거해야하는 상황이 있었는데 class를 조작한다고하니 이전에 바닐라JS로 했던 방법이 떠올라 classList.add, classList.remove등을 사용했다. 그러나 계속 add가 존재하지 않는다거나하는 오류발생했다.. 찾아보니 리액트에선 DOM 요소에 직접적으로 접근하는 것을 권장하지 않는다고 한다!! 사용자 입력에따라 렌더링할 내용, 조건 등을 state로 관리하듯이 JSX 문법을 활용해 조건에 해당하면 currentStep 클래스를 포함시키고 그렇지 않은 경우 포함시키지 않는 방식으로 변경해야한다!!!  기존 방법const handleStepSelection = (e, element) => { pr..

• format_list_bulleted React
• · 2024. 9. 15.
• textsms

[React/Vite] 카카오맵 API 마커 표시, 클러스터 라이브러리 사용해보기

마커 표시한 개import { useEffect } from "react";const { kakao } = window;const App = () => { useEffect(() => { const container = document.getElementById("map"); const options = { center: new kakao.maps.LatLng(33.450701, 126.570667), level: 3, }; const map = new kakao.maps.Map(container, options); const markerPosition = new kakao.maps.LatLng(33.450701, 126.570667); const ma..

• format_list_bulleted React
• · 2024. 9. 13.
• textsms

[React/Vite] 카카오맵 API 사용 설정하기

초기 설정1. 카카오 개발자사이트에 접속해 개발자 등록 및 앱 생성2. 앱 설정 - 플랫폼 - Web 플랫폼 등록으로 사이트 도메인 등록 (지도API를 사용할 도메인이 어디인지 등록! http://localhost:3000/ 으로 등록함3. 앱 설정 - 앱 키 - JavaScript 키 복사하여 .evn.local에 저장 -> 변수명 VITE_KAKAO_MAP_API_KEY (VITE_로 시작하면 상관없음!)  간단 테스트 - 지도 띄우기 (API 연결 확인)// index.htmlimport { useEffect } from "react";const { kakao } = window;const App = () => { useEffect(() => { const container = documen..

• format_list_bulleted React
• · 2024. 9. 13.
• textsms

[React/JS] 캐러셀 구현하기 (Tailwind)

캐러셀!! 계속 구현해보고싶었는데 시간에 밀려 시도를 못해보다가 이번 MBTI 테스트 프로젝트를 만들면서 드디어 적용해봤다 기존 코드는 데스크탑 기준으로 너비나 배치 등을 적용해둬서 모바일로 확인했을 때 왼쪽과 같이 조각조각 잘리고 가려지고 ㅋㅋㅋ 이상한 배치가 됐다 반응형 UI도 꼭 적용해보고싶었기 때문에 아예 width 1024 이하인 경우에는 테스트에대한 가이드를 캐러셀로 보여주기로 했다.  구현 방법1) 캐러셀로 보여줄 컨텐츠가 담긴 배열에서 인덱스를 증가/감소하며 해당하는 내용의 카드가 가운데에 오도록 한다2) 이전, 다음 버튼을 눌렀을 때 0번 인덱스에서 이전 버튼을 눌렀거나, 마지막 인덱스에서 다음 버튼을 누른 경우 각각 마지막, 첫 인덱스로 변경한다.3) 캐러셀이 보여지는 범위를 컨테이너로..

• format_list_bulleted React
• · 2024. 9. 12.
• textsms

개인프로젝트 발생한 문제와 해결

https://nninyeong.tistory.com/109 [Tailwind] 부모 요소가 hover 상태일 때 자식 요소 스타일 지정하기 (group)지난번 팀프로젝트에서 특정 경로로 이동하는 버튼들을 모두 useNavigate()를 이용해 만들었는데, 시맨틱한 코드를 고려하기 위해서는 Link 태그를 더 활용해보는 것을 추천받았다.경로 이동을 유도nninyeong.tistory.com 지난번 작성한 글에 이어서 조금 더 추가! 정확한 API 명세 확인과 formData 객체 활용하기문제: 로그인 요청 시 헤더에 인증 토큰이 없다는 에러 발생로그인 요청을 보낼 때 서버에서 "Authorization 토큰이 없다"는 에러가 발생했다. 하지만 네트워크로 전송하는 데이터를 출력했을 땐 헤더에 토큰이 잘 들..

• format_list_bulleted 일지
• · 2024. 9. 11.
• textsms

[디자인패턴] JS로 발행-구독 (Pub-Sub) 패턴 구현해보기

옵저버 패턴발행-구독 패턴에 대해 공부하기 전 챌린지반에서 옵저버 패턴을 공부했다. 어떤 변화가 일어났을 때 그 변화를 감지해야할 곳에서 변화 상태를 구독하는 방식으로 구현하는 것을 의미한다.이 패턴을 구현하기 위해 특정 요소의 업데이트가 발생할 때 호출할 함수들 목록(구독자/관찰자 목록이라고 할 수 있다!)을 만들어두고, 구독할 요소들에서 변경된 값을 반영하기위한 함수(변화시 호출될 콜백함수)들을 그 구독자 목록에 push해주면 된다. 옵저버 패턴의 특징- 상태 변화가 발생하는 요소(주체)가 자신의 변화가 미칠 영향을 몰라도 된다.- 주체와 그 관찰자의 결합도가 낮다.- 옵저버로 등록(구독)해야하므로 두 요소는 완전히 모르는 상태가 아니다. 구현 예제// Subject.js -> 주체const crea..

• format_list_bulleted 디자인패턴
• · 2024. 9. 10.
• textsms