React12 multer를 사용하여 이미지 업로드 및 불러오는 과정 개인 프로젝트를 진행하면서 간단하게 프로필과 배경 이미지를 등록, 저장하고 이를 불러와서 보여줘야하는 기능이 필요했다. 보통 회사에서 Java로 해당 기능을 구현할때 랜덤한 path를 만들고 해당 경로에 파일을 저장하고 이와 관련된 정보를 DB에 insert하고 다시 불러올땐 저장한 DB에서 조회하여 보여주는 방식으로 처리했는데 React에서는 multer라는 라이브러리가 있고 이를 많이들 사용하는 것 같아 조사 후 적용해봤다. multer를 사용해서 대부분 프로젝트 내 public 폴더에 원하는대로 폴더를 생성하거나 하여 정적 파일로 업로드를 시키는데 나는 처음부터 이게 배포되었을때 경로가 바뀌게 되면 뻔히 문제가 생기는데 왜 프로젝트 내에 파일을 업로드할까 의문이었다. 프로젝트 생성 시 default.. 2024. 2. 13. 실시간 알림 기능을 구현하기 위한 고려 일단 개인적으로 진행하는 프로젝트에서 실시간 알림 기능이 필요하여 사용할 기술, 라이브러리를 조사해 보았다. 언뜻 주워들은거로는 웹소켓을 사용하면 될거라 막연하게 생각하고 있었는데 웹소켓은 일반적으로 클라이언트와 서버 간 양방향 통신이 필요할때 많이 사용한다. 하지만 내가 구현중인 기능에는 서버 쪽에서 업데이트가 일어날 경우에만 알림을 띄워주고 클라이언트에서는 이에 반대하는 처리가 없기 때문에 웹소켓은 맞지 않겠다 생각했다. 물론 웹소켓은 일단 사용하기 매우 복잡하기도 하며 고려해야 할 사항이 많다고 하길래 약간 겁먹은 것도 있음... 그래서 SSE(Server Sent Event)가 단방향에 알림 기능에는 최적이고 비교적 구현도 간단한 편인것 같아 적합하다 생각했었는데 인터넷 익스플로러나 오래된 버전의.. 2024. 1. 31. 로그인 그리고 그에 관련된 보안 이슈 지금 진행하고 있는 프로젝트가 실제 서비스하게 되면 어느정도 공공기관과 연계되어 있기 때문에 보안에 대해서 상당히 신경을 많이 쓰고 있는 편이다. 가장 기본이 되는 로그인과 인증 그에 관련된 보안 이슈들을 틈틈히 찾아보고 최대한 반영하려고 애쓰고 있는 중인데 평소 업무 중에 보안에 대해 그렇게 신경을 많이 안쓰기도 해서인지 보안과 관련된 지식이 전무하였고 그런 상태에서 내 프로젝트에 적용하다 보니 마치 어떤 그림인지도 모르고 그림안의 하나하나의 요소만 따라그리고 있는듯 했다. 그래서 자세히 찾아보고 습득을 한 뒤에 사용하기로 하였고 그 일부를 조금씩 첨부해가며 적어두려 한다. 일단, 로그인이 어떻게 이루어지는지, 그리고 그렇게 처리해놓은 인증 부분들이 어떠한 방식으로 공격당하는지, 그와 관련된 보안 이슈.. 2023. 12. 1. Reactstrap Modal에서 autoFocus 설정 주의! Reactstrap을 사용하여 화면을 구성하고 있는데 조금 더 편한 사용환경을 위해 Modal이 오픈되면 가장 먼저 입력해야하는 Input에 Auto Focus를 적용하고 싶었다. 근데 설렁설렁 보고 적용하고 싶은 Input 태그에 autoFocus={true} 를 적용하면 되는구나 했더니 에러도 안뜨고 적용도 안되고 이 문제로만 한시간을 씨름한거 같은데 조금 예전 자료만 봐도 useRef를 써서 Fuction까지 만들어 적용하던데 나는 분명 속성값 하나로 될거라고 생각하고 있었고 그러다 딱 한 자료에서 어이없게 내 방법의 문제를 알았다. 해당 Modal에서 autoFocus를 false로 설정하고 적용하고 싶은 Input 태그에 autoFocus를 true로 설정해야 한다. 개인적인 생각으로는 Moda.. 2023. 11. 3. 이전 1 2 3 다음