냥코딩쟝
vue.js기초- 백엔드와 연결
-js notes-/vue.js 2022. 9. 30. 21:35

Axios UserList: http://localhost:8080/test-user/listUserInfo: http://localhost:8080/test-user/info 백엔드의 RestAPI를 호출하기 위해서 axios를 설치 한다.Axios란? https://github.com/axios/axios 1) Axios 설치 > npm install axios vue-axios --save 2) axios 함수 파일 생성 다음과 같이 axios를 처리하는 함수를 만들어서 사용하도록 한다. /src/store/apiUtil.js import axios from 'axios' const api = axios.create() export default api 향후 위 파일에서 api.interceptor..

vue 기초-vue.js의 구성
-js notes-/vue.js 2022. 9. 30. 21:27

mixin http://localhost:8080/test-mixin mixin을 활용하면 전역변수나 전역메소드 같은 효과를 줄 수 있다.다음과 같은 mixin파일을 생성한다. (위치나 이름은 자유롭게 설정할 수 있다.) /src/components/mixin/commonMixin.js export default { data() { return { mixin: { test: 'mixinTest' } } }, methods: { mixinTest() { console.log('This is mixin method') } } } 다음과 같은 테스트 파일을 생성한다. /src/views/TestMixin.vue Mixin Test{{ mixin.test }} import 할때 @/components/mixin..

vue 기초 코드
-js notes-/vue.js 2022. 9. 30. 21:22

User //:to → 바뀔수 있는 Home replace prop를 설정하면 클릭할 때 router.push() 대신 router.replace()를 호출할 것이므로 내비게이션은 히스토리 레코드를 남기지 않을 것입니다. → 뒤로가기로 남기지 않는다 router link 가 모든것이 가능하다 router와 a태그와 다른점이 처음부터 다운받기 때문에 router를 쓰는것이 낫다 SPA의 특징//무엇을 모르는지 공부 MyTest vue파일 로딩 실행 -life cycle component - create-없는것을 쓸려고할때(마운트를 하기위한 조건) mounte-모든 요소가 준비가 될때 beforeCreated --> created --> beforeMount --> mounted (–> beforeUpdat..

CSS
-js notes-/front 기본 2022. 9. 30. 21:18

빛의 삼원색 rgb 레드 그린 블루 0~255 256개 byte 영 1 한글 2 rgb 1byte 색의 삼원색 CYMK HEX 16진수 16개의 숫자 #FFFFF 검정 자바스크립트가 자율성이 높아서 대신 쓸 수 있게 하는것 자바스크립트 어느정도 마스터하고 → 타입스크립트 node.js ts→ back end front - 자율적으로 할려면 type script x const user = {id=’’ name/=’’} CSS 7가지 단위 CSS의 7가지 단위 - rem, vh, vw, vmin, vmax, ex, ch SASS -css를 코딩처럼 변수선언을 가능하게 해줌 !important를 사용하면 해당 스타일을 우선적으로 적용하게 되어 있다. 각각의 산은 어떤 스타일을 따르고 있는가? 백두산 한라산 지..

article thumbnail
HTML 기초
-js notes-/front 기본 2022. 9. 30. 21:15

백엔드 개발자도 프론트에 대한 기초소양이 필요하다. 기본아키텍처로는 front end back-end asp jsp servlet php 모두 포함 SPA - 템플릿을 만들어 놓고 데이터만 바꿈 html 구조에서 바뀌는 부분만 rendering angular JS 학습비용이 크다. angular 2 사실상 아무 관계가 없다. React -학습 비용이 매우크다 코딩 양이 매우 많다. 일반적으로 알고 있는 자바스크립트 대로 동작 하지 않는다 vue.js -학습 비용이 적다 document 가 잘되어있다 html tag 요소(element): 실제 화면에 출력되는 텍스트 부분. 태그 사이에 있음 태그(tag): 모든 태그는 “시작태그” ~ "종료태그"로 구성됨. (예외 있음: hr, br 등) 속성(attri..