PersesTitan(페르) 기술블로그

해당 글은 홈페이지 제작 글이 아닌 VaneProject소개글 입니다. VaneProejct는 다양한 프로젝트를 생성하고 참가하기 위해서 만들어진 팀입니다. 해당 팀의 웹페이지 간단하게 디자인 및 동작등을 작업한 초기 모습입니다. 모바일에서도 동작이 되도록 반응형으로 제작중입니다. 멤버는 public으로 설정한 멤버만 표시되게 추가 할 예정입니다. https://vaneproject.github.io/ Vane vaneproject.github.io 기본 페이지 한국어 뿐만아니라 다양한 언어를 지원하여 볼 수 있도록 할 예정입니다. 모바일 버전 현재는 메뉴바로 변경되도록 하였고 멤버가 옆으로 가려지면 자동으로 내려가게 만들어서 보이기 좋게 만들었습니다.

Set has set.has(); set에 값을 포함한다면 true를 반환하고 값이 존재하지 않는다면 false를 반환합니다. List includes list.includes(); list에 값을 포함한다면 true를 반환하고 값이 존재하지 않는다면 false를 반환합니다.

spring에서 전송한 데이터를 react에서 출력하는 로직을 구현하게 되었습니다. 우선은 배포가 아닌 테스트를 위한 동작이므로 프로젝트를 합치지 않고 동작하도록 하였습니다. Spring 데이터 전송 확인 http://localhost:8080/api/ 우선은 url에 들어가서 데이터가 잘 전송되었는지 확인해주었습니다. 예제 데이터로 최신순으로 생성된 글 createDateSort과 좋아요 순으로 정렬된 글 likeSort를 반환해주는 로직입니다. React 프록시 추가 프로젝트에 package.json이라는 파일에 "proxy": "http://localhost:8080"를 추가해 줍니다. url포트나 링크가 다르면 링크 값은 백앤드 url로 변경해주시길 바랍니다. axios 설치 해당 커맨드를 rea..

웹스톰에서는 간단하게 File > New > Project에서 쉽게 프로젝트를 생성할 수 있는데요. 여기서 생성하실 React를 좌측에서 눌러주시고 하단의 Create TypeScript project 체크박스를 체크하고 생성하시면 TS언어로 프로젝트를 생성하실 수 있습니다. 생성 결과

다음은 천장에 충돌하면 HP를 내리고 삭제를하는 로직과 버블 터치하였을때 점수를 올리고 버블이 사라지는 로직을 구현하였습니다. 임시로 구현했던 삭제 버튼은 없애고, 스코어와 HP를 추가하였습니다. 길어지면 헷깔리기 때문에 저는 item.js파일 1개를 더 만들었는데 파일 1개에 다 구현해도 무방합니다. 코드 스코어 0 HP 100 생성 우선 삭제되는 부분을 구현하고, 천장에 부딧치면 downHp()를 호출하고, 클릭을하면 upScore()를 호출 하면 됩니다. 스피드는 다 똑같으면 재미 없으니 점수에 비례한 램던값으로 생성하였습니다. 값 차이를 많이 안줘서 그런지 솔직히 속도차이는 크게 못느꼈습니다. item.js function remove(value, interval) { const id_value ..

그냥 갑자기 웹 게임을 만들고 싶어서 제작하게 되었습니다. 구상 간단하게 버블이 올라가면서 누르면 점수가 올라가는 방식으로 구현해볼까 합니다. 우선 우리의 시각을 책임지는 html으로 화면을 구현해줍니다. 우선 생성 테스트를 할 예정이라 버튼 2개를 추가했는데요. 추후 제거할 예정입니다. html은 거둘 뿐...! index.html 생성 삭제 다음은 js... 게임로직을 구현하는 중요한 역할이죠...! create.js count = 0; score = 0; hp = 100; function loop() { const main = document.getElementById("main"); const div = document.createElement("div"); const width = window...