Engineering_S/W & H/W

 안녕하세요 . 이번에는 새로운 타입인 never에 대해서 알아보겠습니다. never는 그 뜻에서 절대로라는 뜻입니다. 즉 return값이 없다는 것입니다. 그럼 아래 코드를 보도록 하겠습니다. // 에러를 임의로 생성하는 함수 function createError ( message : string , code : number ){ // throw를 이용하여 error를 임의로 준다. throw ({ message , errorCode : code }); } // createError를 사용하여 임의로 에러를 발생 createError ( 'server error' , 500 );  위 코드를 보면 'createError'는 2개의 변수를 받습니다. message와 code입니다. 하지만 출력은 없습니다. 단지 throw 구문을 이용하여 에러를 출력합니다.   마지막에 createError('server error', 500)을 이용하여 에러를 생성한 결과는 아래와 같습니다. 그렇다면 createError의 return값은 있을까요? 사실 없습니다. try,catch구문을 사용하지 않는이상 사실상 createError함수가 실행되면 다음에 나오는 코드들은 무시가 되고 바로 에러를 출력하게 됩니다. // 에러를 임의로 생성하는 함수 function createError ( message : string , code : number ) : never { // throw를 이용하여 error를 임의로 준다. throw ({ message , errorCode : code }); } // createError를 사용하여 임의로 에러를 발생 createError ( 'server error' , 500 );  'never'가 없으면 기본값으로 'void'가 출력 type으로 지정이 됩니다. 하지만 never가 더 정확합니다. 실제로 c...

 안녕하세요. 이번에는 unknown이라는 타입을 알아보겠습니다. 한글로 해석하자면 "알수없음"이라는 뜻인데 말 그대로 무엇이 들어갈지 알수 없다는 뜻입니다. // input에 무엇이 들어올지 알수 없는 경우 let input : unknown ; input = 9 ; // input에 Number가 들어감 input = { object : "hello" } // input에 Object가 들어감 console . log ( input ); // 가장 마지막에 들어간 변수 출력 위 코드에서 input 변수에 type를 unknown으로 지정했습니다. 다음에는 숫자 9를 입력하고 다음 object를 지정했음에도 에러가 발생하지 않았습니다.  console.log에 출력된 결과를 보면 마지막에 입력이 된 object가 출력됬음을 알수 있습니다. 그렇다면 type이 지정된 변수도 저장이 가능할까요? // input에 무엇이 들어올지 알수 없는 경우 let input : unknown ; let str : string = "hello" ; input = 9 ; // input에 Number가 들어감 input = { object : "hello" } // input에 Object가 들어감 input = str ; // str변수의 문자열을 input에 입력 console . log ( input ); // 가장 마지막에 들어간 변수 출력 제대로 출력됨을 확인할수 있습니다. 

  이번 글에는 저번과 조금 다르게 function에 콜백함수를 넣겠습니다. 콜백함수또한 TypeScript에서 타입을 지정을 할수 있습니다. // call back함수를 사용하는 함수 function addAndHandle ( n1 : number , n2 : number , cb : ( num : number ) => void ) : void { const result = n1 + n2 ; cb ( result ); // call back함수 사용 } 위 코드는 3개의 인자를 받습니다. 2개의 number와 1개의 콜백함수 입니다. 이제 이전 글에서와 같이 콜백함수에 대한 type도 정의할수 있습니다. 콜백함수는 1개의 인자(number)를 받을수 있고 return값은 void입니다. 코드를 확인하면 2개의 숫자를 더한후 콜백함수의 인자로 사용하는 것을 알수 있습니다. const app = ( num1 : number ) => { const result = num1 * num1 ; console . log ( "num1의 제곱근 : " , result ); } 이제 임의의 콜백함수를 만들었다. 위 코드에서 인자를 제곱한후 콘솔log로 출력한다. 간단하지만 addAndHandle의 콜백함수 타입과 같다. 위와 같이 node에서 실행하면 console.log로 출력되는 것을 확인할수 있습니다. // Arrow Function을 콜백으로 사용해도 동일한 결과가 나옴 addAndHandle ( 5 , 2 ,( result ) => { result *= result ; console . log ( "num1의 제곱근 : " , result ) })

 안녕하세요. 이번에는 이전시간때 배웠던 함수를 사용할때 발생할수 있는 오류와 이를 해결하는 방법에 대해서 알아보겠습니다. // 2개의 수를 받아서 합친 값을 return 한다. function addTwoNumber ( num1 : number , num2 : number ) : number { let result : number ; result = num1 + num2 ; return result ; } // 한개의 숫자를 받아서 "Result : [num]"으로 출력 function printString ( num : number ) : string { console . log ( "Result : " , num ); return ( "Result : " + String ( num )); } // addFunction을 선언한다. let addFunction ; // addFunction에 addTwoNumber를 지정한다. addFunction = addTwoNumber ; console . log ( addFunction ( 3 , 4 )); // 7로 정상출력 위 코드는 2개의 간단한 함수와 addFunction이라는 변수를 사용하는 예제입니다. 위 예제에서 addFunction은 addTwoNumber로 선언이 되고 2개의 인자가 입력되면 정상적으로 결과가 나오는 것을 알수 있습니다.  // addFunction을 선언한다. let addFunction ; // addFunction에 addTwoNumber를 지정한다. addFunction = addTwoNumber ; addFunction = 5 ; // 에러발생 : number 5로 선언 console . log ( addFunction ( 3 , 4 )); // 에러 발생 이제 'addFunction = addTwoNumber;' 아래쪽에 코드를 하나 더 추가...

안녕하세요. 이번에는 TypeScript에서 함수를 사용할때를 설명해 드리게습니다. // function의 원소들을 우너하는 변수 형태로 선언할수 있다. // function의 return값도 선언이 가능하다. function add ( num1 : number , num2 : number ) : number { // return할 result를 number로 선언 let result : number ; // 각각, num1, num2는 number이다. // 두 number의 합은 result의 결과이다. result = num1 + num2 ; // number인 result return return result ; } // console.log의 출력은 두수의 합의 결과다. console . log ( add ( 1 , 3 )); 위 코드에서 num1, num2에 변수 속성을 각각 선언한 것을 알수 있습니다. 가장 오른쪽의 number는 function add의 return값의 속성을 지정한 것입니다. 하지만 add함수의 return값을 string로 지정을 하면 에러가 발생합니다.   따라서 함수의 return값의 속성을 정확하게 지정을 해야 TypeScript에서 에러가 발생하지 않는다.  // console.log의 출력은 두수의 합의 결과다. // console.log(add(1,3)); // function을 void로 선언 function testVoid ( num : number ) : void { console . log ( "Test Void : " , num ); // function이 void로 선언되면 return값이 // 없음 } testVoid ( 77 ); JavaScript에는 void라는 속성이 없습니다. 대신 undefined라는 속성이 있는데 이것 또한 TypeScript에서 사용할수 있습니다. TypeSc...

 이번에는 버튼을 만들어서 버튼을 누르면 state의 상태에서 입력된 id가 삭제되도록 하겠다. import React , { Component } from 'react' import Newcompoment from './compoments/New_compoment' ; export class App extends Component { constructor ( props ){ // constructor를 만들어 props를 전달 super ( props ); // 기존의 props 유지 this . state = { // class이기 때문에 this를 사용 fruit : [ // 실제 상태를 바꿀 state.fruit { id : 0 , post : 'apple' }, { id : 1 , post : 'banana' } ] }; // del_state가 제대로 전달되도록 bind한다. this . del_state = this . del_state . bind ( this ); } // del_state는 state.fruit에서 선택된 id를 제거한다. del_state = ( id ) => { this . setState ({ fruit : this . state . fruit . filter (( ele ) => ele . id !== id ) }) } render () { return ( < div > < Newcompoment fruit = {this . state . fruit } del_state = {this . del_state } /> </ div > // New_compoment에 props로 state.fru...

 이제 OOP의 마지막인 Polymorphism에 대해서 알아보겠습니다. 저번에 Class를 이용하여 객체를 만들었습니다. 하지만 각각의 객체가 같은 틀을 사용할수 있지만 상황에 따라서 다르게 사용하는 경우도 있습니다. 이때 Polymorphism의 특성을 사용합니다.  위 사진은 Book Class을 나타내는 사진 입니다. 위 사진은 위 링크 에서 내용을 확인 할수 있습니다.   이제는 Book Class에서 양식을 받아서 Alex Class로 만듭니다. 하지만 cost를 변경하고 Function을 변경하였습니다.   일단 먼저 Class bookInfor를 생성합니다. 이는 나중에 Class Alex에서 bookInfor의 양식을 받아오기 위해 미리 생성해야 합니다.  이제 Class Alex을 생성하는데 첫줄에 'extends'단어가 있습니다. 이는 오른쪽에 있는 bookInfor class의 양식을 Alex에서도 계승한다는 코드입니다.  순서도를 보면 Class Alex는 2번 bookInfor에서 양식을 받는것을 알수 있습니다.  constructor(명칭 변경가능)  여기서 'super' 키워드가 있는데 이는 constructor의 구조를 파라메트 만큼 갖고와서 사용한다는 뜻입니다. 즉 여기서는 cost만 존재하지 않으니 그것을 제외한 모든 this코드를 갖고오는 것입니다. register(명칭 변경가능)  register는 bookInfor에서 계승을 받지만 Alex에서 변경을 하였습니다. 이렇게 계승을 받지만 중간에 변경을 하면 변경된 register로 실행하게 됩니다. 하지만 만약 Class Alex에 constructor 부분이 통째로 없다해도 동작이 가능할까요? 가능합니다.   다만 constructor를 지우면 cost까지 파라메터로 입력을 할수 있습니다.  이렇듯 부모 Class에 계승을 받지만 자식 Class에서 그대로 받...

안녕하세요 알렉스입니다. 이번에는 OOP의 Inheritance에 대해서 설명해 드리겠습니다.   처음에 도서에 대한 정보를 출력할때 책에 대해서 각각 변수를 정의 하고 함수에서 각각의 파라메터값을 입력해서 출력 했습니다. 하지만 이 방법은 전에 이야기 했듯이 너무 많은 작업량과 비효율성을 나타냅니다. 반면 ' Object Oriented - OOP Encapsulation '에서 설명했듯이 Object와 this을 이용하여 각 도서에 대한 Book Object를 생성할수 있습니다. 하지만 이 방법도 도서의 갯수가 늘어남에 따라 Book Object 수가 늘어납니다.  그래서 Class는 틀을 짜놓고 'new'를 선언할때마다 새로운 객체를 생성하는 것입니다. 여기서 constructor는 각 항목에 대한 value를 저장합니다. register은 함수(여기서는 console.log로 도서정보 출력)를 실행합니다.  이렇듯 하나의 Class(클래스)를 이용하여 여러개의 객체를 생성할수 있습니다. 물론 각 객체마다 구조는 같지만 value값은 똑같거나 다를수 있습니다. 이 방법을 이용하면 궂이 Object를 일일이 만들 필요가 없어집니다. 다음 글 이전 글

 이번에는 OOP의 다음 특성인 Abstraction입니다. 일명 추상화 과정 입니다.   우리는 이전 글에서 Book Object안의 코드가 어떤 식으로 구성 됬고 동작하는지 알지만 실제로 사용자는 알 필요가 없습니다.  또한 시리즈로 작성한 체스게임 의 코드는 사용자가 신경쓸 필요가 없습니다. 단지 체스의 규칙에 맞춰 게임을 하면 되는 것입니다.  순서도의 구조가 간단하지만 Object Oriented - 생긴이유  에서 알려드렸듯이 순서도도 양파를 까듯이 매우 복잡해 질수 있습니다. 결국 사용자는 정상적으로 쓰기만 하면 됩니다. 위 사진에서는 코드를 순서도와 맞춰서 나타냈지만 이는 프로그래머가 알아야 할 사항입니다. 실제로 사용자는 위 사진의 6가지 책의 정보를 출력하는 방법 아니면 1가지 '책의 모든 정보를 String로 출력'하는 방법만 알면 충분합니다. 이렇게 복잡한 구조와 기능들을 하용자한테 드러내지 않고 쉽게 쓸수 있도록 한 것을 Abstraction이라고 합니다. 다음 글 이전 글

 안녕하세요 이번에는 OOP의 첫번째 내용인 Encapsulation에 대해서 설명해 드리겠습니다.  책을 예로 들이겠습니다. 일단 코드를 작성할때 각각의 변수를 설정하고 함수를 만든 다음 함수에 파라미터 또는 요소(Parameter)를 넣어서 구동합니다. 이후 return값을 받게 코드를 짭니다.   위 두 사진은 책이라는 물체에 대해서 도식화(2번째 사진)했고 다음은 실제 코드를 구동할때의 결과를 나타낸 사진(3번째 사진)입니다.  이렇게 짤수는 있지만 문제는 책이 이세상에 1권만 있는게 아니라 종류, 타입 별로 무한정 있기 때문에 위 처럼 코드로 작성하게 되면 작업량이 엄청나게 늘어납니다.  제목(Title)만 하더라도 각각의 변수를 다르게 지정해 줘야 하기 때문입니다.  여기서 책에 대한 Object를 만듭니다. 이 안에는 기존에 있던 책의 모든 파마메터와 함수가 들어가 있습니다. 그리고 다음에 보실 코드에는 이 함수에 전달할 파라메터가 존재하지 않습니다.  JavaScript Object는 다음 링크를 참고해 주시기 바랍니다.  Book의 객체 안에서 키값으로 각각의 요소가 지정이 됬고 함수는 전달인자 없이 문자열을 return할수 있습니다. 이는 this문을 사용하였기 때문 입니다. this에 관한 링크  따라서 Encapsulation은 하나의 객체(Object)안에서 모든게 이루어 질수 있도록 하는것을 의미한다고 볼수 있습니다. 다음글 이전글

 이제 Structure에서 Object Oriented로 넘어갑니다. 이전 글에서 Structure는 함수를 참조만 했지 변경하거나 정의할수가 없었습니다. 하지만 OOP로 넘어가면서 함수를 내부에서 정의하고 변경까지도 가능하게 됩니다. 일단 Object Oriented를 이해하기 위해서는 2가지 정의를 이해해야 합니다. 1. 클래스(Class)는 객체(Object)를 위한 템플릿 2. 객체(Object)는 클래스(Class)의 인스턴스(instances) 그러면 기존에 체스판을 예로 들겠습니다.  나이트를 Class로 예로 들면 여러가지(위치,색,사망여부,움직임 함수)가 들어있음을 알수 있습니다. 이때 사망여부와 움직임 함수는 모든 나이트의 공통 사항이기 때문에 초기화 합니다. 하지만 위치와 색은 초기화 해서는 안됩니다.  위 그림에서 각각의 나이트들은 시작하는 지점이 서로 다릅니다. 따라서 각각의 나이트의 시작위치는 모두 달라야 합니다.   하지만 모든 나이트의 위치를 초기화해 같은위치에서 시작된다면 체스판에 있는 나이트는 시작할때 이상한 모습을 띄게 될 것입니다.  또한 색을 한가지로 초기화 한다면 누가 누구의 말을 쓸수있는지 모를겁니다.  대신 백과 검정말의 공통점은 움직임 입니다. 그리고 처음 시작할때 살아 있어야 합니다. 이경우는 백과검의 공통된 부분이기 때문에 초기화 할수 있습니다. <나이트 예시> Class(클래스) : 나이트가 갖는 공통된 속성 Object(객체) : 그 나이트가 갖고있는 속성 따라서 클래스는 프로그램 내에서 뒤죽박죽 섞여있는 데이터(Data)와 함수(Function)들을 일목요연하게 정리하고 사용하기 쉽게 해줍니다. 다음 글에서는 여기서 더 나아가 OOP가 갖는 주된 속성 4가지에 대해서 설명해 드리겠습니다. 다음 글 이전 글

 안녕하세요 알렉스 입니다. 저번에는 절차지향언어가 어떤식으로 진행되고 장점과 단점, 그리고 그로인해 스파게티 코드가 되기 쉽다는 것을 설명했습니다.   이제 이번에는 OOP가 나오기 전 어떤식으로 변수(veriable)와 함수(function)를 프로그램에서 이용했는지 설명해 드리겠습니다.  초창기에는 변수들을 이용하여 프로그램을 짰습니다. 지금과 같이 복잡하지 않았기 때문에 변수 여러개를 조합하여 하나의 프로그램을 만들었습니다.   하지만 프로그램의 복잡성이 높아지면서 이 변수들을 그룹짓기 시작했습니다. 더이상 원시타입변수(Primitive Data)만으로는 효율적으로 프로그램을 짤수 없게 되었습니다. 그룹을 짓는다고할때 한가지 예를 들겠습니다. 체스게임의  체스에서 나이트 말에 대해서 예시를 들겠습니다. 체스게임에서 나이트를 원시타입변수로 나타내면 위치,사망여부,색 등으로 그룹을 질수 있습니다. 또한 이것은 1개가 아닌 2개(흰색기준)로 구분지어서 나타내야 합니다.   체스를 둘때 위치를 알아야하며 아군인지 적군인지 구분이 필요하고 동시에 상대방의 말에의해 먹혔는지 안먹혔는지도 판별해야 합니다.  문제는 이런 그룹이 편하긴 하지만 검정말도 똑같이 그룹을 만들어야하고 다른 말들(킹, 퀸, 비숍 등등)의 그룹도 만들어야해서 갯수에따라 그룹이 증가하는것을 알수 있습니다.  이때 Structure가 능장하게 됩니다. Structure는 배열(Array)과 비슷합니다. 하지만 배열은 같은 속성(변수)에 대해서 저장을 할수 있게 합니다.   위 사진에서 배열은 Boolean만 저장 가능하고 다른 변수인 int 혹은 다른 변수를 저장할수 없습니다. 이처럼 배열이 받을수 있는 속성이 정해지면 그것만 받을수가 있습니다.   Structure는 여러가지 변수 뿐만 아니라 같은 Structure 또는 함수(Function)의 참조(referen...