사이드 프로젝트6 [저작 도구 만들기] 3 ~ 5주차 진행 사항 (2024.12.16 ~ 2025.01.05) 회고 😪작업 진행 내용 정리 및 회고를 위해서 매주마다 진행사항을 블로그에 올리고 하였으나, 생각보다 진도가 원한는만큼 나가지도 못했고 그리고 살짝 귀찮은 것도 있었다. 갑자기 1월이 되면서 시간을 더 내기가 힘들어 더 미루게 되었다. 이제는 다시 시작해야겠다는 생각이 들어 마지막 작업 내용이었던 3 ~ 5주차 진행을 올리게 되었다. 🎮 작업기존 작업했었던 모델, 컴포넌트, 프로퍼티, 매니저의 구조를 변경하였다.처음 설계와 실제 구현간의 맞지 않는 부분을 수정하였다.위치, 사이즈와 관련 된 프로퍼티 기능을 구현하였다.네모 모양의 기본 컴포넌트를 구현하고 프로퍼티와의 연관관계를 설정하였다. 🤔 고민설계코드 작업 전 설계했었던 부분이 실제 코드 작업을 해보면서 누락된 부분도 많고, 코드 구현과 맞지 .. 2025. 1. 19. [저작 도구 만들기] 2주차 진행 사항 (2024.12.09 ~ 12.15) 🎮 작업모델을 상속받는 컴포넌트와 컴포넌트를 관리하는 매니저, 컴포넌트를 표현하는 프로퍼티 관계에 대한 인터페이스를 정의하였다. 🤔 고민인터페이스 정의모델과 엘리먼트가 높은 결합도를 가지도록 인터페이스를 정의했었다. 어떤식으로 문제를 해결해야할지 고민이 되었다. 발행-구독 패턴을 알게 되어 해당 방법으로 구현할 예정이긴 하지만 아직 사용해보진 못해 이 방법이 맞는지는 많은 시도를 해봐야 할 것 같다. 매니저는 모델 아이템들을 관리하고 모델에서 변경사항이 발생하면 매니저가 옵저버 역할을 담당하도록 인터페이스를 정의하였다. 추가로 매니저는 발행자의 역할도 담당하여 이벤트를 발생시킨다. 매니저가 너무 많은 역할을 담당하는게 아닐까?라는 고민이 되고, 발행자의 역할을 매니저가 아닌 모델에서 직접해도 되지 않.. 2024. 12. 15. [저작 도구 만들기] 시작하며 🎨 간단 소개피그마나 포토샵과 같은 저작 도구 툴을 만드는 사이드 프로젝트를 시작한다. 저작 도구 툴에 대한 이해 및 자바스크립트 DOM, 성능과 같은 부분에 대한 학습적인 측면이 크기 때문에 제대로 된 툴을 만드다기 보다 이것 저것 테스트하는 용도의 사이드 프로젝트가 될 것 같다. 🎁 1차 목표기능적인(및 UI) 측면에서의 목표는 아래와 같다.컴포넌트를 에디터 영역에 배치배치 된 컴포넌트를 드래그를 통해 이동선택 된 컴포넌트에 컨트롤 포인트가 생기고 이를 통해 사이즈를 변경 가능사용자가 사용할 순 없지만 히스토리 스택 관리 기술적인 측면에서의 목표는 아래와 같다.타입스크립트의 활용객체지향으로의 구조 설계DOM에 대한 이해향상 및 DOM 렌더링 성능 방법 숙지 ⚽ 주저리최근에 리액트나 Nextjs와.. 2024. 12. 3. [판교고 - 기술체크] 1-3. 동일한 타일 여부 확인 해당 내용은 판교고 사이드 프로젝트 진행시에 사용할 캔버스에 대한 학습 내용을 정리하였습니다. 동일한 타일 여부 확인 이전 게시물에서 타일을 마우스를 통해 드래그하는 기능까지 완료하였습니다. 이번에는 타일을 목표 타일에 인접하게 이동시켰을 때 동일한 타일인 경우 자동으로 목표 타일로 이동되는 기능을 추가해 보겠습니다. 타일을 이동시킬때마다 아래의 두가지를 확인합니다. 드래그 중인 타일이 타겟에 인접했는가 동일한 타일인가 조건 두가지를 모두 만족하는 경우 타일을 타겟의 위치로 이동시켜주면 완성됩니다. 두가지 조건을 타일을 이동시키는 코드에 추가하도록 하겠습니다. 먼저 두개의 타일이 동일한지 여부를 확인하는 isEqual 함수를 만들어보겠습니다. 타일은 사각형이기 때문에 가로와 세로의 길이가 동일하다면 같은.. 2023. 5. 15. [판교고 - 기술체크] 1-2. 캔버스에 타일 드래그로 이동 해당 내용은 판교고 사이드 프로젝트 진행시에 사용할 캔버스에 대한 학습 내용을 정리하였습니다. 타일을 마우스 드래그로 위치 이동 저번 게시물에서는 타일을 배치하는것까지 완료하였습니다. 이번 게시물에서는 배치된 타일을 마우스 드래그로 이동하는 것을 알아보았습니다. 이번에 진행 순서는 아래와 같습니다. document에 마우스 이벤트 등록 이벤트 좌표를 이용해서 클릭한 타일의 위치 이동 먼저 이벤트를 등록해보겠습니다. 캔버스에 마우스를 클릭했을 때 대상이 존재하는지 여부를 확인하여 존재하는 경우 마우스 드래그를 했을 때 클릭 지점과 마우스 드래그 지점 사이만큼 대상의 위치를 옮겨주면 됩니다. 이번에 추가한 전체 코드는 아래와 같습니다. 하나씩 알아보도록 하겠습니다. const update = false; c.. 2023. 4. 25. [판교고 - 기술체크] 1-1. 캔버스에 타일 배치 해당 내용은 판교고 사이드 프로젝트 진행시에 사용할 캔버스에 대한 학습 내용을 정리하였습니다. 🎮 게임 소개 판교고는 우봉고 보드게임과 동일한 규칙을 가지고 플레이할 수 있습니다. 게임 라운드마다 점수를 획득하여 최종적으로 가장 많은 점수를 획득한 사람이 우승하며 우승자에게는 판교로 이직할 수 있는 기회를 제공한다는 컨셉의 게임입니다. 🛠 기술 체크 판교고는 우봉고 보드게임과 동일한 규칙을 가지고 있습니다. 규칙에 대한 설명은 아래와 같습니다. 각자 개인판을 가지고 게임을 시작합니다. 개인판에서 주사위를 굴려 나온 값에 해당하는 칸에 그려진 타일 모양을 가져옵니다. 가져온 타일을 개인판의 빈칸에 알맞은 형태로 배치합니다. 먼저 배치한 사람이 해당 라운드에 승리합니다. 위의 규칙을 자바스크립트로 구현하기 .. 2023. 4. 21. 이전 1 다음
