Front end28 Vue.js를 이용한 '몬스터 슬레이어' 게임 만들기 후기 이번 단원에서는 그동안 배웠던 주요 기능들을 이용해서 프로젝트를 진행했다. 주요 로직이 예전에 인턴생활을 하며 Java로 만들었던 RPG 게임과 유사해서 쉽게 만들 수 있었다. 게임의 내용은 닌텐도 포켓몬스터 게임처럼 턴제 게임이며 공격, 스킬, 힐 등 다양한 기능을 사용할 수 있게 제작되었다.주요 기능은 다음과 같고, 스킬은 3턴에 한 번만 사용 가능하다. 객체의 속성 부분에는 Data 를 이용해 체력, 턴, 우승자 등을 선언했고, computed에서는 스타일이나 html에 들어가 있을법한 연산을 넣었다. 나머지 기능은 메서드에서 구현했으며, watch를 이용해 현재 체력을 감시해 0이 되었을 때 승자를 반환하는 코드도 작성했다. 게임의 전체적인 흐름은 몬스터와 플레이어가 한 턴씩 공격하고, 그로.. 2024. 6. 19. v-if와 v-for 이번 단원에서는 Vue에서 if와 for를 사용하는 방법에 대해 배웠다. 일단 문법은 다른 언어들과 같아서 익숙했지만, html 코드 내에 작성하는게 뭔가 맘에 안든다. 나는 보통 html에서 태그 속에 뭐 넣는 걸 안좋아하는데 익숙해지면 괜찮아질 것 같기도 하다. 암튼 뭐 되게 간결하고 사용법도 쉽고, Js에서 코드 길게 안짜도 편리하다는 점은 정말 유용하다. v-if뷰에서 사용하는 if 문이다. html 태그 내에서 사용하며, 큰따옴표 안에 Js 코드를 작성한다. 아래는 goals라는 배열이 비어있다면 해당 텍스트를 나타내는 코드이다. 목표가 설정되지 않았습니다. 목표를 설정해주세요. v-else뷰에서 사용하는 else이다. if 바로 아래에서 사용해야 하며, 중간에 다른 태그가 들어가면 실행되지않는.. 2024. 6. 15. computed와 watch 이전 단원에서는 data와 methods 의 대해 배웠다. 이번 단원에는 Vue의 다른 개념인 computed와 watch에 대해 공부했다. 쉽게 설명하자면 computed는 연산형 데이터? 라고 말 할 수 있을 것 같고 watch는 데이터가 바뀔 때 알 수 있으니 디버깅할 때 좋을 것 같다. computed는 데이터에 직접 연산을 넣으면 가독성이 떨어지고, 효율이 낮아질 수 있으니 따로 분리하는 것이라고 이해했고, watch는 그냥 디버깅 하위호환이라고 이해했다. computed (연산 프로퍼티): 연산 작업이 필요한 변수를 데이터처럼 관리하기 위함. ➡️ 즉, 재사용성의 증가, 코드의 가독성 및 유지보수 작업이 향상된다. 메서드와 다른 점: 다른 데이터에 의존하는 데이터에 주로 사용. 해당 속성.. 2024. 6. 15. Vue를 이용한 DOM 상호작용 이번 단원 강의를 들으며 뷰의 기초 문법에 대해 공부했다. 전에 리액트를 한 번 조금 공부해 본 적이 있어서 비슷하게 공부하면 되겠지라는 생각으로 일단 강의를 듣고 있다. 딱히 현재까지 어려운 부분은 없었고, vue를 호출하기 전 특정 커맨드를 위주로 문법을 공부했다. 패키지 불러오기뷰의 커맨드를 불러오기 위해서는 패키지를 먼저 index 파일에 불러왔다. 패키지 경로는 아래와 같다.(24.05.18 기준) 컴포넌트 생성뷰를 사용하기 위해 뷰 컴포넌트를 생성해야 한다. 따라서 createApp() 메소드를 이용해서 컴포넌트를 생성한다. const app = Vue.createApp() 앱 마운트 하기작성한 코드를 html의 어느 부분에 렌더링 할지 컨테이너를 선택한다. 보통 해당 컨테이너의 id.. 2024. 5. 18. Vue 시작하기 Vue.js 카테고리에 있는 모든 글은 Udemy (Vue 완벽가이드) 강의에서 정리 및 요약 간접 인용한 것임을 밝힙니다. 2024. 5. 18. 포켓몬 MBTI Test 만들기 요즘 과제에 치이고 알바도 하느라 블로그를 안쓴지 오래된 것 같은데 나름 짬짬히 이것저것 만들긴 했다. 한 번에 포스팅하려니 막막해서 그중 하나인 mbti 테스트 먼저 포스팅 하려한다. + 아직 디자인은 완성되지 않았는데 포켓몬 세상을 컨셉으로 잡았다 ㅋ mbti 테스트의 기본 알고리즘은 E와 I, N과 S 등 4가지 클래스의 성향을 판단하기 위해 질문이 필요하다. 따라서 각 클래스의 질문은 홀수여야 하고, 어떤 성향이 더 큰지 비교하여 출력한다. 완성 사이트 starlit-frangollo-737871.netlify.app 이렇게 된다면 결과는 각각 2번씩 선택된 ESTP가 출력된다. 여기서 또 문제가 생겼는데 질문을 어떻게 해야할지 문제였다. 그런데 GPT한테 간단히 설명하고 질문지를 만들어달라고 요.. 2023. 5. 12. 이전 1 2 3 4 5 다음
