개발 공부

[React+TS] React에서 비로그인처리, PrivateRoute사용하기

시작하기 전 React에서 비로그인시, 또는 어떤 서비스를 쓰기 위한 제한이 있을때 PrivateRouter라는 커스텀 라우터를 사용해서 처리해줄 수 있다. 다른 방법도 있겠지만, 한꺼번에 관리할 때 편리한거 같아서 아직까지는 자주 사용 중 ! 필자는 react + typescript를 사용했다. 그리고 redux도 사용한다. 본문 우선 기본적으로 세팅은 되어있겠지만 react-route-dom 설치가 필요하다 npm i react-router-dom 그리고 기본 라우터가 세팅되어있다는 가정하에 진행할 예정이다. 1. 기본 라우터 우선 기본 세팅 되어있는 라우터는 다음과 같다. Route.tsx export default function Routes() { return ( ); } 이렇게 세팅되어있는 라..

[python] 사용자 정의 이미지를 사용해서 인공지능 이미지 분류 모델 학습하기

들어가기전 프로젝트를 진행하면서 인공지능 파트를 맡게됐다.(사실 백엔드 하고 싶어서 백엔드 한다고 했는데 어쩌다 보니 인공지능 간건 안비밀....) 팀원 전체가 인공지능에 대해 잘 아는 사람이 없었고, 나도 마찬가지로 인공지능을 실제로 구현해본 경험은 없었다. 그래서 사실 기대반 걱정반으로 인공지능을 맡게 되었다. 인공지능을 총 3명의 인원이 맡게 되었다. 기획단계에서 모델을 학습할 수 있는 데이터셋을 구하는 것이 중요하기 때문에 데이터셋을 제공해주는 사이트를 여러 곳 찾아봤고, 그 중에서 우리는 AI허브에 있는 반려동물 질환 이미지 데이터셋을 이용하기로 했다. AI-Hub 샘플 데이터 ? ※샘플데이터는 데이터의 이해를 돕기 위해 별도로 가공하여 제공하는 정보로써 원본 데이터와 차이가 있을 수 있으며, ..

[Web] WebRTC

줌 클론코딩 – 노마드 코더 Nomad Coders WebSockets, SocketIO, WebRTC nomadcoders.co 노마드코더의 줌 클론코딩 강의를 보고 정리한 내용입니다. 비디오 가져오기 스트림 : 비디오와 오디오가 결합된 것 사용자의 스트림 가져오기 스트림은 track을 제공해준다. track은 비디오가 될 수 있고, 오디오, 자막등이 될 수 있다. 해당 track에 접근할 수 있다. const socket = io(); const myFace = document.getElementById("myFace"); //영상 화면 const muteBtn = document.getElementById("mute"); //음소거 설정 const cameraBtn = document.getElem..

[Web]SocketIO

https://nomadcoders.co/noom 줌 클론코딩 – 노마드 코더 Nomad Coders WebSockets, SocketIO, WebRTC nomadcoders.co 노마드코더의 줌 클론코딩 강의를 보고 정리한 내용입니다. SocketIO 실시간, 양방향, event 기반의 통신을 가능하게 하는 프레임워크 socketIO는 websocket을 이용한다. 만약 websocket을 지원하지 않으면 다른 것(http long-polling)을 사용한다. 서버 코드 import http from "http"; import { Server } from "socket.io"; import express from "express"; const app = express(); app.set("view en..

[Web] WebSocket 정리

https://nomadcoders.co/noom/lobby 줌 클론코딩 – 노마드 코더 Nomad Coders WebSockets, SocketIO, WebRTC nomadcoders.co 노마드코더의 줌 클론코딩 강의를 보고 정리한 내용입니다. HTTP http는 모든 서버들이 작동하는 방식 유저가 req를 보내면 서버가 res로 반응한다. http에서 기억해야할 중요한 것은 stateless, 즉 백엔드가 유저를 기억하지 못한다. 유저와 백엔드 사이에 연결이 없다. 서버는 오직 req을 받을 때만 답장을 해준다. Websocket webSocket을 사용해서 연결하고 싶고, 서버가 지원한다면 wss(secure web socket)으로 접속하면 된다. ex) https://nomadcoders.co..

[React+TS] useNavigate props 전달과 useLocation으로 props 받기/ useLocation unknown 타입

useNavigate React와 TS를 사용해서 프로젝트를 진행하고 있다. 클릭없이 페이지를 이동할 일이 생겨서 당연하게 useHistory를 사용했는데 띠용.... 이게 무슨일이야 해서 찾아봤더니 리액트 v6부터는 useHistory 대신에 useNavigate을 사용하라고 한다. React Router | Upgrading from v5 Declarative routing for React apps at any scale reactrouter.com 공식문서를 보면 useHistory를 사용했을 때랑 비교하면서 사용법이 잘 나와있다. 컴포넌트로도 사용할 수 있는 것 같다. useNavigate를 사용하면 .push 나 .go와 같은 함수가 필요없이 그냥 인자값에 따라서 알아서 함수가 적용되는것 같았..

[React+TS+StyledComponent] 사이드바 만들기 + 외부 클릭시 닫히는 기능

시작하기 햄버거 버튼을 누르면 사이드 메뉴가 나오고, 사이드 메뉴 내부에 있는 x 표시나 사이드메뉴 외부를 누르면 사이드메뉴가 닫히는 기능을 구현한다. 버튼 누르면 사이드메뉴가 나오기 버튼을 누르면 사이드 메뉴가 나오게 하는 것은 간단하다. 우선 헤더와 사이드메뉴 이렇게 두 개의 컴포넌트를 준비한다. 그리고 햄버거 버튼에 클릭 이벤트를 걸어주고, 나는 useState 변수를 사용해서 구현했다. Header.tsx function Header() { const [isOpen, setIsOpen] = useState(false); const toggleSide = () => { setIsOpen(true); }; return ( ); } 1. 사이드 메뉴 컴포넌트를 Header안에 같이 넣어줬다. 파라미터로..

[Spring] 인프런 스프링 입문 강의 정리 #5

[무료] 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 - 인프런 | 강의 스프링 입문자가 예제를 만들어가면서 스프링 웹 애플리케이션 개발 전반을 빠르게 학습할 수 있습니다., - 강의 소개 | 인프런... www.inflearn.com 글에서 나오는 모든 코드와 사진들은 김영한님의 인프런 스프링 입문 강의에서 가져온 것임을 미리 알립니다. 회원 관리 예제 - 웹 MVC 개발 회원 웹 기능 - 홈 화면 추가 controller 패키지 안에 HomeController 클래스를 만들어준다. 그리고 안에는 다음과 같이 작성해준다. package hello.hellospring.controller; import org.springframework.stereotype.Controller..

[Spring] 인프런 스프링 입문 강의 정리 #4

[무료] 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 - 인프런 | 강의 스프링 입문자가 예제를 만들어가면서 스프링 웹 애플리케이션 개발 전반을 빠르게 학습할 수 있습니다., - 강의 소개 | 인프런... www.inflearn.com 글에서 나오는 모든 코드와 사진들은 김영한님의 인프런 스프링 입문 강의에서 가져온 것임을 미리 알립니다. 스프링 빈과 의존관계 컴포넌트 스캔과 자동 의존관계 설정 컨트롤러가 서비스를 통해서 기능을 동작하는 것을 의존관계가 있다고 표현한다. ( 컨트롤러가 서비스를 의존한다. ) MemberController 만들어주기 스프링은 @Controller라는 어노테이션을 보고 스프링이 작동할 때 해당 컨트롤러 객체를 생성해서 가지고 있는다. => "스프..