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

Vue로 PWA 개발 - 그랜파 개발자.Chat GPT에게 물었습니다.vue의 예제 프로그램 하나 만들어줘.ChatGPTVue.js를 사용하여 간단한 할 일 목록 (To-Do List) 애플리케이션을 만들어 보겠습니다. 이 예제는 사용자가 할 일을 추가하고, 완료 표시를 하며, 목록에서 삭제할 수 있도록 구현합니다.1. 프로젝트 생성 및 기본 설정먼저, Vue CLI를 사용하여 새로운 Vue 프로젝트를 생성합니다.npm install -g @vue/clivue create todo-appcd todo-appnpm run serve2. App.vue 파일 수정App.vue 파일을 열고 아래와 같이 코드를 작성하여 기본적인 UI와 기능을 구현합니다. To-Do List ..

Vue로 PWA 개발 - 그랜파 개발자. ChatGPT에게 Vue를 물었습니다.'Vue에 대해 설명해줘'대답의 원문 전체는 아닙니다.다음과 같은 내용으로 답을 해 줍니다.Chat GPT는 각 질문 주제에 대해 기억하고 있기 때문에 질문하는 사람에 따라 다른 대답을 할 수도 있습니다.Chat GPT1. Vue.jsVue.js는 사용자 인터페이스를 만들기 위해 설계된 진보적인 자바스크립트 프레임워크입니다. Vue의 주요 목표는 웹 애플리케이션의 UI와 관련된 작업을 쉽게 구현할 수 있도록 돕는 것입니다. 반응형 데이터 바인딩과 컴포넌트 기반 아키텍처를 통해 웹 애플리케이션 개발을 효율적으로 할 수 있게 해줍니다.Vue.js는 특히 SPA(Single Page Application)를 만드는 데 매우 적합하며..

Vue로 PWA 개발 - 그랜파 개발자. 좋아, 그럼 이놈(Chat GPT)에게 배워보자. 프론트엔드 공부를 시작합니다.이런식입니다.PWA를 설명해줘.Chat GPT의 대답입니다. PWA(Progressive Web App)는 웹 애플리케이션을 네이티브 애플리케이션처럼 사용자에게 제공할 수 있도록 한 기술입니다. 기본적으로 웹 기반이지만, 오프라인 접근, 푸시 알림, 홈 화면에 추가 같은 기능을 통해 네이티브 앱의 사용자 경험을 어느 정도 재현합니다. PWA의 핵심 특징은 다음과 같습니다:반응형 디자인: 다양한 화면 크기와 디바이스에 최적화된 사용자 경험을 제공합니다. 데스크톱, 태블릿, 스마트폰 등 다양한 디바이스에서 동일한 UI/UX를 유지합니다.오프라인 지원: 서비스 워커(Service Worker..

Vue로 PWA 개발 - 그랜파 개발자. 무엇을 공부할지 정해졌습니다. 프론트엔드를 공부하기로 한 것입니다. ‘어떻게 공부하지?’ 공부를 위하여 튜토리얼을 찾아 이런 저런 사이트를 방문하고, 기초 문법을 배우기 위해 책을 사서 읽고 유튜브를 시청하는 등 그런 공부 방법은 내키지 않습니다. 사실 난 ‘그랜파 개발자’입니다. 생성형 AI가 코딩을 잘해서 장래에 프로그래머란 직업이 없어질 것이라는 풍문이 인터넷을 떠돌고 있습니다.Chat GPT에게 머신 비전에서 필요한 이미지 프로세싱 관련 간단한 클래스 하나 만들어 달라고 했습니다. Chat GPT가 짜준 코드를 보고 아주 감탄을 했습니다. 코드의 품질이 보통이 아닙니다. 조금만 손보면 실무에 바로 적용할 수 있을 것 같습니다. 직접 Chat GPT에 접속하..

Vue로 PWA 개발 - 그랜파 개발자.  혼자 공부를 하면서 웹 서비스까지 하기 위해 웹 서버 호스팅을 한다는 것은 무리가 있습니다. 서버 호스팅 자체에 벌써 부담감이 느껴집니다. 서버 호스팅, 서버 운영 또한 쉽지 않은 분야입니다. 비용도 생각하지 않을 수 없습니다.    그럼에도 웹 서비스를 위해서는 웹 서버가 있어야 한다고 생각했습니다.   무료로 사용할 수 있는 웹 서버에 대해 검색을 하다가 firebase를 이용하면 서버가 없이 웹 서비스를 할 수 있다는 것을 알게 되었습니다. 웹앱인데 모바일앱처럼 사용할 수 있다는 PWA도 알게 되었습니다.    과거 어느 때 웹개발과 안드로이드 모바일앱도 개발한 경험이 있어서 웹앱인데 모바일앱처럼 설치하여 사용할 수 있다는 것이 매력적으로 다가와 PWA를 ..

Vue로 PWA 개발 - 그랜파 개발자. 요즘 인터넷을 검색하다 보니 웹 개발 관련 자료들이 엄청나게 많습니다. 그리고 혼자 공부하기에도 좋은 것 같습니다. 혼자 공부를 하고 공부한 결과를 웹을 통해 바로 서비스를 하는 것이 공부에 효과적이고, 또 웹에 서비스를 하게 되면 다른 사람들이 쉽게 볼 수 있고 경우에 따라서 여러 도움을 받을 수도 있습니다. 내가 공부한 것을 웹에 공개를 했으므로 누구나 그 내용을 볼 수 있기 때문입니다. 내가 개발한 것은 웹에 서비스하면서 테스트 해야 내가 개발한 것들을 이해할 수 있습니다. 사실 공부하면서 이러 저러한 예제를 무작정 따라 코딩하다보면 뭐가 뭔지 모르면서 코딩할 경우도 많습니다. 그래서 실제 웹에서 서비스되는 모습을 보는 것이 중요한데, 이를 위해서 웹 서버를..

Vue로 PWA 개발 - 그랜파 개발자. 개발을 위해서는 개발 환경을 가지고 있어야 합니다. 프로그램 개발의 분야는 세상의 모든 일을 프로그램 개발 분야로 생각할 수 있을 정도로 넓습니다. 또 개발 환경, 개발 언어들이 엄청나게 다양해서 배우는 입장에서는 무엇을 배우는 것이 좋을지 선택이 너무 어렵습니다. 지금 내가 현업으로 하고 있는 머신 비전은 개발 환경도 단순하지 않고, 혼자 공부하기에는 주변 기기들이 너무 많이 필요해서 적당하지 않습니다. 그런데 개발이라는 것이 일종의 도구라서 어느 한 분야에서 개발이 능숙해지면 개발 환경을 바꾸거나 다른 개발 분야로 이동한다고 해도 새로운 개발 환경에 적응하고 새로운 개발 분야의 도메인 지식을 어느 정도 파악하고 나면 바로 개발 능력을 발휘할 수 있습니다. 개발..

Vue로 PWA 개발 - 그랜파 개발자. 개발자가 되기 위해 코딩을 공부하면서 자신이 공부한 것을 모아두는 좋은 방법은 블로그 등 온라인에 저장해두면 좋습니다. 그러면 공부한 내용을 정리하여 저장하는 과정에서 나의 지식을 한번 다질 수 있고, 후에 내가 필요해서 다시 찾을 때 편리합니다. 블로그를 한다면 조회수를 신경쓰지 않을 수 없습니다. 그러나 처음 공부하는 입장에서 조회수를 신경 쓰는 것은 우물가에서 숭늉을 찾는 격입니다. 다만 자신이 공부한 내용이 축적되고 한번씩 기록한 내용을 내 스스로 보면서 내 공부의 내용을 확인하는 용도로 사용하면 좋겠지요. 그리고 눈에 성과가 보여야 열정도 계속 유지하는데 도움이 됩니다. 이것은 그랜파 개발자의 생각이고, 이제 공부하면서 실천하려 합니다. ^^ Vue 프로..

Vue로 PWA 개발 - 그랜파 개발자.인터넷을 검색을 통하여 이런 저런 예제를 찾아 직접 하나하나 코딩을 하면서 공부를 할 때는 모두가 이해가 되고 아는 것 같습니다. 그러나 얼마간의 시간이 흐르고 보지 않고 직접 코딩을 하려고 시도를 하면 막연합니다. 코딩의 실마리가 잘 풀리지 않습니다. 이때 예전에 공부한 내용을 찾게 됩니다. 이렇게 찾아서 내가 의도한 코딩을 하게 된다면 이때는 안다고 할 수 있습니다.공부한 것을 모아 두는 것이 필요한 이유입니다. 공부를 하면서 공부한 내용을 이해했는지 알아 볼 수 있는 가장 좋은 방법은 다른 사람에 설명을 하는 것입니다. 설명을 잘 하면 나는 그것을 이해한 것입니다. 막상 설명을 하려니 생각이 꼬이면 나는 아직 그것을 이해 하지 못한 것입니다. 이해를 하지 못하..

Vue로 PWA 개발 - 그랜파 개발자. ‘집에 가자.’ 앱을 말로 짜 봅시다.  현재의 나의 위치는 어디인가? 집의 위치는 현재 나의 위치에서 어디로 얼마나 떨어져 있나? 집에 가기 위해서는 어떤 경로를 거쳐야 하는가? 아파트 로비에 도착하면 비밀번호는 무엇이고 어떻게 입력을 해야 하는가? 엘리베이터는 어떻게 타고 몇층에 내려야 하는가? 집의 호수는 어떻게 되는가? 문을 열기 위해서는 어떻게 해야 하는가? 위의 과정을 프로그램 언어로 코딩을 해야 합니다. 이런 것을 프로그램적인 사고라 하던가요?  그러므로 개발자는 프로그램을 코딩하기 전에 전체 과정을 말로 짜 봐야 합니다. Vue 프로젝트 Beta Test : [mylog, 일상의 기록](https://my-project-bd617.web.app/