전체 글91

• 

  [JavaScript] 학습정리 - 10.String 객체 이번에는 자바스크립트에서 가장 많이 사용하는 String 객체를 알아보자. String 객체의 속성과 메서드에서 자주 사용하는 것을 하나씩 확인해 보자. string.length String 객체는 length 프로퍼티로 문자열의 길이를 알 수 있다. var msg = "Hello JavaScript"; console.log(msg.length); >> 16 string.prototype 프로토타입 속성은 String의 프로토타입 객체를 나타낸다. 이런 속성이 있다는 정도로 알아두자. string.charAt(pos) charAt 메서드는 문자열에서 지정된 pos 위치에 있는 문자를 반환한다. var name = 'JavaScript'; console.log(name.charAt(2)); >> v str.. ■ Front-End ■/JavaScript 2023. 3. 1.

• 

  [JavaScript] 학습정리 - 9.Number 객체 이번에는 Number 객체에 대하여 알아보자. Number 객체에서 사용하는 메서드에는 주로 값에 대한 변환하는 기능을 갖고 있다. toExponential: 소수점 이하의 숫자 개수로 지수표현 toPrecision: 표현하는 유효숫자 toFixed: 소수점 이하 자릿수만 남기고 반올림하여 표시 var value = new Number(123.456789); value.toExponential(3) // 1.235e+2 value.toPrecision(4) // 123.5 value.toFixed(3) // 123.457 number.toExponential(fractionDigits) toExponential 메소드는 숫자를 지수 형태의 문자열로 변환합니다. console.log(Math.PI.toEx.. ■ Front-End ■/JavaScript 2023. 3. 1.

• 

  [JavaScript] 학습정리 - 8.객체 이번에는 자바스크립트의 객체에 대해서 알아보자. 자바스크립트의 객체에는 내장 객체 (Built-in Object), BOM브라우저 객체 모델 객체, DOM(문서 객체 모델) 객체, 사용자 정의 객체, Number, String, Date, Math, RegExp... 와 같은 것들이 있다. 자바스크립트에서 기본 데이터 타입은 number, string, boolean, null, undefined가 있다. 이들을 제외한 다른 값, 배열, 함수 정규표현식 등은 모두 객체다. 그 모습과 작동방식은 여타 객체지향 언어와 다르며 자바스크립트 만의 잘 설계된 코드가 보편적으로 사용되기 시작되었다. 자바스크립트의 객체는 클래스가 필요 없고 이름과 값이 있는 속성들을 포함하는 컨테이너라고 할 수 있다. 자바스크립트에.. ■ Front-End ■/JavaScript 2023. 3. 1.

• 

  [JavaScript] 학습정리 - 7.조건문, 반복문 이번에는 자바스크립트의 조건문과 반복문과 같은 문장에 대해서 알아보자. 자바스크립트로 무언가 실행시키려면 문장을 사용해야 한다. 여러 문장(Statement)을 잘 사용해야 좋은 프로그래밍을 할 수 있다. 소스코드의 이해도를 높이기 위해 공백과 주석을 적절히 사용하는 것이 좋다. 공백과 줄넘김을 자바스크립트 압축기 JSMin, Packer를 사용하여 일부터 제거하기도 한다. 모든 자바스크립트 문장은 세미콜론을 사용하여 문장의 끝을 나타낸다. 한 줄의 문장에서 세미콜론이 없으면 자동으로 붙여주지만 사용자가 붙이는 것이 좋다. 자바스크립트에서 사용하는 문장은 다음과 같다. 하나씩 살펴보자. if/else switch case default while do/while for for/in break contin.. ■ Front-End ■/JavaScript 2023. 3. 1.

• 

  [JavaScript] 학습정리 - 6.연산자 이번에는 자바스크립트의 연산자에 대해서 알아보자. 그동안 프로젝트를 수행하며 별생각 없이 사용하였는데 이번 내용을 정리하면서 알게 된 사실은 생각보다 많은 연산자가 존재한다. 각각의 연산자를 예제와 함께 정리할까 했는데 생각보다 연산자의 수가 많아서 아래와 같이 심플하게 정리해 본다. 산술 연산자 : 더하기(+), 빼기(-), 곱하기(*), 나누기(/), 나머지(%), 증가(++), 감소(--) 할당 연산자 : 할당(=) 복합 연산자 : 산술 연산자와 할당 연산자와 조합으로 구성. (+=), (-=) 동등 연산자 : 동등(==) 부등 연산자 : 부등(!=) 일치 연산자 : 일치(===) 불일치 연산자 : 불일치(!==) 관계 연산자 : 작다(=) 삼항조건 연산자 : 조건부(?:) 논리 연산자 : 논리 A.. ■ Front-End ■/JavaScript 2023. 3. 1.

• 

  [JavaScript] 학습정리 - 5.변수 이번엔 변수(Variable)에 대해서 알아보자. 자바스크립트 변수는 var로 선언하고 사용한다. 변수를 선언하고 값을 지정하지 않으면 undefined이다. var 선언 없이 변수를 사용하려고 하면 에러이지만 var 선언 없이도 값을 할당하면 자동으로 선언되어 사용할 수 있다. 자바스크립트 변수는 이름, 영역, 데이터 타입으로 구성되며 다른 언어와 달리 타입이 고정되어 있지 않다. 타입이 고정되어 있지 않기 때문에 문맥에 대한 값에 따라 자동으로 변환된다. 숫자형, 문자열, 불리언, null, undefined 타입은 기본타입이며 객체, 배열, 함수는 참조타입이다. 변수의 이름을 정할 때는 첫 글자는 반드시 문자, 달러기호, 밑줄 기호 중 하나로 시작해야 한다. 자바스크립트는 대소문자를 구분하며 키워드.. ■ Front-End ■/JavaScript 2023. 3. 1.

• 

  [JavaScript] 학습정리 - 4.데이터 타입 이번 시간에는 프로그래밍 언어의 특징으로 데이터 타입에 대해 알아보자. 자바스크립트의 가장 큰 특징 중에 하나는 데이터 타입이 상당히 관대한 점이다. 자바스크립트에서 문자열, 데이터 타입, 객체 간의 경계가 불분명하다. 자바스크립트의 데이터 타입 변환에 있어서는 문맥이 매우 중요하다. null과 undefined의 값을 갖는 타입이 있다. • null : 아무런 값이 정의되지 않음 • undefined : 선언은 되었지만 값이 할당되지 않음 기본적인 데이터 타입에는 숫자형, 문자열, 불리언이 있다. 숫자형에서는 다른 언어와 달리 자바스크립트는 모든 숫자가 실수로 표현된다. 무한대를 나타내는 Infinity와 -Infinity 같은 특수한 숫자 값이 있다. isFinite()로 무한여부 확인한다. 값이 숫.. ■ Front-End ■/JavaScript 2023. 3. 1.

• 

  [JavaScript] 학습정리 - 3.안녕 JavaScript 자바스크립트로 간단한 화면을 구현해 보자. 로딩 시 버튼에 이벤트를 부여하고 클릭하면 "Hello JavaScript. *^^*"를 표시한다. 코드는 이클립스에서 작성하였고 IE 브라우저에서 실행하였다. IE 브라우저의 개발자 도구를 사용하여 디버깅도 해본다. 아래는 전체 코드입니다. Here. Click Me. 처음 표시되는 화면에 제목은 "Hello"이고 화면에는 "Here."가 표시되어 있다. Click Me 버튼을 클릭하면 제목은 "Hello JavaScript."로 화면에는 "Hello JavaScript."로 표시된다. F12 키를 누르면 개발자도구 화면이 열린다. 디버거를 선택하면 아래와 같은 화면을 볼 수가 있다. 6번 라인에 중단점(Break Point)을 삽입하였고 조사식에 msg를 추.. ■ Front-End ■/JavaScript 2023. 3. 1.

• 

  [JavaScript] 학습정리 - 2.자바스크립트의 역사 이번에는 자바스크립트 역사에 대해서 간단히 알아보자. 자바스크립트의 시작은 넷스케이프 라이브커넥트라는 서버 측 기술이었다. 라이브스크립트라는 언어로 개발했는데 마케팅 측면에서 이미 많이 알려진 "자바"를 사용하였다. 자바스크립트 역사 1995년 00월 넷스케이프 커뮤니케이션즈의 브렌단 아이히에 의해 "모카" 개발 09월 라이브스크립트로 명명 12월 자바스크립트로 명명 1996년 03월 자바스크립트 1.0 발표. 1996년 08월 자바스크립트 1.1 발표. 1997년 06월 자바스크립트 1.2 발표. 1998년 10월 자바스크립트 1.3 발표. 2000년 11월 자바스크립트 1.5 발표. ECMA1 스크립트 역사 1997년 06월 ECMA-262 첫 번째 버전 발표 1998년 06월 ECMA-262 두 번.. ■ Front-End ■/JavaScript 2023. 3. 1.

• 

  [JavaScript] 학습정리 - 1.자바스크립트 소개 웹 프로젝트를 수행해 보았다면 자바스크립트는 이미 알고 있거나 사용해 본 언어이다. 자바스크립트 언어는 장점과 단점을 갖고 있다. 자바스크립트의 장점으로는 1) 함수형 언어와 2) 느슨한 타입, 3) 리터럴 표기법, 4) 동적인 객체등이 있다. 자바스크립트 언어를 잘 사용하면 보다 좋은 프로그램을 작성할 수 있다. 1) 함수형 언어: 자바스크립트 함수는 C 언어를 입고 있는 Lisp라고 할 수 있다. 2) 느슨한 타입: 느슨한 타입의 장점은 오류 찾기의 어려움이 아니라 표현의 자유로움이다. 3) 리터럴 표기: 자바스크립트는 매우 강력한 객체 리터럴 표기법이 있다. 4) 동적인 객체: 다른 객체지향프로그래밍보다 자유롭게 동적인 객체를 만들 수가 있다. 오래전에는 브라우저 내장되어 전세로 살고 있었는데 이런.. ■ Front-End ■/JavaScript 2023. 3. 1.

• 

  [JavaScript] 자바스크립트로 구현한 멀티파일 업로드와 다운로드 이번에는 화면 측(Front-End)에서 구현된 멀티파트 업로드와 다운로드에 대해서 알아보자. 코드들은 HTML5 기준으로 작성하였다. 웹에서 멀티파일 업로드/다운로드를 구현하려면 별도의 모듈을 사용해야 한다. 하지만 HTML5가 등장하고 나서 HTML과 JavaScript만으로 구현이 가능해졌다. 먼저 멀티파일 업로드를 살펴보자. file 타입의 입력항목에 multiple 속성을 정의하면 기능을 구현할 수 있다. 아래는 멀티파트 업로드 HTML소스다. 멀티파일 업로드 아래는 처음 표시되는 화면이다. 파일선택을 클릭하면 파일선택이 가능한 열기창이 표시된다. 열기에서 1.txt와 2.txt 두 파일을 선택했다. 그리고 버튼을 클릭하면... 아래와 같이 파일선택 버튼 옆에 "파일 2개" 하고 표시된다. 참고.. ■ Front-End ■/JavaScript 2023. 3. 1.

• 

  [JavaScript] 수많은 프로젝트에서 발생하는 상위 오류 10가지 수천 개의 프로젝트를 기반으로 하여 JavaScript에서 발생하는 오류들 중 상위 10개에 대해서 살펴본다. 대부분의 오류가 null 이거나 undefined 오류로 확인되었다.​ ​ 1. Uncaught TypeError: Cannot read property 여러 이유로 발생하지만 일반적인 원인은 UI 요소를 렌더링 하는 동안 상태 초기화를 잘못하는 것이다. 이것을 해결하는 간단한 방법은 생성자에서 기본값으로 상태를 초기화하면 된다. ​​​ 2. TypeError: ‘undefined’ is not an object (evaluating 속성을 읽거나 정의되지 않은 개체에 대한 메서드를 호출할 때 발생하는 오류이다. ​ 3. TypeError: null is not an object (evaluat.. ■ Front-End ■/JavaScript 2023. 3. 1.