WEB개발이야기/VScode 2019. 9. 14.
VScode Code Formater 인 Prettier 완벽 적용하기
VSCode 익스텐션 중에 코드를 정렬해 주는 Formatter는 크게 Prettier과 Beautify가 있습니다. VScode에서는 2가지의 Formatter가 가장 많이 사용되는데 2가지는 약간 다른 특징이 있습니다. Prettier가 코드를 강제적으로 변경을 시킨다면 Beautify는 좀더 자유롭게 놔두는 편입니다. 자신만의 코드작성 규칙을 가지고 있다면 Prettier가 짜증 날 수도 있습니다. 내 코드를 막 바꿔버리닌까요. 하지만 그런면이 코드를 항상 일정하게 정렬을 시켜 주기도하닌까 심리적인 타격만 없다면 이보다 좋을 수 는 없을 겁니다. 또한 여러 사람이 한 프로젝트를 같이 코딩을 해야 한다면 꼭 필요한 익스텐션이라고 할 수 있습니다. VScode에 prettier 적용하기 VScode에 ..
WEB개발이야기/Vue.js 2019. 7. 24.
개발하면서 경험으로 알게 된 Vuex에서 Store활용 방법
Vue의 개발을 편리하게 도와 주는 공식 툴 중에 Vuex가 있습니다. Vuex의 주요 기능은 개발하는 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역활 및 관리 입니다. 만약 이게 없다면 컴포넌트간 데이터를 주고받기 위해서 부모는 자식에서 props의 방법으로, 자식은 부모에게 Emit event의 방법으로 데이터를 주고 받아야 합니다. 또한 형제 컴포넌트간 데이터를 주고 받으려면 너무 복잡해져서 EventBus를 활용해야 그나마 사용을 할 수 있게 됩니다. 간단한 프로젝트인 경우에야 사용이 가능하겠지만 대형 프로젝트인 경우에는 이러한 방법으로는 도저히 감당이 되지 않고 개발 후 운영을 한다고 해도 거의 맨붕이 올 것입니다. 이러한 문제를 해결해 주는 것이 Vuex라고 보시면 됩니다. 데이터..
WEB개발이야기/Vue.js 2019. 6. 28.
Vue의 Nuxt로 개발할 떄 자동으로 브라우저 띄우는 방법
Nuxt로 Vue를 개발하다 보면 항상 사용하는 명령어가 npm run dev 또는 npm dev 또는 yarn run dev 또는 yarn dev 일 것입니다. 모두 동일하게 Nuxt를 개발 모드로 띄워라 인데.. 몇가지 명령어를 덫붙히면 dev모드 실행과 동시에 브라우저를 자동으로 띄 울 수 있는 몇가지 방법이 있습니다. 첫번째 방법 아주 간단한 첫번째 방법은 package.json을 사용하는 방법입니다. 아래와 같이 package.json의 scripts명령어 중에 원하는 실행 명령 뒤에 "dev": "nuxt --open"와 같이 --open을 붙히는 것입니다. { //... "scripts": { "dev": "nuxt --open", "build": "nuxt build", "start": "..
WEB개발이야기/Vue.js 2019. 6. 21.
Vue의 NUXT에서 SASS를 적용해서 사용하는 방법(feat. BULMA)
웹화면은 HTML, CSS, JAVASCRIPT로 구성되어 있습니다. 웹개발자 분은 보통 HTML과 JAVASCIPT로 작업을 하고, 웹디자이너는 HTML과 CSS로 작업을 합니다. 하지만 점차 시간이 지남에 따라 HTML, CSS, JAVASCRIPT, 심지어 백오피스까지 손을 대는 풀스텍 개발자가 나오게 되었습니다. 그러면서 자연스럽게 CSS 마저도 마치 프로그램처럼 작성하고 싶은 요구가 생겨나기 시작했습니다. 그런 요구에 따라 CSS도 프로그램처럼 개발하는 언어가 생겼는데 그것을 CSS 프리프로세서, 한국말로 CSS 전처리기라고 합니다. CSS 프리프로세서로 코딩을 하고 컴파일을 하면 결과물은 기존의 CSS 형태로 되어져서 나옵니다. CSS프리프로세서의 종류는 LESS, SASS(SCSS), Sty..
WEB개발이야기/Vue.js 2019. 6. 18.
Vue의 NUXT 템플릿을 쉽게 설치하는 3가지 방법
Vuejs의 장점은 매우 가볍고 쉽고 빠르게 기존에 있는 웹서비스에 접목해서 사용하는 것입니다. 새로운 웹프로젝트에도 쉽고 빠르게 적용을 할 수 있습니다. 하지만 쉽다고 해도 Vuejs의 최대 성능을 끌어 올려서 처음부터 파일을 만든다는 것은 생각보다 쉽지 않습니다. 더욱이 개발자 마다, 또는 개발할때마다 기본 틀이 달라진다면 혼자 개발할때는 문제가 없지만 통일된 규격을 가지고 있어야 할 대규모 프로젝트를 진행하기에는 어려운 점이 너무나 많습니다. 그래서 React의 NEXT처럼 Vue에서도 NUXT를 제공하고 있습니다. NUXT는 일반적인 Vue.js 어플리케이션을 정해진 규격에 맞게 만드는 프레임워크라고 할 수 있습니다. NUXT 설치하기 NUXT에 대한 설명은 나중에 포스팅을 하도록 하겠습니다. 여..
WEB개발이야기/웹퍼블리싱 2019. 5. 24.
현재 가장 모던한 모바일 터치 슬라이더 swiper
현재 github에서 거의 20,000에 달하는 Star을 받고 있는 모던한 모바일 터치슬라이더 플러그인입니다. 모바일뿐 아니라 Web화면에서도 아주 잘 작동하는 검증된 플러그인이라고 보시면됩니다. MIT 라이선스를 가지고 있어서 부담없이 사용할 수 있고 데모 사이트에서 다양한 Swipe DEMO를 보고 쉽게 적용할 수 있습니다. 홈페이지http://www.idangero.us/swiper DEMOhttp://www.idangero.us/swiper/demos/Install아래와 같은 다양한 방법으로 소스를 적용할 수 있습니다. bower로 설치할 경우 $ bower install swiper또는 Atmosphere as Meteor 패키지로 설치할 경우 $ meteor add nolimits4web:s..
WEB개발이야기/Vue.js 2019. 4. 24.
Vue.js용 페이지 네비게이션 인 vuejs-Paginate Component를 소개합니다
Vue.js를 사용하다보면 수많은 사람들이 만들어서 무료로 공유해 놓은 Components들이 많이 있습니다. 라이선스를 꼭 확인해야 하겠지만 대부분 사용에 안전한 MIT라이선스를 주로 사용합니다. 그중에 보통 게시판 리스트 하단에 페이지를 넘기는데 사용하는 Paginate 컴포넌트를 소개해 볼까 합니다. 이 컴포넌트는 디자인은 Bootstrap3을 사용하고 있기때문에 Bootstrap3도 같이 설치를 해야 합니다. 설치하기 npm이나 yarn을 사용한다면 설치는 쉽습니다. NPM으로 설치 $ npm install vuejs-paginate bootstrap@3.3.x --save Yarn으로 설치 $ yarn add vuejs-paginate bootstrap@3.3.x CDN으로 설치 CDN은 설치라..
WEB개발이야기/Vue.js 2019. 4. 24.
Vue.js에서 axios를 사용하여 서버통신하는 방법
웹 또는 앱을 개발하다 보면 거의 대부분이 서버가 필요하게 됩니다. 서버에 내용을 저장하고 웹이나 앱에서 서버의 저장된 내용을 불러다가 사용자에게 보여주게 되는데요. 이때 javascript에는 axios라는 아주 훌륭한 플러그인이 있습니다. axios는 javascript용 플러그인으로 많이 사용하지만 Vue.js에서도 매우 요긴하게 사용되어 집니다. axios는 Promise 기반의 자바스크립트 비동기 처리방식을 사용합니다. 그래서 요청후 .then()으로 결과값을 받아서 처리를 하는 형식으로 구성되어 있습니다. axios.get('/api/data').then(res => { console.log(res.data) }) /api/data에서 데이터를 불러옵니다. 불러온 데이터는 .then()의 re..
WEB개발이야기/Vue.js 2019. 4. 17.
Vuejs의 컴포넌트 사용 시 알아두면 좋은 6가지
Vue.js의 컴포넌트를 사용할때 알아두면 유용한 6가지에 대해서 포스팅을 해보겠습니다. 이것을 알게계시면 소스코드도 많이 줄일 수 있고 보기에도 좋은 코딩을 할 수 있습니다. 케밥표현과 카멜표현 컴포넌트의 영역에서 다른 컴포넌트 명을 작성할 때 2개 이상의 단어가 조합된 이름 일 경우 꼭 케밥(-) 형식으로 작성해야 합니다. HTML에서는 대소문자를 구별하지 않기 떄문에 hongGilDong 과 honggildong을 동일하게 처리하기 때문입니다. 컴포넌트의 영역에서 이름을 카멜형식(hongGilDong)으로 작성했더라도 영역에 작성할 때는 케밥형식으로 변경하여 작성하면 됩니다. Vue.js가 자동으로 같은 컴포넌트로 인식을 합니다. 케밥 형식 : 단어와 단어 사이를 '-'로 연결시키는 표현 (예 : ..
WEB개발이야기/Vue.js 2019. 3. 29.
Vue-CLI 도구 활용방법
Vue를 활용하여 개발 한다면 Vue-CLI는 반드시 알고 있어야 하는 도구 입니다. Vue-CLI가 Vue의 코어는 아니지만 개발자가 쉽게 Vue 프로젝트를 개발 할 수 있게 해주는 아주 유용한 도구입니다. Vue-CLI 란 무엇인가??? Vue-CLI에서 CLI는 Command Line Interface의 약자로 윈도우에서는 Command 창, 맥에서는 터미널 창에서 타이핑으로 명령어를 입력하여 원하는 바를 실행 시키는 도구를 말합니다. Vue-CLI은 내부적으로 Webpack을 활용합니다. Vue-cli로 명령을 실행 시키면 cli가 자동으로 최적화된 Webpack 형태의 결과물을 생성 시켜 줍니다. Vue-CLI로 할 수 있는 것은 무엇인가??? 그럼 Vue-cli로 할 수 있는 것이 무엇이냐??..
WEB개발이야기/Vue.js 2019. 3. 27.
javascript(Vue.js)로 배열에서 ID를 활용하여 Index값을 찾을때 요긴한 함수
Vue.js에서 배열에 있는 특정 id의 Index값을 찾아서 그 배열을 처리하는 요긴하면서 쉬운 함수를 공유합니다. 아래의 예제는 todolist배열을 화면에 나열해 놓고 그 중에 항목을 하나 클릭할 경우 doneToggle(id) 또는 deleteTodo(id)를 불러와서 반대 값으로 토글 시키거나 항목을 삭제하는 함수입니다. {{ a.todo }} (완료) × doneToggle : function(id) { var index = this.todolist.findIndex(function(item){ return item.id === id; }) this.todolist[index].done = !this.todolist[index].done } 핵심은 findIndex() 함수입니다. 함수에서 받..
WEB개발이야기/웹퍼블리싱 2019. 2. 22.
javascript ECMAScript 2015(ES6)로 개발할 때 반드시 알아야할 9가지
ECMAScript2015로 개발하기 위해 알아야 할 9가지를 정리해 보려고 합니다. 먼저 간단하게 ECMAScript를 소개 하겠습니다. ECMAScript 옛날 옛적에 넷스케이프(NE)와 인터넷익스플로러(IE)가 주도권 경쟁을 하던 시절~~ 넷스케이프(NE)는 javascript를 지원했고 인터넷익스플로러(IE)는 Jscript를 지원 했었습니다. 윈도우즈에 끼워팔기 신공으로 점차 득세를 하기 시작한 인터넷익스플로러는 그만 자만심에 빠져 Jscript를 표준이 아닌 적당히 자기만의 기능을 추가하기 시작했습니다. 내가 점유율이 높으니 모든 브라우저들이 내가 만든 기준을 따라 올 거라 생각을 했던 것입니다. 하지만 망하기는 했지만 넷스케이프도 그렇게 호락호락하지 않았습니다. 자신이 밀고 있던 javasc..
WEB개발이야기/Vue.js 2019. 2. 20.
Vue.js의 이벤트버스에 대한 정리
Vue에서 컴포넌트 간 기본적으로 데이터를 통신하는 방법은 props와 events라는 것은 알고 있을 것이라는 전제로 정리하겠습니다. 부모컴포넌트 --> 자식컴포넌트 : props(속성 정의만으로 전달) 자식컴포넌트 --> 부모컴포넌트 : events(이벤트 발생 시켜 전달) 하지만 컴포넌트가 부모, 자식 관계만 있는것은 아니고 형제컴포넌트, 손자컴포넌트도 있을 것입니다. 이럴경우 사용할 수 있는 방법이 이벤트버스를 이용하는 방법입니다. 이벤트버스는 컴포넌트가 많지 않아 규모가 작은 중소 프로젝트에 사용해야 합니다. 컴포넌트가 많아지고 복잡해 지면 누가 누구에게 통신을 하고 있는지 헷갈리기 떄문에 디버깅이 너무 힘들어 지게 됩니다. 그래서 대규모 Vue 프로젝트인 경우는 Vuex라이브러리를 사용하여 통..
WEB개발이야기/Vue.js 2019. 2. 13.
Vue.js 템플릿 구문 작성시 주의할 점
Vue.js의 꽃인 컴포넌트에서 DOM을 구성하기 위한 Template을 만들때 주의할 점 몇가지를 포스팅합니다. is 특성 사용하기컴포넌트를 등록하고 HTML에서 이것을 사용하려면 보통 아래와 같이 사용합니다. 하지만 컴포넌트가 기존 HTML테그의 하위로 들어갈 경우 정상적으로 렌더링이 되지 않는 경우가 있는데 이럴때 is특성을 사용하면 정상적으로 렌더링이 됩니다. 아래와 같이 작성할 경우 라는 HTML태그에 컴포넌트가 들어가 있으므로 실제로 렌더링을 하면 이 나오지 않습니다. 이럴때 아래처럼 컴포넌트를 불러올 때 is특성을 사용하면 정상적으로 나옵니다. 컴포넌트의 템플릿 작성시 루트요소는 하나여야 합니다.컴포넌트 안에 옵션을 작성하는 요소중에 Template가 있습니다. DOM을 형성할 때 어떻게 나..
WEB개발이야기/Vue.js 2019. 2. 13.
Vue.js의 핵심인 컴포넌트에 대한 간략한 정리
Vue.js의 핵심이자 꽃이라 할 수 있는 컴포넌트(Component)에 대해 간략히 정리해 보려고 합니다. Vue.js에서 기본적인 프로그램 구현 방법은 화면 또는 기능을 적절하게 분리하여 컴포넌트화 시켜서 개발을 하고 이것을 연결하여 프로그램이 작동하도록 구현하는 방법을 사용합니다. 또한 각각의 컴포넌트간 데이터의 이동에 대해서는 단방향 이동만 가능하다고 합니다. 부모 컴포넌트에 있는 데이터를 자식 컴포넌트가 가져올 때는 그냥 쉽게 부모 컴포넌트에 props로 변수에 값을 넣어주면 바로 자식 컴포넌트가 읽어 올 수 있습니다. 가진 것을 모두 퍼 주는 부모님의 내리사랑 같은거에요. 하지만 자식 컴포넌트에 있는 데이터를 부모 컴포넌트에 넘기기 위해서는 기본적으로는 넘길 수 없고 Event를 사용해서 보내..
WEB개발이야기/Vue.js 2019. 1. 15.
Vue.js의 이벤트 사용 방법 정리
Vue.js에서 이벤트를 다루는 방법에 대해서 간단히 정리하려고 합니다. HTML에는 나 처럼 당연히 알고 있는 기본 이벤트가 있습니다. 그리고 이미 javascript를 통해서 기본 이벤트와 어우러지게 사용하는 방법들이 있구요. 여기에서 Vue.js는 javascript로 조금 어렵게 구현했던 기능들을 v-on 디렉티브를 통해서 좀더 쉽게 구현할 수 있는 방법을 제공하고 있습니다. 이벤트 구현 Vue.js에서 이벤트를 구현하는 방법인 v-on 디렉티브를 이용합니다. v-on은 줄여서 @로 대체할 수 있습니다. 예> 좋아요 좋아요 좋아요 버튼을 클릭하면 javascript로 작성된 goodgood() 메서드를 호출합니다. 활용 이벤트 명 아래의 이벤트명을 v-on 또는 @와 같이 사용하면 됩니다. v-o..
WEB개발이야기/Vue.js 2019. 1. 15.
Vue 인스턴스의 라이프사이클
보통 프레임워크나 라이브러리의 경우 처리 순서에 따라 라이프사이클이 존재합니다. 사실 사람이 인식하기도 전에 순식간에 라이프사이클이 지나가 버리기 때문에 육안으로는 관찰이 거의 어렵습니다. 하지만 컴포넌트를 개발하거나 일반 개발 과정에서 라이프사이클은 중요한 요소로 작용을 합니다. 예를 들면, 분명 내 생각에는 A * ( B + C ) = D가 나와야 하는데 E가 나오는 경우가 발생을 합니다. 확실하게 D가 나와야 하는데 말이죠.. 이런 경우 십중팔구는 라이프사이클 때문 일 확률이 높습니다. 아직 순서 상으로( B + C )가 계산 되기도 전 인데 먼저 A * B를 계산해 버리는 경우 이런 문제가 발생할 수 있다는 것입니다. 그래서 라이프사이클을 이해하는 것은 나중에 심도있게 개발 할 때 중요한 요소 일..
WEB개발이야기/Vue.js 2019. 1. 11.
Vue 인스턴스의 주요 옵션 정리
Vue를 실행시기키 위해서는 먼저 Vue.js를 import를 한 후 Vue 인스턴스를 생성해야 합니다. Vue인스턴스를 생성할때 지정된 몇가지 옵션 객체를 전달해야 하는데 이 옵션객체들이 어떤것이 있고 어떻게 사용되는지 간단히 정리하려고 합니다. Vue 인스턴스란? Vue를 실행하기 위해 첫번째로 정의 하고 생성해야 하는 객체입니다. Vue 인스턴스 예제 var vm = new Vue ({ el : '#test', data : { name : '홍길동'}, }) 옵션 설명 예제 비고 el Vue가 실행될 HTML의 DOM 요소를 지정 el : '#test' CSS의 선택자를 선택하듯이 선택 (#--> id 지정, . --> 클레스 지정) data Vue가 바라보는 data 객체를 지정 data : { ..
WEB개발이야기/Vue.js 2019. 1. 11.
Vue.js의 기본 디렉티브 정리
Vue.js를 공부하면서 기억해야 할 것에 대해 요약정보를 정리해 보려고 합니다. 이번에는 Vue.js에 기본으로 포함되어 있는 기본 디렉티브에 대한 정리 입니다. 디렉티브 디렉티브를 우리나라 말로 하면 지시문이라고 할 수 있습니다. 어떻게 어떻게 해라~ 라고 지시하는 것이죠. Vue.js의 View영역에서 태그의 속성을 지정하는 방식으로 구현이 됩니다. 태그 속성에 간단히 v-text="message" 라고 작성을 하면 javascript단에서 message변수에 할당된 값을 보여주는 식으로 약속된 명령어를 구현합니다. Vue.js에서 기본으로 제공하고 있는 디렉티브를 기본 디렉티브라고 하고 사용자가 스스로 만들어서 사용하는 것을 사용자 지정 디렉티브 또는 커스텀 디렉티브라고 합니다. 이번에는 몇개 되..
WEB개발이야기/VScode 2019. 1. 9.
VScode의 Extention의 폴더 위치는 어디일까요?
기존에는 텍스트에디터로 울트라에디터나 에디트플러스, Notepad++ 등등을 많이 사용 했었지만 이제는 좀 더 진보된 신세대 텍스트에디터라고 할 수 있는 VScode, 서브라임텍스트 등으로 넘어가는 추세입니다. 저도 그렇고 요즘의 가볍게 코드를 개발하는 개발자 분들이 많이 사용하고 있습니다. 약간 사용법이 상이 하지만 익숙해 지면 너무나 편리한 에디터라고 할 수 있습니다. VScode를 설치해서 사용하다 보면 가끔씩 설치 경로를 직접 엑세스 해야하는 경우가 종종 있습니다. 나중에 저도 참고하기 위해 그 경로를 포스팅해 놓을까 합니다. VScode 설정정보가 있는 폴더 위치 Mac에서 보통의 방법으로 VScode를 삭제하고 새로 설치할 경우 이상하게 모두 삭제가 되는 것이 아니라 이전의 기록들을 다시 가지..
WEB개발이야기/기타 2018. 12. 16.
google 번역기 플러그인으로 다국어 적용하기
기술이 너무나 급성장을 하는 것을 새삼 느낍니다. 예전에도 번역프로그램이 없었던 것은 아니지만 번역율이 좋지 않아서 거들떠도 보지 않았었는데 지금은 인공지능이라고 하는 머신러닝 기술을 이용해서 상당히 번역율이 높아지고 있음을 실감합니다. 그 선봉에 서있는 기업이 역시나 구글입니다. 구글은 전세계 언어를 서로 번역하는 기능을 무료로 제공 하고 있습니다. 무료로 제공한다고 해서 구글이 착한 회사라고는 할 수 없지만 그래도 일반인 입장에서는 고마운 기능임에는 틀림없습니다. 그래서 블로그나 웹사이트를 구글 번역 플러그인을 사용하여 어느정도 퀄리티 있는 번역을 제공하는 방법을 포스팅해 보려고 합니다. 구글 번역사이트 접속하여 코드 발행하기 구글 번역 웹사이트 먼저 구글 번역웹사이트에 접속을 합니다. 접속 후 웹사..
WEB개발이야기/웹퍼블리싱 2018. 11. 7.
highlight.js를 활용하여 Code구문 강조하기
많은 개발자들이 웹사이트에 글을 작성할때 코드 부분을 실제 에디터에서 보이는 것 처럼 강조하기 위한 방법으로 highlight.js을 사용합니다. 이것을 사용하기 위해 npm 또는 yarn을 사용하여 프로젝트에 포함시키는 경우도 있지만 제가 소개하는 방법은 가장 간단하게 CDN을 활용하여 index.html에 적용하여 사용할 수 있는 쉬운 방법니다. CDN이란 : CDN은 콘텐츠 전송 네트워크(Content delivery network 또는 content distribution network (CDN))의 약자로 CDN 서버에 javascript나 images, sound등등..의 컨텐츠를 올려놓고 여러 위치에 동일한 파일을 분산시켜 저장해 놓습니다. 사용자가 해당 컨텐츠 파일을 요청할 경우 사용자와 ..
WEB개발이야기/VScode 2018. 11. 5.
Visual Studio Code(비주얼 스튜디오 코드)로 파일 내용 비교하는 방법
VSCode를 사용하다가 서로 비슷한 파일이나 버전을 잘못 관리하여 2개의 파일을 서로 비교해 봐야하는 경우가 있습니다. 전문적으로 파일을 비교해 주는 프로그램이 있긴하지만 VS Code로도 그에 못지 않은 전문가 스러운 기능을 활용할 수 있습니다. 파일 비교 하는 방법 오른쪽에 있는 탐색기에서 비교하고자 하는 첫번째 파일을 선택하고 오른클릭을 합니다. 나오는 메뉴 중 비교를 위해 선택을 선택합니다. 이번에는 비교할 파일을 선택하고 오른클릭을 합니다. 나오는 메뉴 중 선택한 항목과 비교를 선택합니다. 파일 비교 하는 화면 ▲ 그러면 위와 같은 결과화면을 볼 수 있습니다. 현재 샘플화면은 서로 많이 다른 파일이라 빨강색이 많긴한데.. 빨간 부분은 비교파일에 대해서 없는 부분이고 초록색 부분은 더 추가된 부..
WEB개발이야기/VScode 2018. 9. 11.
VSCode를 터미널(CMD)창에서 바로열기
컴퓨터를 켜고 VSCode창을 열때는 여러가지 방법이 있습니다. 그 중에 제가 가장 선호하는 방법은 터미널창에서 열기 입니다. 터미널에서 VScode 열기 Finder에서 원하는 폴더로 이동하여 폴더를 선택하고 마우스 오른클릭 후 서비스 항목에서 터미널을 선택합니다. 맥과 달리 윈도우에서는 탐색기에서 열기를 원하는 폴더로 이동하여 shift + 마우스 오른클릭 후 명령 창 열기를 선택하여 명령창을 엽니다. 터미널창의 명령어 입력에서 code . 을 실행 시킵니다. 이 명령은 해당 위치에서 VScode를 열겠다는 명령어 입니다. 오류상황 하지만 위 이미지 처럼 command not found 라는 오류가 나는 경우가 있습니다. 원인은 code .의 명령어 위치를 찾지 못하기 때문에 발생하는 오류 입니다. ..
WEB개발이야기/웹퍼블리싱 2018. 8. 29.
jQuery로 A태그 실행 시키기
웹퍼블리싱을 하다 보면 사용자가 아니라 javascript에서 A태그에 적혀있는 링크를 실행시켜야 하는 경우가 종종 있습니다. 다시말해 사람이 클릭하는 것이 아니라 조건에 맞으면 javascript가 클릭하게 하는 방법입니다. 저도 한참 찾아 해맸었는데.. 아래와 같은 jQuery 명령어로 실행이 가능 합니다. $('선택자').get(0).click(); 간단하게 예제를 살펴보시면 이해가 될것입니다. Javascript 코드 if( true ) { $('#uxgjs').get(0).click(); } HTML 코드 조건이 참이면 http://uxgjs.tistory.com이 경로로 이동을 합니다.
WEB개발이야기/웹퍼블리싱 2018. 8. 12.
원하는 DIV박스 안에 최적의 이미지 사이즈로 표시하기
이미지를 최적의 사이즈로 마추어서 표시해야 할 때가 있습니다. 저같은 경우는 Bootstrap 4의 card Component를 사용할 경우에 필요해서 개발을 해 봤습니다. 구현결과 구현하고자 하는 모양새는 아래와 같습니다. 이미지가 넓이로 긴 경우 높이값을 100%로 맞추고 넓이값을 중앙으로 맞춥니다. 이미지가 높이로 긴 경우 넓이값을 100%로 맞추고 높이값을 중앙으로 맞춥니다. HTML 구현 핵심은 class="js-imgSizeSame" 입니다. 이 클래스명을 기준으로 javascript로 사이즈를 조절합니다. javascript 구현 javascript는 jquery를 활용하였습니다. 이미지를 찾는 부분과 불러온 이미지의 크기를 조절하여 중앙으로 맞추는 Function으로 구분하여 작성하였습니다..
WEB개발이야기/웹퍼블리싱 2018. 7. 11.
javascript 배열 중에 내가 찾는 단어가 포함되어 있는지 확인하기
javascript의 배열 리스트 중에 내가 찾는 단어가 포함되어 있는지 없는지를 확인할 필요가 있습니다. 몇가지 방법이 있지만 indexOf나 lastIndexOf를 통해서 확인 할 수 있습니다. 구문 array.indexOf(searchElement[, fromIndex]) array.lastIndexOf(searchElement[, fromIndex]) 해결방법 var fruit = new Array("apple","orrange","pear","grape"); alert(fruit.indexOf("pear")); // 2 출력 alert(fruit.lastIndexOf("pear")); // 1 출력 var fruit = new Array("apple","orrange","pear","grape"..
WEB개발이야기/Git 2018. 7. 10.
git사용법과 명령어
git은 개발자에게는 없어서는 안될 버전관리시스템입니다. SVN이 중앙집중식 버전관리 시스템이라면 git은 분산 버전관리 시스템이라 할 수 있습니다. 경우에 따라 다르겠지만 예전에는 SVN을 많이 사용하던것을 현재는 분산 버전관리 시스템이 git으로 많이 넘어온 상태입니다. 로컬컴퓨터에서만 사용할 경우에는 git만 설치하여 사용하면 되지만 원격저장소를 통해서 여러사람과 사용하기 위해서는 git서버가 있어야 합니다. git서버로 대표적인 사이트는 우리가 흔히 알고 있는 github가 있고 gitlab, Bitbucket 등이 있습니다. 물론 네트워크내의 컴퓨터 한대를 이용하여 서버를 구축하여 사용할 수도 있습니다. 서비스명 설명 URL GITHUB 무료로 사용 가능하나 소스가 공개됨 https://www...
WEB개발이야기/Git 2018. 7. 10.
git이란 무엇인가?
git은 개발자에게는 없어서는 안될 버전관리시스템입니다. SVN이 중앙집중식 버전관리 시스템이라면 git은 분산 버전관리 시스템이라 할 수 있습니다. 이번 포스팅에서는 git에 대한 전체적인 개념에 대해서 작성하려고 합니다. 버전관리시스템이란? https://git-scm.com/book/ko/v2를 찾아보면… 버전 관리 시스템은 파일 변화를 시간에 따라 기록했다가 나중에 특정 시점의 버전을 다시 꺼내올 수 있는 시스템이다. 라고 정의를 하고 있습니다. 소스코드뿐만이 아니라 그래픽 파일까지도 버전관리를 할 수 있다고 합니다. 저장소(레파지토리)라고 하는 데이터베이스에 파일의 변경내용을 지속적으로 기록하고 복구할 수 있도록 도와주는 시스템을 말합니다. 중앙집중식 버전관리 시스템과 분산 버전관리 시스템의 차..
