본문 바로가기
반응형

JavaScript33

[구축] vue & spring boot 연동 vue 프로젝트를 서버 프로젝트와 연동하기 위한 작업 내용을 정리해보았다.window OS, intelliJ IDE로 작업되었다. 연동이라는 단어로 표현했다싶이 vue와 spring, 각각의 프로젝트를 연결하는 작업에 대한 게시물이다.01. 개요02. 작업   01) spring boot 프로젝트 생성   02) vue 프로젝트 설정   03) 실행03. 기타   01. 개요front를 오직 html과 jsp로만 진행하다가, vue나 flutter같은 framework를 활용하여 작업을 하다보니 당연히 한 프로젝트 내에서 front와 back의 작업이 일어나는 것이라는 전제가 아주 단단히 잘못된 생각이었다는 것을 깨닫게 되었다. 이래서 기본 부족한 비전공자란,,, Vue 프로.. 2023. 3. 21.
[$emit] 모달 컴포넌트(팝업) https://webruden.tistory.com/925#google_vignette Vue emit 사용법 및 간단 예제 (How to Emit Data in Vue)이번 포스팅에서 Vue.js 자식 컴포넌트에서 이벤트를 내보내는 방법을 다뤄보도록 하겠습니다. emit이란? 이벤트 emit은 하위 컴포넌트에서 상위 컴포넌트로 이벤트를 전달하기 위한 방식입니다.webruden.tistory.com 위 참조된 링크의 게시물에서 설명한 $emit 개념을 활용하여 모달 컴포넌트를 생성해보았다.openPop이라는 변수를 활용하여 true면 모달을 표출, false라면 모달을 닫는 구조이다. 부모컴포넌트에서 openPop와 그에 대한 기능들(닫기, 열기)을 정의하고,자식 컴포넌트에.. 2023. 3. 13.
[clone] Facebook Clone Coding : Front만 vue를 직접 사용해보며 이해하기 위해 Facebook을 clone coding하였다. 이에 대한 작업은 UI에 관한 것 뿐이며, 특별한 설명 없이 github 주소를 통해 코드를 공유한다. https://github.com/Hamjeonghui/vue.git GitHub - Hamjeonghui/vue: Vue 프레임워크를 활용하여, Face Book의 구조를 벤치마킹하여 구현해냄Vue 프레임워크를 활용하여, Face Book의 구조를 벤치마킹하여 구현해냄. Contribute to Hamjeonghui/vue development by creating an account on GitHub.github.com IDE는 intelliJ를 사용하였다. 2023. 3. 13.
[구축] Vue 프로젝트 생성 기존에 Vue를 활용하여 작업한 프로젝트의 버전관리 작업을 담당하게 됨에 따라,Vue에 대한 기본적인 내용을 파악 및 기록할 목적으로 작성하였다. OS는 window, IDE는 intelliJ로 작업하였다. 목차는 아래와 같다.1. Vue에 대하여   01) Vue란?   02) React와의 차이점2. 설치 및 실행   01) 설치   02) 프로젝트 생성  1. Vue에 대하여Vue를 설치하고, 프로젝트 기본 구성을 알아보기에 앞서 Vue가 무엇인지에 대한 내용을 우선적으로 알아보려 한다.  01) Vue란?프론트엔드 개발을 쉽게하기 위한 react와 함께 대중적인 오픈소스 javascript 프레임워크MVVM패턴의 ViewModel에 해당하여, UI코드와 데이터제어 .. 2023. 3. 6.
Object의 value로 index접근하는 방법 해당 포스팅은 Java Script 객체(Object)의 특정 value가 해당 객체의 몇 번 index에 존재하는지 알아보는 방법을예시 함수를 통해 정리해보았다.var object=[ {"NAME": "김멍청", "AGE": "8살", "GRADE": "대(4년제) 3학년"}, {"NAME": "최똑똑", "AGE": "31살", "GRADE": "대(2년제) 1학년"}, {"NAME": "오멍청할뻔", "AGE": "9살", "GRADE": "초 1학년"}, {"NAME": "윤보통", "AGE": "17살", "GRADE": "고 1학년"}, {"NAME": "홍수수께끼", "AGE": "몇살이게?", "GRADE": "몇학년일까?"}]function returnOfInd.. 2022. 11. 24.
[openLayers_proj] 좌표계 변환 해당 게시글에서는 ol.proj.transform()을 활용하여 구글좌표(EPSG:4326)를 Open Layer좌표(EPSG:3857)로, Open Layer좌표(EPSG:3857)를 구글좌표(EPSG:4326)로 변환하는 예제를 통해, 필요한 좌표계로 변환하는 예제를 확인할 수 있다. 목차는 아래와 같다.1. 라이브러리 추가2. transform()  open layer(이하 ol)의 라이브러리나, proj4의 라이브러리가 외부파일 형식으로 필요하다면 아래 압축 파일을 사용할 수 있다.    1. 라이브러리 추가우선 html에서 아래와 같이 스크립트를 추가하고, js에서 사용할 좌표계를 정의해주어야한다.// ol에서 proj4를 사용하기 위한 좌표계 정의proj4.defs('EPSG:980201', .. 2022. 11. 21.
반응형