Dev Blog - purplecloud

사진과 영상을 파일을 추가하는 페이지에 활용할 수 있음 폴더에 있는 파일을 끌어서 파일 추가할수 있고 미리 보기가 가능함 mui말고는 따로 라이브러리를 쓰진 않았음 jpg, png, jpeg,mp4만 가능하도록 했고 만약 파일명에 . 이 들어가있으면 오류남 파일 구조는 -components: box.jsx -boxPage.js 로 크게 구성되어있고, box 는 틀만 넣고 page부분에 기능부분을 넣었음 -- 결과물 https://github.com/smallstar23/photodraganddrop GitHub - smallstar23/photodraganddrop Contribute to smallstar23/photodraganddrop development by creating an account ..

data 뿌려줌 (get api 호출) -> 사용자가 data 업데이트 혹은 삭제(delete or post api 호출) -> DB에 데이터 전송 후, 변경된 data 다시 뿌려줌(get api 호출 다시) 이 동기적 작업을 프로젝트 내내 반복했는데 할때마다 매번 새롭고 매번 헤메고 있어서 삽질의 결과를 정리해두고자 함 근데 이 방법도 사실은 좀 안좋은 방식이 아닌가.. 하긴 함 ㅜㅜ 1. api로 받아온 데이터를 저장하는 state와 이를 복사해서 컴포넌트에 전달할 state를 별도로 설정함 // load chapters const [chapters, setChapters]=useState([]); // chapter edit component control const [chapterList, set..

리액트로 구현한 페이지에서 비디오 플레이어를 직접 커스터마이징 해봤다. 유튜브 영상을 보면서 따라했다 https://www.youtube.com/watch?v=r6qWEteVMyM 플레이어에서 제공해야하는 기본 기능 : 재생, 멈춤, 빨리감기, 뒤로감기, 재생시간, 볼륨조절, 뮤트, 총 재생시간, 전체화면 영상에서 보고 따라만든것 외에 유튜브에서 제공하는 것과 유사한 챕터 기능을 추가 했고 슬라이드 부분이 더 자연스럽게 이동하는 것처럼 보이게 하려고 transition css를 추가해줬다. https://github.com/smallstar23/videoplayertest GitHub - smallstar23/videoplayertest Contribute to smallstar23/videoplayer..

기존에 만든 계층형 구조의 카테고리를 프론트에서 react로 구현하는 작업을 진행했다. -- 계층형 구조 카테고리 구현 https://purplecloudtosunny.tistory.com/46 계층형 구조 카테고리 구현과 재귀함수 처음에는 카테고리를 부모-자식 구조의 카테고리를 구현하라고 하길래 단순히 부모카테고리 테이블, 자식카테고리 테이블 2개를 만들어서 하려고 했는데? 그렇게 하는게 아니라 무한 뎁스를 가 purplecloudtosunny.tistory.com react로 treeview 를 구현해주는 2개의 라이브러리를 사용하여 계층형 카테고리를 뿌려주었다. 1. material UI - treeview https://mui.com/material-ui/react-tree-view/ Tree v..

리액트로 웹 구현시 새로고침할때마다 로그인 유지가 되지 않기 때문에 유저가 로그인한 '상태'를 별도로 저장해서 웹 이동시에나 새로고침할 때마다 상태를 유지 시켜줘야한다. 구글링하면 로컬스토리지에 저장해주는 방법도 나오는데 이 방법은 백 서버가 다운되어도 유지되는 프론트 환경에서만의 방법이기 때문에 완전한 방법은 아닌것같다. 해당 페이지들이 마운트 될때마다 useEffect 훅함수를 사용하여 저장된 세션을 불러오는 api를 호출하고 만약 세션이 있으면 login 상태를 true로 리덕스 스토어에 저장해주는 방식으로 진행했다. - Home.js useEffect(() => { axios .get('/api/users/me') .then((res) => { let role = res.data.result.ro..

참고한 사이트 - 인프런 따라하며 배우는 리액트 강의 - https://react.vlpt.us/basic/20-useReducer.html 1. 리액트에서의 리덕스의 사용 이유: 리액트는 useState와 같은 훅함수로 state를 관리할 수 있는데 이런 방법은 해당 컴포넌트 안에서만 state를 관리하기 때문에 외부 컴포넌트에서 state를 업데이트 하는 것과 같은 상태관리를 할 수가 없다는 불편한 점을 보완하기 위해 고안되었음, 일종의 컴포넌트와 분리되는 state를 저장하는 store가 존재하는 개념으로 생각하면 됨 2. 어떻게 작동하는지? 1) 훅함수 useReducer 사용하여 redux store의 reducer function에 접근한다. 2) reducer function 은 state와..

https://www.youtube.com/watch?v=0ZJgIjIuY7U 해당 영상을 참고 하였음 useEffect(함수, [deps]) 로 구성 되어있으며 deps에는 useEffect에서 사용해줄 배열이나 값을 넣어준다. useEffect는 해당 컴포넌트가 처음으로 나타날 때(마운트될때) 작동하고 []에 들어간 상태값이 변경 될때만 작동 된다. 예시) import React, {useState, useEffect} from "react"; function App() { const [resourceType, setResourceType] = useState('posts') console.log('hello world') useEffect(() =>{ console.log('resources ch..