프론트엔드 개발자가 될거야./react
-
[react] react-router-dom Outlet으로 Tab메뉴 구현하기프론트엔드 개발자가 될거야./react 2023. 2. 8. 13:45
이러한 메뉴를 Tab 메뉴라고 하는데 react-router-dom Outlet으로 구현하는 방법에 대해 포스팅하려고 한다. 예를들어 마이페이지를 탭메뉴로 구성한다면 1. Router.tsx function Router() { return ( ); } export default Router; 먼저 Router에서 MyPage 컴포넌트의 자식들로 메뉴들을 넣어준다. 2. MyPage.tsx function MyPage() { const profilesMatch = useMatch("/mypage/profile"); const logoutMatch = useMatch("/mypage/logout"); const settingMatch = useMatch("/mypage/googleOTP"); return (..
-
로그인페이지에 헤더 안보이게 하기 (with. useLocation)프론트엔드 개발자가 될거야./react 2023. 2. 4. 15:40
로그인 페이지나 회원가입 페이지에만 헤더를 안보이게 해야하는 경우가 있다. 이미 Router에서 Header가 모든 페이지에 보이게 해두었는데 이런경우에는 어떻게 해야할까? 나는 react-router-dom의 useLocation으로 구현했다. 구현기 1. Router.tsx function Router() { return ( ); } 예를들어 Router의 구조가 이렇게 되어있다고 하자. Header는 모든 페이지에서 보여질 것이다. Header.tsx import React, { useEffect, useState } from "react"; import { useLocation } from "react-router-dom"; function Header() { const location = use..
-
[MUI Table 커스텀하기] React, Styled-Componet, Material-UI, TypeScript에서 테이블 커스텀하기프론트엔드 개발자가 될거야./react 2023. 2. 4. 14:31
위 사진은 가상화폐 거래소 코빗에 있는 테이블이다. 회사에서 프로젝트를 하면서 이런식으로 테이블을 그려내야했는데 테이블을 내가 원하는 레이아웃으로 커스텀하기에 꽤 복잡했기에.. 그 부분에 대해 블로깅을 해보려고 한다. 우선 나는 css는 Styled-Componet로 스타일을 주고 있고 css라이브러리로는 material ui를 쓴다. Styled-Componet는 material ui를 쉽게 overloading 할 수 있어서 내가 좋아하는 조합이다 : ) https://mui.com/ MUI: The React component library you always wanted MUI provides a simple, customizable, and accessible library of React co..
-
[react-query] react-query는 왜 써야할까?프론트엔드 개발자가 될거야./react 2023. 1. 24. 18:37
react-query란? 왜 써야할까? react-query의 아주 큰 장점 중 하나는 "캐싱"이다. 그렇다면 캐싱은 뭘까? 캐싱이란? 캐싱이란 저장한다는 뜻이다. 컴퓨팅에서 캐싱이란 오랜시간이 걸리는 작업의 결과를 저장해서 시간과 비용을 필요로 회피하는 기법을 의미한다. 캐싱은 고성능 에플리케이션을 만드는데 가장 중요한 요소 중의 하나다. - 캐싱의 대표적인 사례 웹브라우저는 한번 다운로드 한 이미지 파일은 임시저장 디렉토리에 저장했다가 다음 요청이 있을 때 다운로드 하지 않고 다운받아 둔 이미지를 사용한다. * 참고 생활코딩 https://www.opentutorials.org/course/697/3839 이처럼 react-query는 캐싱을 해준다. 데이터를 저장해주기 때문에 유저들이 "로딩중.....
-
[react-query] 어드민 페이지 조회기능 react-query 도입하기프론트엔드 개발자가 될거야./react 2023. 1. 24. 17:37
혼자 간단한 어드민 페이지를 개발하는 업무를 맡고 있는데 그래서 기술스택도 자유롭게 도입해보고 있다. 페이지네이션, 조회기능을 구현하며 react-query를 도입했는데 너무 놀라운 기술이라 쓰면서 감탄했다... react-query 적용전 처음에는 useState, useEffect, axios, onClick 이벤트로 구현했다. 나름 각 메뉴가 한 컴포넌트에서 조회기능을 수행할 수 있게 공유하여 useState도 객체화하여 최대한 좋은 코드를 만드려고 노력했었다. - 페이지마다의 useState를 설정해주고 const [tableData, setTableData] = useState({ clientReport: { table: [], totalPage: 0, totalCount: 0, }, bridg..
-
[axios] fetch 대신 axios 사용하기, 내가 경험한 트러블슈팅프론트엔드 개발자가 될거야./react 2023. 1. 15. 13:03
axois란? fetch와는 다르게 모든 브라우저를 지원하여 크로스 브라우징를 이슈 해소할 수 있고 json형태로 자동변경해주는 웹 통신 기능을 제공하는 라이브러리이다. 또한 fetch에는 존재하지 않는 요청 취소 기능, 타임아웃 설정 기능 등이 있다. Axios 문법 구성 GET : axios.get(url[, config]) POST : axios.post(url, data[, config]) PUT : axios.put(url, data[, config]) DELETE : axios.delete(url[, config]) - axios 요청(request) 파라미터 옵션 • method : 요청방식 (get이 디폴트) • url : 서버 주소 • headers : 요청 헤더 • data : 요청 방..
-
[2023년 목표] 리액트 마스터🔥프론트엔드 개발자가 될거야./react 2023. 1. 2. 22:37
2023년에는 react, typeScript, react-query, recoil, next.js 마스터가 2023년 목표이다. 프론트엔드 신이 되고싶다!! 나능 할 수 있다 !!! 그 첫 게시물로 노마드코더 리액트 마스터 강의를 들으며 알게된 간단한 react tip(?)을 정리했다. 1. return없이 map쓰기, 2. →는 오른쪽 화살표 {coins.map((coin) => ( {coin.name} → ))} 2. Link를 통해 다른 화면에 정보 보내기 화면 이동할 때 데이터를 보낸다는 것은 parameter를 이용해서 URL에게 정보를 넘기는 것이다. 이런 방식으로 한 화면에서 다른 화면으로 정보를 받아올 수 있다. Link 방식으로 했을 때 누군가가 페이지에 바로 접속하려고(URL을 치고 ..
-
[1인 헤어샵 예약 시스템 구현기] firebase로 실시간 예약 시스템 구현하기프론트엔드 개발자가 될거야./react 2022. 10. 28. 15:30
https://jeongeuni.tistory.com/72 [1인 헤어샵 예약 시스템 구현기] 초기세팅과 firebase (기술스택: react, ts, redux-toolkit, styled-component + 부트캠프를 수료한 후 개인적으로 typeScript, redux-toolkit을 공부해서 프로젝트 리팩토링도 하고 개인 프로젝트도 했다. 기초적인 toDoList, 가위바위보 게임을 구현했었기에 더 깊게 파볼 수 있는 프 jeongeuni.tistory.com 백엔드가 없으면 한정된 mock데이터로만 작업해야 하는 아쉬움이 있었다. 이번에 firebase을 공부해서 실시간으로 user의 데이터가 반영되는 헤어샵 예약 시스템을 만들었다. 이거 구현할 수 있을까? 하는데 했다. 뿌듯하다. 역시 하..