개발일지 썸네일형 리스트형 [CANVAS - 체스] 7. 리팩토링 시작 master에서 리팩토링 브랜치를 따서 리팩토링 하려고 한다. 일단 매번 호출하는 체스보드 그리는 함수를 별개의 파일로 분리하는 것부터 시작. 궁금한건 canvas는 테스트를 어떻게 하는건가.. 싶다. https://www.valentinog.com/blog/canvas/ Testing an HTML canvas with Cypress How to test an HTML canvas? Let's see an example of visual regression testing with Cypress. www.valentinog.com 여기서는 cypress를 이용한 시각적 회귀 테스트를 하고있다. 일단 테스트는 도입하지 않았고 현재 index 파일에만 잔뜩 있는 파일을 분리하는 것부터 시작했다. https:.. 더보기 [CANVAS - 체스] 6. 사운드 입히기 말 선택시 효과도 주었으니 선택 or 이동 시 효과음을 주고 싶다. 해당 관련 작업을 거의 안하다보니 태그를 뭘써야 하는지 기억도 안난다. 아래의 사운드를 구하고 넣어줘보자. 1. 말 선택시 효과음 2. 말 이동 or 말 잡기 효과음 (동일해도 되나 살짝 높낮이를 달리해서 적용하고 싶음) new Audio 객체를 이용해서 넣어주기로 한다. 근데 말 선택시 내 생각보다 약간 딜레이가 있어서 찾고있다. 효과음 찾는게 엄청 일이네.. 일단 가벼운 클릭소리로 대체하고 다음으로 넘어간다. 더보기 [CANVAS - 체스] 5. 내가 클릭한 말 or 칸에 효과주기 현재 상태는 내가 제대로 말을 클릭 했는지 잘 모르는 상황이다. 효과를 좀 줘보자. 살짝 형광색(?) 같은 느낌으로 테두리를 칠하면 어떨까 한다. 클릭하면 네모칸 나오는 것 까지는 그렸다. strokeRect를 이용해서 그린것 까진 되었는데.. 다른 말을 클릭할 때 이전 stroke를 어떻게 없애는지가 핵심.. strokeStyle = 'transparent'는 없는건가... 일단 그냥 해당 칸의 색으로 다시 칠하는 방식으로 대체 했다. 결과는 아래와 같다. 더보기 [CANVAS - 체스] 4. 말 잡아먹기 이제 말 잡아먹는 기능을 구현하고자 한다. 일단 각 말이 갈수 있는 범위 구현은 나중에 하고, 한 말을 선택한 다음 다른 진영을 말을 클릭할 경우 그 말이 있는 위치로 가서 해당 말을 잡는 것으로 진행해보자. 이전에 이동했던 거랑 비슷해서 금방 적용시켰다. 다만 엉망진창으로 가는데 이건 나중에 수정하고, 현재 단점이 지금 내가 뭘 클릭했는지 모른다는 것이다. 이제 내가 클릭했을때 해당 말 또는 칸에 대해 효과를 주려고 한다. 더보기 [CANVAS - 체스] 3. 체스말 이동하기 체스말을 클릭하여 이동을 해보자. 1. 이동의 정의 일단 여기서 이동이란 아래로 정의해보겠다. 1. 클릭한 체스말 이미지를 기억해두고 2. 그다음 클릭한 캔버스 내 지점으로 해당 이미지를 이동한다. 캔버스의 기능으로 생각해보면 이미지를 그리고, 이미지를 지우는 것이다. (내 생각은 일단 그렇다.) 일단 hover 부터 해보자. https://velog.io/@pandati0710/html-canvas-%EB%8B%A4%EA%B0%81%ED%98%95-hover-event-%EA%B5%AC%ED%98%84 html canvas 다각형 hover event 구현 서론 cavas에서 다각형 그리기 다각형 hover event 구현하기 결론 velog.io https://developer.mozilla.org/.. 더보기 [CANVAS - 체스] 2. 체스말 이미지 불러오기 이제 체스말 이미지를 가져와서 체스판 위에 배치해보자. https://agal.tistory.com/206 1-5. 이미지 사용하기 - Canvas API | MDN 지금까지 우리는 Canvas를 가지고 도형을 만들고 그 도형에 스타일을 적용해봤습니다. 이미지를 사용하는 기능은 의 가장 흥미로운 기능 중 하나입니다. 이 기능은 게임의 그래픽 배경이나 혹은 agal.tistory.com 위 글중에서 1개의 이미지를 구역별로 잘라서 사용하는 내용을 참고하였다. 체스말 그리기는 비교적 쉽게 끝났다. 코드에 위치가 하드코딩 되어있긴 하지만 나중에 수정하도록 하고 다음으로 넘어간다. 이제 말을 클릭하여, 다른 곳으로 이동하는 작업을 해보자. 더보기 [CANVAS - 체스] 1. 세팅 및 체스판 그리기 canvas에 예전부터 관심이 갔는데 뭐 좀 하다가 시들해지고 그랬었다. 이번에는 아주 천천히 하더라도 조금씩 계속 뭔가 하는게 좋을 것 같아서 해보려함 내가 하고싶은거는 체스 만들기. 2D로 그려진 체스판에서 체스하는거다. 1. 체스판은 가로세로 8x8. 한칸당 10px로 잡고 800 x 800의 캔버스를 만들었다. 2. 각 칸에 색칠을 하려고 한다. 아래 사진과 같은 느낌. ctx.fillRect(0, 0, 10, 10)를 이용해서 10px 10px의 정사각형을 그리려고 했는데 이모양이다. 예전에도 비슷한 문제가 있었는데 기억이 안나서 다시 찾아야한다. 토스트에서 이런 글을 올려주었다. https://ui.toast.com/weekly-pick/ko_20210526 삽질하기 싫으면 꼭 읽어봐야 할 C.. 더보기 [사이드프로젝트] mui 5 https://mui.com/ MUI: The React component library you always wanted MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design. You will develop React applications faster. mui.com material ui가 버전을 업글하면서 이름을 바꿨다. 챠크라 써보려고 했는데 이게 너무 잘되있어서 이것도 한번 써볼까... 고민중이다. 더보기 [사이드프로젝트] 써보고 싶은 UI 컴포넌트 - chakra https://chakra-ui.com/docs/layout/flex Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React a Simple, Modular and Accessible UI Components for your React Applications. Built with Styled System chakra-ui.com 버튼이며 이것저것 만들기 귀찮았는데 이거 한번 사용해봐야겠다. 더보기 [사이드프로젝트] RDS 띄우고 ec2와 연결시키기 졸려서 간단하게 정리만 하고 나중에 보충할 예정 1. RDS 프리티어로 만듦 (퍼블릭 접근 설정해야하고, 인바운드 설정 접근을 ec2의 보안그룹으로 일치시켜서 내 ec2만 접근 허용 하도록 하였다) 2. ec2에서 프론트 -> 서버에서 접근하는 부분 에러가 나서 보니까 nginx에서 /api 부분을 잡고 proxy pass로 백엔드 서버를 띄운 곳의 호스트로 보내주고 있었는데, 이걸 그대로 보내는 바람에 /api/auth/user-info를 보내고 있었다. (원래 /auth-user-info로 보내야 함) 그 문제는 아래 포스트를 보고 해결했다. https://wani.kr/posts/2016/07/01/nginx-proxy-settings/ Nginx 하위 경로를 다른 서버로 보내기 - 완두블로그 서비.. 더보기 이전 1 2 3 4 5 6 다음
