본문 바로가기

IT

 (120)
프로그래밍 언어 자바스크립트를 추천하는 이유 오늘은 개발자로서 제가 가장 오래 사용하였고 자주 사용하는 언어인 자바스크립트로 할 수 있는 것들을 간단하게 소개하고 프로그래밍 입문 언어로써 제가 해당 언어를 가장 추천하는 이유를 짧게 설명하고자 합니다. 우선 초보 개발자 입문 언어로 자바스크립트를 추천하는 이유는 아래와 같습니다. 1. 프로그래밍 언어 중 입문 난이도가 가장 낮은 편입니다. - C , C++, JAVA 등 전통적이고 오래된 언어보다 굉장히 입문이 쉽고 사용하기 편합니다. - 유명한 프로그래밍 언어 비교 밈 중 하나인 hello world 비교 밈만 보더라도 동일한 작업을 하려고 해도 언어마다 Line 수나 해야 되는 작업이 차이 있다는 걸 알 수 있습니다. 자바스크립트는 메이저 프로그래밍 언어 중에는 파이썬과 함께 가장 짧고 간결하게..
자바스크립트 배열 자르기(JavaScript Array Slice) 자바스크립트의 배열을 자르는 정석적인 방법은 보통 내장 메서드인 slice 메서드를 사용하는것입니다. slice() 메서드는 어떠한 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환하는 메서드 입니다. 이때 중요한 것은 얕은 복사본을 반환 하며 원본 배열은 바뀌지 않습니다. 구문은 아주 간단한데 아래와 같습니다. array.slice([begin[, end]]) [간단 요약] array 는 자르기를 할 원본 배열 객체명이며, begin 에는 자르기를 시작할 배열의 첫 자리수가 들어가고 end 에는 추출을 종료할 배열의 자리수 입니다. [자세한 설명] begin : 0을 시작으로 하는 추출 시작점에 대한 인덱스를 의미합니다. 양수로 begin 인덱스를 지정하는 ..
자바스크립트(JavaScript) 논리 연산자 ( ||, &&, ! ) 설명 오늘은 자바스크립트의 논리 연산자에 대하여 짧고 간단하게 설명드리고자 합니다. 보통의 언어에서 논리 연산자는 Boolean (true / false) 값을 반환합니다. 하지만 자바스크립트에서 논리 연산자는 피연산자 중 하나의 값을 반환하는 용도로도 자주 사용됩니다. 말로 설명하니 복잡해 보이는데요. 예제와 함께 코드로 보시면 아주 쉽고 빠르게 이해하신 후 실제 코드에서 사용하실 수 있습니다. 우선 간단하게 논리 연산자 코드는 총 3가지로 분류됩니다. 연산자 표기법 구문 구문 치환 설명 논리 AND && example1 && example2 example1 AND example2 example1 이 true 인 경우 example2 을 반환하고 그렇지 않은 경우 example1을 반환 논리 OR || ex..
이클립스(Eclipse) 자바스크립트 에디터 설정하는법 오늘은 이클립스(Eclipse) IDE를 사용할 때 자바스크립트(javaScript) 에디터를 사용하는 법에 대하여 짧고 간단하게 포스팅해보고자 합니다. 해당 환경의 스크린샷 등은 STS(Spring Tool Suite 4 Version)에서 진행하였지만 이클립스 환경일때도 세팅법은 동일하기 때문에 따라서 해주시면 됩니다. 이클립스로 프로젝트를 진행하다 보면 가끔 나는 분명히 .JS 파일을 OPEN 하였지만 아래와 같이 아무런 에디터스러움 없이 그냥 흰 배경에 검정색 글자로만 주르륵 쓰여있고 자동완성이나 변수명, 함수명, 예약어 등에 기본 색표기 등이 전혀 없는 경우를 마주할 때가 있습니다. [자바스크립트 에디터 설정 전] [자바스크립트 에디터 설정 후] 이때 해당 파일을 잘 보시면 아래와 같이 기본 T..
HTML6 Version Up(release date, html6 버전 출시 소식) [ 결론만 필요하신 분은 가장 하단에서 확인 부탁드립니다. ] 최근 외국 블로그나 커뮤니티를 시작으로 html6 출시와 관련된 소식들이 갑자기 돌기 시작했습니다. 덩달아서 제 블로그인 "html6.tistory" 도 단지 "HTML6"가 주소에 들어간다는 이유만으로 검색엔진의 노출량과 클릭수가 1000~4000%씩 급격하게 증가하기 시작했는데요. 저도 현재 html5를 사용하고 있고 전산 밥을 먹고 있는 사람이기 때문에 당연히 html6 출시 소식이 궁금하여 더 찾아보게 되었습니다. 근데 제가 관련 소식을 처음 접한 곳은 특정 외국 블로그를 번역한 개인 블로그였으며, 그 외국 블로그마저 공신력 있다고 보기엔 애매한 티스토리 같은 개인 블로그였습니다. w3.org ( https://www.w3.org/ )..
티스토리 블로그에 태그 페이지 추가하기 (tag page) 오늘은 티스토리 블로그에 태그 페이지 추가하는 법을 간단하게 보여드리고자 합니다. 티스토리는 기본적으로 사용자가 게시글에 작성하였던 태그들을 수집하여 가지고 있습니다. 이를 아래처럼 "블로그주소/tag" 라는 페이지에 모아두고 있는데요. https://html6.tistory.com/tag 태그 목록 IT 개발(GA,웹,프로그래밍)/ 방송통신대학교 자료 / 바람의나라 통계 등 다양하게 업로드 합니다. html6.tistory.com 티스토리에 스킨 중에는 이 태그로 이동하는 일종에 태그 바를 제공하지 않는 스킨들이 많이 있습니다. 이런 경우 스킨에서 제공하지 않지만 내가 HTML을 수정하여 태그 페이지로 이동하는 일종에 버튼을 추가하면 사용자들이 내 블로그에서 원하는 키워드를 보는데 도움이 되지 않을까 ..
웹페이지 전체화면 한번에 캡쳐하기(Capture full size screenshot) 오늘은 브라우저에서 웹페이지의 전체 화면을 한 번에 캡처하는 방법에 대하여 알아보겠습니다. 주로 해당 기능은 아래와 같은 키워드로 많이들 찾는 기능입니다. full page screen capture page capture 페이지 캡쳐 웹페이지 캡처 화면 캡처 브라우저 캡처 인터넷 사이트 캡처 스크롤 없이 화면 캡처 전체 화면 캡처 인터넷 캡처 등 수많은 키워드가 있지만 결국에 핵심은 "내가 현재 보고 있는 웹 페이지의 화면을 캡처하는 것"입니다. 크롬 브라우저를 사용하시면 어떠한 프로그램이나, 플러그인 설치 등이 없이. "무설치"로 10초 만에 바로 보고 있는 화면을 스크롤 없이 한 번에 전체 캡처할 수 있습니다. 우선 크롬 브라우저가 없으신 경우 아래 URL에서 구글 크롬 브라우저를 설치해 줍니다. ..
React vs Vue vs Angular ( JS Framework 간단 비교 ) 오늘은 자바스크립트 프레임워크 중 가장 유명한 React / Vue / Angular 특징과 함께 간단하게 비교해보도록 하겠습니다. 우선 각 프레임워크의 간단한 특징은 아래와 같습니다. React - 웹 뿐만 아니라 앱 개발에도 사용 ( React Native ) - 페이스북이라는 거대한 업체의 지원 - 가장 거대한 커뮤니티 - Virtual Dom HomePage : reactjs.org/ Repository : github.com/facebook/react Vue - 가장 적은 러닝커브 ( jQuery 등에 익숙한 기존 개발자도 가장 편하게 도입 가능 ) - 가볍고 빠르게 개발이 필요하다면 추천 - Evan You 라는 개인이 프로젝트 리더 - 2019년에 메인 리더인 Evan You 의 홍콩 시위 ..

티스토리툴바