한화시스템 Beyond SW Camp/프론트엔드5 [Vue.js] ref, reactive, v-if, v-for ※ 이 글에서 다룬 기반기술, 프론트엔드, 백엔드, 데브옵스 등 풀스택 개발 지식은 모두 한화시스템 Beyond SW Camp 12기에서 배운 내용을 복습한 것입니다. 1. refref는 기본 타입의 값을 이용해 반응성을 가진 참조형 데이터를 생성할 때 사용ref의 단점은 직접 데이터를 이용하지 못하고 value 속성을 통해 접근해야 한다.import { ref } from 'vue';export default { setup() { const count = ref(0); // 기본 데이터 타입에 ref 사용 const increment = () => { count.value++; // 값을 변경할 때는 .value를 사용 }; return { count, .. 2024. 12. 26. [Vue.js] Vue-router ※ 이 글에서 다룬 기반기술, 프론트엔드, 백엔드, 데브옵스 등 풀스택 개발 지식은 모두 한화시스템 Beyond SW Camp 12기에서 배운 내용을 복습한 것입니다. Vue RouterSPA(Single Page Application)은 하나의 페이지 안에서 데스크톱 애플리케이션과 같은 사용자 경험을 제공해줄 수 있는 애플리케이션을 말한다. Vue Router는 URL 경로와 컴포넌트를 매핑한다. 사용자는 특정 경로로 이동하면 Vue Router가 해당 경로에 맞는 컴포넌트를 찾아 렌더링한다. Vue Router 기본 사용법npm install vue-router@4vue-router 설치 vue-router 라이브러리의 createRouter() 함수를 호출해 router 객체 생성하는 것이 중요하다.. 2024. 12. 23. [Vue.js] Vue.js 기본 설정 ※ 이 글에서 다룬 기반기술, 프론트엔드, 백엔드, 데브옵스 등 풀스택 개발 지식은 모두 한화시스템 Beyond SW Camp 12기에서 배운 내용을 복습한 것입니다. Vue.js : 프론트엔드 프레임워크Vue.js를 쓰는 이유Angular1 개발자들이 Angular2로 쉽게 전환을 못한 이유는 학습 곡선이 너무 가파르다. 개발 환경 설정에 필요한 패키지들이 지나치게 많고 TypeScript, Webpack, Gulp와 같은 번들링 툴이나 태스크 러너 등 알아야 할 기술이 너무 많다React도 ECMAScript6를 배워야하고 JavaScript, Webpack도 알아야 한다. Vue.js는 웹 퍼블리셔가 작성한 템플릿을 최대한 활용할 수 있으므로 이식성과 생산성이 높다. HTML코드만 확보하고 있으면 .. 2024. 12. 20. [JavaScript] 기본 문법 (DOM : Document Object Model, Class 속성 추가/삭제) ※ 이 글에서 다룬 기반기술, 프론트엔드, 백엔드, 데브옵스 등 풀스택 개발 지식은 모두 한화시스템 Beyond SW Camp 12기에서 배운 내용을 복습한 것입니다. DOM : Document Object Model1. DOM 요소 찾기document.getElementById("id명");document.getElementByClassName("class명");document.getElementByTagName("태그명");//예시let getTagById = document.getElementById("h1_2");let getTagByClassName = document.getElementsByClassName("color_red");let getTagByTagName = document.getE.. 2024. 12. 17. [JavaScript] 기본 문법 (변수와 상수, 데이터 타입과 연산자, 조건문과 반복문, 함수) ※ 이 글에서 다룬 기반기술, 프론트엔드, 백엔드, 데브옵스 등 풀스택 개발 지식은 모두 한화시스템 Beyond SW Camp 12기에서 배운 내용을 복습한 것입니다. 변수와 상수1. varvar x = 10;var x = 20;x = 30;console.log(x); //302. let// 변수 만드는 법// let 변수이름;// 변수에 무언가를 저장하는 법// 변수이름 = 무언가;let y = 10;y = 20;console.log(y); //203. const// const 선언 후 값을 변경할 수 없음const z = 30;// z = 40; // 오류 발생console.log(z); // 30데이터 타입과 연산자1. 데이터 타입 (기본 타입)// 숫자 (Number)let num = 42;c.. 2024. 12. 16. 이전 1 다음
