본문 바로가기

분류 전체보기178

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.
webgoat CIA Triad CIA의 3요소(기밀성, 무결성, 가용성)에 대한 이야기입니다. 이 파트는 따로 실습이 있는 건 아니고 뒤에 있는 설명을 보고 문제를 푸는 것입니다. 중간고사 오픈북 테스트 보는 느낌이네요. 기밀성은 승인되지 않은 누군가에게 공개되지 않도록 하는 것입니다.무결성은 데이터의 일관성, 정확성 및 신뢰성을 유지하는 것입니다.가용성은 인증된 사람이 요청 시 액세스하고 사용할 수 있는 것입니다. 각 문제들의 정답들만 한번 살펴보겠습니다. 기밀성에 대한 이야기로 해커가 데이터베이스의 정보를 온라인에 올림으로서 훼손될 수 있습니다. 무결성에 대한 이야기로 데이터베이스의 정보를 바꿈으로서 훼손될 수 있습니다. 가용성에 대한 이야기로 서버에 서비스 거부 공격을 해서 훼손할 수 있니다. CIA 3요소 중 하나라도 훼손된다.. 2024. 9. 11.
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.
31725 - 포닉스와 달구 step 1더보기$dp[i][j]$ : i, j 칸을 지날 때 얻을 수 있는 가장 큰 점수 이 dp값을 구해봅시다. 이걸 구하기 위해 2개의 dp를 만들겠습니다.$dp_s[i][j]$ : 시작점에서 i, j까지 올 때 얻을 수 있는 가장 큰 점수$dp_e[i][j]$ : i, j에서 끝점까지 갈 때 얻을 수 있는 가장 큰 점수 $dp_s[i][j] = max ( dp_s[i-1][j], dp_s[i][j-1] )  + A_{i,j}$$dp_e[i][j] = max ( dp_e[i+1][j], dp_e[i][j+1] )  + A_{i,j}$로 구할 수 있습니다. 그럼 $dp[i][j] = dp_s[i][j]+dp_e[i][j]-A_{i,j}$입니다. $dp[i][j]$는 i, j가 아래 그림의 빨간 칸일 .. 2024. 9. 9.
spring boot - filter 실제 서비스를 운영하다 보면 요청에 따라 요청과 응답을 확인하고 싶을 때가 있습니다. 이때 저희는 Filter를 사용할 수 있습니다. filter 패키지 하나 만들고 여기에 Log를 출력해 주는 LoggerFilter 클래스를 하나 만듭니다. 해당 클래스는 Component annotation을 붙여서 bean에 등록해 줍니다. @Component는 앱이 시작하는 동안 어플리케이션 컨텍스트에 추가해 주는 것인데 일단은 그냥 써줍시다. 빨간 줄에 커서를 대고 alt + enter, implement method, doFilter를 추가해 줍니다. servletRequest를 HttpServletRequest로 형변환해 주고 이를 ContentCachingRequestWrapper객체로 만들어 줍니다. re.. 2024. 9. 8.
webgoat 개발자 도구 크롬이나 파이어폭스 등 대부분의 웹 브라우저에는 개발자 도구가 있습니다. 이것을 이용해서 네트워크 통신이나 코드 실행 등 다양한 것을 확인할 수 있습니다. ctrl + shift + i 로 켤 수 있다고 하는데 F12로고 가능합니다. 바로 문제로 넘어가 봅시다. 개발자 도구를 켜고 콘솔로 들어갑니다. webgoat.customjs.phoneHome()를 콘솔 창에 입력합니다. 이때, webgoat가 있는 창에서 실행해야 합니다. "output": "phoneHome Response is 뒤에 있는 숫자를 넣으면 해결할 수 있습니다. 6번에서는 네트워크 탭을 활용하라고 되어 있습니다. network 탭으로 간 다음 버튼을 클릭하면 network가 하나 나옵니다. 해당 요청을 누르고 payload로 가면 아.. 2024. 9. 7.

티스토리툴바