본문 바로가기

JavaScript42

[구축] 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.

[지도API] Open Layers_2 해당 게시글은 예시를 통해 무료 지도 API인 Open Layers의 이벤트 처리, 오버레이어(지도 위의 별개 요소) 생성에 대한 내용을 정리하였다. 목차는 다음과 같다.1. 이벤트 처리2. 오버레이어 1) 오버레이어 생성 2) 오버레이어 삭제(닫기)* polygon Layer 삭제* marker 삭제 목차의 내용 이외에 레이어의 추가(polygon 생성 등)와 같은 별도 내용에 대한 설명이 필요하다면 이전 게시글을 통해 해당 내용을 확인할 수 있다. 1. 이벤트 처리레이어의 클릭이나, hover 등 open layer에 대한 이벤트를 설정하기 위한 로직은 아래와 같다.지도객체.on('이벤트', function(evt) { var map=지도객체; var feature = map.forEach.. 2022. 11. 21.

Object_value로 key 참조하기 object = {key: value, key: value} Object를 활용하여 작업을 할때, 일반적으로 key값을 통해 value에 접근할 수 있게 된다. 그 방법은 아래와 같다. 허나 작업을 진행하다보면 가끔 value를 통해 key에 접근해야하는 경우가 발생하기도 한다. (그럴 일 없을 줄 알았음 ^^ 데이터가 얽혀있다보니 그런 것 같음..) 아래와 같은 함수를 동작하여 key에 접근 할 수 있었다. //object의 value로 key 참조 가능 function getKeyByValue(object, value) { return Object.keys(object).find(key => object[key] === value); } 위 함수를 통해 전달받은 key를 ajax로 전송해보았다. se.. 2022. 9. 23.

AJAX로 json데이터 넘겨받기 기상청에서 제공하는 날씨누리서비스를 참고하여, 사용자가 특정 해구를 선택한 후 "검색"버튼 클릭시 해역예보 하단에 작성된 테이블의 내용이 비동기적으로 수정될 수 있도록 하는 작업을 진행해보았다. 비동기 처리를 진행하며 발생한 이슈를 순서대로 정리해보았으며, 목차는 다음과 같이 하였다. 1. ajax로 json데이터 받기 2. ajax 한글 인코딩 이슈 해결 3. 최종 작성된 코드 1. ajax로 json데이터 받기 ajax는 학원에서 프로젝트를 진행하며 두어번 해 본 경험이 전부였지만, id중복 확인 기능과 좋아요버튼 기능을 구현하면서 학습한 내용이 있기에 적절히 응용한다면 수월히 진행될 것이라는 판단으로, 위의 검색기능을 비동기 로직이 실행될 수 있도록 작업하였다. 검색 이벤트마다 일일예보에 대한 내용.. 2022. 8. 4.

이전 1 2 3 4 5 6 7 다음

티스토리툴바