정보교육/프런트엔드
-
vue.js 프로젝트: 일정 관리가 포함된 홈페이지 만들기정보교육/프런트엔드 2024. 6. 23. 22:05
vue.js를 공부한 다음 인공지능 chatGPT 4o를 사용해서 만들어보았다. 역시 공부하기 전에는 기본 구조부터 프로그램의 돌아가는 원리를 잘 이해하지 못해 gpt를 사용해도 만들지 못했을 것이다. 공부한 후에는 구조와 원리를 파악한 후 수정할 부분을 파악할 수 있었고 익스플로어나 크롬에 있는 개발자 도구를 사용해 버그도 찾아낼 수 있었다. 우선 재사용 가능한 컴포넌트를 만드는데 집중하였고, 그 컴포넌트를 여기저기 쓸 수 있게 되었다. 스케쥴 등록, 수정, 삭제가능한 컴포넌트를 만들었고 그 다음 캘린더 컴포넌트를 붙이고 emit 명령어를 사용하여 연결하였다. 이 과정에서 개발자 도구를 사용하여 에러를 찾아서 수정하였다. 특별히 데이터베이스를 사용하지 않고 로컬 저장소를 사용하여 아주 간단한 로직을 구..
-
코딩 자율학습단(Vue.js 프런트엔드 개발 입문) 5일차정보교육/프런트엔드 2024. 6. 22. 16:41
4장 실습: 계산기 만들기4.1 실습 내용 소개 사용자 인터페이스에 표시된 숫자를 클릭하면 간단한 사칙연산을 하는 계신기 어플리케이션4.2 뷰 애플리케이션의 기본 구조 설정하기4.3 계산기의 UI 구성하기html 코드의 body 부분은 부분으로css 코드는 부분으로4.4 데이터 바인딩하고 이벤트 연결하기4가지 데이터 정의output(출력칸에 표시되어 사용자에게 노출되는 값),prev(이전에 입력된 값 또는 연산 결과),cur(현재 입력된 값),operator(연산자)export default { data() { return { output: null, // 출력칸에 표시되어 사용자에게 노출되는 값 prev: null, // 이전에 입력된 값 또는 연산 결과 ..
-
코딩 자율학습단(Vue.js 프런트엔드 개발 입문) 4일차정보교육/프런트엔드 2024. 6. 20. 14:54
3장 뷰 기본 문법 익히기3.6 계산된 속성과 감시자 속성계산된 속성(computed)은 컴포넌트에서 자주 사용하는 데이터를 캐시해 애플리케이션 성능을 향상시킨다. {{ firstName }} {{ lastName }} {{ fullName }} {{ fullName }} 감시된 속성(watch)은 데이터의 변경을 감시하고, 변경이 감지될 때마다 특정 동작을 수행할 수 있게 한다.3.7 스타일 다루기style 속성, v-bind 디렉티브, 내부 스타일, 외부 스타일 style v-bind Style internal h2 Style external h3 Style
-
코딩 자율학습단(Vue.js 프런트엔드 개발 입문) 3일차정보교육/프런트엔드 2024. 6. 19. 22:24
3장 뷰 기본 문법 익히기3.4 이벤트 다루기v-on 디렉티브와 methods 옵션 속성으로 이벤트 연결하기 클릭 onKeyupHandler($event)" />v-on: 대신에 @를 사용하여 v-on:click을 @click으로 간단하게 작성할 수 있다.반응성 시스템을 사용해 데이터 변화를 감지하고 업데이트하는 기능을 구현할 수 있다. {{ number }} 증가data()를 통해서 number 변수를 0으로 정의하고, methods에 증가 함수를 만들어 v-on:click 으로 이벤트를 연결.3.5 폼 다루기v-model 디렉티브로 폼 요소 다루기한 줄 입력 요소의 값 가져오기, 여러 줄 입력 요소의 값 가져오기, 체크박스, 라디오 버튼, 콤보박스 요소 아이디: 비밀번호: ..
-
코딩 자율학습단(Vue.js 프런트엔드 개발 입문) 2일차정보교육/프런트엔드 2024. 6. 18. 20:52
3장 뷰 기본 문법 익히기 3.1 뷰 애플리케이션 기본 구조package.json, index.html, main.js, App.vue 파일에 대한 기본 구조 3.2 뷰 애플리케이션 인스턴스인스턴스는 클래스의 실체화된 객체를 의미하고, 인스턴스를 생성하는 코드는 src/main.js 파일에 작성한다.인스턴스 구성 요소는 data, methods, render와 같은 속성들이다.구성 요소의 코드가 길어지면 가독성이 떨어지고 코드의 유지보수가 어려워 SFC(Single File Component), 일명 *.vue 파일을 따로 작성하여 문제를 해결SFC의 구조 데이터 보간 사용하기{{ 데이터 속성 }}> {{ name }} {{ age }}디렉티브 사용하기(v-)v-htmlv-textv-prev-bind..