본문 바로가기

javascript25

Vanilla js - 바닐라 JS란? 무엇일까? / vanilla-js.com/ 바닐라 JS는 순수 자바스크립트다? 안녕하세요. 고코더 입니다. ● 1. 자바스크립트, 커피스크립트, 타입스크립트, 제이쿼리 등등 스크립트라는 이름도 참 많습니다. 요즘은 리액트, 뷰 까지 js 라는 이름이 들어간 네이밍이 많고 많습니다. 그중에서도 가장 특이한 이름을 뽑으라고 하면 아마도 "Vanilla JS" 바닐라 JS 라는 말은 좀 더 낯설 것입니다. 이 단어는 개발자도 모르는 경우가 많습니다. 도대체 맛있어 보이는 바닐라 JS는 무엇인지 한번 알아보겠습니다. ● 2. 해당 바닐라 JS를 알려주는 홈페이지를 방문해보겠습니다. 빠르고 가볍고 믿을 수 있는 자바스크립트라고 소개하고 있습니다. http://vanilla-js.com/ ● 3. 그리고 아래에는 다운로드 할 수 있는 버튼이 보입니다. 원하.. 2021. 2. 13.
JavaScript - 호이스팅이란? 간단한 예제로 알아보기 / Hoisting 호이스팅 쉽게 알아보자 안녕하세요. 고코더 입니다. 오늘은 자바스크립트 언어의 고유한 특징인 "호이스팅(Hoisting)"을 간단하게 알아보겠습니다. 저는 최대한 한눈에 알아 볼 수 있게 쉽게 설명하려고 합니다. 개념 ● 1. 호이스팅의 단어의 뜻 영어 사전을 보면 해당 단어의 뜻이 "끌어 올리기; 들어올려 나르기."라고 사전에 나옵니다. 이 개념의 의미는 선언들을 끌어올려 최상단에 갖다. 두는 걸 이렇게 표현했습니다. ● 2. 호이스팅의 개념 - 자바스크립트가 실행되면 parser가 빌드하면서 문법을 검사합니다. 이 와중에 끌어올릴 값을 선택하여 내부적으로 최상단으로 끌어 올려 처리합니다. - 여기서 끌어 올려질 내용들은 선언입니다. var, let, const, function 등이 대표적입니다. -.. 2020. 3. 30.
JavaScript - 자바스립트에서 문자열은 큰 따옴표? 작은 따옴표? 자바스크립트 리터럴 문자는 어떤 따옴표로? 안녕하세요. 고코더 입니다. ● 1. 자바스크립트 소스를 보면 문자열을 감싸는 따옴표가 저마다 조금 다른 경우가 있습니다. 12var a = "문자"var b = '문자'cs ● 2. 자바(java)에서는 리터럴 문자 즉 한글자 문자열은 작은 따옴표를 사용합니다. 긴 문자열에 작은따옴표를 사용하면 오류가 납니다. 123char c = 'g';String s = "gocoder"; cs ● 3. 그리고 반대로 SQL에서는 문자열을 큰 따옴표로 사용하게 되면 오류가 납니다. 1WHERE gocoder = 'IT';cs ● 4. 그래서 저마다 의견이 갈리는 경우가 있습니다. 프로시저 개발자들에겐 큰 따옴표로 문자열을 처리한다는게 어색하고 자바 개발자는 반대로 작은 따.. 2019. 12. 9.
JavaScript - getTime()에서 출력되는 값은 어떤 기준일까? getTime으로 표현한 데이터 15자리는 무슨 의미? 안녕하세요. 고코더 입니다. 자바스크립트에서 getTime()은 자주 사용하는 함수 입니다. 시간이 1/1000 까지 나타내주므로 페이지에 로딩 시간을 체크할 수도 있고 채팅에서는 아주 좋은 시간 값으로 사용이 가능합니다. ● 1. 그런데 숫자 모양이 조금 이상하게 느껴질 수 있습니다. 현재 getTime 을 가져오면 이와 같은 값이 나타납니다. 1574663052422 ● 2. 이건 1970.01.01 이후 부터 경과한 시간을 milliseconds 단위 그러니깐 1/1000단위로 표현된 숫자 표현입니다. 그래서 반대로 1970년대 이전으로 날짜로 하고 계산을 하면 이렇게 마이너스 값을 확인 가능합니다. -315619200000 ● 3. 결론은 1.. 2019. 11. 25.
javascript - 자바스크립트란? 그리고 개발자에게 자바스크립트란? 자바스크립트란? 안녕하세요. 고코더 입니다. 자바스크립트는 넷스케이프 커뮤니케이션즈 코퍼레이션사에 브래던 아이크가 개발한 객체기반의 스크립트 언어 입니다. HTML과 CSS로 만들어진 정적인 화면을 동적으로 변경해주는 언어입니다. 페이지에 컨텐츠를 변경하거나 이미지를 움직이게 하거나 그리기도 할 수 있습니다. 그 밖에도 동적인 모든것을 이벤트를 주어 사용할 수 있게 합니다. 자바스크립트의 특징은 이렇습니다. 1. 상속과 클래스 개념이 없는 객체 기반의 언어이다 2. 인터프리터 언어로 브라우저에 의해 해석 가능하다. 3. HTML 문서 안에 기술 가능하고 함께 수행한다. 4. 클라이언트 자원을 활용할 수 있게 한다. 자바스크립트의 구성 1. 객체 - 사용자 정의 객체, 내장 객체, 브라우저 객체를 사용할 .. 2019. 11. 22.
JavaScript - 배열에 값을 추가/ unshift(), push() array 에 데이터를 추가 하는 방법 안녕하세요.고코더 입니다. 자바스크립트에서 배열은 매우 중요합니다. 특히 데이터를 배열에 추가하여 다시 사용하는건 프론트엔드 개발의 기본입니다. 그래서 오늘은 배열에 값을 넣는 대표적인 2가지 방법인 push()와 unshift()를 배워보겠습니다. ● 1. push() : 배열 뒤에 값을 입력한다. push()는 배열 뒤에 값을 입력하는 대표적인 배열에 값을 추가하는 방법입니다.배열을 선언하고 해당 배열에 push로 데이터를 넣는 방식입니다. 뒤로 순차적으로 데이터가쌓이기에 백엔드에서 전달해주는 데이터 그대로를 담을 수 있습니다. 123456 jvar arryData = []; //배열을 선언 arry = { "name" : 'gocoder', "url" : 'g.. 2019. 10. 21.
JavaScript - 문자열 맨 뒷자리 잘라내기 / slice를 이용한 쉬운 방법 자바스크립트로 문자 뒤에서부터 제거하기 안녕하세요.고코더 입니다. ● 1. 프론트엔드 개발을 하다보면 꼭 끝에 한 글자가 문제입니다.이 글자를 짤라내려면 많이 사용하는 방법은 이렇게 하셨을텐데요 1. 문자열 길이를 잰다2. -1를 한다3. -1한 길이만큼 가져온다 ● 2. 그 보다 더 쉬운 방법이 있습니다. 내장 객체인 배열을 다루는 slice()를 이용하는 방법입니다. var text = "http://gocoder.net/"; textSlice = text.slice(0,-1); // http://gocoder.net ● 3. 예제 소스로 다시 한번 살펴보겠습니다.1234567891011 var text = "http://gocoder.net/"; textSlice = text.slice(0,-1);.. 2019. 10. 21.
jQuery - 가장 간단한 슬라이드 HTML / Coin Slider 슬라이드 쇼 애니메이션 가장 쉽게 구현 가능한 플러그인 안녕하세요. 고코더 입니다. 슬라드 쇼를 하는 기능에 플러그인은 참 많습니다. 많은 개발자들이 저마다에 방식으로 만들어 놓았습니다. ● 1. 그런데 이번에 소개할 슬라이드 쇼 HTML은 가장 간단하게 구현 가능한 플러그인을 소개해드립니다. 바로 COIN SLIDER 입니다. http://workshop.rs/projects/coin-slider/ ● 2. 얼마나 간단한지 제가 예제를 한번 만들어 보았습니다. 아래 코드를 참조해주세요. 1234567891011121314151617181920212223242526272829 $(document).ready(function() { coinslider({width:260,height:146,navigati.. 2019. 7. 17.
자바스크립트 - location.href 와 location.replace 차이점 javascript location.href, location.replace 가장 큰 차이 안녕하세요. 고코더 입니다. ● 1. 가장 큰 차이점은 뒤로 가기시에 페이지 기억 여부 입니다. ● 2. 해당 기능을 표로 만들어 비교 해보았습니다. 함수명 location.href location.replace 기능 페이지로 이동 페이지 변경 뒤로가기 가능 불가능 사용방법 location.href='gocoder.php' location.replace('gocoder.php') ● 3. 보통 다시 돌아가면 안되는 페이지 로그인 후라던가 프로세스를 로직을 완료한 후에는 replace로 페이지를 사용합니다. 저는 홈페이지 아래 링크에서 replace를 사용하였습니다. -> XE - 특정 URL 접속시 다른 페이지로 .. 2019. 7. 15.

티스토리툴바