Web12 [vuejs] http 기본 데이터 통신 spring boot의 controller와 http통신을 하여 데이터를 가져오기를 예제이다. axios를 이용하여 통신을 할 예정이다. vue 프로젝트를 생성한 소스 정리 및 기본적인 controller를 작성 vue 프로젝트를 생성하면 다음과 같은 구조로 되어있다. 1. App.vue에서 필요없는 내용은 제거 2. 기본적인 controller 작성 정말 간단하게 GetMapping을 통해 해당 도메인을 호출하면 문자열을 return 해주는 소스이다. 3. HelloWorld.vue에서 axios를 이용하요 http 통신 3.1 HelloWorld.vue에 필요없는 소스를 제거 후 기본적은 msg데이터를 출력하는 화면을 만든다. 3.2 axios를 설치 - npm install --save axios .. 2021. 7. 31. 이클립스 already in use 오류 / 톰캣 포트 충돌 해결방법 이클립스를 이용하여 프로젝트를 할때 아래와 같은 에러가 발생하는 경우의 해결방법을 알려드리고자 합니다. 이때 당황하지 마시고, 1. [명령 프롬프트]를 실행합니다. * window+r로 실행창을 켠후 cmd를 입력하면 빠르게 실행하실 수 있습니다. 2. netstat 명령어를 입력합니다. 이때 옵션은 a, n, o를 입력합니다. >netstat -ano * netstat는 전송 제어 프로토콜, 라우팅 테이블, 수많은 네트워크 인터페이스, 네트워크 프로토콜 통계를 위한 네트워크 연결을 보여주는 명령 줄 도구 (위키백과:ko.wikipedia.org/wiki/Netstat) * a : 모든 연결과 수신 대기 포트를 표시합니다. * n : 주소와 포트 번호를 숫자 형식으로 표시합니다. * o : 각 연결의 소.. 2021. 4. 4. [React]props, state로 컴포넌트 내부 속성 설정하기 리액트로 컴포넌트를 제작하다 보면 컴포넌트 내부의 속성을 부모 컴포넌트에서 지정해주고 속성 값 조작이 필요한 경우가 있습니다. 이렇게 속성 설정이 필요할 때 사용할 수 있는 것이 바로 props와 state입니다. props와 state는 내부의 속성, 쉽게 생각하면 내부 변수를 지정해 줄 때 사용하는 요소입니다. 두 요소의 차이는 props는 부모 컴포넌트에서 값을 지정할 때 사용하고 state는 컴포넌트 내부에서 값을 바뀔 수 있는 차이가 있습니다. 이해를 돕기위해 props와 state를 하나씩 실습을 해보겠습니다. props 먼저 아래의 코드를 보겠습니다. -Parent.js import React from 'react'; import Children from './Children'; const .. 2020. 12. 23. [React]리액트 기본 구조 / JSX란? 기본 구조 처음 리액트를 처음 접한다면 어떤 식으로 사용을 해야 되는지 감을 잡는 게 중요한 것 같습니다. 리액트의 기본 구조는 컴포넌트 구조를 가지고 있습니다. 컴포넌트 구조란 예를 들어 아래의 이미지처럼 UI를 개발한다고 할 때 '로고 이미지', '검색어 입력 상자', 오른쪽 상단의 '버튼' 등 필요한 컴포넌트들이 있을 것입니다. 이러한 컴포넌트들을 각각의 파일로 작성을 하고, 그 파일들을 import 시켜 재활용하여 사용할 수 있는 구조를 말합니다. 재활용한다는 말을 좀 더 자세히 말씀드리자면 위의 이미지에서도 첫 번째 이미지와 같이 '로고 이미지', '검색어 입력 상자'를 보실 수 있을 것입니다. 이때 새로운 코딩을 하는 것이 아닌, 첫 번째 이미지에서 사용하였던 컴포넌트를 다시 사용하여 만들 수.. 2020. 12. 19. [HTML+CSS] border에 그라데이션 넣기 border(테두리)에 그라데이션 효과 넣는 예제입니다. See the Pen border gradation by limqo (@limqo) on CodePen. 위의 코드에서 box1의 div는 border-image를 이용하여 gradation 넣은 것을 확인 할 수 있습니다. 하지만 box1에 border-radius가 적용되있지 않은 것 을 볼 수 있습니다. box2 처럼 설정을 하면 border-image에 border-radius 적용시킬 수 있습니다. 2020. 8. 7. 이전 1 2 3 다음 728x90 반응형
