AI 활용해서 코딩하는 방법 ChatGPT Copilot

안녕하세요 요즘 인공지능을 활용해서 코딩하시는 분들이 많은 것 같습니다. 저는 Chat GPT에게 물어보면서 도움 되는 정보를 많이 얻어 갑니다. AI 이전 개발하는 방법 AI가 나오기 전에는 "구글이 선생님이다." "구글한테서 배웠다" 이런 이야기를 많이 했었습니다. 모르는 것이 있을 때, 구글에서 검색을 해서 많이 찾았습니다. 검색을 통해서 내가 필요한 자료를 찾고 레퍼런스를 빠르게 읽는 것이 능력이었습니다. 그래서 개발할때, 공식 문서나, 유용한 자료들은 영어로 되어 있는 경우가 많았습니다. 영어를 읽을 수 있는 능력도 개발에서 필수였습니다. 요즘은 구글 번역이 워낙 잘되어있어서 영어를 몰라도 크게 어려움이 없습니다. AI 이전 개발할때 프로세스 모르는 것이 생긴다 ➡️구글 검색을 한다 ➡️ 자료를..

• format_list_bulleted Develop/etc
• · 2023. 5. 17.
• textsms

Vue 부모➡️자식 / 자식➡️부모 데이터 전달하기🚀

Vue에서 부모에서 자식으로 데이터 전달, 반대로 자식에서 부모로 데이터 전달이 가능합니다. 부모에서 자식으로 데이터 전달은 Props를 이용해서 전달하고, 자식에서 부모 데이터 전달은 $emit 이벤트를 이용하여 데이터를 전달합니다. 간단한 예시로 알아보겠습니다. 아래 글은 Options API 방식 입니다. Composition API 방식은 다음 글을 참조 바랍니다. Vue3 Props와 Emit 이벤트 이용해서 부모에서 자식 데이터 주고 받기Composition API Vue는 부모 자식 컴포넌트 간의 데이터를 서로 전달할 수 있습니다. 양방향 데이터 바인딩이 가능한 장점이 있습니다. 부모에서 자식으로는 Props 옵션을 이용해서 전달하고, 자식에서 부모는 Emit powerku.tistory.c..

• format_list_bulleted Develop/Vue
• · 2023. 5. 16.
• textsms

Vue 동적으로 Class, Style 추가하기

Vue에서 동적으로 스타일과 Class를 추가하면 편리하게 사용할 수 있습니다. 1. Class 추가하기 v-bind:class 또는 :class를 이용해서 추가합니다. active 클래스를 isActive 데이터가 true이면 추가하게 됩니다. Hello, Vue! 2. 배열로 Class 추가하기 2개 이상의 클래스를 동적으로 추가할 때, 배열을 사용합니다. isActive, isHighlighted 값이 true 이면 각각 active, highlight 클래스를 추가합니다. Hello, Vue! 3. 조건에 따라서 Class 추가하기 삼항연산자를 이용해서 클래스를 추가할 수 있습니다. 4. 스타일 추가하기 v-bind:style 또는 :style를 이용해서 스타일을 추가할 수 있습니다. 스타일을 동..

• format_list_bulleted Develop/Vue
• · 2023. 5. 15.
• textsms

애자일 데일리 스크럼이란? 하는 방법 장단점

애자일(Agile) 방법론 중의 하나인 데일리 스크럼이 있습니다. 애자일(Agile) 은 긴민한 민첩함이란 뜻입니다. 애자일 방법론은 개발 과정에서 변화에 빠르게 대응하고 요구사항에 대하여 유연하게 반응하기 위해서 추구하는 방법론입니다. 그중 데일리 스크럼에 대해서 설명드리겠습니다. 데일리 스크럼이란? 팀 구성원들이 매일 회의를 통해 프로젝트 진행 현황을 공유하고 어려움을 이야기합니다. 정해진 시간에 회의를 진행하며, 약 15분 정도 진행합니다. 데일리 스크럼 하는 방법? 1. 참석인원 정하기 프로젝트에 직접 참여하는 인원이 참가해야 합니다. 기획, 개발자 등 프로젝트에 필요한 인원이 참석하고 필요에 따라서 프로젝트 리더 등 관리자도 참석이 필요합니다. 2. 매일 정해진 시간, 장소 정하기 많은 팀원들이..

• format_list_bulleted Develop/etc
• · 2023. 5. 14.
• textsms

Vue Computed vs Watch 차이점 정리

Vue에는 Computed, Watch, Mehtods 속성을 언제 사용하면 좋을지 정리입니다. 헷갈릴 수도 있지만, 언제 사용하면 좋을지 알아두시면 유용합니다. 1. Computed 오직 데이터 바인딩에서만 사용 데이터가 변경될때 실행 다른 데이터 값에 의존하는 데이터에 사용 Vue Computed란? 사용 해야 하는 이유 Vue에서 동적 값을 출력하는 핵심 기능인 computed 가 있습니다. computed를 이용하면 좀 더 간편하게 데이터를 출력시킬 수 있고, 성능을 향상할 수 있습니다. Computed는 언제 사용해야 하는가? {{ price + powerku.tistory.com 2. Watch 템플릿에 직접 사용 X 데이터 변경이 일어나고 부수적인 Side Effect 발생이 필요할때 사용(..

• format_list_bulleted Develop/Vue
• · 2023. 5. 12.
• textsms

Vue Watch 속성 사용 언제 사용하는 것이 좋을까?

Vue에서 감시자(Watch) 속성이 있습니다. Vue watch 란? watch 속성은 데이터를 감시하고 있고, 데이터가 변경이 될 때, 정의된 함수를 실행합니다. watch 사용방법 data의 정의한 message를 watch 속성 안에 넣고 함수를 작성합니다. message 데이터가 변경이 되면 정의한 함수가 실행됩니다. Composition API const message = ref('Hello, Vue!'); watch(message, function(newValue, oldValue) { console.log('message 변경됨:', newVal, oldVal); }); Options API new Vue({ data: { message: 'Hello, Vue!' }, watch: { me..

• format_list_bulleted Develop/Vue
• · 2023. 5. 10.
• textsms

Vue Computed란? 사용 해야 하는 이유

Vue에서 동적 값을 출력하는 핵심 기능인 computed 가 있습니다. computed를 이용하면 좀 더 간편하게 데이터를 출력시킬 수 있고, 성능을 향상할 수 있습니다. Computed는 언제 사용해야 하는가? {{ price + '원' }} 위와 같이 price 값 뒤에 원이라는 단위를 붙여야 된다면 template에서 넣어 줄 수 있습니다. 하지만 이렇게 하게 된다면, 문제점이 있습니다. 복잡한 연산의 경우 알아보기 어렵습니다. 매번 컴포넌트가 렌더링 될 때마다 실행됩니다. computed 기능을 사용하여 연산하게 되면 해당 연산이 따로 분리되기 때문에 유지보수에 좋고, 알아보기 쉽습니다. price라는 값의 의존성을 가지게 되며 price 값이 변경될 때만 연산을 진행합니다. price 값이 변..

• format_list_bulleted Develop/Vue
• · 2023. 5. 8.
• textsms

기술 블로그 우클릭 방지 하지 말아요😡

많은 개발자들이 개인 블로그를 운영하고 있고, 네이버 카카오 유명한 회사들도 기술 블로그를 통하여 기술과 정보를 공유하고 있습니다. 덕분에 개발에 관련된 모든 정보는 구글과 인터넷 내에 다 있습니다. 검색만 잘하고, 남이 만들어 놓은 것만 잘 가져다가 사용해도 거의 모든 것을 만들 수 있습니다. 개발자라면 Ctrl + C / Ctrl + V 없이는 개발 못한다는 사실을 잘 알고 있을 겁니다. 하지만, 일부 기술 블로그는 우클릭 방지를 적용해놓은 사이트들도 있습니다. 자신의 코드를 복사해서 가져가는게 싫거나, 공부는 직접 타이핑을 해야 공부가 된다는 이유로 복사/붙어 넣기를 못하게 우클릭 방지를 해놨다고 합니다. 기술 블로그를 하면 나의 지식과 경험을 남에게 공유 하기 위해서 하는 건데 우클릭 방지를 풀어..

• format_list_bulleted 일상/블로그
• · 2023. 5. 4.
• textsms

수익형 블로그로 기술 블로그는 하지 마세요😂🤣

기술 블로그는 수익이 안나는 주제 중에 하나입니다. 물론 포스팅 수가 많고 양 질의 글이 많은 블로그는 많은 사람들이 방문하고 수익도 높습니다. 하지만 다른 주제에 비하면 수익이 안 납니다. 부동산 카테고리 - $10,002 인터넷 통신 카테고리 - $6,738 수익이 안나는 이유 1. 프로그래밍은 근무시간, 수업시간에 합니다. 구글 애드센스는 광고 클릭이 있어야 수익이 발생하는데 기술 블로그를 방문하는 사람들은 근무시간이나, 수업시간에 검색을 해서 들어오게 됩니다. 관심 있는 광고가 생겨도 근무 중, 수업 중이라서 클릭을 할 수가 없습니다. 심지어 광고를 보고 잘 모르는 직장 상사는 딴짓을 하고 있는 줄 아는 사람도 있습니다. 그래서 애드블록이나 광고 차단 프로그램을 사용하는 개발자들이 많습니다. 2...

• format_list_bulleted 일상/블로그
• · 2023. 5. 3.
• textsms

Vue 양방향 바인딩 v-model

Vue에서는 양방향 바인딩을 v-model를 이용하여 간단하고 쉽게 할 수 있는 방법이 있습니다. 양방향 바인딩이란? 입력요소의 이벤트를 수신하는 동시에 값을 보내는 방식입니다. 동시에 데이터 통신이 일어나기 때문에 양방향 바인딩이라고 합니다 v-model 이란? Vue의 v-bind 속성과 v-on 속성을 이용하여 양방향 바인딩을 할 수 있는 유용한 방법입니다. v-on 이벤트를 이용하여 데이터에 값을 넣는다. v-bind를 이용하여 속성에 데이터를 넣어준다. Vue.component("App", { data() { return { name: "" }; }, template: ` 이름: {{ name }} `, methods: { setInput(event) { this.name = event.targ..

• format_list_bulleted Develop/Vue
• · 2023. 5. 2.
• textsms