JavaScript (7) 썸네일형 리스트형 import / export를 이용한 파일간의 모듈식 개발 개발을 하다 보면 스크립트 코드가 길어지면서 각각 파일로 쪼개어 만드는 습관이 필요하다. 즉, API를 만들다 보면 회원가입에 필요한 API가 있을 거고 로그인에 필요한 API가 있을 텐데 이 부분을 각각 파일로 만들어 사용하다 보면 유지보수 및 시각적으로도 눈에 쉽게 띄기 때문에 반드시 필요하다. ES6에서 import/export를 쓰면 내가 원하는 변수, 함수, class만 다른 파일에서 사용할 수 있게 내보낼 수 있다. 지금부터 어떻게 사용하는지 알아보자. 파일 2개 만들기 index.html minwook.js 1. export default / import 사용 let myName = "강민욱"; export default myName; 2. index.html 사용 /**...*/ JS 파일.. 비동기처리, 콜백함수 비동기 처리? 그게 뭔가요? 자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미합니다. 비동기 처리의 첫 번째 사례 비동기 처리의 가장 흔한 사례는 제이쿼리의 ajax입니다. 제이쿼리로 실제 웹 서비스를 개발할 때 ajax 통신을 빼놓을 수가 없습니다. 보통 화면에 표시할 이미지나 데이터를 서버에서 불러와 표시해야 하는데 이때 ajax 통신으로 해당 데이터를 서버로부터 가져올 수 있기 때문입니다. 그럼 ajax 코드를 잠깐 살펴보겠습니다. function getData() { var tableData; $.get('https://domain.com/products/1', function(response) { tabl.. Const, let es2015에서는 let, const가 추가되었다. javascipt에는 그동안 var만 존재했기 때문에 아래와 같은 문제가 있었다. // 이미 만들어진 변수이름으로 재선언했는데 아무런 문제가 발생하지 않는다. var a = 'test' var a = 'test2' // hoisting으로 인해 ReferenceError에러가 안난다. c = 'test' var c 위와 같은 문제점으로 인해 javascript를 욕 하는 사람이 참 많았다. 하지만 let, const를 사용하면 var를 사용할 때보다 상당히 이점이 많다. 두 개의 공통점은 var와 다르게 변수 재 선언이 불가능이다. let과 const의 차이점은 변수의 immutable 여부이다. let은 변수에 재할당이 가능하지만, const는 변수 .. trim() 메서드 - 문자열 양쪽 공백제거 trim() 예제 - 문자열 양쪽 공백 제거 클릭 function homzzang() { var str = " 홈짱닷컴 Homzzang.com "; var res = str.trim(); document.getElementById("demo").innerHTML = res; // 결과값 : 홈짱닷컴 Homzzang.com 결과값: 홈짱닷컴 Homzzang.com substr 문자열 자르기 특정위치에서 특정 길이 만큼 반환 목차 substr() 예제 - JavaScript 경우 substr() 정의 substr() 구문 substr() 예제 - jQuery 경우 substr() 예제 클릭 결과값: zzang substr() 정의 문자열의 특정 위치 이후의 특정 길이 만큼 자르기 1. 문자열의 끝부분부터 자르려면 음수 사용 (단, 익스8 및 그 이전 버전에서는 작동 안 함.) 2. 원래 문자열의 값을 변경하는 것은 아님. 3. 주요 브라우저 모두 지원. 4. ECMAScript 1 substr() 구문 string.substr(start, length) [매개변수] string 필수. 원래 문자열 start 필수. 추출 시작 위치. ※ 양수이면서 원래 문자열보다 큰 수 지정 시 빈 문자열 반환, ※ 음수면 문자열 끝부터 추출.. javaScript 기초1 자바스크립트............................................................. 자바스크립트는 네스케이프사가 개발한 객체지향 스크립트언어로 HTML문서내에 작성하고 웹브라우저에 의해 실행된다. 웹브라우저가 가진 객체도 이용한다. 넷스케이프 네비게이터 2.0/익스플로러 3.0 이상이면 자바스크립트를 사용할 수 있다. 지금의 브라우저 상황에서는 별로 해당되지 않겠지만... 다만 브라우저마다 조금씩 지원하지 않는 것과 지원하는게 조금 차이가 있다. 자바스크립트는 작성자의 입장에서 보면 HTML이 버전업된 것처럼 자연스럽게 받아들여도 무방할 듯 싶다. HTML과 달리 에디터가 도와주지 않는게 흠이지만.... ■ 웹문서에 꼭 필요한 자바스크립트의 기능을 살펴보면 • 새창을.. jQuery ready와 load 알아두기 자 마음에 드는 편집기를 실행해주세요. 윈도우에서는 무료 노트패드++, 유료 에디터플러스를, 맥에서는 무료 TeextWrangler 유료coda2를 추천합니다. 무엇을 사용하던 크게 상관 없습니다. 다만 기본적으로 Syntax Highlight1를 지원하는 편집기를 이용하세요. 가끔 "나때는~ 아무것도 없는 노트패드(메모장)로 ...어쩌고" 라고 으시대는 사람도 있지만요. 위 이미지와 같이 한개의 html 문서를 만드세요. 앞장에서 배운 jQuery를 불러오는 소스를 사이에 넣었습니다. 그리고 우리가 편집해야할 부분은 바로 5번째 라인입니다. 보통의 경우 console.log를 사용하여 콘솔에 로그를 찍어봅니다만, 확실히 확인하기 위하여 alert함수를 사용하기로 합니다. alert함수는 알다시피 파라메.. 이전 1 다음
