'웹 개발/Study'에 해당되는 글 24건

  1. 2021.02.03 명령형(imperative ), 선언형(declarative), 절차형, 객체 지향형(OOP), 함수형 프로그래밍
  2. 2021.02.03 MapReduce
  3. 2021.02.03 Closure 과 Currying
  4. 2021.01.21 block, inline-block, inline
  5. 2021.01.21 class 와 id의 차이점
  6. 2021.01.20 for문
  7. 2021.01.19 문자열 다루기
  8. 2021.01.19 Truthy 와 Falsy

명령형(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
:

class 와 id의 차이점

웹 개발/Study 2021. 1. 21. 14:22

class                                                                          id

.으로 선택 #으로 선택
목적에 맞게 자유롭게 이름 붙일 수 있음 목적에 맞게 자유롭게 이름 붙일 수 있음
동일한 값을 갖는 엘리먼트 많음 문서 내에서 단 하나의 엘리먼트가 유일한 값을 가짐
엘리먼트가 여러 값을 가질 수 있음 엘리먼트 단 하나의 값을 가짐
스타일의 분류(classification)에 사용 특정 엘리먼트를 이름 붙이는 데 사용

 

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

Closure 과 Currying  (0) 2021.02.03
block, inline-block, inline  (0) 2021.01.21
for문  (0) 2021.01.20
문자열 다루기  (0) 2021.01.19
Truthy 와 Falsy  (0) 2021.01.19
:

for문

웹 개발/Study 2021. 1. 20. 10:05

반복할 조건을 초기화, 조건식, 증감문 순으로 넣어준다.

1
2
3
4
5
6
let sum;
for(i =0; i< 5; i = i+1)
{
sum = sum + 1;
}
console.log(sum) // 10
cs

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

Closure 과 Currying  (0) 2021.02.03
block, inline-block, inline  (0) 2021.01.21
class 와 id의 차이점  (0) 2021.01.21
문자열 다루기  (0) 2021.01.19
Truthy 와 Falsy  (0) 2021.01.19
:

문자열 다루기

웹 개발/Study 2021. 1. 19. 18:18
  • 문자열의 length라는 속성을 활용해 길이를 확인할 수 있다. str.length
  • 문자열의 글자 하나하나에 접근할 수 있다. str[1]
  • 문자열을 합칠 수 있다. word1 + " " + word2
  • 문자열을 원하는 만큼만 잡을 수 있다. str.slice(0, 3) str.substring(0, 3)
  • 영문을 모두 대문자로 바꿀 수 있다. str.toUpperCase
  • 영문을 모두 소문자로 바꿀 수 있다. str.toLowerCase
  • 문자열 중 원하는 글자의 index를 찾을 수 있다 str.indexOf('a')
  • 문자열 중 원하는 글자가 포함되어 있는지 알 수 있다. str.includes('a')

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

Closure 과 Currying  (0) 2021.02.03
block, inline-block, inline  (0) 2021.01.21
class 와 id의 차이점  (0) 2021.01.21
for문  (0) 2021.01.20
Truthy 와 Falsy  (0) 2021.01.19
:

Truthy 와 Falsy

웹 개발/Study 2021. 1. 19. 16:52

기억해야할 falsy 값들:

false

null

undefined

0

NaN (Not a Number)

''

OR 연산자는 truthy한 값을 만나면, 그 값을 출력한다.

평가순서:

------->

undefined || 10 --> 10 (true)

5 || 10 --> 5

5 || console.log('실행되지않음') --> 5

둘다 falsy 할 경우, 뒤에 있는 값을 출력한다.

undefined || false  --> false

AND 연산자는 falsy 한 값을 만나면, 그 값을 출력 합니다.

undefined && 10 --> undefined

5 && false --> false

둘다 truthy 할 경우, 뒤에 있는 값을 출력한다.

5 && 10 --> 10

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

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