방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com react4 SPA 환경에서 배포가 이루어 졌을 때 새로 고침 방법 SPA 구성으로 된 웹 어플리케이션은 웹 서버로부터 1번의 정적 리소스를 받아와서 브라우저에서 구동하는 형태 입니다. 서버에서의 리소스를 1번만 받기 때 문에 부드러운 화면표현, 빠른 동작 등이 장점이라 할 수 있습니다. 그러나 어플리케이션의 규모가 커지게 되면(예 : 화면 200장 이상) SPA 구성으로만 동작시키게 되면 브라우저가 처음부터 많은 데이터를 받아야 하기 때 문에 오히려 더 성능이 느려질 수 있습니다. 그리하여 서버 렌더링을 어느정도 포함시킨 Next, Nuxt 같은 기술이 나오게 되었습니다. 운영중인 SPA 어플리케이션이 너무나 완벽한 기획과 개발에 의해 고칠 게 1도 없다면 배포(deployment)에 대해서 고민 할 필요가 없습니다. 그러나..개발자의 현실은 항상 애자일(Agile)과.. 2024. 2. 16. 리코일 set, get 그리고 async(recoil get set async) 리코일에서 제공하는 함수 중 셀렉터(selector)가 있습니다. 요녀석은 리코일의 set, get 기능을 편리하게 사용 할 수 있게 해주는 기능 입니다. 또한 다양한 리코일의 상태(atom)을 키 값을 통해서 반환 하기도 합니다. 이번에 만난 이슈는 리코일의 셀렉터(selector)를 활용 할 때의 동기화 이슈 였습니다. 아래와 같이 세션 스토리지에 간단하게 사용자 정보를 저장하는 기능을 구현 하였습니다. import { atom, selector, } from "recoil"; import { recoilPersist } from 'recoil-persist'; //yarn add recoil-persist //리코일 상태값을 "sessionStorage" 에서 적용하게 합니다. const { per.. 2023. 3. 6. 리액트 익스프레스 게시판 (React, Express typescript, file drag and drop) 리엑트(React)와 Node.js의 익스프레스(Express)를 활용하여 만든 프로젝트 입니다. 전반적인 기능은 아래와 같습니다. 1. 파일 드래그앤 드롭 2. 리엑트 hook-form을 활용한 데이터 바인딩 3. 데이터 등록은 FormData를 활용한 axios 라이브러리 사용 4. 리엑트 레덕스(redux)를 활용하여 상태 관리 5. 익스프레스 라이브러리를 활용한 서버 구성 6. multer를 활용한 파일 업로드 기능 구현 7. sqlite를 활용한 데이터베이스 구성 게시판(Notice Board) 작업을 한번 하고 나면 라이브러리, 프레임워크에 대한 기능이 좀 더 눈에 잘 들어옵니다. 게시판이라 불리는 기능에는 등록(Create), 읽기(Read), 수정(Update), 삭제(Delete) 의 기.. 2022. 6. 18. React Drag and Drop 기능구현 시 주의 할 점(드래그 앤 드롭) 리엑트에서 파일 드래그 앤 드롭 기능을 구현하기 위해서 아래 속성을 부여하여 보았습니다. * onDrop : 대상이 드랍되면 이벤트가 발생 합니다. * onDragEnter : 드래그한 대상이 드랍영역에 다다르면 이벤트가 발생 합니다. * onDragLeave : 드래그한 대상이 드랍하지 않고 떠나는 경우 이벤트가 발생 합니다. import Reactfrom 'react' import '../App.css'; function DragAndDrop() { const dragFunction = (event, type) => { event.preventDefault(); event.stopPropagation(); console.log(type) } return dragFunction(event, 'drop'.. 2022. 6. 14. 이전 1 다음
