개발야 기하하자

함수형 프로그래밍과 객체지향 프로그래밍의 차이

객체지향 프로그래밍과 함수형의 차이는 데이터(상태)를 다루는 개념과, ‘간결한 코드 작성’에 대한 관점차이가 있다.

객체지향이 함수의 동작부를 캡슐화해서 코드를 이해할 수 있게 한다면, 

함수형 프로그래밍은 동작부를 최소화해서 코드 이해를 돕는다.

객체지향 프로그래밍의 경우, 클래스 디자인과 객체들의 관계를 중심으로 코드 작성이 이루어진다. 따러서 상태, 멤버변수, 메서드 등이 긴밀한 관계를 가지고 있다. 특히 멤버변수가 어떤 상태를 가지고있는가에 따라 결과가 달라진다.

함수형 프로그래밍의 경우, 값의 연산 및 결과 도출 중심으로 코드작성이 이루어진다. 함수 내부에서 인자로 받은 값을 별도로 저장하거나 하지 않고, 간결한 과정으로 처리하고 매핑하는데에 주 목적을 둔다. 

함수형 언어에서는 함수(Function) 자체가 일급 객체가 되겠지만,

객체지향 언어에서는 클래스(또는 객체, Object)가 일급 객체가 됩니다.

일급객체는

99geo.tistory.com/61

다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 보통 함수에 매개변수로 넘기기, 수정하기, 변수에 대입하기와 같은 연산을 지원할 때 일급 객체라고 합니다!

참고로 자바스크립트와 파이썬의 함수는 일급함수이다. 

함수형 프로그래밍은 함수가 일급 객체가 됩니다 

const test = function() { 
  console.log("일급함수입니다.")
}

test(); // call

 객체지향 프로그래밍 (OOP)는 대표적으로 java가 있는데 함수를 일급객체로 취급하지 않습니다.

제 생각에는 이부분이 제일 큰 것 같습니다. 함수를 일급객체로 취급하느냐 않하느냐가 제일 이해하기 쉽지 않나 생각합니다!

오류나 이슈부분이 있으면 댓글이나 쪽지로 피드벡 주시면 감사하겠습니다.

출처 : suminpixel.tistory.com/m/20

함수형 프로그래밍

프로그래밍의 여러 종류 중 하나이며, 함수(function)을 이용해 프로그래밍을 하는 것 입니다.

=> 함수로만 이수어진 프로그램이라고 생각하면 편할 것 같습니다.

함수형 프로그래밍의 특징

함수형 프로그램은 다음과 같은 특징을 가지고 있습니다.

• 불변 데이터(Immutable Data)
• 1급 함수(First-Class Function)
• 순수 함수(Pure Function)

불변 데이터(Immutable Data)

함수형 프로그래밍을 가능하게 하는 요소 중 하나가 바로 Immutable Data입니다.
한번 정해진 값은 바뀌지 않습니다.
List를 하나 만들어 항목을 추가/삭제 할때 추가가 필요하면 추가항목이 입력 된 List를 만들고 삭제가 필요하면 삭제항목이 제거 된 List를 만드는 식입니다.
이러한 자료구조를 Persistent Data Structure라고 부릅니다.

1급 함수(First-Class Function)

• 컴퓨터 과학자 Christopher Strachey가 만든 조어
• 함수가 런타임에도 생성
• 함수의 인자로 전달되고 함수의 결과로서 리턴되며, 변수에 할당
• 함수도 데이터처럼 구성이 가능해짐(Composability)

자바에서는 메서드가 1급으로 처리되지 않기에, 메서드만 따로 생성하거나, 메서드 자체를 생성자나 변수나 파라미터등에 전달 할 수 없습니다.
반면 자바스크립트에서는 아래와 같은 코드가 가능합니다.

function someFunc(){ ... } otherFunc(someFunc) //함수 자체를 파라미터로 전달 가능 var a = someFunc; // 함수를 변수에 할당 가능

즉 자바스크립트에서는 함수를 1급으로 처리하고 있습니다

순수함수(Pure Function)

주어진 입력으로 계산하는 것 이외의 프로그램의 실행에 영향을 미치는 부수 효과(Side Effect)가 없는 함수를 순수 함수라고 합니다.
예를들면 count, length 함수는 임의 문자열이나 배열에 대해서 길이를 반환하며, 그 외의 일은 일어나지 않습니다.

Side Effect (부수효과)

입력받은 값의 결과를 돌려주는 것 이외의 다른 어떤 일을 수행하는것

- 변수를 수정 - 자료 구조를 제자리에서 수정 - 객체의 필드를 설정 - 예외(Exception)를 던지거나 오류를 내면서 실행 중단 - 콘솔에 출력하거나 사용자의 입력을 읽어들임 - 파일에 기록하거나 파일에서 읽어들임 - 화면에 출력

함수형 프로그래밍의 장점

• 순수 함수들로 작성하면 모듈성이 증가
• 모듈성으로 인해 생기는 장점
  • 검사(Test)가 쉬워짐
  • 재사용
  • 병렬화
  • 일반화
  • 분석이 쉬워짐
• 버그가 생길 여지가 적다
• 가독성과 유지 관리 편의성이 향상
• 함수를 사용하기 때문에 반복되는 개발이 쉬워진다

왜 함수형 프로그래밍인가?

• 멀티 코어가 기본이 되면서 ‘동시성’ 처리에 함수형 프로그래밍이 강점을 보임
• 불변값을 주로 다루기 때문에 Side Effect가 적어 동시성 처리가 쉬워짐
• 코드 이해하기 쉬움
• 유지보수 쉬움

역시 글보다는 코딩하면서 배우는게 최고인 것 같습니다 :)

출처: https://blog.sonim1.com/113

객체지향 프로그래밍 ?

객체지향 프로그래밍 OOP 란 프로그램을 어떻게 설계하는지에 대한 방법론 중 하나이다.

단순히 데이터와 처리 방법으로 나누는 것이 아니라 수많은 객체라는 단위로 나누고 상호작용으로 서술하는 방식이다.

객체지향 프로그래밍 특성 4가지

1.추상화

• 인터페이스로 클래스들의 공통적인 특성(변수, 메소드)들을 묶어 표현하는 것 

2. 다형성

• 어떤 변수,메소드가 상황에 따라 다른 결과를 내는 것

* 오버로딩(Overloading) : 하나의 클래스에서 메소드의 이름이 같지만, 파라메터가 다른 것* 오버라이딩(Overriding) : 부모 클래스의 메소드를 자식 클래스의 용도에 맞게 재정의하여 코드의 재사용성을 높임

3. 캡슐화

• 실제로 구현 부분을 외부에 드러나지 않도록 하는 것
• 변수와 메소드를 하나로 묶음
• 데이터를 외부에서 직접 접근하지 않고 함수를 통해서만 접근
• ex) public, private, protected
  public : 클래스 외부에서 접근 가능
  private : 클래스 내부에서만 접근 가능
  protected : 상속받은 자식 클래스에서만 접근 가능

4.상속성

• 자식 클래스가 부모 클래스의 특성과 기능을 물려받는 것
• 기능의 일부분을 변경하는 경우 자식 클래스에서 상속받아 수정 및 사용함
• 상속은 캡슐화를 유지, 클래스의 재사용이 용이하도록 해 준다.

객체지향의 5원칙 ( SOLID )

< CLean Code >의 저자, 로버트 마틴이 객체 지향 프로그래밍 및 설계의 다섯 가지 기본 원칙을 마이클 패더스가 SOLID라는 약어로 소개한 것!

S (SRP : Single Responsibility Principle)

한 클래스는 하나의 책임만 가져야 한다.

O (OCP : Open/Closed Principle)

확장에는 열려(Open) 있으나, 변경에는 닫혀(Closed)있어야 한다.

L (LSP : Liskov’s Substitution Principle)

프로그램의 객체는 프로그램의 정확성을 깨뜨리지 않으면서 하위 타입의 인스턴스로 바꿀 수 있어야 한다.

I (ISP : Interface Segregation Principle)

특정 클라이언트를 위한 인터페이스 여러 개가 범용 인터페이스 하나보다 낫다.

D (DIP : ependency Inversion Principle)

추상화에 의존한다. 구체화에 의존하면 안된다.

출처 : velog.io/@ygh7687/OOP%EC%9D%98-5%EC%9B%90%EC%B9%99%EA%B3%BC-4%EA%B0%80%EC%A7%80-%ED%8A%B9%EC%84%B1

웹 개발자로써 "브라우저 렌더링 과정을 말해주세요!" 라고 질문을 받았을 때 답변을 확실하게 못하는 개발자라고 생각해서 하나하나 적어봅니다.

렌더링?

우리가 흔히 렌더링 렌더링 하는 렌더링은 HTML, CSS, JS 등을 브라우저에서 보여주는 과정이라고 생각하면 됩니다.

브라우저 별로 렌더링

엔진이 다릅니다 !  구글 -> 블링크, 사파리 -> 웹킷 이라고 적혀있네요!

그럼 렌더링과정은? 

1. HTML, CSS 를 다운로드 합니다.

2. 다운받은 html, css => Object Model로 만듭니다.

HTML => DOM , CSS => CSSOM

모든 요소들이 다 화면에 표현되는 건 아닙니다.

3. 레이아웃

*뷰포트(Viewport) 내에서 각 노드들의 정확한 위치와 크기를 계산 합니다.
즉 , 브라우저 화면의 어떤위치에 어떤크기로 출력될지 계산 하는 단계라고 할수 있습니다.

*뷰포트(Viewport) 그래픽이 표시되는 브라우저의 영역 , 크기 (사진 참조)
뷰포트는 모바일의 경우 디스플레이의 크기 , PC의 경우 브라우저 창의 크기에 따라 달라집니다.

속성은 px보다는 %로 주는게 좋다고 생각합니다.

4. Paint

Layout 계산이 완료 되면 요소들을 실제 화면에 그리게 됩니다.

1. 주소창에 구글 입력 .
2. 구글 서버로 찾아간다.
3. DNS가 연결해줄 곳을 찾음 (DNS - 실제 서버가 어디있는지 알고 있는 서버)
4. 서버에서 HTML 파일을 클라이언트로 보냄.
5. HTML 파일 파싱 및 DOM Tree 생성
6. link 태그를 만나 css 파싱 및 CSSOM 트리 생성
7. DOM , CSSOM 합쳐 Render Tree 생성
   (8. JavaScript를 만나면? HTML파서는 JS 코드를 실행하기 위해 파싱 중단
8. JS 엔진실행 및 JS코드 파싱)   

이 순서로 진행된다고 합니다.

하나하나 다시 공부해보니까 재밌고 좋은 것 같습니다.

출처 : velog.io/@st2702/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-%EB%A0%8C%EB%8D%94%EB%A7%81-%EA%B3%BC%EC%A0%95