MancityBallboy 흔적 남기기

비동기처리와 콜백함수

20 Jan 2021

비동기 처리란?

자바크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드이 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바 스크립트의 특성을 의미 합니다.

Example

function getData() {
    var tableData;
    $.get('https://domain.com/products/1', function(response) {
        tableData = response;
    });
    return tableData;
}

console.log(gerData()) // undefined

이와 같이 데이터를 용청하는 것이 비동기로 처리 되었기 때문에 미처 데이터가 다 불러 오기 전에 tableData가 리턴 되어서 undefined로 출력되게 되는 것이다. 간혹 네이버와 같은 홈페이지를 들어가면 어떤 부분은 먼저 나오고 어떤 부분은 빈칸으로 처리 되었다가 나중에 채워지는 것을 볼 수 있는데 이런 것들이 비동기 처리로 되어서 후에 표시되게 되는 것이라고 할 수 있다. 많은 정보를 가져오게 되면 그 정보를 하나 실행하고 기다리고 다시 하나 실행하는 과정에서 너무 많은 시간이 걸리기 때문에 비동기 처리가 필요한 것이다.

Example

console.log('Hello')

setTimeout(function(){
    console.log('Bye');
}, 3000);

console.log('Hello Again')

// Hello
// Hello Again
// 3초 후 Bye

setTimeout 역시 비동기 처리이기때문에 Hello Again 이후에 Bye가 출력되게 된다.

콜백 함수란?

콜백함수는 비동기 처리 방식의 문제점을 해결 할 수 있다.

Example

function getData(callbackFunc) {
    $.get('https://domain.com/products/1', function(response) {
		callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨준다.	          
    });
}

getData(function(tableData){
    console.log(tableData);  // response의 값이 tableData에 전달됨.
});

이런식으로 콜백 함수를 사용하면 ajax 통신이 끝날때 원하는 동작을 실행 시킬 수 있습니다.

즉, 콜백함수는 우리가 원하는 비동기 처리를 한 후 다른 일을 하다가 그 비동기 처리가 끝난 시점에 원하는 동작을 할 수 있게끔 도와주는 것이라고 이해하면 될것이다.

조금 더 심화로 가면 콜백에 콜백의 꼬리를 무는 형식인 콜백 지옥을 해결할 수 잇는 Promise와 Async가 있다. 그 부분은 다음에 심화로 다시 알아 보도록 하겠습니다.

출처

https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/

브라우저는 어떻게 동작하는가?

19 Jan 2021

브라우저의 기본구조

  1. 사용자 인터페이스

  2. 브라우저 엔진

    사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어

  3. 렌더링 엔진

    HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시

    크롬은 webkit엔진을 이용한다.

  4. 통신

    HTTP요청과 같은 네트워크 호출

  5. UI백엔드

  6. 자바스크립트 해석기

  7. 자료저장소

    쿠키를 저장하느넋과 같이 모든 종류의 자원을 하드디스크에 저장할 필요가 있다.

렌더링 동작과정

  1. DOM 트리 구축 위한 HTML 파싱
  2. 렌더 트리 구축
  3. 렌더 트리 배치
  4. 렌더 트리 그리기

일련의 과정들이 점진적으로 이루어지긴 하지만 렌더링 엔진은 좀 더 나은 사용자 경험을 위해서 가능하면 빠르게 내용을 표시하기 위해 모든 HTML을 파싱하는 것을 기다리는 것이 아니라 일부 렌더 트리는 우선 배치 그리고 그리기를 시작한다. 그래서 네트워크로 부터 나머지 내용이 전송되기전에 받은 내용을 우선적으로 표시할 수 있는 것이다.

파싱의 과정과 같은 심화 학습은 다음에 기회되면 알아 보도록 하겠다.

참고 사이트

https://d2.naver.com/helloworld/59361

작년을 회고 하며 (1)

18 Jan 2021

한달간의 휴식(?)

20년도 하반기 공채가 끝이 나고 약 한달간의 휴식? 일탈? 의 시간을 가지고 돌아왔다. 사실 취업이 실패로 끝이 났을때는 심리적 타격이 크지 않다고 생각했지만 시간이 점점 지나면서 또 다시 취업준비를 시작해야한다는 것이 나에게는 큰 마음의 짐이 되었다. 지난 1년은 Ssafy에서 교육을 받고 심지어 지원금까지 받으면서 준비했던 터라 부담감도 덜하고 누군가의 가르침을 받는 상황이다 보니 편하게 공부를 했었다. 하지만 이제는 스스로 배우고 성장해야 하는 처지에 놓여서 좀 더 어깨가 무거워진 느낌이라 현실에서 도망가고 싶었던 것 같다. 그래서 지난 1년을 돌아보면서 새로운 1년을 준비하려고 한다.

작년의 나

  • 카카오페이 최종면접
  • 국민은행 최종면접
  • 파수 최종면접

작년의 주요 성과를 정리하면 이렇게 요약할 수 있을 것 같다. 파수는 시간이 여의치 않아 참가하진 못했지만, 나머지 두 기업은 최종에서 광탈 하였다.

카카오페이 면접 소감

1차 면접

매우 자유로운 면접이었다. 내가 생각하던 카카오의 문화와 걸맞는 그런 분위기에서 비대면 면접을 진행하였다. 사실 1차 면접을 실무면접을 볼 것이라 예상하였지만, 1차 면접은 인성과 경험과 프로젝트, 기술 스택 위주로 면접이 진행되었다. 크게 어렵지 않았고 이때까지 봐왔던 면접들중 가장 많이 웃으면서 진행했던 면접이었다.

2차 면접

1차때 실무지식에 관한 질문의 거의 나오지 않은 터라 2차 면접에서 나를 압박할만한 많은 직무관련 질문들이 많이 나올 것으로 예상은 하였지만.. 나의 생각보다는 더 어려웠던 면접이었다.

기억나는 질문들을 추려보면

  • 쓰레드에 대해서 아는가?
    • 잘 모른다고 대답
    • 멀티 스레드에 대해서는 아는가?
    • 잘 모른다고 대답
    • django를 이용하였다고 하였는데 멀티 스레드를 이용하지 않고 가능하던가?
    • 그렇다. 라고 하며 대충 간단하게 구현되었던터라 괜찮았던 것 같다고 언급
  • 세션에 대해서 아는가?
    • 잘 모른다고 대답.
  • Restfull API란?
    • 잘 대답했던 것 같다.
  • 나를 가장 잘 표현하는 단어를 무엇이라 생각하는가?
    • 역시 라는 단어라 대답
    • 그렇게 생각한 이유는?
    • 항상 팀원들이 원하는 작업을 수월하게 해내며 어려운 부분을 잘 해결하기 때문이다.
    • 그런 경험에 대해 설명해 줄 수 잇겠는가?
    • 사실 너무 사소한 경험들이라 그리고 어떤 경험에 대해 얘기하면 좋을지에 대한 정리가 되지 않아 뇌정지옴….. ㅠ
    • 기억나지 않은면 넘어가도록 하겠다라고 하시며 넘어감

이외에 다른 많은 질문들이 있었지만 사실 몇몇개의 질문을 받으면서 내가 이정도도 모르나와 같은 자괴감에 빠지면서 면접은 실패의 구렁텅이로 빠져버렸다. 아직 나는 이것을 모르지만 실무에서는 남들보다 잘 할 수 있다는 자신감을 가지고 끝까지 좋은 모습을 보여야 했지만 가고 싶은 기업이다 보니 극복을 하지 못했던 것이 너무 아쉬웠다.

면접을 준비하는 내내 스스로 너무 빨리 찾아온 기회에 허둥지둥 했던 것 그리고 지금은 기업에 비해 내가 너무 부족하다는 생각이 면접 실패의 원인이었다고 생각한다.

객체지향프로그래밍

03 Dec 2020

정의

객체 지향의 가장 기본은 객체이다. 객체의 핵심은 기능을 제공하는 것이다. 객체를 정의할 때 내부적으로 어떤 데이터를 가지고 있는지가 아닌 제공할 기능을 정의해야 한다. 이러한 객체의 기능들을 오퍼레이션이라 부른다.

즉, 객체는 오퍼레이션으로 정의된다.

시그니처

오퍼레이션의 사용법을 구성하는 것이다.

  1. 파라미터 및 파라미터 타입
  2. 기능 식별 이름
  3. 기능 실행 결과 값 및 타입

인터페이스

객체가 제공하는 모든 오퍼레이션 집합을 객체의 인터페이스라고 부른다. JAVA 언어에서의 인터페이스와는 다르며 객체를 사용하기 위한 명세를 의미한다.

메시지

오퍼레이션의 실행을 요청하는 것을 메시지를 보낸다고 표현하며 메소드를 호출하는 것이 메시지를 보내는 과정에 해당됩니다.

책임

객체는 자기가 가진 기능에 대한 책임을 가지게 됩니다. 하나의 객체가 많은 기능을 포함하여 많은 책임을 가지게 되는것은 절차 지향 프로그래밍과 다를바 없게 됩니다. 그래서 객체가 적은 기능을 가지고 책임의 크기가 작을 수록 프로그래밍이 유연해집니다. 이것이 단일 책임 원칙(SRP) 입니다.

단일 책임 원칙

하나의 객체는 하나의 책임만을 가져야 합니다.

의존성

객체가 다른 객체를 사용하는것을 의존한다고 할 수 있습니다. 의존의 의존을 거듭하다 보면 의존의 영향 때문에 객체를 변화될 수 있다. 하지만 이런 문제를 막기위해 의존역전 법칙(DIP)을 지켜야 합니다.

의존 역전 법칙

고차원 모듈은 저차원의 모듈에 의존하면 안되며, 이 모듈은 모두 다른 추상화된 것에 의존해야한다.

자신보다 변하기 쉬운 것에 의존하는 것을 추상화된 인터페이스나 상위 클래스를 두어 변하기 쉬운 것의 변화에 영향을 받지 않게 하는 것이다.

### 캡슐화

객체가 내부적으로 기능을 어떻게 구현하는지를 감추는 것이다. 내부 기능 구현이 변경 되더라도, 그 기능을 사용하는 코드는 영향을 받지 않도록 해준다. 내부 구현 변경의 유연함을 주는 기법이 캡슐화이다.

즉, 객체 내부를 보호함으로써 외부의 잘못된 사용으로 인해 객체가 손상되는 것을 막는 것이다.

캡슐화를 위한 2가지 규칙

  1. Tell, Don’t ask

    데이터를 묻지 말고 기능을 실행하라는 의미이다. 데이터를 읽는 대신 메소드를 통해 데이터에 접근해야 한다.

  2. 데미테르 법칙

    메서드에서 생성한 객체의 메서드만 호출

    파라미터로 받은 객체의 메서드만 호출

    필드로 참조하는 객체의 메서드만 호출

상속

상속을 통한 재사용의 단점

  1. 상위 클래스 변경의 어려움

    상위 클래스를 상속한 하위 클래스에 영향을 줄 수 있기 때문이다.

  2. 클래스의 불필요한 증가

    유사한 기능을 확장하는 과정에서 클래스의 개수가 불필요하게 증가할 수 있다.

  3. 상속의 오용

    같은 종류가 아닌 클래스의 구현을 재사용하기 위해 상속을 받게 되면 잘못된 사용으로 인한 문제가 발생한다.

이와 같이 상속으로 인해 생기는 문제점을 해결할 수 있는 방법이 객체 조립 입니다.

객체 조립이란 보통 필드에서 다른 객체를 참조하는 방식으로 구현됩니다.

상속에 비해 조립을 통한 재상용의 단점은 런타임 구조가 복잡해지며 구현이 어렵습니다.

구현/구조의 복잡함보다 변경의 유연함을 확보하데서 오는 장점이 크기때문에, 상속보다 먼저 고려해보아야 하는 방법입니다.

상속은 재사용의 관점에서가 아닌 기능의 확장의 관점에서 이루어져야 합니다. 그리고 IS-A관계가 성립되어야 합니다.

IS-A 관계란?

~는 ~이다. 가 성립되는 관계를 의미하며, 부모 클래스를 상속받아 자식 클래스를 만든다고 할때, 자식 클래스는 부모 클래스이다.가 성립되는 관계입니다.

예를 들면, 포유류를 부모 클래스 개를 자식클래스라고 하면 개는 포유류로부터 모든 특징을 상속을 받습니다. 그리고 개는 포유류입니다. 가 성립됨을 볼 수 있습니다.

객체 지향적 설계 원칙

SOLID

SRP : 단일 책임 원칙

OCP : 개방 - 폐쇄 원칙

LSP : 리스코프 치환 원칙

ISP : 인터페이스 분리 원칙

DIP : 의존 역전 원칙

단일 책임원칙

클래스는 단 하나의 책임을 가져야 합니다.

개방-폐쇄 원칙

확장에는 열려있어야 하며 변경에는 닫혀 있어야 합니다.

리스코프 치환 원칙

상위 타입의 객체를 하위 타입의 객체로 치환하여도 상위 타입을 사용하는 프로그램은 정상 작동 해야 합니다.

인터페이스 분리 원칙

인터페이스는 그 인터페이스를 사용하는 클라이언트를 기준으로 분리 해야 한다. 각 클라이언트가 사용하지 않는 인터페이스에 변경이 발생하더라도 사용되는 인터페이스에 영향을 받지 않도록 해야 한다.

의존 역전 원칙

고수준 모듈은 저수준 모듈의 구현에 의존해서는 안된다.

클래스

클래스는 객체를 만드는 설계도이다. 메소드와 필드로 구성됩니다.

인스턴스

인스턴스는 클래스를 이용해 선언되어 메모리에 할당된 객체를 의미 합니다.

메소드

어떠한 특정 작업을 수행하기 위한 명령문의 집합이라 할 수 있습니다.

접근제어자 반환타입 메소드이름(매개변수목록){
   // 구현
}

접근제어자 : 해당 메소드에 접근할 수 있는 범위 지정

반환 타입: 반환하는 데이터 타입을 명시

구현 : 메소드의 고유 기능을 수행하는 명령문의 집합

메소드 오버로딩

메소드를 정의할 때 같은 이름으로 중복하여 정의 할 수 없지만 메소드 오버로딩을 이용하면 중복하여 정의 할 수 있습니다.

매개 변수의 타입이나 갯수를 다르게 하여 같은 이름의 다른 메소드를 정의 할 수 있으며 사용되는 이름을 절약할 수 있고 메소드를 호출 할 때 전달할 매개변수의 타입이나 개수에 대해 신경쓰지 않아도 되는 장점이 있습니다.

참고사이트

  • http://www.tcpschool.com/java/java_class_intro
  • https://webclub.tistory.com/156
  • https://asfirstalways.tistory.com/182?category=660807
  • https://asfirstalways.tistory.com/177
  • https://github.com/JaeYeopHan/Interview_Question_for_Beginner/tree/master/Development_common_sense#object-oriented-programming

React 이해하기 (1)

01 Dec 2020

React Dom

index.tsx

ReactDOM.render(
  <React.StrictMode>
      <App />
  </React.StrictMode>
  document.getElementById('root')
);

리액트의 좋은 점은 리액트 Dom에 있다고 할 수 있다. 처음에 <div class='root'></div>안에 포함된 부분을 렌더링 한 후에는 기존에 렌더링된 엘리먼트들과 변경된 엘리먼트만 자동으로 비교하여 업데이트 한다는 것이다.

경험에 비추어 볼 때 특정 시점에 UI가 어떻게 보일지 고민하는 이런 접근법은 시간의 변화에 따라 UI가 어떻게 변화할지 고민하는 것보다 더 많은 수의 버그를 없앨 수 있습니다. 출처 : https://ko.reactjs.org/

React 처럼 생각하기

  1. UI를 계층별로 component 구성하기

  2. 정적인 버전을 만들어 보기

  3. UI에 대한 완전하지만 최소한의 state 구성하기

    ex) todo리스트는 리스트만 필요하지 todo 개수에 대한 정보는 state에 저장할 필요가 없다 왜냐하면 todo리스트의 길이를 가져오면 되기 때문이다.

  4. 그리고 state가 어디에 존재해야 하는지 생각해보자.

    • state를 기반으로하는 모든 컴포넌트 찾기
    • 공통 소유 컴포넌트 찾기
    • 공통으로 state를 소유하는 컴포넌트들은 최상위 컴포넌트에 state를 저장해야 합니다.
    • state를 저장할 적절한 컴포넌트를 찾지 못한다면 state를 보관하는 최상위 컴포넌트를 생성하는 것도 좋은 방법입니다.

  5. 역방향 데이터 추적해보기

  • 참고사이트

    https://ko.reactjs.org/