개발일지 썸네일형 리스트형 [직소퍼즐] 직소 퍼즐 만들기 (4) - three.js 사용 - canvas를 사용할거고, 거기서 drag n drop 기능을 이용해서 네모 조각을 움직이는 기능을 구현한다 - 특정한 조각의 배열이 순서를 이루면 정답으로 인정한다 - 네모 조각을 진짜 직소 퍼즐 조각처럼 만든다 z Index를 임시로 구현하지 않고 그냥 canvas를 3d로 사용하려고 한다. 이렇게 하려면 canvas getContext를 webgl로 사용해야 하고, 그 이후에는 모양 하나 만들려면 꽤나 귀찮은 작업이 들어가기 때문에, three.js를 사용하려고 한다. https://threejs.org/ Three.js – JavaScript 3D Library threejs.org 정작 three.js 사용하려고 보니 고려해야할게 한두가지가 아니다. 일단 카메라와 빛부터... 알게된 사실 1.. 더보기 [직소퍼즐] 직소 퍼즐 만들기 (3) - 캔버스의 z index - canvas를 사용할거고, 거기서 drag n drop 기능을 이용해서 네모 조각을 움직이는 기능을 구현한다 - 특정한 조각의 배열이 순서를 이루면 정답으로 인정한다 - 네모 조각을 진짜 직소 퍼즐 조각처럼 만든다 일단 z index를 임시로 구현해서 빨간 네모박스를 가리는 건 성공했다. 빨간 네모 박스 근처에 놓으면 착 하고 달라 붙도록 만들자. 현재 mouse up 했을때 마우스의 좌표만 전달한다. 흠... 좋은 방법이 없을까 - 8월 12일 canvas 3d로 이용하면 어떨까 더보기 [직소퍼즐] 직소 퍼즐 만들기 (2) - 특정 조각 캔버스 위치에 붙게하기 2. 직소 기능 구현 - canvas를 사용할거고, 거기서 drag n drop 기능을 이용해서 네모 조각을 움직이는 기능을 구현한다 - 특정한 조각의 배열이 순서를 이루면 정답으로 인정한다 - 네모 조각을 진짜 직소 퍼즐 조각처럼 만든다 1. 배열 1부터 9까지 써놓고, 그것을 랜덤 생성 후 랜덤 배치를 해놓고, 1 2 3 4 5 6 7 8 9 이런식으로 붙여서 놓으면 success를 콘솔로 찍으려고 한다. 순서가 아니라 캔버스의 특정 위치 내에 이동하면 glue로 찰싹 붙게 하는 기능을 구현하고자 한다. (효과음은 나중에) 테스트로 빨간 네모 만들고 그걸 가리도록 만들었는데, 문제는 빨간 네모 위에 놓으면 움직일때 같이 움직이는 문제가 발견되었다. 일단 이거를 해결해고 싶다. 더보기 [직소퍼즐] 직소퍼즐 만들기 (1) - 캔버스에서 물체 드래그 n 드랍 index.html에 캔버스 하나 설정하고, 여기 드래그 n 드랍을 구현하려고 한다. DND는 그냥 라이브러리를 사용하기로 했다. ts 세팅하고 사용하려고 하는데 tsc 컴파일을 하고 dist에 파일을 불러오니까 컴파일된 js 파일에서 import 할때 뒤에 js 가 빠진채 컴파일 된다. 크롬에서 불러올때 확장자가 없으니까 해당 파일이 없다고하고.. import { hi } from "./test"; console.log(hi); //# sourceMappingURL=index.js.map https://github.com/microsoft/TypeScript/issues/27287 Documentation on Modules is missing ".js" suffix in import statement.. 더보기 [직소퍼즐] 직소 퍼즐 만들기 - 프롤로그 목표: 유튜브 링크를 붙여 넣고 만들기를 누르면, 해당 장면의 썸네일을 기반으로 직소 퍼즐을 만들고, 직소 퍼즐이 맞춰지는 순간 영상 재생이 시작된다. 일단 확인해보니 밀리초단위로 시작시간 영상을 공유할수는 없는 것 같다. 일단 만들기 시작하자. 세부 작업으로 한번 나눠 보려 한다. 1. 환경 설정 - ts만 사용하고 따로 뭐 설치 안하려고 한다. 2. 직소 기능 구현 - canvas를 사용할거고, 거기서 drag n drop 기능을 이용해서 네모 조각을 움직이는 기능을 구현한다 - 특정한 조각의 배열이 순서를 이루면 정답으로 인정한다 - 네모 조각을 진짜 직소 퍼즐 조각처럼 만든다 3. 직소 사진 구현 - 사진을 기반으로 직소 퍼즐이 잘리는 것을 구현한다 일단 위 작업까지 하고, 영상관련해서 작업하는 .. 더보기 [developergarten 개발기] 10. 로그인 후 정보 가져오기 오늘 연차다. 주말에 아무것도 안하고 진짜 이번엔 좀 해야할것 같아서 카페 나와서 작업중. 로그인 후에 서버에서 내려주는 정보를 저장해서 웹 페이지에 보여주려고 한다. 이번에도 벨로그 클라이언트를 참고해서 어떻게 저장하나 보고 그대로 구현해볼 예정이다. 오후 2시 59분. 오후 3시 36분 - 거의 복사 붙여넣기 수준으로 진행하고 있다 - 보니까 먼저 사이트 접속하면 로컬에 user 정보가 있다면 그냥 그걸 가져오는 듯하다. 오후 3시 59분 react-scripts Line 0: Parsing error: Cannot read property 'name' of undefined 이런 오류때문에 고생중 ㄴ ts 버전 3.8.3으로 올렸고 그래도 안되길래 IDE 껐다 켰다니 되었다. 오후 4시 15분 지금.. 더보기 [developergarten 개발기] 9. 프론트엔드 로그인 버튼 구현 오늘의 할일 1. 깃헙 로그인 디자인 2. 로그인 했으면 정보 가지고 와서 저장해서 사진 보여주기 3. 로그아웃 구현 오전 10시 27분 - 깃헙 로그인 아이콘은 스타일드 컴포넌트를 이용해서 그냥 간단하게 디자인했다. 별거 없음. 더보기 [developergarten 개발기] 8. github 소셜 로그인 구현 실제 (5) 드디어 github 회원가입 인증까지 완료했다!! 쿠키 문제때매 속썩였는데, cors 서버 세팅은 해놨는데 클라이언트에서 post 요청할때 옵션에 { withCredentials: true, } 이걸 줘야했던것을 몰랐다. 결국 쿠기를 가져올 수 있게 되면서 이후 문제는 벨로퍼트님과 내 테이블 컬럼이 조금씩 달라서 그거 문제 해결하는거 빼고는 금방걸렸다. https://kosaf04pyh.tistory.com/152 https://chodragon9.github.io/blog/cors-and-http-cookie/ CORS와 HTTP Cookie | ChoDragon9 CORS와 HTTP Cookie 글의 목적 Cross-Origin Resource Sharing! 앞 글자만 따서 CORS라고 부른다. 내.. 더보기 [developergarten 개발기] 7. github 소셜 로그인 구현 실제 (4) 오후 8시 15분. - 뒹굴거리다가 개발 시작. 저번에 해결못했던 - 그리고 실행하니까 (node:19273) UnhandledPromiseRejectionWarning: QueryFailedError: ER_CANNOT_ADD_FOREIGN: Cannot add foreign key constraint 이런 에러가 뜬다... 위 에러를 해결해야 한다. 아무래도 typeorm 엔티티 설정하는 과정에서 No overload matches this call. Overload 1 of 2, '(ids: any[], options?: FindManyOptions | undefined): Promise', gave the following error. Argument of type 'readonly string[.. 더보기 [developergarten 개발기] 6. github 소셜 로그인 구현 실제 (3) 오후 12시 43분. 이제 클라이언트에서 db 저장될 별명하고, 이름, 아이디, 한줄소개를 넣을 생각이다.. 꼭 넣어야 하나? 일단 그대로 해보고 나중에 수정하자. 1. 리액트에서 router 이용해서 회원가입 페이지만들기 2. post로 회원정보 등록 날리기 3. 잘 등록이 되는지 확인하면 일단 회원 가입 간단 로직은 끝난다. (DB 저장까지 완료) 현재 서버를 실행해도 typeorm 이 알아서 테이블을 만들어주는줄 알았는데.. 아닌가 보다. 일단 typeORM 쪽이 문제다. 저위에까지 한 다음에 한번 큰 사이클로 정리한 후 별도의 글을 다시 쓸 계획이다. 벨로퍼트님이 깃헙에 올려주신 코드가 아주 도움이 많이 되고 있다.. 오후 2시 27분 - typeorm이 테이블 생성을 알아서 해주려면 synchr.. 더보기 이전 1 2 3 4 5 6 다음
