본문 바로가기

분류 전체보기178

웹 개발 - 프로젝트 2 - 2. streak lover 프론트 계속해서 프론트 디자인을 해봅시다. streak우선 nav bar부터 만들어 봅시다. 클릭했을 때 어떤 페이지로 이동할지 만들어 둔 것입니다. 하지만 지금은 페이지가 하나밖에 없으므로 그냥 형식만 만들어 줍니다. 그럼 아래와 같이 보입니다. 이제 스트릭의 틀을 만들어 줍니다. 아래는 깃허브에서 보여주는 streak입니다. 이 모양을 이용해 만들어 줄 것입니다. 하지만 지금 만들진 말고 틀만 잡아줍시다. 여기까지 하면 아래와 같이 나옵니다.title로 제목을 전달해 줄 수 있습니다. 인자를 받을 수 있으니 인자를 넘겨줄 수도 있어야 겠지요. 다음과 같이 넘겨줄 수 있습니다. 구조전체적인 구조는 아래와 같습니다. component에는 여러 곳에서 사용하는 요소들을, page에는 페이지 단위의 작업을 넣어두었.. 2024. 8. 5.
dvwa CSRF CSRF 공격은 사용자가 자신도 모르게 공격자가 원하는 행동을 하게 만드는 공격 방법입니다. DVWA를 실행하고 CSRF로 이동합니다. burpsuite를 실행하고 password에 1234를 입력한 뒤 실행해 봅니다. 그럼 이벤트를 잡을 수 있습니다.단순히 get으로 보내고 있습니다. 이 정보를 복사해 봅시다. 이 url에서 아이디, 비밀번호를 적당히 바꾼 다음 그 url을 실행하도록 유도하면 됩니다. 가짜 사이트를 만들거나 메일로 링크 클릭을 유도하면 됩니다. 2024. 8. 3.
4544 - 'Roid Rage 문제 번역더보기더보기$M$개의 다각형이 있습니다. 각 다각형끼리 교차하는지 아닌지 판단하세요. 두 개의 다각형이 내부 영역을 공유하거나(즉, 겹치는 경우) 경계점을 공유하는 경우(즉, 한 점이나 가장자리를 따라 닿는 경우)를 말합니다.step 1더보기더보기다각형의 수와 꼭짓점의 수가 적기 때문에 모든 경우를 보는 방법으로도 충분히 풀 수 있어 보입니다. 두 다각형이 있을 때, 어떤 변이 교차하면 반드시 겹친다고 할 수 있습니다. 이는 CCW를 이용해서 해결할 수 있습니다.두 직선 $\overline{XY}$랑 $\overline{ZW}$가 있다고 해봅시다. CCW($XYZ$) * CCW($XYW$)가 음수고 CCW($ZWX$) * CCW($ZWY$)가 음수면 이는 확실히 교차한다고 할 수 있습니다. 만약.. 2024. 8. 1.
[논문 리뷰] You Only Look Once:Unified, Real-Time Object Detection(YOLO v1) ssd와 마찬가지로 물체가 어디 있고 어떤 문체인지 판단하는 네트워크입니다. 모델이 상당히 간단하고 앵커박스가 없는 것이 특징입니다.  모델 구조 처음 448*448 크기의 이미지로 시작합니다. 이 이미지를 Conv2D를 이용해 7&7*30으로 줄입니다. 마지막 라벨에서는 7*7*30이 됩니다. 7*7은 피쳐의 크기입니다. 클래스가 20개고 각 피쳐픽셀 당 2개의 바운딩 박스가 들어있습니다. 각 바운딩 박스는 5개의 값으로 이루어 지는데요, 중심 좌표(x,y)와 너비와 높이(w,h)와 컨피던스 스코어(c)로 이루어져 있습니다. 그래서 각 피쳐픽셀 당 20+(5*2)=30개로 이루어 집니다. 이전에는 바운딩 박스마다 클래스를 주었는데요, 이번에는 피쳐픽셀 당 라벨이 정해집니다.백그라운드이 전에는 각 바운딩.. 2024. 7. 31.
웹 개발 - 프로젝트 2 - 1. streak lover 시작 저는 스트릭을 사랑합니다. 깃허브나 duolingo 같은 곳에서도 스트릭을 이용해서 활동을 유도하기도 하죠. 하지만 모든 곳에서 이런 기능을 제공해 주지는 않습니다. 다음과 같은 곳에서는 사용할 수 없습니다.월, 수, 금에 운동하기책 매일 1페이지씩 읽기달에 한번 등산하기매일 코딩 유튜브 영상 하나씩 보기이런 경우에도 스트릭이 있다면 인생을 조금 더 행복하게 살 수 있을 것 같습니다. 이걸 만들기 위한 준비를 해봅시다.프레임 워크 선정저는 밖에 있을 때는 휴대폰을 많이 사용하고 집에서는 컴퓨터를 많이 사용합니다. 그래서 양 쪽 모두 사용할 수 있는 웹앱으로 개발할 것입니다. 추후에 목표 달성 시 NFT토큰을 준다고 하면 react로 개발하는 것이 좋을 것 같습니다.백엔드는 익숙한 spring boot로 .. 2024. 7. 30.
react 설치 우선 node(https://codestudycafe.tistory.com/17)를 설치해 줍니다.그리고 터미널에 npx create-react-app {프로젝트 명}을 입력해 줍니다. 만약 에러가 나오면 npm install -g create-react-app를 한번 입력해 줍니다.그럼 이렇게 파일이 나옵니다. 이제 터미널에 cd {프로젝트 이름}으로 프로젝트에 들어가고 npm run start로 실행을 시킵니다. 사실 이걸로 끝인데 너무 짧으니 파일 구조라도 한번 봅시다. 여기서 같은 이름이 한 세트라고 생각하면 됩니다. index 3개가 한 세트고 app 2개가 한 세트입니다. app.test.js는 테스트를 위한 코드로 무시합시다. 대부분 프로그램의 시작은 index입니다. index의 html을.. 2024. 7. 29.

티스토리툴바