본문 바로가기

개발55

react - 페이지 전환 페이지가 하나만 있는 홈페이지는 거의 없습니다. router를 이용해 여러 페이지를 컨트롤 해 봅시다.npm i react-router-dom 를 이용해 router를 하게 해주는 패키지를 설치합니다. index.js로 가서 App를 BrowserRouter로 감싸줍니다. 이제 페이지를 2개 만듭니다. 저는 login과 streak 페이지 2개를 만들었습니다. app.js에서 Routes와 Route를 추가해 줍니다. path에 경로를 넣어주고 element에는 컴포넌트를 넣어주면 됩니다. 이제 url에 /login을 하면 login에서 만든 페이지나 나옵니다. 2024. 9. 13.
react - 헤더, 페이지 만들기 헤더웹 페이지에 있는 헤더를 만들어 주겠습니다. components - header 페이지를 만들고 header.jsx를 만들어 줍니다. ~~.jsx와 ~~.module.scss는 세트라고 생각하면 됩니다. react bootstrap을 설치하고(https://codestudycafe.tistory.com/87) 위와 같이 작성합니다. react bootstrap 공식 페이지(https://react-bootstrap.netlify.app/docs/components/navbar)에 잘 설명되어 있지만 옵션이 많으니 몇 개만 이야기해 보겠습니다. expand="lg" : 크기가 줄어들면 navbar의 모양이 바뀝니다. 언제 모양이 바뀔지 설정해 줍니다. lg는 992px입니다. Container : 화면.. 2024. 9. 12.
spring boot - db 조회 백엔드한테 정보를 달라고 했으면 db에에 해당하는 값을 가져와야 합니다. JPA를 통해 값을 가져와 봅시다.db 폴더 안에 UserRepository interface를 만듭니다. 여기에 JpaRepository를 상속받습니다. UserEntity 형식이고 primary key 타입이 long입니다. JpaRepository에 가보면 기본적으로 있는 것들이 있습니다. 이것들을 이용해 편하게 쿼리를 쓸 수 있고 직접 만들수도 있습니다. 저는 name과 password가 일치하는 레코드가 있는지 찾아야 합니다. Jpa에 findFirstByNameAndPassword 함수를 넣어줍니다. name과 password가 일치하는 것 중 하나를 찾아줍니다. 없을수도 있으니 optional을 넣어줍니다.이제 Cont.. 2024. 9. 10.
spring boot - filter 실제 서비스를 운영하다 보면 요청에 따라 요청과 응답을 확인하고 싶을 때가 있습니다. 이때 저희는 Filter를 사용할 수 있습니다. filter 패키지 하나 만들고 여기에 Log를 출력해 주는 LoggerFilter 클래스를 하나 만듭니다. 해당 클래스는 Component annotation을 붙여서 bean에 등록해 줍니다. @Component는 앱이 시작하는 동안 어플리케이션 컨텍스트에 추가해 주는 것인데 일단은 그냥 써줍시다. 빨간 줄에 커서를 대고 alt + enter, implement method, doFilter를 추가해 줍니다. servletRequest를 HttpServletRequest로 형변환해 주고 이를 ContentCachingRequestWrapper객체로 만들어 줍니다. re.. 2024. 9. 8.
[논문 리뷰] Neural Architecture Search: A Survey(NAS) Neural Architecture Search(NAS)는 인공지능을 만들어 주는 인공지능입니다. 보통 인공지능을 만들 때 모델을 만드는데 이 모델을 인공지능을 이용해서 만들어 보자는 것입니다. 이 인공지능의 컨셉과 발전 과정 집중해서 이야기해 보겠습니다.기본 전략3가지 개념을 알아야 합니다. search space : dense net, convolution, skip connection 등 여러 레이어가 있습니다.search strategy : search space를 어떻게 탐색할지 정합니다.performance estimation strategy : 찾은 아키텍쳐가 얼마나 성능을 내는지 구합니다. 직접 트레이닝해도 되고 퍼포먼스를 예측하는 알고리즘을 도입할 수 있습니다. search strateg.. 2024. 9. 5.
spring boot - post 전송(with data) 유저가 로그인을 한다고 가정해 봅시다. 그럼 아이디와 비번을 서버에 보낼 것입니다. 먼저 사람들이 입력을 하는 형식을 만들어 봅시다. user 밑에 model 패키지를 만들고 UserLoginRequest를 만듭니다. 이제 UserLoginRequest에 어떤 식으로 입력해야 하는지 적을 것입니다. 이름과 비번을 입력받는데 빈칸이면 안되니까 NotBlank annotation을 넣어줍니다.만약 NotBlank에서 에러가 발생하면 build.gradle에 마지막 문구를 추가해 줍니다.controllercontroller 패키지에는 아래와 같이 만듭니다. http://localhost:8080/open-api/user/login에 UserLoginRequest 형식으로 호출한다는 뜻입니다. 이걸로 로그인을 .. 2024. 9. 4.

티스토리툴바