전체 글
-
7장. Vue.js 고급 개발자 되기 - 2개발 공부/Do it! Vue.js 입문 2025. 6. 3. 09:00
7장 - 2 07-2 뷰 개발을 위한 웹팩 05-2에서 잠깐 알아본 웹팩(webpack)은 최신 프런트엔드 프레임워크인 앵귤러, 리액트, 뷰에서 모두 권하는 모듈 번들러이다.뷰 프레임워크를 처음 배우는 입장에서는 웹팩에 대해 깊이 알 필요는 없다. 다만 이게 무엇이고 왜 필요한지 정도는 알고 있어야 나중에 필요할 때 직접 찾아 볼 수 있으므로 웹팩에 대해 간단히 알아보고, 뷰 CLI로 생성한 프로젝트에서 사용하는 웹팩 데브 서버와 웹팩 설정 파일(webpack.config.js)에 대해 살펴보자. 웹팩은 흔히 모듈 번들러라고 알려져 있고, 공식 홈페이지에서도 모듈 번들러라고 부르고 있다. 여기서 '모듈이 무엇이고, 번들러는 무엇인가?'라는 의문을 가질 수 있다.공식 홈페이지에서는 웹팩을 '서로 연관..
-
7장. Vue.js 고급 개발자 되기 - 1개발 공부/Do it! Vue.js 입문 2025. 6. 2. 09:00
7장 - 1 07-1 뷰 중 · 고급 레벨로 올라가기 위한 지식뷰 입문자들이 중급, 고급 레벨로 올라갈 수 있는 몇 가지 지식과 정보를 확인해 보자.Vuex : 상태 관리 라이브러리Vue Reactivity : 뷰가 데이터 변화를 감지하고 자동으로 화면을 갱신하는 특성Server Side Rendering : 서버 사이드 렌더링 뷰엑스(Vuex)는 애플리케이션의 상태 관리(state management)를 돕는 라이브러리이다.먼저 상태 관리에 대해 알아보자.상태(state)란 뷰 data 속성과 비슷하다고 생각하면 된다. 그러면 뷰 data 속성과 '상태'는 어떠한 차이점이 있을까? 위 그림은 id라는 데이터를 로그인 폼 컴포넌트에서 메인 컴포넌트로 전달하는 컴포넌트 간 관계도이다.로그인 폼 컴포넌트..
-
🍐[마비노기 모바일] 클래스 레벨업과 정령의 흔적게임/마비노기 모바일 2025. 6. 1. 20:15
캐릭터 레벨 25때 전직후 직업 엠블럼을 끼고 있다면 사냥터나 던전에서 몹을 잡을 때 해당 엠블럼으로 경험치가 채워지게 됩니다.일정 경험치가 채워지면 레벨업을 할 수 있으며 레벨은 65까지 올릴 수 있습니다.그리고 다들 아시는 것처럼 몹을 잡는 것 말고 정령의 흔적을 사용하여 클래스 레벨업을 할 수 있습니다. 본 글에서는 클래스 레벨업시 필요한 정령의 흔적의 양과 경험치를 확인하고, 타 직업 레벨을 올려서 효과를 얻을 수 있는 칭호나 룬에 대해서 알아보겠습니다~! 먼저 클래스 레벨업을 엠블럼에서 하는 방법을 알아보겠습니다.가방(I)창을 열어 캐릭터 장비창에서 왼쪽 최상단에 직업 엠블럼을 클릭합니다.(에픽룬인것은 넘어가도록 하자.) 엠블럼 정보가 열리면 하단에 [클래스 레벨업] 버튼으로 레벨업을 할 수 있..
-
6장. 실전 애플리케이션 만들기 - 6개발 공부/Do it! Vue.js 입문 2025. 6. 1. 09:00
6장 - 6 06-6 더 나은 사용자 경험을 위한 기능 추가하기앞서 제작한 기능에 이어 사용자 경험을 향상시키는 2가지 기능을 추가로 구현해 보자.할 일 목록이 갑자기 생기거나 사라지거나 하는 것을 애니메이션이나 모달을 이용하여 애플리케이션의 완성도를 높여 보자. 뷰 애니메이션은 뷰 프레임워크 자체에서 지원하는 애니메이션 기능으로, 데이터 추가, 변경, 삭제에 대해서 페이드 인(fade in), 페이드 아웃(fade out)등의 여러 가지 애니메이션 효과를 지원한다.간단한 데이터부터 목록 아이템까지 모두 지원할 뿐만 아니라 기타 자바스크립트 애니메이션 라이브러리나 CSS 애니메이션 라이브러리도 같이 사용할 수 있다. TodoList 컴포넌트의 할 일 목록에 애니메이션을 추가하기 위해 코드를 약간 변..
-
🍀[마비노기 모바일] 블러디 허브(네잎클로버) 자동 채집 팁게임/마비노기 모바일 2025. 5. 31. 16:23
치명타 비약에 들어가는 네잎클로버를 캐다보니 모든 회복 물약 제작에 들어가는 블러디 허브가 잘 캐져서 자동 채집 팁을 공유합니다 :)먼저 자동 채집 방법은 [크래프팅(K) - 제작 - 아이템 - 치명타 비약]을 클릭한 후 제작 횟수를 10회로 변경한 후 네잎클로버 아이콘을 클릭합니다. 네잎클로버 정보에서 [구하는 방법]을 클릭한 후 [약초 채집]을 클릭하면 네잎클로버 100개를 캘 동안 자동 채집이 가능합니다!만약 네잎클로버를 몇개 들고있다면 창고에 보관하거나 (필요없을 경우)판매를 하시면 편합니다~ 제가 알려드릴 채집 지형은 두 곳이며, 각각 장단점이 있습니다.첫 번째 장소는 늑대의 숲 1구역입니다. 이 장소의 경우 치명타 비약을 제작하였던 늑대의 숲 6구역과 가깝다는 장점이 있습니다~6구역에서 동..
-
6장. 실전 애플리케이션 만들기 - 5개발 공부/Do it! Vue.js 입문 2025. 5. 31. 09:00
6장 - 5 06-5 기존 애플리케이션 구조의 문제점 해결하기지금까지 구현한 애플리케이션의 문제점은 다음 2가지이다.할 일을 입력했을 때 할 일 목록에 바로 반영되지 않는 점할 일을 모두 삭제했을 때 할 일 목록에 바로 반영되지 않는 점종합해 보면 현재 화면을 4개의 영역(컴포넌트)으로 분리해 놓았기 때문에 한 영역의 처리 결과를 다른 영역에서 잠지하지 못한다는 문제가 있다.이 문제점을 해결하는 가장 간단한 방법은 컴포넌트를 4개로 분리하지 않고 한 컴포넌트 안에서 모든 것을 처리하는 것이다.하지만 컴포넌트가 이렇게 간단한 화면만 있을 수는 없고 그러므로 컴포넌트가 복잡해지는 것은 불가피하다.단순히 '컴포넌트의 단위가 작을 수록 재활용성이 높아진다' 라는 컴포넌트의 활용 측면 보다는 지금처럼 간단한 ..
-
⚜️[마비노기 모바일] 황금 채집템이 없을 경우게임/마비노기 모바일 2025. 5. 30. 20:09
생활 컨텐츠인 채집에서 자동은 거의 필수입니다.초반과 달리 채집에 관한 많은 팁들이 있지만 그 중에서 자동 채집하기 가장 좋은 템은 황금 채집템(황금 달걀, 황금 거미줄, 황금 양털, 황금 풍뎅이 등)입니다.하지만 그만큼 잘 안나오기 때문에 초반에는 채집 노가다를 어쩔 수 없이 해야했습니다 :(현재 모비노기가 오픈한 지 2달이 넘었지만 아직 황금 채집템이 없는 이들을 위한 팁을 공유하려 합니다 :)이 팁에서는 황금 채집템이 없어도 황금 채집템을 채집으로 걸어 놓을 수 있습니다.다만 모든 황금 채집템이 아닌 황금 달걀, 황금 거미줄, 황금 양털, 황금 풍뎅이만 사용할 수 있으므로 다른 황금 채집템을 필요로 하시는 분은 조의를 표합니다... 준비물은 따로 필요없으며 설명해드리는 방법으로 채집해보시길 바랍니..
-
6장. 실전 애플리케이션 만들기 - 4개발 공부/Do it! Vue.js 입문 2025. 5. 30. 09:00
6장 - 4 06-4 컴포넌트 내용 구현하기컴포넌트를 생성하고 등록까지 완료하였고, 다음은 컴포넌트 역할에 맞춰 컴포넌트 기능을 구현해 보자.컴포넌트 별 구현할 기능은 아래와 같다.TodoHeader : 애플리케이션 이름 표시TodoInput : 할 일 입력 및 추가TodoList : 할 일 목록 표시 및 특정 할 일 삭제TodoFooter : 할 일 모두 삭제 애플리케이션 제목 추가하기애플리케이션의 제목을 추가하기 위하여 TodoHeader 컴포넌트의 내용을 아래와 같이 작성한다. TODO it! CSS로 제목 꾸미기제목의 스타일링을 위해 최상위 컴포넌트인 App.vue에 아래와 같이 CSS를 추가한다.TodoHeader.vue에는 아래와 같은 CSS를 추가한다. 할 일..
