Dev Blog - purplecloud

1. container 1) 컨테이너 생성 / 실행 docker run -p 3000:80 이미지id: 80에서 대기하고 있는 이미지를 3000으로 받아서 컨테이너 생성/ 실행 (attached 모드가 디폴트) docker run -p 3000:80 -d 이미지id: detached 모드로 실행 / docker container attacth 컨테이너이름: 다시 detached 모드로 실행 docker start 컨테이너이름/id: 기존에 실행했던 컨테이너 재실행 (detached 모드가 디폴트) docker start -a 컨테이너이름: 기존에 실행한 컨테이너 attached모드로 재실행 docker run -it 컨테이너이름: -i = Interactive 컨테이너 실행 / -t = 터미널 생성 ==..

nextjs 프로젝트 내 react-query에서 제공하는 useInfiniteQuery를 사용하여 무한 스크롤을 구현해봄 server/contents.ts export function useInfinite( options?: UseInfiniteQueryResult, ) { const headers= {}; return useInfiniteQuery({ queryKey: [QueryKey], queryFn: ({ pageParam = 0 }) => 데이터패치 function~~( pageParam, { headers: headers }, ), ...options, }); } 데이터 패치 function 부분은 각자 api에 맞춰 넣어주면 됨 이때 pageParam 부분을 계속 fetch해야하는 api ..

사진과 영상을 파일을 추가하는 페이지에 활용할 수 있음 폴더에 있는 파일을 끌어서 파일 추가할수 있고 미리 보기가 가능함 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..

프로젝트를 진행하면서 blob을 두 번 사용했는데, 1. 이미지 url 경로 변경 (보안강화) 2. axios 호출에서 formdata type 지정 blob 은 단순히 사진이나 영상같은 데이터를 다루기 위함이 아니라 데이터를 간접적으로 참조하는 객체 라고 이해하는 것이 좋은 것 같다. 1. 이미지 url 경로 blob 처리 const { contents } = useSelector((state) => state.content); const [blobContents, setblobContents] = useState([]); useLayoutEffect(() => { async function load() { const items = []; for (let i = 0; i < contents.length..

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

클라이언트가 영상을 업로드하면 해당 영상의 썸네일을 뽑아서 대표 이미지로 사용하고자 함. - dependencies 추가 (gradle) // thumbnailator implementation group: 'net.coobird', name: 'thumbnailator', version: '0.4.1' //jcodec implementation 'org.jcodec:jcodec:0.2.5' implementation 'org.jcodec:jcodec-javase:0.2.5' import net.coobird.thumbnailator.Thumbnails; import org.jcodec.api.FrameGrab; import org.jcodec.api.JCodecException; import org.j..

처음에는 카테고리를 부모-자식 구조의 카테고리를 구현하라고 하길래 단순히 부모카테고리 테이블, 자식카테고리 테이블 2개를 만들어서 하려고 했는데? 그렇게 하는게 아니라 무한 뎁스를 가진 계층형 구조의 카테고리를 구현하라고 하셔서 시작하게 됨 p_id가 부모 아이디를 가지는 foreign key로 자신의 테이블의 id를 참조하는 구조로, 전체카테고리를 직접 DB에 넣어서 그 하위 카테고리를 계속 만드는 구조로 만들 예정이므로 전체 카테고리는 p_id가 null 값이 되야 하므로 p_id는 null 값이 허용 되어야 함 - table create table categories ( id bigint not null primary key, p_id bigint, category_name varchar(200) ..