본문 바로가기

IT_Developers/Javascript54

jQuery - parent() 부모요소를 선택하기 제이쿼리를 사용해, 부모요소 찾기 안녕하세요. 고코더 입니다. ● 1. jQuery에서 해당 요소위에 바로 위에 존재하는 부모 요소를 선택하는 방법을 알아보겠습니다. 실무에서 자주 사용하는 3가지 정도의 방법이 있지만 오늘은 하나의 부모 요소를 반환하는 parent() 를 사용해보겠습니다. ● 2. 해당 p태그의 상단에는 div 태그가 있습니다. 이를 한번 선택해보도록 하겠습니다. 부모를 찾아라 ● 3. 방법은 간단합니다. 자식요소에서 부모 요소를 찾는 방법은 .parent();를 사용합니다. $('p').parent(); ● 4. 조금 더 응용 해보겠습니다. 해당 처럼 사용하면 div 라는 태그가 선택되어, div 가 출력 됩니다. var tag = $('p').parent().prop('tagName.. 2021. 6. 29.
JavaScript - 배열 숫자 데이터 정렬하기 / sort(); 자바스크립트 배열 숫자 정렬 방법 안녕하세요. 고코더 입니다. 오늘은 자바스크립트에서 배열에 담긴 데이터를 정렬할 수 있는 함수를 한번 알아보려고 합니다. 내장 함수로 있는 바로 sort()가 그 주인공입니다. 오늘은 그중에서도 문자와 숫자를 정렬하는 방법을 알아보겠습니다. ● 1. 먼저 정렬할 배열을 선언합니다. data라는 변수에 정렬되지 않은 데이터를 입력하였습니다. var data = [1, 11, 12, 2, 3, 4]; ● 2. 이제 sort()를 기본으로 사용해 정렬해보겠습니다. 결과 값을 보시면 알겠지만 숫자도 문자 순서대로 정렬되어 뒤죽 반죽이 되었습니다. 1 다음 11이 오는 특징을 확인할 수 있습니다. data.sort(); // 결과값 [1, 11, 12, 2, 3, 4] ● 3. .. 2021. 4. 1.
Vanilla js - 바닐라 JS란? 무엇일까? / vanilla-js.com/ 바닐라 JS는 순수 자바스크립트다? 안녕하세요. 고코더 입니다. ● 1. 자바스크립트, 커피스크립트, 타입스크립트, 제이쿼리 등등 스크립트라는 이름도 참 많습니다. 요즘은 리액트, 뷰 까지 js 라는 이름이 들어간 네이밍이 많고 많습니다. 그중에서도 가장 특이한 이름을 뽑으라고 하면 아마도 "Vanilla JS" 바닐라 JS 라는 말은 좀 더 낯설 것입니다. 이 단어는 개발자도 모르는 경우가 많습니다. 도대체 맛있어 보이는 바닐라 JS는 무엇인지 한번 알아보겠습니다. ● 2. 해당 바닐라 JS를 알려주는 홈페이지를 방문해보겠습니다. 빠르고 가볍고 믿을 수 있는 자바스크립트라고 소개하고 있습니다. http://vanilla-js.com/ ● 3. 그리고 아래에는 다운로드 할 수 있는 버튼이 보입니다. 원하.. 2021. 2. 13.
JavaScript - setInterVal() 이란? / 반복 실행 메서드 / clearInterval() 스케줄러 실행 메서드 setInterVal() 안녕하세요. 고코더 입니다. ● 1. 오늘은 일정 시간을 두고 실행을 반복하는 메서드인 setInterVal에 대해 알아보겠습니다. 현업에서도 이 메서드는 자주 활용되는 기능입니다. 사용자의 상태를 체크하거나 매 초마다. 브라우저에 변화를 나타내기도 합니다. 대표적인 게 타이머 기능을 만들 때는 이 함수를 사용하게 됩니다. ● 2. 기본 사용방법 2번 라인 : 실행 코드를 넣습니다. 3번 라인 : 반복 실행 시간을 입력합니다. 1,000은 1초입니다. 100은 10/1 초입니다. setInterval( 실행코드, 1000 ); ● 3. 사용 시 주의할 점은 큰따옴표 묶어서 사용해야 제대로 동작합니다. setInterval("console.log('Timer .. 2021. 1. 24.
JavaScript - let 은 IE11 버전부터 제공합니다. let는 ie10에서 사용이 불가 안녕하세요. 고코더 입니다. ● 1. 프런트엔드를 개발하다 보면 항상 익스플로러가 문제입니다. 유난히 혼자 튀는 거 같습니다. IE11 이 es6을 지원한다고 하지만 다른 브라우저들 모두가 사용하는 기능을 혼자 사용하지 않는 경우가 있습니다. //let let letGoCoder= 123; ● 2 대표적인 게 아마 이것이 아닌가 싶습니다. 바로 let입니다. 물론 ie11부터는 정확히 말하며 부분 지원입니다. 오류가 있기 때문입니다. for문에서 개별적으로 바인딩되지 않는 문제입니다. ● 3. 뭐 그렇다면 방법 없죠. var를 사용하시면 됩니다. // var var varGoCoder= 123; 마무리 익스 그만 운영해도 좋을 거 같은 2021. 1. 18.
WebRTC 란? - 개발한 곳은?, 탄생, 문제점, 대표API / 이론 위주로 쉽게 설명 WebRTC를 간단하게 알아보기 안녕하세요. 고코더 입니다. 오늘은 무료 API로 실시간 통을 가능하게 하는 WebRTC에 대해 알아보려고 합니다 한줄 요약 ● 1. 고코더가 생각하는 한줄 요약은 "웹브라우저만으로 플러그인 도움 없이 실시간으로 고품질 커뮤니케이션 기술로, 영상, 음성 및 데이터 통신을 하는 자바스크립트 API이다." 구글이 시작한 프로젝트 ● 2. WebRTC 공식 홈페이지 입니다. 접속하면 Real-time communication for the web(웹을 위한 실시간 커뮤니케이션) 이라고 정체성을 드러내는 문구가 인상적입니다. 그리고 하단에 보면 Google Developers (구글 개발팀)의 로고가 보입니다. https://webrtc.org/ ● 3. WebRTC 소스 저장소.. 2020. 3. 31.
JavaScript - 호이스팅이란? 간단한 예제로 알아보기 / Hoisting 호이스팅 쉽게 알아보자 안녕하세요. 고코더 입니다. 오늘은 자바스크립트 언어의 고유한 특징인 "호이스팅(Hoisting)"을 간단하게 알아보겠습니다. 저는 최대한 한눈에 알아 볼 수 있게 쉽게 설명하려고 합니다. 개념 ● 1. 호이스팅의 단어의 뜻 영어 사전을 보면 해당 단어의 뜻이 "끌어 올리기; 들어올려 나르기."라고 사전에 나옵니다. 이 개념의 의미는 선언들을 끌어올려 최상단에 갖다. 두는 걸 이렇게 표현했습니다. ● 2. 호이스팅의 개념 - 자바스크립트가 실행되면 parser가 빌드하면서 문법을 검사합니다. 이 와중에 끌어올릴 값을 선택하여 내부적으로 최상단으로 끌어 올려 처리합니다. - 여기서 끌어 올려질 내용들은 선언입니다. var, let, const, function 등이 대표적입니다. -.. 2020. 3. 30.
네이버 진도 - Jindo 프레임워크는 사용하지 마세요 진도는 공부하지 않아도 됩니다. 안녕하세요. 고코더 입니다. ● 1. 후배 개발자가 Jindo 프레임워크를 공부해도 되냐는 질문에 단호하게 "No" 라고 대답했습니다. 진도는 네이버가 만든 국산형 자바스크립트 프레임워크 입니다. 제이쿼리를 대항하는 유일한 국산기술이었습니다. 네이버는 프론트 엔드 개발을 Jindo를 활용해서 개발하였고 자체적으로 계속 개발해왔습니다. 개인적으로 국산형 프레임워크에 대한 자부심으로 저도 공부하고 했었지만 이제는 굳이 사용하거나 공부할 필요가 없습니다. 왜냐면 2017년에 이 서비스의 개발과 유지보수를 포기하였습니다. 진도 홈페이지에 들어가면 노란 레이어로 친절하게 사용하지말고 기존에 Jindo 또한 제이쿼리로 변경하라는 지침을 공지했습니다. http://jindo.dev.n.. 2020. 1. 20.
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.