neda의 블로그

230705 Custom hooks으로 modal 만들기 Modal의 불편함 Modal을 열고 닫는 상태 관리를 위한 useState의 사용 return 문안에서 조건 연산자를 사용한 Modal 렌더링 '확인', '취소' 버튼을 눌렀을 때 실행할 함수를 각각 props로 넘겨야 한다 function App() { const [isOpenModal, setOpenModal] = useState(false); return ( setOpenModal(true)}>medium 버튼 {isOpenModal && createPortal( setOpenModal(false)} confirmFunc={() => console.log("Confirmed")} > 버튼이 2개인 모달 ,document.body )} ); ..

230704 useLoading hooks와 react-query로 데이터 가져오기 useLoading useLoading 훅은 loading 과 startPromise를 반환한다. startPromise(promise)는 인자로 Promise를 입력 받고, 결과를 반환한다. loading 변수를 통해 Promise가 진행되는 동안 로딩 상태를 알려준다. useLoading | Slash libraries Promise의 로딩 상태를 쉽게 관리할 수 있게 해주는 훅입니다. slash.page // toss - useLoading import { useCallback, useMemo, useState } from "react"; export function useLoading(): [ boolean, (p..

한 주의 흐름 1. 한 일 프로젝트 명: 리액트와 파이어베이스로 만드는 여행 사진 & 후기글 공유 뉴스피드 플랫폼, 트래블로그(TRAVELOG) 필수 작업 로그인, 회원 가입 ㄴAuthentication 에서 제공하는 api를 이용하여 아래 회원 가입, 로그인을 구현 ㄴ아이디(이메일), 패스워드 로그인 및 회원가입 CRUD ㄴFirestore 에서 제공하는 api를 이용하여 CRUD 데이터베이스 핸들링 구현 ㄴCUD(등록, 수정, 삭제)가 일어날 때 마다 R(조회)해서 자연스럽게 화면 변경 마이 페이지 ㄴ내 게시물 보기 ㄴAuthentication 에서 제공하는 uid 를 이용해서 내 게시물을 모아서 조회 ㄴ프로필 수정 기능 ㄴStorage 에서 제공하는 api를 이용하여 이미지 업로드와 다운로드 url..

230702 내일배움캠프 7주차 WIL Facts 리액트 파이어베이스 팀 프로젝트 진행 카카오 맵 API를 리액트에서 적용하기 Feelings 리액트를 다 함께 사용해보는 것이 처음이라 컴포넌트 나누기가 힘들었다 카카오 맵 api를 전역 객체로 사용해서 리액트스럽게? 사용하기가 어려웠다 Findings 공통 컴포넌트를 사용할 거면 미리 만들거나 약속을 하는 것이 좋을 수도 있겠다 자바스크립트 라이브러리를 리액트에 적용하는 방법을 터득할 수 있었다 Future

230630 React Custom hooks로 로직 분리하기 리액트에서 컴포넌트는 재사용을 위한 하나의 요소이다. 컴포넌트가 로직과 UI를 모두 포함하는 컴포넌트는 디자인을 수정하기 힘들고 디자인을 위한 코드와 로직을 위한 코드가 섞여서 유지보수하기 불편한 점이 있다. 같은 기능이지만 디자인이 다른 컴포넌트를 만들기 위해서 번거롭게 완전 동일한 컴포넌트를 또 만들거나 내부에서 props를 통해 조건부 렌더링을 하면 컴포넌트가 많아질수록 힘들어진다. 이럴 때는 로직과 UI를 분리하여 사용할 수 있다. Custom hooks로 input 로직 만들기 가장 보편적으로 사용하는 inputText에서는 value와 onChange 이벤트를 사용하여 input을 조작할 수 있다. import { useState ..

230629 React.Children 사용해보기 기존에 모든 데이터를 props로 받다 보니 명시적으로 밖에서 어떻게 보이는지 어렵다는 생각을 했다. 보기 불편한 컴포넌트 예를 들어 아래와 같은 Select 컴포넌트를 보면 , 저 속성들이 어떻게 쓰이는지 바로 파악하기는 힘들다. 그래서 아래와 같이 SelectItem을 밖으로 빼서 함께 작성하면 보기 쉽다고 생각하고 찾아보니 이런 식으로 만든 컴포넌트들이 많다는 것을 알게 되었다. alert(value)} /> alert(value)} > 리액트 자바 스프링 노드 Children API 위와 같이 SelectItem이라는 컴포넌트의 배열을 children으로 전달하면 {children}으로 받아서 렌더링 해 줄 수 있다. 하지만 SelectItem 각..

230628 카카오지도로 장소와 지역 검색하기 카카오지도API를 라이브러리를 활용한 장소 검색과 지역검색. 그리고 현재 위치 검색 장소 검색 services 라이브러리의 Places를 사용하여 장소를 검색하고 검색결과를 받아 마커로 표시 한 페이지에 최대 15개, 페이지네이션을 통해 3페이지까지 총 45개의 항목을 가져올 수 있다 const Places = kakao.maps.services.Places() Places.keywordSearch(keyword, placesSearchCB) 지역 검색 services라이브러리의 Geocoder를 사용하여 검색하며 size 값을 통해 최대 30개의 항목을 가져올 수 있다 const Geocoder = kakao.maps.services.Geocoder() G..

230627 React에서 카카오지도 사용하는 방법 import { useEffect, useRef } from "react"; const KakaoMap = () => { const mapRef = useRef(); useEffect(() => { const container = document.getElementById("map"); const options = { center: new window.kakao.maps.LatLng(33.450701, 126.570667), level: 3, }; mapRef.current = new window.kakao.maps.Map(container, options); }, []); return ( ); }; export default KakaoMap; 확대 축..

230626 리액트&파이어베이스 팀 프로젝트 시작 2주 간의 리액트 학습을 한 후 이번에는 리액트 팀 프로젝트를 진행하게 되었다. 이번 프로젝트의 주제는 뉴스피드로 sns나 블로그, 커뮤니티처럼 기본적인 게시글 crud와 사용자 화면을 구현하는 것이 목표이다. 저번 프로젝트까지 체계적으로 프로젝트 세팅을 하지 못하고 시작한 것이 아쉬웠는데, 이번에는 몇 시간에 걸쳐 프로젝트를 시작하기 위한 준비를 다같이 할 수 있었다. 이번에는 Firebase를 이용하는 프로젝트라서 restAPI를 쓰지 않고 sdk를 사용해 함수를 호출하여 사용한다. 게시글 가져오기 함수 export const getPostByPostId = async (postId) => { const q = query(collection(db, '..

230625 내일배움캠프 6주차 WIL Facts React 2주차 레벨2, 레벨3 과제 진행했다. react-router-dom, redux 라이브러리를 사용해 페이지를 나누고 상태를 관리하는 방법을 적용했다. module css 적용하여 컴포넌트 별로 독립된 스타일을 작성할 수 있었다. Framer를 사용하는 방법에 대해 알아보고, 간단하게 페이지를 만들어 보았다. Feelings 모든 것을 한 페이지로 만드는 것보다 react-router-dom을 사용해 페이지를 나누는 것이 더 좋은 방법인 것 같다. redux를 사용해 상태 변화와 관련된 동작을 한 곳에서 관리하니 기능을 추가하거나 에러가 생길 때 수정하기 편했다. Framer는 색다른 경험이었다. 기본적으로 컴포넌트가 상호작용이 가능한 것이 신..