남고생들의 소소한 개발 일지

이번 시간에는 비동기 처리에 대해 알아보겠습니다. 전 시간에 배운 콜백은 비동기 처리에서도 유용하게 사용됩니다. 콜백에 대해 안배우신분들은 아래 링크에서 학습해주세요 [JS] 값으로서의 함수와 콜백 (1) 비동기 처리는 시간이 오래 걸리는 작업이 있을 때 이 작업이 완료된 후에 처리해야 할 일을 콜백으로 지정하면 해당 작업이 끝났을 때 미리 등록한 작업을 실행하도록 할 수 있습니다. 아래 예제는 일반적인 환경에서는 작동하지 않고 서버 환경에서만 동작합니다. datasource.json.js {"title":"JavaScript","author":"egoing"} ----------------------------------------------------- demo1 코드 한줄한줄 살펴보겠습니다. jqu..

JavaScript에서는 함수도 객체다. 다시 말해서 일종의 값이다. 거의 모든 언어가 함수를 가지고 있다. function a(){} 위의 예제에서 함수 a는 변수 a에 담긴 값이다. a = { b:function(){ } }; 다음과 같이 함수는 객체의 값으로 포함될 수 있다. 이렇게 객체에 담긴 함수 b와 같은 것을 메서드(method)라고 부른다. function cal(func, num){// func = increase, num = 1// func = decrease, num = 1 return func(num)// increase(1)// decrease(1) } function increase(num){// num = 1 return num+1// return 2 } function dec..

변수 혹은 함수에는 유효범위(Scope)가 있다. Javascript같은 경우에는 var형은 function scope고, let과 const는 block scope다. function scope란 말 그대로 함수 내에서 유효한 범위를 말하고, block scope는 중괄호를 기준으로 유효한 범위를 말한다. function test(){ var a = 10; } console.log(a); //Error for(var i = 10; i

정규표현식이란 문자열에서 특정한 문자를 찾아내는 도구이다. 정규표현식 생성하는 방법에는 2가지가 있다. 첫 번째 정규표현식 리터럴 리터럴은 /로 찾고자 하는 패턴을 감싸는 방법이다. 두 번째 RegExp객체 RegExp객체는 정규표현식 객체를 만들어 괄호 안에 찾고자 하는 패턴을 넣어주는 방법이다. 이제 만든 정규표현식을 실행해보겠다. RegExp.exec는 실행결과를 배열로 리턴하는 방법이다. 정규표현식 a에는 /a/가 들어가 있어서 abcd 중에 a를 찾은 후 배열로 리턴을 해주었다. 만약 여기서 a가 없다면 결과값은 널이 나온다. RegExp.test는 test 인자 안에 패턴에 해당하는 값이 있으면 true 아니면 false를 리턴해준다. 참고자료 : https://opentutorials.org..

UI UI란 User Inteface의 약자로 사용자와 컴퓨터 간에 상호작용을 할 수 있게 해주는 것들을 말한다. 예를 들어 우리가 구글에 A를 검색한다고 해보자. 마우스로 브라우저를 열고, 키보드로 A를 입력을 하고 돋보기 모양의 버튼을 누르면 컴퓨터는 모니터에 A의 검색 결과를 출력을 해준다. 검색을 위해 사용한 하드웨어와(키보드, 마우스, 모니터) 소프트웨어(버튼) 등을 UI라고 볼 수 있다. API API는 Application Programming Interface의 약자로 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다. UI와 다른 점은 UI는 사용자와 사용자가 사용할 대상을 연결을 해준다면 API는 프로그램과 프로..

모듈이란 로직들을 재사용할 수 있도록 별도의 모듈로 떼어내어 이걸 또 다른 프로그램에 응용할 수 있도록 한다. 하지만 자바스크립트에서는 모듈이라는 개념이 분명하게 존재하지 않는다고 한다. 자바스크립트가 구동되는 환경을 호스트 환경이라고 하는데 그 호스트 환경에 따라 다른 언어의 모듈처럼 사용할 수 있는 방법들을 제공하고 있다. 간단한 코드를 가져와봤다. 이 코드중 빨간 네모안에 있는 코드를 다른 파일에도 중복이 된다면 굳이 반복적으로 쓰지 않고 하나에 파일로 묶고 저 빨간 네모 안에 있는 코드를 지우고 main.js라는 스크립트 파일을 만들어 파일안에 코드를 다시 넣어보았다. 이 상태로 실행한다면 될까? 하지만 되지 않는다. 왜냐면 main이라는 파일을 불러오지 않아서이다. head 부분에 이렇게 불러준..

이번에는 객체에 대해 알아보겠습니다. 객체 지금까지 배운 배열은 아이템에 대한 식별자로 숫자를 사용했습니다. 만약 인덱스로 문자를 사용하고 싶다면 객체를 사용해야 합니다. 아래 예제를 보겠습니다. var grade = {'A': 10, 'B': 20, 'C': 30}; alert(grade['C']); grade라는 변수에 'A': 10, 'B': 20, 'C': 30 라는 객체를 넣어 C를 알림창에 띄워라 위 예제를 F12을 눌러 콘솔 창에서 확인해 보겠습니다. 이처럼 객체는 자바스크립트에서 값을 담는 그릇이라고 생각 하시면 됩니다. 이번에는 반복문과 객체를 같이 사용 해 보겠습니다. 예제를 보겠습니다. var grade = {'A': 10, 'B': 20, 'C': 30}; for(grade2 in ..

배열 : 여러 개의 데이터를 하나의 변수에 저장하기 위한 것 배열의 생성 var member = ['0번방', '1번방', '2번방'] alert(member[0]);//0번방 alert(member[1]);//1번방 alert(member[2]);//2번방 VALUE 0번방 1번방 2번방 INDEX 0 1 2 배열의 효용 function get_member1(){ return 'member1'; } document.write(get_member1());//member1 function get_member2(){ return 'member2'; } document.write(get_member2());//member2 function get_member3(){ return 'member3' } docum..