프로젝트에서 유저와 프로젝트에 사용할 이미지를 저장하기 위한 이미지 서버를 팀 동료가 구축했다. [express] 라즈베리파이 이미지서버 사용 라즈베리파이를 활용해서 이미지서버를 올려보았다. 간단하게 이미지를 받으면 이를 파일로 저장하고, url로 해당 이미지를 띄워주는 간단한 기능을 하는 서버라 크게 어려울 것은 없다. 라이브 supersfel.tistory.com 이미지 서버에서 Post요청과 Delete요청으로 이미지 파일을 관리할 수 있게 구축했기에 이제는 FE에서 이미지 파일을 관리할 수 있는 API를 개발하면 된다. 파일 자체를 서버로 보내는것은 개발 공부를 하면서 처음 해보는 것이기에 조사를 해봤다. 이미지 파일을 자바스크립트 단에서 변형없이 비동기로 제출하려면 form-data 객체를 이용..
프로젝트
어떤 일이 있었나.... 유저가 속한 프로젝트들을 보여주기 위해 유저의 정보를 이용해 DB에 유저가 속한 프로젝트들의 정보를 가져와야 했다. DB에서 프로젝트들의 정보를 가져오기 까지 완료했다. 그렇다면 가져온 데이터는 어떻게 보관해야 할까? 라는 의문이 들었다. 가공은 객체 형식으로 된 데이터를 가져왔기에 비교적 쉽게 가공이 된다 치자. 내가 고민한 보관 방법은 Redux의 store에 보관을 해도 될까였다. 데이터를 가져올 방법을 고민하던 중 보게 된 react-query의 useQuery의 설명문을 보다 이런 의견을 보게되었다. 이 의견을 보니.... 흠.... 아무래도 우리가 만들고 있는 서비스가 실시간 수정이 가능도 하고, 다른 유저가 프로젝트에 새로 입장해도 안보여지면 이상할 것 같았다. 그래..
기본적으로는 fetch로 쿠키를 주고 받지를 않지만, 쿠키를 주고 받으려면 credentials를 설정해줘야한다. fetch는 Promise 객체를 반환한다.(HTTP Error는 반환하지 않는다.) credentials를 사용하는 예시를 적어두어야 겠다. 나중에 사용할 수 있기 때문..... 1. 자격 증명이 포함되게 보내는 경우 fetch(`${process.env.REACT_APP_API_URL}/naver_login/logout`, { method: 'get', credentials: 'include' }) 2. 요청하는 URL과 호출 스크립트가 동일한 Origin을 가졌을 때만 자격증명을 보내는 경우 fetch(`${process.env.REACT_APP_API_URL}/naver_login/l..
현재 진행중인 프로젝트의 서버는 라즈베리파이를 사용하고있다. 사설 서버를 빌려 진행할 수 있었지만, 같이 진행하는 친구가 라즈베리파이로 서버를 구축해줘서 서버를 빌려 진행하는 수고를 덜 수 있었다. 하지만 문제가 생겼다. 현재 작성된 코드는 Prisma와 typeORM을 사용해 작성되어있는데, 라즈베리파이의 아키텍처인 ARMv7은 ORM에서 지원하지 않는 아키텍처였다. 물론 사용은 할 수 있지만, 이렇게 한다면 다시 서버의 OS를 지우고 다시 시작하는데 시간이 많이 걸릴거라는 생각이 들어 Prisma와 typeORM을 사용하지 않는 방향으로 결론이 났다. 이번 글은 내가 기존에 작성해둔 BE코드들 중 Prisma와 typeORM을 사용한 코드를 수정하는 글이 될것이다. 몰랐던 것들은 기록하면 작성한다. ..
저번 시간에 Portal을 이용해 모달을 구현하려 했지만 상단 header바에 사용하기 적합하지 않다는 팀원의 의견을 반영해서 독립된 컴포넌트를 만들어 적용하기로 했다. 우선 헤더에 사용할 모달 컴포넌트의 코드를 보자 import { ReactComponent as HomeSVG } from 'assets/svg/home.svg'; import { ReactComponent as SettingSVG } from 'assets/svg/setting.svg'; import { ReactComponent as LogoutSVG } from 'assets/svg/logout.svg'; import { Link } from 'react-router-dom'; interface UserInfo { accountMo..
모달을 처음 만들어 보기도 하고 타입스크립트도 처음 다루어서 정말 어려웠다.... 오늘 완성은 하지 못했지만 React의 Portal이라는 기능을 이용해 fullPage 모달에 사용할 모달을 만들었다. React Portal이란? 부모 컴포넌트의 DOM 계층 구조의 밖에 있는 DOM노드로 자식(children)을 렌더링하는 방법을 제공할 수 있게 해주는 친구 ReactDOM.createPortal(child, container) 위와같이 사용해주면 되는데, child에 포탈을 통해 밖으로 보낼 대상이 되는 컴포넌트, container는 포탈을 통해 child가 이동할 곳 한마디로 child를 렌더링할 DOM Element를 넣어준다는 것이다. Portal을 통해 모달을 만들려면 모달 컴포넌트가 렌더링 될..
