전체 글101

• 

  [Node.js] w3cschool의 MySQL 튜토리얼 실행할 때 유용한 팁 1. 개요 w3schools 사이트에서 Sever Side 기술로 Node.js를 소개하고 있다. Node.js를 사용하여 MySQL 데이터베이스와 연계하는 튜토리얼이 잘 정리되어 있다. 한 페이지씩 보면서 w3schools 사이트에 있는 예제 코드를 실행하는 것으로도 충분한 학습이 가능하다. ​ https://www.w3schools.com/nodejs/nodejs_mysql.asp ​ 2. 문제점 MySQL 데이터베이스가 설치되어 있으면 mysql 모듈을 설치하면 아래의 코드를 실행해 볼 수 있다. 다음의 코드를 보면 w3cschool 사이트에서 친절하게 user 계정과 비밀번호를 yourusername, yourpassword라고 되어 있다. 코드를 복사해서 해당 부분을 실행하려는 MySQL의 계정.. ■ Front-End ■/Node.js 2023. 2. 26.

• 

  [Node.js] exports와 require를 사용하여 모듈을 구성한다. 1. 개요 Node.js에서 exports와 require를 사용해서 모듈을 구성할 수 있다. 독립적이며 재사용 가능한 기능 단위로 만들 수 있다. exports 객체에 속성이나 메서드를 정의하여 모듈을 만들고 requeire() 함수를 사용하여 외부 모듈을 불러온다. ​ ​ 2. 예제 먼저 모듈로 만들려고 하는 js 파일에 함수를 정의하고 참조 변수 앞에 exports를 붙임으로 정의된 함수를 내보낼 수 있다. add 함수와 sub 함수, mul 함수와 div 함수를 모두 exports 한다. ​ 파일 : 12-exports.js /** exports */ exports.add = function(x, y) { x = parseInt(x); y = parseInt(y); return x + y; }; .. ■ Front-End ■/Node.js 2023. 2. 26.

• 

  [Node.js] 어디든지 사용 가능한 전역변수와 전역함수, 전역객체 1. 개요 이번 시간에는 전역변수와 전역함수 그리고 전역객체에 대해서 알아보자. Node.js는 실행 중인 프로그램 어디든지 접근할 수 있는 전역변수와 전역함수 그리고 전역객체가 있다. ​ ​ 2. 전역변수 전역변수는 일반적으로 지역 변수와 유사하다. 차이점은 사용할 수 있는 범위가 다르다. 코드 어디서나 사용할 수 있는 변수로 이름 앞에 언더바(_)가 두 개 있어 구분하기 편하다. __filename : 현재 실행 중인 코드의 파일 경로 __dirname : 현재 실행 중인 코드의 폴더 경로 Node.js가 실행한 디렉터리와 실행한 파일명을 표시할 때 전역변수 __dirname와 __filename를 사용한다. console.log("dir = " + __dirname); console.log("fil.. ■ Front-End ■/Node.js 2023. 2. 26.

• 

  [Node.js] 문자열과 객체를 출력하는 console.log() 메서드 개요 console.log() 메서드는 문자열, 숫자, 객체를 출력하는 데 사용한다. 개발을 할 때 코드의 정상적인 흐름을 추적 히가 위해 간단히 콘솔에 표시하기도 한다. 실무에 사용하는 경우에는 console.log() 보다 로깅 라이브러리를 사용하는 것이 좋다. ​ ​ 예제 하나 문자열이나 숫자를 출력할 아래와 코드와 같이 어떤 값인지 확인하기 위해서 습관적으로 앞에 "n = "이나 "s = "를 추가한다. 하지만 JSON이나 객체를 출력할 때는 console.log("obj = " + obj); 와 같이 하면 문자열 연산을 하려고 한다. 그래서 객체인 obj를 toString() 하여 [object Object] 와 같이 표시된다. 그럴 때는 console.log() 메서드에 순수한 객체 참조 변수.. ■ Front-End ■/Node.js 2023. 2. 26.

• 

  [AngularJS] Bootstrap을 적용한 간단한 장바구니를 만들어보자 AngularJS로 장바구니(ShoppingList)에 상품을 등록하고 삭제하는 예제다. 화면이 깔끔하게 표시되도록 Bootstrap을 사용하였다. 아래의 URL의 우측에 표시된 장바구니 화면을 참고하여 코드에 적용하였다. https://getbootstrap.com/docs/4.4/examples/checkout/ Checkout example · Bootstrap Checkout form Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form wi.. ■ Front-End ■/AngularJs 2023. 2. 22.

• 

  [AngularJS] 데이터를 SelectBox에 표시한 뒤 선택한 항목을 표시 SPA 작성을 쉽게 하는 자바스크립트 웹 프레임워크이다. AngularJS에서 JSON 형식의 데이터를 SelectBox에 표시한 뒤 선택한 항목을 표시하는 예제다. code, name, price로 이루어진 books이라는 데이터를 아래와 같이 정의한다. $scope.books = [ { "code" : "code01", "name" : "MongoDB", "price" : 16000 }, { "code" : "code02", "name" : "Express", "price" : 12000 }, { "code" : "code03", "name" : "AngularJS", "price" : 13000 }, { "code" : "code04", "name" : "Node.js", "price" : 1500.. ■ Front-End ■/AngularJs 2023. 2. 22.

• 

  [AngularJS] 헤더를 클릭하여 테이블에 출력한 데이터를 정렬 AngularJS에서 JSON 형식의 데이터를 테이블에 표시한 뒤 헤더를 클릭하여 데이터를 정렬하는 예제다. 먼저 books이라는 데이터를 선언하고 orderByMe() 함수를 정의하는데 파라미터를 입력받아 myOrderBy에 저장합니다. angular.module('myApp', []).controller('myCtrl', function($scope) { $scope.books = [ { ... (아래의 코드를 참조) ... } ]; $scope.orderByMe = function(x) { $scope.myOrderBy = x; } }); ng-repeat를 사용하여 JSON 형식의 데이터를 반복하여 출력한다. 여기서 orderBy:myOrderBy라고 필터를 적용하였는데 ng-click으로 선언한.. ■ Front-End ■/AngularJs 2023. 2. 22.

• 

  [AngularJS] 폼 입력항목 AngularJS의 유효성검사 AngularJS에서 angular.copy() 함수를 사용하여 폼의 reset 기능을 구현해 본다. AngularJS를 사용하기 위해서 아래와 같이 angularJS CDN을 script 태그에 추가한다. form 태그에 ng-app 속성을 만들고 "myApp"으로 정의하고 ng-controller 속성에는 "myCtrl"이라고 정의한다. form 태그에 novalidate 속성을 정의하면 브라우저의 유효성 검사를 하지 않는다. 폼 입력항목에 required 속성을 정의한다. "name" 입력항목에 유효성검사 오류시 표시되는 문구다. $dirty 는 폼에서 사용자가 값을 수정한 적이 있는지를 확인한다. $invalid 는 폼에서 입력항목의 값에 오류가 있는지를 확인한다. 참고로 $valid는 항목의 값.. ■ Front-End ■/AngularJs 2023. 2. 22.

• 

  [AngularJS] 폼에서 angular.copy() 함수를 사용하여 reset 기능구현 AngularJS에서 angular.copy() 함수를 사용하여 폼의 reset 기능을 구현해 본다. AngularJS를 사용하기 위해서 아래와 같이 angularJS CDN을 script 태그에 추가한다. div 태그에 ng-app 속성을 만들고 "myApp"으로 정의하고 ng-controller 속성을 만들고 "myCtrl"이라고 정의한다. 컨트롤러에 다음과 같이 resetUser를 정의해 두고 reset() 함수를 만든다. reset() 함수에서는 angular.copy() 함수를 사용하여 resetUser를 currUser에 복사한다. AngularJS 가 처음 시작할 때 $scope.reset(); 로 한번 호출되어 currUser에는 resetUser가 복사되어 있다. app.controlle.. ■ Front-End ■/AngularJs 2023. 2. 22.

• 

  [AngularJS] ng-show, ng-hide 속성으로 화면요소를 보이기/감추기 AngularJS에서 ng-show, ng-hide 속성을 사용하여 화면요소를 동적으로 보이고 감추는 예제를 구현한다. AngularJS를 사용하기 위해서 아래와 같이 angularJS CDN을 script 태그에 추가한다. div 태그에 ng-app 속성을 만들고 "myApp"으로 정의하고 ng-controller 속성을 만들고 "myCtrl"이라고 정의한다. lastName은 ng-show 속성을 만들었고 firstName은 ng-hide 속성을 만들었다. ng-show 속성은 true일 때 보이고 false 일 때 안 보인다. ng-hide 속성은 true일때 감추고 false 일 때 표시된다. 컨트롤러에 다음과 같이 isShow, isHide 값을 정의했다. $scope..isShow = fals.. ■ Front-End ■/AngularJs 2023. 2. 22.

• 

  [AngularJS] ng-disabled 속성으로 버튼을 활성화/비활성화 AngularJS에서 ng-disabled 속성을 사용하여서 동적으로 버튼의 활성화 상태를 변경한다. AngularJS를 사용하기 위해서 아래와 같이 angularJS CDN을 script 태그에 추가한다. div 태그에 ng-app 속성을 만들고 "" 으로 정의하고 ng-init 속성에 값을 "mySwitch=true" 로 정의한다. 버튼1은 활성화 상태로 표시되고 버튼2는 비활성화 상태로 표시되는 일반적인 버튼이다. 버튼1 버튼2 버튼3은 ng-diabled 속성을 만들고 값을 "mySwich"로 정의하였다. ng-init에 "mySwitch=true" 로 초기설정이 되어있어 처음에 표시될 때는 버튼3은 비활성화 상태로 표시된다. 버튼3 체크박스항목에 ng-model 속성을 만들고 "mySwitch".. ■ Front-End ■/AngularJs 2023. 2. 22.

• 

  [AngularJS] $http 서비스로 받아온 데이터에 필터를 적용해보자. AngularJS에서 $http 서비스를 이용하여 json 데이터를 컨트롤러에 갖고 와 필터를 적용해서 화면에 표시해 본다. AngularJS를 사용하기 위해서 아래와 같이 angularJS CDN을 script 태그에 추가한다. div 태그에 ng-app 속성을 만들고 "myApp"으로 정의하고 ng-controller 속성을 만들고 "myCtrl"이라고 정의한다. 컨트롤러 코드를 살펴보면 $http.get()으로 파일경로를 입력하면 파일 내용을 response에 담아 온다.JSON 파일경로나 JSON 데이터를 넘겨주는 URL을 기재하면 된다. json 데이터를 보면 date 이름으로 배열형태로 담겨져 있어서 response.data로 하였다. $http.get("./data.json").then( f.. ■ Front-End ■/AngularJs 2023. 2. 22.