그랜파 개발자의 프론트엔드 공부

컴퓨터 프로그램 개발자로 살아온 세월이 많이 흘러 이젠 은퇴를 앞두고 있습니다. 아직 머신비전 분야에서 현업 개발자로 근무하고 있지만, 정년이 지나 촉탁직으로 신분이 바뀌었으니, 은퇴 후를 생각하지 않을 수 없습니다.개발자로서 오래 살아오다 보니 은퇴를 해도 개발을 떠

백문이 불여일견. 백번 듣는 것보다 한번 보는 것이 낫다고 합니다.백견이 불여일타. 한때 유행하던 말로 백번 보는 것보다 한번 코딩해 보는 것이 낫다는 개발자들의 공부 방법에 대한 것으로 직접 코딩해 보지 않으면 안다고 할 수 없다는 뜻입니다.개발이란 것이 내 머릿속의

Vue로 PWA 개발 - 그랜파 개발자.개발자가 되기로 결심을 하고 프로그램 언어를 배우는 중 누군가에게 들은 말입니다.‘말이 되어야 프로그램이 된다.’이 말은 개발자로서 평생을 살아오면서 머리에 새긴 말들 중 하나입니다.무슨 말이냐구요?이런 뜻입니다.‘집에 가자.’말

Vue로 PWA 개발 - 그랜파 개발자.‘집에 가자.’프로그램을 말로 짜 봅시다. 현재의 나의 위치는 어디인가?집의 위치는 현재 나의 위치에서 어디로 얼마나 떨어져 있나?집에 가기 위해서는 어떤 경로를 거쳐야 하는가?아파트 로비에 도착하면 비밀번호는 무엇이고 어떻게 입

Vue로 PWA 개발 - 그랜파 개발자.인터넷을 검색을 통하여 이런 저런 예제를 찾아 직접 하나하나 코딩을 하면서 공부를 할 때는 모두가 이해가 되고 아는 것 같습니다. 그러나 얼마간의 시간이 흐르고 보지 않고 직접 코딩을 하려고 시도를 하면 막연합니다. 코딩의 실마리

Vue로 PWA 개발 - 그랜파 개발자.개발자가 되기 위해 코딩을 공부하면서 자신이 공부한 것을 모아두는 좋은 방법은 블로그 등 온라인에 저장해두면 좋습니다. 그러면 공부한 내용을 정리하여 저장하는 과정에서 나의 지식을 한번 다질 수 있고, 후에 내가 필요해서 다시 찾

Vue로 PWA 개발 - 그랜파 개발자. 개발을 위해서는 개발 환경을 가지고 있어야 합니다. 프로그램 개발의 분야는 세상의 모든 일을 프로그램 개발 분야로 생각할 수 있을 정도로 넓습니다. 또 개발 환경, 개발 언어들이 엄청나게 다양해서 배우는 입장에서는 무엇을 배우

Vue로 PWA 개발 - 그랜파 개발자. 요즘 인터넷을 검색하다 보니 웹 개발 관련 자료들이 엄청나게 많습니다. 그리고 혼자 공부하기에도 좋은 것 같습니다. 혼자 공부를 하고 공부한 결과를 웹을 통해 바로 서비스를 하는 것이 공부에 효과적이고, 또 웹에 서비스를 하게

Vue로 PWA 개발 - 그랜파 개발자. 혼자 공부를 하면서 웹 서비스까지 하기 위해 웹 서버 호스팅을 한다는 것은 무리가 있습니다. 서버 호스팅 자체에 벌써 부담감이 느껴집니다. 서버 호스팅, 서버 운영 또한 쉽지 않은 분야입니다. 비용도 생각하지 않을 수 없습니다.

Vue로 PWA 개발 - 그랜파 개발자.무엇을 공부할지 정해졌습니다. 프론트엔드를 공부하기로 한 것입니다.‘어떻게 공부하지?’공부를 위하여 튜토리얼을 찾아 이런 저런 사이트를 방문하고, 기초 문법을 배우기 위해 책을 사서 읽고 유튜브를 시청하는 등 그런 공부 방법은 내

Vue로 PWA 개발 - 그랜파 개발자. 좋아, 그럼 이놈(Chat GPT)에게 배워보자. 프론트엔드 공부를 시작합니다. 이런식입니다. PWA를 설명해줘. ChatGPT PWA(Progressive Web App)는 웹 애플리케이션을 네이티브 애플리케이션처럼 사용자에게 제공할 수 있도록 한 기술입니다. 기본적으로 웹 기반이지만, 오프라인 접근, 푸...

Vue로 PWA 개발 - 그랜파 개발자.ChatGPT에게 Vue를 물었습니다.대답의 원문 전체는 아닙니다. 다음과 같은 내용으로 답을 해 줍니다. Chat GPT는 각 질문 주제에 대해 기억하고 있기 때문에 질문하는 사람에 따라 다른 대답을 할 수도 있습니다.Vue.j

Vue로 PWA 개발 - 그랜파 개발자.Vue.js를 사용하여 간단한 할 일 목록 (To-Do List) 애플리케이션을 만들어 보겠습니다. 이 예제는 사용자가 할 일을 추가하고, 완료 표시를 하며, 목록에서 삭제할 수 있도록 구현합니다.먼저, Vue CLI를 사용하여

Vue로 PWA 개발 - 그랜파 개발자.ChatGPT가 시키는 대로 했습니다.그림 14-1npm install -g @vue/cli 그림 14-2vue create todo-appVue CLI v5.0.8? Please pick a preset: Manually sel

Vue로 PWA 개발 - 그랜파 개발자.App.vue 를 ChatGPT가 제공하는 코드로 수정하고 다시 실행해 봅시다. npm run serve로 로컬 서버를 시작한 후 브라우저에서 http://localhost:8080으로 이동하면 앱을 볼 수 있습니다.그림

다음은 Chat GPT에게 질문하고 받은 답의 원문입니다. Chat GPT는 각 질문 주제에 대해 기억하고 있기 때문에 질문하는 사람에 따라 다른 대답을 할 수도 있습니다. vuex에 대해 설명해줘 ChatGPT Vuex는 Vue.js 애플리케이션을 위한 상태

Vue로 PWA 개발 - 그랜파 개발자.개발이라고 표현을 한 이유는 이미 만들어진 예제이지만 우리가 직접 개발한다고 가정하고 프로그램적으로 생각을 해 봅시다.요구 사항은 다음과 같습니다.현재 카운트를 화면에 나타낼 것현재 카운트를 두배 하여 화면에 나타낼 것버튼을 누르

Vue로 PWA 개발 - 그랜파 개발자.ChatGPT에게 물었습니다.Vuetify는 Vue.js 애플리케이션에서 현대적이고 일관된 UI 디자인을 쉽게 구현할 수 있도록 돕는 Material Design 기반의 UI 라이브러리입니다. Google의 Material Des

Vue로 PWA 개발 - 그랜파 개발자.ChatGPT의 Vuetify 설명에서 보여준 예제 코드를 실행하여 봅시다.프로젝트를 만들고 예제 코드를 코딩한 후 실행합니다.vue create vuetify-appVue CLI v5.0.8? Please pick a prese