웹쟁이의 일상

안녕하세요~ 오늘은 비주얼 스튜디오 코드 설치방법을 알아보겠습니다. VsCode라고 불리는 비주얼 스튜디오 코드는 마이크로소프트에서 윈도우, macOS, 리눅스용으로 개발한 IDE인데요, 다양한 언어를 지원하며 각종 편리한 기능들을 제공합니다. 무엇보다 여타 다른 IDE(이클립스, Visual Studio)와 비교하면 아주 가볍다는 장점이 있습니다. VsCode를 설치하는 방법은 아주 간단합니다. 공식 사이트에 들어가서 운영체제에 맞는 버전을 다운로드 하고 설치하면 끝인데요, 우선 공식 사이트에 방문하겠습니다. https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code edit..

안녕하세요~ 이번 포스팅에서는 자바스크립트로 날짜를 표현하는 방법에 대해 알아보겠습니다. 자바스크립트 함수 중에 날짜를 표현할 수 있는 Date() 함수를 이용하면 날짜를 쉽게 출력할 수 있습니다. var date = new Date(); var year = date.getFullYear(); var month = date.getMonth(); var day = date.getDate(); Date함수를 이용하면 실시간으로 현재 날짜와 시간을 변수에 담을 수 있습니다. 날짜 정보 전체를 담아와서 년도, 월, 일을 따로따로 다른 변수에 담아보았습니다. console.log(year); console.log(month); console.log(day); 각각 출력을 해보면 현재 년도와 월, 일이 차례로 나옵..

안녕하세요~ 오늘은 정규표현식에 대해 알아보겠습니다. 정규표현식은 어떤 특정한 규칙을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어라고 합니다. 정규표현식은 처음 보시면 이게 무슨 외계어야 라며 아주 어렵게 느끼실 수 있는데요, 잘 쓰면 아주 유용하게 여기저기 쓸 수 있어서 편리합니다. 아래 표를 보시면 기본적인 정규표현식의 문법을 알아볼 수 있습니다. 메타문자 기능 설명 . 문자 1개의 문자와 일치한다. 단일행 모드에서는 새줄 문자를 제외한다. [ ] 문자 클래스 "["과 "]" 사이의 문자 중 하나를 선택한다. "¦"를 여러 개 쓴 것과 같은 의미이다. 예를 들면 [abc]d는 ad, bd, cd를 뜻한다. 또한, "-" 기호와 함께 쓰면 범위를 지정할 수 있다. "[a-z]"는 a부터 z까..

안녕하세요~! 이번 포스팅에서는 nodeJS로 간단하게 서버를 구축하는 방법을 알아보겠습니다. nodeJS는 자바스크립트이지만 브라우저를 벗어났다는 점이 아주 매력적인데요, 보통 자바스크립트하면 프런트엔드 개발의 전유물이라고 생각했었지만 구글 크롬의 자바스크립트 엔진에 기반해서 서버사이드 플랫폼으로 만들어졌다는 게 큰 특징입니다. nodeJS는 데이터를 다루는 데 아주 효율이 좋습니다. 예를 들어 아주 많은 사용자들이 메시지를 주고받고, 실시간으로 알람 처리를 해야할 때 탁월한 성능을 보여줄 수 있습니다. 그렇다면 거두절미하고 일단 nodeJS를 다운로드하여보겠습니다. nodeJS 공식 홈페이지에 접속합니다. Node.js Node.js® is a JavaScript runtime built on Chr..

안녕하세요~! 오늘의 포스팅에서는 간단한 로딩바를 만들어 주는 방법을 알아보겠습니다. 웹 사이트나 모바일 화면에서 무언가 데이터 처리를 할 때 화면 중앙에 빙글빙글 돌아가는걸 다들 본 적이 있을겁니다. 이렇게 생긴 녀석인데요, 오늘은 바로 이녀석을 화면 중앙에서 돌아가게 만들겠습니다. 원리는 아주 간단합니다. 무언가 동작이 걸릴 때, 화면을 클릭하지 못 하도록 막아놓고, 가운데에 저 이미지를 띄우면 끝입니다. 예를 들어 게시판에 올릴 글을 입력하고 확인버튼을 눌렀는데, 로딩바가 뜨지 않는다면 확인버튼을 계속 누를수 있겠죠? 확인버튼을 여러번 누른다면 에러가 발생할 지도 모르니 애초에 그렇게 하지 못하도록 막아버리는 겁니다. 자 그럼 코드를 살펴 보겠습니다. #back{ position: absolute;..

안녕하세요~ 이번 포스팅에서는 Modal창을 띄워주는 방법을 알아보겠습니다. 모달은 팝업창과 비슷하지만 약간은 다른 개념입니다. 팝업은 창이 띄워져 있는 동안에도 부모 페이지를 컨트롤 할 수 있지만, 모달은 창이 띄워져 있는 동안에는 부모 페이지를 컨트롤 할 수 없다는 차이점이 있습니다. 그럼 코드를 통해 어떻게 모달을 띄워서 사용하는지 알아보겠습니다. MODAL Modal창 테스트입니다. 일단 HTML과 CSS를 작성해 주겠습니다. CSS는 꾸미고 싶은대로 꾸며주시면 되겠습니다. 모달창을 띄워주고 없애주는 스크립트를 작성해 줍니다. 이렇게 해주면 아래처럼 모달창이 페이지 로딩 시에 나오게 됩니다.

오늘은 Jquery플러그인 중 날짜를 컨트롤할 수 있는 datepicker, daterangepicker에 대해 알아보겠습니다. 쉽게 말해서 달력을 띄워 원하는 날짜나, 원하는 날짜 범위를 지정할 수 있게 해주는 플러그인입니다. 먼저 달력을 넣어줄 input창을 만들어 줍니다. 이제 이 input창을 클릭하면 달력이 뜨게 만들어 줘야 합니다. datepicker를 사용하기 위해 필요한 js, css를 선언해 줍니다. 그 다음 스크립트에서 위의 코드만 작성해주면 달력이 뜨게 됩니다. 이런식으로 달력이 뜨게 됩니다. $("#datepicker").datepicker({ dateFormat: 'yy-mm-dd', //날짜 표시 형식 설정 showOtherMonths: true, //이전 달과 다음 달 날짜를 ..

안녕하세요~! 오늘은 간단히 html 테이블을 조작하는 방법을 알아볼 예정입니다. 테이블의 각 Row에 마우스를 올려 놓으면 색깔이 변하게 하는 방법과 각각의 tr, td에서 데이터를 가져오는법에 대해 알아보겠습니다. 일단 테이블이 필요하니 간단한 테이블을 하나 만들어 보겠습니다. sample1 sample2 sample3 sample4 sample1 Text1 Text2 Text3 Text4 sample2 Text11 Text22 Text33 Text44 sample3 Text111 Text222 Text333 Text444 sample4 Text1111 Text2222 Text3333 Text4444 테이블을 하나 만들었습니다. 지금은 마우스를 올려도 아무런 변화가 없습니다. 스타일 태그에 위의 cs..