본문 바로가기

Language

 (31)
[Vue.js] Vue CLI로 뷰 설치하기 안녕하세요! Plitche(플리체)입니다. 이번 포스팅은 [Vue.js] Vue CLI로 뷰 설치하기입니다. Intro 일반적으로 Vue를 사용하는 방법은 두가지가 있다. Script를 이용한 방법 스크립트 방식 바로가기 Vue-CLI를 이용한 방법 스크립트를 이용하여 간단히 문법이나 사용법에 대해서 어느정도 숙지를 했다면 Vue CLI를 이용하여 Vue를 활용해볼 시간이다. Vue-CLI 란? Vue CLI란 Vue Command Line Interface의 약자이다. 터미널에서 명령어를 통해 Vue를 설치하거나 Vue와 관련된 패키지를 추가할 때 명령어로 간단하게 실행할 수 있도록 하는 도구이다. Install (설치하기) cli.vuejs.org Vue CLI cli.vuejs.org 먼저 위의 U..
[JavaScript/jQuery] checkbox 선택자, 체크 여부 제어 안녕하세요! Plitche(플리체)입니다. 이번 포스팅의 내용은 jQuery를 이용해서 checkbox 활용하기 입니다. Intro input 태그의 type속성 중 하나인 checkbox는 정말 많이 활용이 되고 있다. radio와 다르게 중복 선택이 가능하여, 가장 흔히 볼 수 있는 것은 홈페이지 게시판에서 원하는 카테고리의 게시글들만 분류하는 기능이다. 물론 select와 input type="text" 등을 모두 활용하여 더 멋있는 검색기능을 구현할 수도 있지만 이번에는 checkbox활용에 대해서만 살펴보겠다. What? Why? 아래와 코드를 활용하여 간단한 5개의 check박스를 만들었다. 전체 자유 익명 기술 기타 여기서 label태그는 for타입의 값과 input태그의 id가 일치하게 작..
[JavaScript/jQuery] ajax 비동기통신 - html방식 리턴받기 안녕하세요! Plitche(플리체)입니다. 저의 첫 포스팅은 [jQuery] ajax 비동기 통신 - HTML방식으로 리턴 받기입니다. Ajax와 Submit 일반적으로 form태그를 사용하여 submit 처리를 하게되면, back단에서 데이터 처리/로딩 후 페이지를 이동하는 방식으로 화면에 표출된다. 반면, Ajax 비동기통신을 이용하게 되면 새로고침을 하는 듯한 동작은 더 이상 볼 수 없다! Ajax 비동기통신을 이용하면 화면 이동 없이 back단에서 데이터를 처리한 후 return 값을 이용하여, 원하는 방식으로 웹 화면에 표출되는 내용을 제어가 가능하다. Ajax의 return 타입은 datatype으로 핸들링이 가능하며 그 종류로는 xml, json, html 등등 다양하지만 오늘은 간단한 게시..
[JavaScript/jQuery] 실무에서 사용하는 ajax 안녕하세요! Plitche(플리체)입니다. 이번 포스팅의 주제는 [jQuery] 실무에서 사용하는 ajax 비동기통신 입니다. Intro 첫 프로젝트에 들어가기 전까지만 해도, 앞서 ajax 비동기통신 간단하게 사용하기처럼 매번 필요할 때 마다 ajax 문법에 맞추어 모든 내용을 작성하고는 했다. 물론 당연히 정상 작동하지만, 스크립트 코드 길이가 길어지면 찾기도 수정하기도 번거롭고 어려워진다. 때문에 이번 포스팅에는 내가 첫 프로젝트에 투입이 되어서 나름 충격을 받았던 부분에 대해서 공유 하고자 한다. 사실 생각해보면 간단한데.. 왜 생각을 못했을까 ㅠㅠ 일반적인 ajax $.ajax({ url: '', // Controller의 mapping값 type: '', // get, post 방식 中 dat..
[JavaScript/jQuery] ajax 비동기통신 간단하게 사용하기 안녕하세요! Plitche(플리체)입니다. 이번 포스팅의 주제는 [jQuery] ajax 비동기통신 간단하게 사용하기입니다. Intro 먼저 ajax 비동기통신은 javascript를 더 쉽게 사용하기 위한 jquery 라이브러리의 한 메소드로 실무에서 정말 많이 쓰이는 라이브러리로 무조건 습득해야되는 것들 중 한가지 이다. 일반적인 MVC패턴을 통해서 개발을 진행할 때 controller에서 Return되는 값은 ViewResolver에 의한 Prefix, Suffix를 통해 jsp파일명을 반환한다. 하지만 페이지 이동이 아닌 동일한 페이지 내에서 통신을 하기 위해서는 ajax를 사용한다. 여기서 비동기통신이란 앞선 요청(request)에 대한 응답(response)를 기다리지 않고 계속해서 뒤의 요청..
[JavaScript] URL 주소 복사하기(.select(), copy) 안녕하세요! Plitche(플리체)입니다. 이번 포스팅의 주제는 [JavaScript] URL 주소 복사하기(.select(), copy) 입니다. Intro 현재 프로젝트 업무를 진행하면서 이벤트 페이지를 개발하고 있다. 그 중 몇 이벤트에서 카카오톡 공유하기와 URL 복사 버튼을 구현하였다. 개발함에 있어 생각보다 더 많이 고민하고 찾아보았던 URL 복사하기 기능에 대해서 설명하고자 한다. 라이브러리를 이용한 방법도 있지만 오늘은 javascript를 이용한 간단한 방식에 대해 알아보자. 1. Select (선택할 url 드레그) 먼저 html태그를 아래와 같이 작성해준다. 버튼을 클릭했을때 element.select(); 를 통하여 input 태그에 작성된 내용을 선택한다. (MDN 참고) > 여기..
[Java] 실무에서 사용하는 코딩 안녕하세요! Plitche(플리체)입니다. 이번 포스팅의 주제는 [JAVA] 실무에서 사용하는 코딩(방지 코드)입니다. Intro 사실 Java언어에만 국한된 것이 아니라 모든 언어와 기술에 공통적인 부분이나, 저처럼 학원에서 배우기만 한 개발자가 실무 프로젝트에서 사용하는 코드들의 대한 감을 조금이나마 익숙해지는데 도움을 주려고 합니다.. 현재도 아직 순간순간 처리하지 않고 넘어가는 부분들이 있지만...^^ 그것은 방지 코드에 대한 것입니다. 방지코드란? 사실 방지 코드라는 이름 자체는 내가 이해하고 사용하고 있는 이름이다. 방지코드 : 혹시나 하는 에러와 코드가 발생할 때 방지하는 코드 다른 의미로는 검증 코드와 유사한 의미를 가진다고 생각해도 무방하다. Example 사용자로부터 10명의 성별을 입..
[JavaScript] 휴대폰번호, 이메일 정규식 체크하기 안녕하세요! Plitche(플리체)입니다. 이번 포스팅의 주제는 [JavaScript] 휴대폰번호, 이메일 정규식(Regular Expression) 체크하기 입니다. Intro 현재 프로젝트 진행 中 하나의 input tag를 통하여 휴대폰 번호와 이메일을 모두 입력 받아야 하는 경우가 생겼다. DB에 사용자가 핸드폰 번호를 입력했는지, 이메일을 입력했는지 판단했어야 했기 때문에 고민했었다. 꼭 정규식 체크가 아니더라도 이런 경우에 사용한 다는 것을 알고 있으면, 추후에 도움이 될일이 생길수 있으니 집중해보자! 1. HTML 먼저 html태그를 아래와 같이 작성해준다. 이제 위 SUBMIT(제출)버튼을 클릭했을 때, 휴대폰인지 이메일인지 판단하여 alert창을 띄워 보도록 하자. 2. Script 버튼..

티스토리툴바