Front-end/Vue5 함수형 Vue 함수형 프로그래밍 로직처리를 수학적 함수의 계산으로 취급하고 상태와 가변 데이터를 멀리하는 프로그래밍 패러다임 함수의 실행이 프로그램 실행에 영향을 미치지 않음 데이터의 변경이 필요한 경우, 원본 데이터 구조를 변경하지 않고 그 데이터의 복사본을 만들어서 그 일부를 변경하고, 변경한 복사본을 사용해 작업을 진행 반복이 for문이 아닌 재귀를 통해 이루어짐 (deep copy) (filter, map, reduce...), 재귀적 코드 스타일은 무한 루프에 빠질 위험 함수형 프로그래밍에서는 함수가 1급 객체가 된다. 1급 객체의 특징은 다음과 같다. 변수나 데이터 구조안에 담을 수 있다. 파라미터로 전달 할 수 있다. 반환값(return value)으로 사용할 수 있다. 할당에 사용된 이름과 관계없이 고유.. 2022. 12. 22. Vue Router 만들기 (url에 페이지 연결하기) Vue 에서 url로 페이지 넘길 수 있도록 Router를 만들어 보겠습니다. 콘솔창을 엽니다. 자신의 vue 패키지 폴더 경로 밑에서 npm install vue-router --save 로 라우터를 깝니다. src 밑에 routes.js 파일을 하나 만듭니다. 그리고 component들을 임포트 한 다음 path를 각각 지정해 줍니다. 이제 main.js로 가서 라우터를 임포트 해줍니다.아까 npm으로 설치한 라우터와방금 위에서 만든 routes 파일을 임포트 해줍니다. 그리고 Vue.use(VueRouter); 코드로 라우터 사용 선언해줍니다. 그리고 Vue를 정의해 준 곳에 router:router를 추가해줍니다. App.vue에 router-view를 추가해줍니다. 그럼 url을 타고 페이지를 .. 2018. 12. 5. Computed와 Methods 차이 보통 computed는 data 속성 변화가 있을 때 자동 연산함.computed에서 사용하고 있는 data속성인 message 라는 프로퍼티가 변화가 있을 때만 다시 연산하고연산 값을 캐싱 해놓았다가 필요한 부분에 재사용함. methos는 캐싱이라는 개념이 없기 때문에 매번 재 렌더링 된다. 2018. 11. 30. Vue bootstrap 속성 커스터마이징 가져온 bootstrap을 커스터 마이징 하겠습니다. 먼저 atom을 설치합니다. https://atom.io/ 그다음 커멘드창에 가져온 부츠스트랩 폴더를 엽니다. 이창에서 atom . 명령어를 날리면 Atom 창이 바로 뜹니다. src > router > index.js 페이지에 들어가면 각 path 별로 어떤 화면을 가져오는지 확인할 수 있습니다. ↓ main dashboard 저는 http://localhost:9527/#/documentation/index path에 있는 documentation 페이지를 바꿔보겠습니다. 방금 index.js 페이지에서 documentation url 을 찾습니다.그럼 /views/documentation/index component를 띄우는 것을 알 수 있습니다.. 2018. 11. 23. 이전 1 2 다음
