전체 글
-
[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을 치고 ..
-
주니어 프론트엔드 개발자 기술면접 예상질문 - CS(2)CS지식 2022. 11. 4. 11:40
- CORS는 무엇인지, 이를 처리해본 경험이 있나요? 정의, 특징, 해결 방법 다른 출처의 자원에 접근할 때 발생한다. 대개는 프런트 개발 시에 로컬에서 API 서버에 요청을 보낼 때 흔하게 발생한다. 서로 다른 도메인 간에 자원을 공유하는 것을 뜻하고, 출처가 다른 서버의 자원을 요청하면 발생하는 문제이다. - cors를 쓰는 구체적인 이유는? 먼저 CORS의 반대인 SOP는 다른 출처라면 무조건 차단함으로써 막강한 보안을 제공한다. 하지만 다른 출처의 리소스를 사용할 때는 CORS를 써야 한다고 생각한다. 또한 CORS는 출처가 다를 시에 Access-Control-Allow-Origin:{도메인}을 HTTP Header에 추가해야한다. -cors를 구현하려면 어떻게 하는가? CORS를 구현하기 위..
-
주니어 프론트엔드 개발자 기술면접 예상질문 - CS(1)CS지식 2022. 11. 4. 11:31
- 브라우저 렌더링 작동 원리 : 홈페이지가 사용자에게 보이는 순서 , 브라우저가 클라이언트에게 보여져주는 원리 : 주소창에 URL을 입력했을 때 어떻게 웹 페이지가 보이는걸까? 일단 간결하게 설명하자면 url을 입력했을 때 브라우저가 서버에게 필요한 자원(HTML,CSS,JS)를 요청합니다. 그렇게 서버가 응답해주면 브라우저는 렌더링 엔진으로 HTML, CSS를 분석해서 화면에 그려내고 JS는 자바스크립트 엔진이 Javascript 파일을 로드하고 분석하여 실행하게 됩니다. 이것이 브라우저가 웹 페이지를 클라이언트에게 보여주게 되는 원리입니다. 렌더링 엔진의 동작 과정을 더 깊게 설명하겠습니다. 먼저 렌더링 엔진이 HTML 문서를 서버로부터 얻으면 그 HTML문서를 분석하여 DOM트리를 구축합니다. 그..