'전체 글'에 해당되는 글 137건

  1. 2021.02.26 자바 스크립트에서의 OOP
  2. 2021.02.23 그래픽 드라이버 nouveau 에서 nvidia로 변경하기
  3. 2021.02.20 Full time 프리코스 회고록
  4. 2021.02.03 2주차 회고록
  5. 2021.02.03 명령형(imperative ), 선언형(declarative), 절차형, 객체 지향형(OOP), 함수형 프로그래밍
  6. 2021.02.03 MapReduce
  7. 2021.02.03 Closure 과 Currying
  8. 2021.01.21 block, inline-block, inline

자바 스크립트에서의 OOP

웹 개발/Study 2021. 2. 26. 09:53

자바스크립트는 본래 객체 지향형이 아닌 언어였지만, 객체 지향 패턴으로 작성할 수 있다.

객체 지향형에는 4가지 컨셉이 존재한다.

 

  • Encapsulation (캡슐화)

  • Inheritance (상속)

  • Abstraction (추상화)

  • Polymorphism (다형성)

Encapsulation (캡슐화)

캡슐화는 데이터와 기능을 하나의 객체(또는 단위)에 넣어서 묶는것이다.

은닉화(hiding)라는 특징도 포함이 되어있는데, get/set 함수를 만들어 내부 데이터나 내부 동작이 외부로 전달되지 않도록 하는것이다. 하지만 javascript의 언어 특성상 은닉화는 불가능하다. (c#에서는 public/private 키워드로 가능)

느슨한 결합(Loose Coupling)에 유리: 언제든 구현을 수정할 수 있다

 

Inheritance (상속)

상속은 부모클래스의 메서드나 데이터등을 자식클래스가 물려받는것이다.  정확한 표현으로는; 기본 클래스(base class)의 특징을 파생 클래스(derive class)가 상속받는다.

부모클래스에게 상속받은 자식클래스는 부모의 모든 데이터 속성과 메서드들을 사용할수 있으며, 자식클래스가 데이터 및 메서드를 추가 한다고 해서 부모클래스에게 영향이 가지 않는다.

 

Abstraction (추상화)

추상화는 메서드의 사용을 사용자에게 맞추어 보다 편리하게 사용할 수 있도록 도와준다. 메서드의 복잡한 내부를 신경 쓸 필요 없이 사용할 때에는 단순하게 사용 할 수 있도록 하는것이다.

추상화와 캡슐화의 차이:

캡슐화가 코드나 데이터의 은닉에 포커스가 맞춰져있다면, 추상화는 클래스를 사용하는 사람이 필요하지 않은 메소드 등을 노출시키지 않고, 기능 단순한 이름으로 정의하는 것에 포커스가 맞춰져 있다.

 

Polymorphism (다형성)

다형성은 특정 기능을 선언(설계)부분과 구현(동작)부분으로 분리한 후 구현부분을 다양한 방법으로 만들어 선택하여 사용할 수 있게 하는 기능이다.
일반 객체지향 언어에서는 데이터 타입이 있다. 그래서 변수를 선언할 때 데이터 타입을 명시해야 한다. 하지만 자바스크립트의 경우는 그냥 변수라는 것만 알 수 있게 var 변수명 과 같은 식으로 데이터 타입을 명시하지 않고 선언을 한다.

**일반 객체지향언어의 경우 데이터 타입을 맞추지 않으면 에러가 난다. 

하지만 자바스크립트의 데이터 타입을 명시하고 변수 사용을 하지 않기 때문에 변수값에 어떤 데이터를 넣어도 에러가 나지 않는다.

그리고 일반 객체지향에서 다형성을 구현하려면 매개변수와 리턴값을 상속받는 메서드에 맞추어 구현하여야 한다. 그렇지 않으면 에러가 난다.

하지만 자바스크립트에서는 인터페이스, 추상 클래스 그리고 엄격한 데이터 타입 체크 등의 다형성과 관련된 문법은 지원되지 않는다. 그렇다면 자바스크립트에서의 다형성은 어떻게 구현해야 할까? 그냥 다형성이 지원한다고 생각하고 규칙에 맞춰 구현하는 방법밖에 없다. 즉 구현부에서 메서드를 작성할 때 선언부가 있다는 가정 하에 맞춰 구현해줘야 한다. 


참조: https://debugdaldal.tistory.com/152 [달달한 디버깅]

 

 

:

그래픽 드라이버 nouveau 에서 nvidia로 변경하기

Ubuntu/삽질하기 2021. 2. 23. 00:24

'Ubuntu > 삽질하기' 카테고리의 다른 글

javascript 2차원배열의 얕은 복사  (0) 2021.03.20
:

Full time 프리코스 회고록

코드스테이츠 2021. 2. 20. 20:00

벌써 눈 깜짝 할 새에 프리코스가 지나갔다. 짧다면 짧고 길다면 긴 한달동안 정말 많은 페어분들과 함께했고 몇몇분은 아쉽게도 이머시브에서 뵙지 못하게 된다는걸 알았지만, 남은 분들과 열심히 해서 꼭 좋은곳에 취직을 했으면 좋겠다. 원래 solo week동안 복습을 조금 할 계획이였는데 이런 저런 약속이 많다보니 잘 지켜지지 못했다. 이제 내일 모레 시작하게 되니까 다시 초심을 찾아 마음을 다잡고 집중해서 공부 해야겠다.

'코드스테이츠' 카테고리의 다른 글

First Project 회고  (0) 2021.05.10
2주차 회고록  (0) 2021.02.03
:

2주차 회고록

코드스테이츠 2021. 2. 3. 17:39

무작정 개발자가 되고 싶어서 학원을 알아보다가 우연히 광고로 알게되어 합격하고 수강한지 어느덧 2주가 흘렀다. 

처음에는 온라인 수업이 오프라인과 차이가 크지는 않을까 걱정이 되었지만 어차피 화면보고 고민해야하는 거기 때문에 큰 차이가 없었다. 전에 c#을 배워서 자바스크립트 공부하는건 복습하는 기분이고 쉬워서 페어때는 항상 내가 알려주거나 같이 풀어나갔었다. 하지만 html및 css를 배울때는 논리적 사고보다는 쓰는 방법에 대해 알아야 했고 많이 힘들었다. 조만간 DOM을 이용해야 하기때문에 자바스크립트와 html 모두 잘 다룰줄 알아야한다. 다시 공부하는 습관을 들여 철저히 복습과 예습을 해야겠다.

 

'코드스테이츠' 카테고리의 다른 글

First Project 회고  (0) 2021.05.10
Full time 프리코스 회고록  (0) 2021.02.20
:

명령형(imperative ), 선언형(declarative), 절차형, 객체 지향형(OOP), 함수형 프로그래밍

웹 개발/Study 2021. 2. 3. 15:11

명령형 프로그래밍은 무엇을 어떻게 할 것인가에 가깝다.

프로그램의 상태를 변화시키는 구문들에 초점을 둡니다.

상태제어흐름이 존재하며 상태를 필요에 따라 생성하고 정의하고 변경합니다.

그리고 특정 동작을 실행시키며 복잡한 문제를 유연하게 해결합니다.

EX) C, C++, JAVA, Javascript, Pyhon, PHP 등

선언형 프로그래밍무엇을 할 것인가에 가깝다.

프로그램이 실제로 어떻게 흘러가는 지와 상관 없이 프로그램의 논리에 초점을 맞춥니다.

상태제어 흐름이 존재하지 않습니다.

즉, 약속된 정의만 사용해서 작성하는 언어를 의미합니다.

EX) HTML, CSS, XML, SQL 등

 

레고공장을 명령형과 선언형에 빗대어 표현을 하자면,

명령형 공장: 원료가 들어오면 먼저 빨간색 색소를 넣는다. 그 뒤, 4*4 레고 틀로 레고 원료를 찍습니다. 찍어낸 원료는 2시간동안 굳힌 뒤에 질감을 위해 특수 배합된 도료로 코딩을 해줍니다.

함수형 공장: 빨간 4*4 레고블록

함수형 프로그래밍은 내부에서 절차적인 방식으로 동작을 하고 있다. 

결국, 선언형 방식은 명령형 방식을 추상화 하는 것이다.

절차형(Procedure)은입력한 로직에 따라서 순서대로 코드가 실행되는 방식을 의미한다.

실행 순서(절차)를 지정하게 되어 명령형 언어라고도 불리는데, 이는 절차가 실행에 대한 명령을 나타내는 것이기 때문이다.

EX)  C, Pascal, BASIC

절차지향형의 특징은 다음과 같다.

장점:

  1. 컴퓨터의 처리 구조와 유사한 코딩방식
  2. 실행 속도가 빠름

단점:

  1. 유지보수가 어려움
  2. 코드의 순서가 바뀌면 동일한 동작 결과를 보장하지 못함.

객체 지향형(Object Oriented Programming)

앞에서의 절차 지향형 방식의 단점을 보완하고자 "객체 지향형"방식이 등장했다. 객체 지향형은 컴퓨터의 관점에서가 아니라 실제 세계의 관점에서 프로그래밍 하는 것을 의미한다. 실제 세계에서 사물은 컴퓨터가 생각하는 것 처럼 절차와 데이터가 따로 있는 것이 아닌, 객체 다ㅏㄴ위로 존재한다. 가령 사람을 예로 들면 사람이 먹거나 마시거나 뛰거나 달리거나 할 수 있고, 그에 따라서 체지방 량이 변합니다. 현실세계와 객체 지향적 세계에서는 관련이 있어 보이는 데이터와 행동이 절차지향에서는 이것들이 모두 흩어져 있다. 이렇게 현실 세계에를 모델링한 객체 지향적 방식은 "캡슐화", "추상화", "다형성", "상속" 이라는 특성를 가진다.

장점:

  1. 코드의 유지보수가 편하다.
  2. 불필요한 코드가 줄어든다.
  3. 코드의 순서가 다르더라도 논리적인 과정상의 차이만 없으면 어느정도 동일한 동작 결과를 보장 할 수 있다.

단점:

  1. 속도가 느리다.
  2. 설계에 많은 시간이 들어가게 된다.

함수형

  1. 변경 가능한 상태를 불변으로 만들어 side-effect를 최소화 시킨다. (순수함수)
  2. 모든것은 객체이다.
  3. 코드를 간결하게 하고 구현할 로직에 집중한다.
  4. 동시성을 안전하게 보장한다.

함수형 언어의 가장 큰 특징은 함수를 "순수함수"로 구성을 한다는 것에 있다. 함수를 순수함수로 구성하게 되면 1번 특징만으록도 2~4번 까지의 특징이 당연하게 다가온다.

순수함수는 input으로 들어 온 값에 함수가 영향을 주지 않으며, 외부 변수에 영향을 받지 않고 항상 같은 output을 생성해 내는 함수이다. 이러한 특성 때문에 함수형 프로그래밍에서 함수는 불변하는 "값"으로 볼 수 있다. 그리고 이 함수라는 값들을 조합해서 새로운 함수 즉 값을 만들어 낼 수 있다. 때문에 함수도 객체와 동일한 취급이 가능하다. 이러한 특징을 "1급 객체"라고도 한다.

이렇게 함수를 객체와 같은 값으로 취급하게되면, 프로그래머는 구현할 로직에 더 집중을 할 수 있게된다. 과정을 기술하며 생긴 부산물에 집중하지 않아도 되며 변수에 대한 고려를 하지 않아도 되기 때문이다. 

명령형 프로그래밍과 함수형 프로그래밍으로 알파벳 5글자 이상으로만 이루어진 단어들을 리스트로 추출한다고 하면,

명령형 프로그래밍:

var fruits = ["apple","banana","watermellon","pear","peach"]
fruitesOverFive = [];
for(var i = 0; i< fruits.length; i++){
	if(fruits[i].length > 5){
    	fruitsOverFive.push(fruits[i]);
    }
}
return fruitsOverFive;

함수형 프로그래밍:

var fruitsOverFive = fruits.filter((fruit) => fruit.length>5)

[출처] 명령형(Imperative)언어와 선언형(Declarative)언어|작성자 윤윤ss

blog.naver.com/whdgml1996/221987818879

 

 

'웹 개발 > Study' 카테고리의 다른 글

Prototype in Javascript  (0) 2021.02.26
자바 스크립트에서의 OOP  (0) 2021.02.26
MapReduce  (0) 2021.02.03
Closure 과 Currying  (0) 2021.02.03
block, inline-block, inline  (0) 2021.01.21
:

MapReduce

웹 개발/Study 2021. 2. 3. 14:19

맵리듀스(MapReduce)?

: 대용량 데이터를 처리를 위한 분산 프로그래밍 모델

- 구글에서 2004년 발표한 소프트웨어 프레임워크

- 타고난 병행성(병렬 처리 지원)을 내포

- 누구든지 임의로 활용할 수 있는 충분한 서버를 이용하여 대규모 데이터 분석 가능

- 흩어져 있는 데이터를 수직화하여, 그 데이터를 각각의 종류 별로 모으고(èMap),

Filtering Sorting을 거쳐 데이터를 뽑아내는(èReduce)

하는 분산처리 기술과 관련 프레임워크를 의미

 

맵리듀스는 맵(Map) 단계와 리듀스(Reduce) 단계로 처리 과정을 나누어 작업
각 단계는 입력과 출력으로써 - 쌍을 가지고 있고, 그 타입은 프로그래머가 선택합니다. 또한, 맵과 리듀스 함수도 프로그래머가 직접 작성하게 됩니다

Map은 흩어져 잇는 데이터를 Key, Value의 형태로 연관성 있는 데이터 분류로 묶는 작업

Reduce Map화한 작업 중 중복 데이터를 제거하고 원하는 데이터를 추출하는 작업

 

l  MapReduce Logical Data Flow

 

 

 

 

(map)은 흩어져 있는 데이터를 관련 있는 데이터끼리 묶는 작업을 통해서 임시 데이터 집합으로 변형되며, 리듀스(Reduce)는 맵 작업에서 생성된 임시 데이터 집합에서 중복 데이터를 제거하고 원하는 데이터를 추출하는 작업을 진행합니다.



출처: https://over153cm.tistory.com/entry/맵리듀스MapReduce란-1 [빅데이터는 넘커]

:

Closure 과 Currying

웹 개발/Study 2021. 2. 3. 14:16

Closure은 함수(A) 내에 함수(B)를 선언하여 A함수의 지역변수등을 활용함으로써 클래스처럼 활용을 할 수있게 해준다.

var makeCounter = function() {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  }
};

var counter1 = makeCounter();
var counter2 = makeCounter();

counter1.value(); // returns 0
counter1.increment(); // adds 1
counter1.increment(); // adds 1
counter1.value(); // returns 2
counter1.decrement(); //subtracts 1
counter1.value(); // returns 1
counter2.value(); // returns 0

위의 코드처럼 변수 counter1과 counter2는 서로에게 독립적인 참조와 변수를 갖는다.

Currying은 일종의 함수 패턴으로 함수가 즉시 다른 함수를 리턴 하는것이다. 기존에 특정 값(String이나 Number)을 리턴하는게 아닌 함수 그자체를 리턴하여 할당되는 변수가 함수처럼 작동하도록 하는것이다.

let greeting = function (a) {
    return function (b) {
        return a + ' ' + b
    }
}

let hello = greeting('Hello')
let morning = greeting('Good morning')

hello('Austin') // returns Hello Austin
hello('Roy') // returns Hello Roy
morning('Austin') // returns Good morning Austin
morning('Roy') //returns Good Morning Roy

Currying은 함수형 프로그래밍의 일부로 간주되며 화살표 함수를 사용하여 보다 깔끔한 코딩이 가능하다.

let greeting = (a) => (b) => a + ' ' + b

greeting('Hello There')('General Kenobi')
//returns Hello There General Kenobi

 

'웹 개발 > Study' 카테고리의 다른 글

명령형(imperative ), 선언형(declarative), 절차형, 객체 지향형(OOP), 함수형 프로그래밍  (0) 2021.02.03
MapReduce  (0) 2021.02.03
block, inline-block, inline  (0) 2021.01.21
class 와 id의 차이점  (0) 2021.01.21
for문  (0) 2021.01.20
:

block, inline-block, inline

웹 개발/Study 2021. 1. 21. 15:04

                                                     block                           inline-block                          inline

줄바꿈 여부 줄바꿈됨 줄바꿈 되지 않음 줄바꿈 되지 않음
기본적으로 갖는 너비(width) 100% 글자가 차지하는 만큼 글자가 차지하는 만큼
width, height 사용 가능여부 가능 가능 불가능

 

'웹 개발 > Study' 카테고리의 다른 글

MapReduce  (0) 2021.02.03
Closure 과 Currying  (0) 2021.02.03
class 와 id의 차이점  (0) 2021.01.21
for문  (0) 2021.01.20
문자열 다루기  (0) 2021.01.19
: