프론트엔드 개발자가 될거야.
-
[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 : 요청 방..
-
[Framer Motion] animation의 최강자 Framer Motion 알아보기, Animation/Variants/Gestures/Drag프론트엔드 개발자가 될거야./라이브러리 2023. 1. 8. 20:11
Framer Motion는 Framer가 제공하는 리액트용 애니메이션 라이브러리이다. Framer Motion을 잘 이용한다면 Drag이벤트, Scroll이벤트 등 다양한 애니메이션들을 쉽게 표현해 낼 수 있다. 노마드코더 리액트 마스터를 통해 접할 수 있었는데 CSS로 했었으면 코드를 몇시간동안 고민고민해서 써야지 구현되는 효과들이 단 한줄로 구현되는 것을 보고 정말 놀라웠다... 아래는 Framer Motion 사이트이다. 여러 docs들도 있으니 보고 참고해도 좋을 것 같다. https://www.framer.com/motion/ Production-Ready Animation Library for React | Framer Motion Framer Motion is a production-read..
-
[react-beautiful-dnd] 칸반보드 만들기, react-beautiful-dnd 상세설명프론트엔드 개발자가 될거야./라이브러리 2023. 1. 7. 16:11
노마드 코더 강의를 들으며 react-beautiful-dnd 라이브러리를 이용하여 칸반보드를 만들었다! 간단한 메모기능이 있고 메모를 다른 칸반보드로 옮길 수 있다. 추후 로컬스토리지에 저장 및 로드 기능, 삭제기능, 칸반보드 생성 기능도 추가할 것이다!! 이 게시물에는 칸반보드를 만들면서 알게 된 react-beautiful-dnd에 대해 정리해보려고 한다. react-beautiful-dnd npm i react-beautiful-dnd npm i --save-dev @types/react-beautiful-dnd // 타입스크립트라면 install 필요! DragDropContext 드래그 앤 드롭을 가능하게 하고 싶은 앱의 한 부분이다. - onDragEnd 함수 : 유저가 드래그를 끝낸 시점에..
-
[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의 데이터가 반영되는 헤어샵 예약 시스템을 만들었다. 이거 구현할 수 있을까? 하는데 했다. 뿌듯하다. 역시 하..
-
[코딩테스트] 프로그래머스 소수찾기 자바스크립트프론트엔드 개발자가 될거야./코딩테스트 2022. 10. 25. 12:48
어렵다.. 내가 푼 답은 테스트 10번부터, 효율성 테스트는 통과를 못했다..╥﹏╥ 일단 이 문제에서 알아야 할 것. 1과 자신을 제외한 값으로 나누었을 때 나머지가 0인 값이 1개라도 나오면 소수가 아니다. 일종의 노가다 방식이라 상당히 무식한 방법이긴 하지만, 특정 범위가 주어지고 그 범위 내의 모든 소수를 찾아야 하는 경우, 아직까지 소수들 간의 연관성(=소수를 생성할 수 있는 공식)이 나오지 않았으므로 에라토스테네스의 체보다 빠른 방법이 없다. 프로그래밍에도 수학적 지식이 필요하다는 걸 일깨워주는 좋은 예시. https://namu.wiki/w/%EC%97%90%EB%9D%BC%ED%86%A0%EC%8A%A4%ED%85%8C%EB%84%A4%EC%8A%A4%EC%9D%9..