전체 글(18)
-
[VUE, Softphone] VUE, VUEX 구조 정리
Vuex 구조 뷰 컴포넌트 -> 비동기 로직 -> 동기 로직 -> 상태 시작점은 Vue Components이다. 컴포넌트에서 비동기 로직(Method를 선언해서 API 콜 하는 부분 등)인 Actions를 콜하고, Actions는 비동기 로직만 처리할 뿐 State(Data)를 직접 변경하진 않는다. Actions가 동기 로직인 Mutations를 호출해서 State(Data)를 변경한다. Mutations에서만 State(Data)를 변경할 수 있다. 참고자료 자바스크립트 비동기 처리와 콜백 함수 자바스크립트 Promise 쉽게 이해하기 /////////////////////////////////////////////////////////////////////////////////////////////..
2023.02.13 -
[VUE, JS] Vue.js에서 Vuex와 함께 동적 컴포넌트(다이나믹 컴포넌트) 사용하기
____ 기존소스 ____ Line 622 import 문 Softphone 이라는 변수에 components/Softphone.vue 를 선언 Line 628 components 문 Softphone 이라는 변수는 componenets 로 사용할것을 선언 Line 634 level: 1, 레벨값을 Softphone 부모 vue 이며 자식 컴포넌트로 softphone 을 불러올 수 있도록 선언해준다. 페이지가 열리면서 동시에 실행되는 components 들이 데이터를 공유받을 수 있도록 data(){return} 이 있다. 부모 vue 이며 자식 컴포넌트로 softphone 을 불러온다. 자식 vue 로 부모 MainLayout 에서 불러와지며, 추가로 Lint 17 에서 부모에게 받은 level 값에 ..
2023.02.13 -
[VUE, JS, ES6] Arrow Function 화살표 함수 사용법
화살표 함수(Arrow Function)는 무엇인가? 화살표 함수(Arrow Function)가 필요한 이유는? 화살표 함수(Arrow Function)를 어떻게 사용하는가? 화살표 함수(Arrow Function)의 사용 예시! 1. 화살표 함수(Arrow Function)는 무엇인가? 화살표 함수 표현(arrow function expression)은 전통적인 함수표현(function)의 간편한 대안입니다. 하지만, 화살표 함수는 몇 가지 제한점이 있고 모든 상황에 사용할 수는 없습니다. this나 super에 대한 바인딩이 없고, methods 로 사용될 수 없습니다. new.target키워드가 없습니다. 일반적으로 스코프를 지정할 때 사용하는 call, apply, bind methods를 이용할..
2023.02.10 -
vue JS - 프로젝트 생성후 브라우저에 띄워보자.
프로젝트 생성 방법이 필요하시면 아래 링크 먼저 따라해주세요. https://vlog-my-story.tistory.com/20 vsCode vue.js - 시작 & 준비 & 꿀팁 시작하기 전, 먼저 알고 가면 엄청 좋은 정보 읽고 가요 vsCode는 Visual Studio Code - Code Editing. Redefined 로 마이크로소프트에서 배포한 다양한 운영체제에서 코딩을 하기 위해 만든 코딩 프로그램이에 vlog-my-story.tistory.com 터미널을 열고 ( * 웬만하면 터미널 단축키 외워 두세요.) Ctrl C 입력해서 초기화 시켜주세요. 그다음 터미널에서 프로젝트경로로 이동 해야해요. cd ex001 입력 하세요. 먼저 하시고 그다음 sudo npm run serve 입력하시고..
2021.11.25 -
vsCode vue.js - 시작 & 준비 & 꿀팁
시작하기 전, 먼저 알고 가면 엄청 좋은 정보 읽고 가요 vsCode는 Visual Studio Code - Code Editing. Redefined 로 마이크로소프트에서 배포한 다양한 운영체제에서 코딩을 하기 위해 만든 코딩 프로그램이에요. 참고로 'vsCode'는 IDE(통합 개발 환경(Integrated Development Environment, IDE)) 가 아니므로 별도의 개발환경을 구축해서 본인이 원하는 프로젝트 환경 및 코딩 환경을 구축해줘야 사용 가능해요. vue.js 는 Vue는 수많은 프로젝트에서 AngularJS를 사용하여 구글을 위해 작업하던 Evan You에 의해 개발되었어요. 자바스크립트가 주로 사용됩니다. 1________________ vsCode를 설치해줍시다. 버전은 ..
2021.11.24 -
1-3. 스프링 웹프로젝트 - DB(DataBase)를 연동해주자 (1/2)
_____________________ 따라하더라도 나만의 것을 만드는 것 1-3 DB(DataBase)를 연동해주자 DB 셋팅 및 접속 테스트 Part.1 _____________________ DB연결에 프로젝트의 환경을 살짝 수정 해줍시다~ 웹 시스템은 가장 먼저 web.xml을 참조하여 스프링의 설정과 관련된 파일들의 위치를 파악하고 그 파일들을 참조 합니다. 현재 web.xml을 보면 src~~~~~spring 폴더에 root-context.xml servlet-context.xml 등 두개의 파일이 있습니다. 실무에서는 규모가 큰 프로젝트를 할 수도 있기 때문에 관리하기 쉽도록 위치를 바꿔줍니다. 1. 위에 src/main/resources 에 「 servlet-context.xml 」 을 옮..
2020.08.09 -
자료정리_macOS_STS_Projext Facets_java_error
자료정리_macOS_STS_Projext Facets_java_error _____________________ 오류? 고치면 되, 원래 완벽한 것은 없어. _____________________ Java compiler level does not match the version of the installed Java project facet. 이런 오류가 났다... 더블 클릭을 해도 안되고 영어를 몰라서 스마트하게 도구(번역기)를 사용했고 머리 수가 많으면 해결 못할 일은 없는법. 구글링을 이용했다. 프로젝트를 우클릭해서 Properties 에 들어간다 Projext Facets 를 검색하고 java 버전을 보자 당신이 프로젝트에 사용하고 있는 java 버전이 맞는가? 아. 닐. 껄. ?. 자신이 프로..
2020.08.06 -
1-2. 스프링 웹프로젝트 - 처음 느끼는 뿌듯함 Hello world
_____________________ 따라하더라도 나만의 것을 만드는 것 1-2 Hello world _____________________ 패키지명 규칙을 준수해서 만든다! (아래페이지 참고) vlog-my-story.tistory.com/16 Finish 를 누르고 완료하면 저렇게 만들어진다. | | | | | | | | | | | | | | | | | | | | | | | __________________________________________ server 를 연결시켜보자 서버를 연결 시키기 위해 해당 부분을 클릭한다 add 를 클릭해서 다운로드 해둔 톰캣을 찾자 그다음 next를 할 수 있다. 톰캣 위치를 찾아 연결 해준다. ( 나는 mac os 라서 특별한방법? 맥만의 방법을 이요했다) v..
2020.08.05 -
자료정리_macOS_spring_패키지명 규칙
패키지 - 애플리케이션을 구분하는 고유한 값 - 여러분이 만든 앱이 디바이스에 설치되었을 때 다른 앱들과 구분하는 역할을 하므로 유일무이해야 합니다. 패키지 명명 방법 명명방법 예 com.회사이름.프로그램이름 com.devmg.app com.회사이름.플랫폼.프로그램이름 com.devmg.android.app com.devmg.ios.app kr.co.회사이름.프로그램이름 kr.co.devmg.app kr.co.회사이름.플랫폼.프로그램이름 kr.co.devmg.android.app 명명 규칙 - 회사 이름이나 혹은 도메인(웹사이트주소)등은 유니크하기 때문에 사이트명으로 많이 구분합니다. - 웹사이트 주소를 반대로 기재한 모양으로 패키지 이름을 부여합니다. - 명칭 소문자 사용 - 패키지명에 대문자는 사용하..
2020.08.05 -
1-1. 스프링 웹프로젝트를 시작합시다.
_____________________ 진짜 시작이다 _____________________ 웹개발자가 되고싶었고 우선 스프링 프레임워크 mvc 패턴을 익혀보기위해 공부겸사 해보기 위함입니다. 스프링3 으로 공부하고 스프링부트도 공부하고싶고 앵귤러JS 도 해보고싶습니다 스프링3 웹프로젝트 시작 준비하기 참고사이트 스프링 웹페이지만들기 https://freehoon.tistory.com/category/개발/Spring%20%20블로그%20만들기?page=3 톰캣 설치 whitepaek.tistory.com/12 또는 설치방법 준비물 맥os homebrew tomcat 9 (설치방법) maven
2020.08.01 -
자료정리_macOS_terminal(터미널)_tomcat 9 설치
_____________________ 자료정리_macOS_terminal(터미널)_tomcat 9 설치 _____________________ whitepaek.tistory.com/12 macOS Apache Tomcat 설치, 아파치 톰캣 실행 방법 macOS 서버 구동을 위한 Apache Tomcat 설치 및 실행 방법! 저는 Java 언어를 이용하여 Web 개발 공부를 하고 있습니다. 웹 개발을 하기 위한 기본적인 준비 중 하나인 아파치 톰캣을 설치하고 서버 구동� whitepaek.tistory.com 위 자료를 참고했습니다. 기본적으로 homebrew 설치가 되어있어야 함! 터미널을 이용한 톰캣 설치 「 pwd 」 명령어로 기본 디렉토리 『 /users/사용자이름 』 인지 확인 「 brew ..
2020.08.01 -
자료정리_macOS_terminal(터미널)_명령어
cd 기본디렉토리 이동 cd /폴더명 -> 폴더명 폴더로 이동 -------------------------------------------------------- pwd 위치 기본위치 => /Users/사용자이름 brew update -> 첫 디렉토리 위치에서 brew 를 업데이트 하라는 명령어 brew search tomcat -> brew 에서 search 검색한다 tomcat 을 brew install tomcat -> brew 에서 install 한다 tomcat 최신버전 을 (또는 brew install tomcat@8 이렇게하면 tomacat 버전 8 을 설치 하겠다는 의미) brew list -> brew 로 설치한 리스트? 목록이 뜬다
2020.08.01