본문 바로가기

전체 글135

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.
캡스톤 디자인 - 분석 및 설계 먼저 GPT AI 비서의 이름은 '미르' 라고 정했다. 올해가 청룡의 해이기도 하고 미르라는 어감도 좋아서 선택했다. 그동안 중간 발표를 위해서 팀원들과 여러번 만나 미르의 기능에 대해 이야기를 많이 했었다. 내용을 요약하자면 음성인식 및 출력 기능, GPT API를 따온 인공지능, 오늘 날짜와 날씨를 알려주는 기능, 음악 재생 기능 이렇게 4가지를 최우선시 하기로 했다. 사실 모든게 다 API 인것 같아서 이렇게 해도 되나 라는 생각이 들었지만 각각의 기능을 조화롭게 묶는 것 또한 개발자의 역량 이라고 생각해서 한결 편하게 진행할 수 있었던 것 같다. ㅋㅋ 각각의 기능을 어떻게 구현할지에 대한설명은 다음과 같다. 음성인식 및 출력 (STT/TTS) 음성인식은 speech_recognition 라이브러리.. 2024. 4. 21.
캡스톤 디자인 - 주제선정 4학년에 올라오면서 캡스톤 디자인을 하게 되었다. 다른 친구들은 내가 인턴을 나갔던 이전학기에 조를 나눈 상태여서 나는 모르는 사람 2명과 조를 이루어 하게되었다. 그래도 두분 다 성격도 좋으신것 같고 분업도 잘 된것 같아서 나름 첫 만남은 성공적이었던 것 같다. 먼저 우리가 만들게 될 작품은 'Chat GPT를 이용한 인공지는 비서' 이다. 흔히 알고있는 기가지니에 GPT를 합체한 느낌이라고 생각하면 된다. 조에 3D 모델링을 전문적으로 하는 분이 있어서 외형은 최대한 귀여운 캐릭터로 만들 생각이고 고개를 돌려 이야기하는 사람을 쳐다보는 기능도 추가할 생각이다. 필요 부품 먼저 필요할것이라고 생각되는 것들은 3D 프린터용 레진, 라즈베리 파이, 서보모터, 스피커, 마이크 이렇게 생각했는데 필요한게 나올.. 2024. 3. 9.
2024 1회 정보처리기사 필기 합격 후기 안녕하세요 2024 정보처리기사 1회 필기 합격 후기입니다! 정보처리기사 필기시험은 문제은행 형식이라 가능한 cbt에서 문제를 많이 푸는 것을 추천합니다. 시험때도 cbt에서 풀었던 문제들이 나오므로 회차별로 5회 이상씩 풀고 해설과 함께 문제 자체를 외워버리면 쉽게 합격 할 수 있습니다. ++ 시험 점수는 시험이 끝난 후 가채점 점수 및 합격여부가 나오게 됩니다. 공식 발표는 3얼 13일에 나오므로 결과 캡쳐본은 3월 13일에 올리도록 하겠습니다. 시험 정보 📒 먼저 시험은 2020년 개정 이후 총 5단원으로 이루어져 있습니다. 단원별로 별표친 부분은 CBT 모든 회차에 나왔을 정도로 많이 나오는 유형이니까 많이 풀어주세요 소프트웨어 설계 (★☆ ☆ ☆ ☆ ) * 애자일 / 사용자 요구사항 소프트웨어 .. 2024. 2. 17.
티스토리 블로그 꾸미기 (3) 오늘은 이전에 변경한 사이드바 카테고리 및 글을 정렬하는 방식을 변경했다. 먼저 지난 글에서 바뀐점은 다음과 같다. 변경된 점 사이드바 카테고리 깃허브 카드 플립효과 추가 글 정렬 디자인 변경 먼저 사이드바의 카테고리 디자인을 현재 UI에 맞게 수정했다. 현재 카테고리에 마우스를 가져다 대면 해당 카테고리가 선택되었다는 효과가 나타난다. 또한 깃허브 카드가 있던 박스에 내 명함을 넣고, 마우스를 가져다 대면 깃허브 카드로 뒤집히게 변경했다. 클릭시 내 깃허브로 이동하게 만들었다. 다음은 글의 정렬 디자인을 변경했다. 이 때 스크롤을 하며 페이드인 되는 효과를 구현했고, 화면에 없을 때에는 사라지도록 만들었다. 이제 내가 처음 구상했던 디자인은 모두 구현한 것 같다. 앞으로 어떤 부분을 수정해야할 지는 가.. 2024. 1. 18.

티스토리툴바