[스파르타 _ 리액트 과정] 9일차

et Ji·2022년 11월 10일
TIL내배캠 리액트랜더링스파르타 코딩클럽알고리즘웹 통신웹서비스
0

TIL

목록 보기
14/40

📜 진행 내용

  • [강의수강] 웹개발 보충 실시간 강의 - 최원장 튜터님
  • [강의수강] 알고리즘 실시간 강의 - 강창민 튜터님
  • [강의수강] 자료구조, 알고리즘

💡 배운내용

< 웹개발 보충 강의 : client - server - db 구조 >

  • 웹 프론트엔드의 이해에 앞서..

    • 웹에서 프론트엔드와 백엔드가 통신하는 법을 먼저 아는 것이 중요하다.

  • 웹 서비스는 어떻게 제공될까?

👉 식당을 예로 들어볼 때,
서버들이(웨이터) 기본 세팅을 하고, 손님이 주문(요청)을 하면, 제공(요청에 대한 응답)을 해준다.
이게 바로 웹 서비스가 작동되는 원리와 같다.

  • 웹 서비스의 제공 과정
    • 사용자가 브라우저에서 url로 웹 서버에 어떤 것을 ‘요청’한다.
      - 예) 웹 사이트 주소창에 url을 입력해서 엔터를 딱 누르면 웹사이트 메인 화면이 보여진다!
      - 예 2) 웹 사이트의 화면에서 버튼을 클릭하면, 버튼과 연결된 url이 서버에 전송!
    • 웹 서버는 이 요청을 받아서 웹이라는 서비스를 제공해준다.
    • 서버는 리턴이라는 키워드를 이용해 요청에 대한 응답을 해주는 것.
    • 이때 서비스로 제공 받는 응답 값은 여러가지가 될 수 있으며, 그 중 하나가 렌더링이다.
    • 서비스를 제공 받을 때의 방식은 비동기/동기적일 수 있다.
  • 서버와 클라이언트는 경로(route)와 메서드(method, 요청방식)가 동일해야 해당 함수 안의 실행 코드가 실행된다.
    • 클라이언트가 GET방식으로 요청을 한다면, 서버는 GET방식으로 요청 시 응답 값을 되돌려 준다. (기본적으로 GET이 디폴트값이다.)
      • 경로(route: 길, 노선, 보내다) : 클라이언트에서 요청이 들어오면 어디로 갈지 경로를 정해주는 것 @app.route('/')
      • 메서드(HTTP Method) : 클라이언트가 서버에 정보를 요청하는 수단 / 방법
        • GET : 데이터 조회시(Read)
        • POST : 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 시

※ GET과 POST의 차이점

  • GET은 전달하는 파라미터(매개변수)를 노출한다.
  • POST는 전달하는 파라미터(매개변수)를 노출하지 않는다.
    • 파라미터란, 예를 들어 로그인 시 아이디와 패스워드를 가지고 요청할 때 이 아이디 값과 패스워드 값(서버로 전달되는 값)을 말함.

👉 참고 개념

  • 브라우저 : 사용자가 서버에 요청하기 위한 도구
  • 클라이언트 : 사용자와 브라우저를 묶어서 말한다.
  • (웹) 서버 : 서버가 있는 프로그램/컴퓨터!
    - 서버가 돌아가는 컴퓨터는 24시간 돌아가야 되는데, 개인의 컴퓨터를 24시간 구동하기란 불가능하다.
    우리가 서버가 있는 컴퓨터를 다 살 수 없으니, 개발을 할 때는 로컬 환경을 이용하거나(로컬 개발환경) 서버가 돌아가는 컴퓨터를 모아놓은 환경을 빌려서 사용할 수 있다.
  • 로컬개발환경 : app.py 파일을 실행하여 브라우저에 접속하며, 127.0.0.1의 IP 주소, 포트 넘버는 기본 5000으로 설정한다.
  • IP : 인터넷에 연결되어 있는 장치들의 고유 식별 주소
  • URL : 해당 서버의 주소, 하위 디렉토리 위치까지 표시 한다.
  • 포트(PORT) : IP에서 프로세스 구분을 위해 사용하는 번호, 즉 IP주소에 진입할 수 있도록 정해진 통로.
    예 ) 한국에 들어올 수 있는 항구가 인천, 부산 등 몇 개만 있을 경우, 이 항구의 개념을 서버에서는 ‘숫자 번호’로 쓰는 것이다.
    항구를 구분하기 위한 번호 중 하나가 (localhost:) 5000인 것.
  • 도메인과 URL의 차이 : 도메인은 해당 서버의 주소, URL은 서버주소 + 하위 위치까지 표시
  • IP와 도메인, URL의 차이 : IP는 지도상에서 내 위치가 경도, 위도로 표시되는 것과 같고, 도메인(,URL)은 정해진 주소 표기법에 따라 '서울시OO구.. ' 식으로 표기하는 것과 같다고 생각한다.

웹 서비스의 제공 과정인 마지막 단계에서 서버가 응답값으로 주는 것 중 하나인 랜더링

  • 렌더링은 어떻게 일어나는가?
    • 렌더링이란? 서버로부터 HTML 파일을 받아, 브라우저(클라이언트)에 그려주는 것
  • 렌더링의 과정
    • 브라우저에서 서버로부터 HTML 파일을 요청해서 다운 받는다.
    • 렌더링 엔진(브라우저 엔진)은 HTML을 파싱해서 DOM트리를 만든다.
      ※ 자바스크립트 엔진과는 다른 것!
    • CSS파일과 HTML파일에 포함된 스타일 요소를 파싱하여 CSSOM 트리를 만든다.
    • 스타일 적용 우선 순서에 따라 CSSOM 트리가 만들어진다.
      • 브라우저의 자체 스타일보다 사용자 정의 스타일이 더 높음
        - 사용자 정의 스타일 : 상위로 갈 수 록 순서가 높음.
        1. 인라인 스타일 (inline style) : HTML 태그에 적용된 스타일
        2. 내부 적용 스타일 (internal style) : HTML의 태그 안에 style 적용
        3. 외부 적용 스타일 (external style) : CSS파일을 분리해서 스타일 적용
    • DOM 트리와 CSSOM트리를 결합하여 렌더링 트리를 형성한다.
    • 렌더링 트리에서 각 요소 노드의 크기와 위치를 계산한다.
    • 계산된 노드를 브라우저 화면에 그려준다.
  • 기타 내용
    • 리눅스 명령어를 외울 땐, 그 단어 뜻을 찾으면 이해-암기가 빠르다. ( 다른 용어들도 마찬가지 )
      • 예 ) ls → list , cd → change directory, pwd → print working directory
    • 실제 현업에서는 소통 능력이 중요하다. 개발 직군이 아닌 다른 팀과 소통할 때 개발 용어를 최대한 자제해서 쉽게 설명할 것.

< 자료구조, 알고리즘 >

1-6~7. 시간 복잡도 판단하기

  • 시간 복잡도
    • 입력 값에 따라 문제를 해결하는데 실행되는 연산을 수치화 한 것
      • 알고리즘이 문제를 해결하는데 걸리는 시간.
      • 연산 횟수(시행 횟수)를 센다. → 대입/ 비교 등의 1줄이 ****실행되는 걸 1번의 연산으로 친다.
  • 공간 복잡도
    • 입력 값에 따라 문제를 해결하는데 사용하는 공간
      • 알고리즘이 실행될 때 사용하는 메모리의 양
👉 입력값이 늘어남에 따라, 공간 복잡도의 실행 시간 증가값은 시간 복잡도의 실행 시간의 증가값보다 훨씬 적다.

공간 복잡도 보다 시간 복잡도에 신경 쓰는 게 중요하다!

1-8. 점근 표기법

  • 점근 표기법

    : 알고리즘의 성능을 수학적으로 표기하는 방법. ‘효율성’을 평가하는 방법이다.

    • 종류
      • 빅오(Big-O) 표기법 : 최악의 실행 시간을 나타내준다.
        • 표기 예) O(N)
      • 빅 오메가(Big-Ω) 표기법 : 최선의 성능이 나오는 시간을 나타낸다.
        • 표기 예) Ω(1)

  • 알고리즘의 성능은 입력 값에 따라 달라질 수 있다.

  • 알고리즘을 세울 때는 최악의 경우를 대비해야 되기 때문에, 빅오 표기법의 시간 복잡도를 사용해 분석한다고 생각하라.

👉 알고리즘 분석 시 리마인드!
  1. 입력 값에 비례해 얼마나 늘어날지 파악해보기.
    → 1(상수값)? N? N²
  2. 공간 복잡도 보다는 시간 복잡도를 더 줄여보자.
  3. 최악의 실행 시간에 대해 고민하기. (빅오 표기법)

1-9. 알고리즘 더 풀어보기 (1)

✍️ 곱하기 or 더하기

  • Q. 문제 설명

    ❓ Q. 다음과 같이 0 혹은 양의 정수로만 이루어진 배열이 있을 때, 왼쪽부터 오른쪽으로 하나씩 모든 숫자를 확인하며 숫자 사이에 '✕' 혹은 '+' 연산자를 넣어 결과적으로 가장 큰 수를 구하는 프로그램을 작성하시오. input = [0, 3, 5, 6, 1, 2, 4] 단, '+' 보다 '✕' 를 먼저 계산하는 일반적인 방식과는 달리, 모든 연산은 왼쪽에서 순서대로 이루어진다. - 파이썬 풀이 
           def find_max_plus_or_multiply(array):
           # 이 부분을 채워보세요!
           sum = 0
           for num in array:
             if num <= 1 or sum <= 1:
               sum += num
             else:
               sum *= num
       
           return sum
       
       result = find_max_plus_or_multiply(input)
       print(result)
    • 자바스크립트 풀이
        const solution2 = function(array) {
            let sum = 0;
            array.map((number) => number <= 1 || sum <= 1 ? sum += number : sum *= number)
            return sum;
        }
👉 시간 복잡도 : 1차 반복문(for)이 나왔으므로, 시간 복잡도를 생각했을 때 O(N)만큼 
     즉, 배열의 길이만큼 실행 시간이 걸린다고 생각하면 된다.

⁉️ 어려웠던 내용

  • 하나의 개념에 대해서 배울 때, 모르는 개념이 나와서 그 부분을 찾다보면 또 모르는 개념이 나오고, 다시 찾아보고의 반복이 많았다. 기본적으로 알고 있어야 할 개발 지식/ 용어 등을 틈틈이 복습해서 익혀야겠다.

❎ 한 번 더 공부할 내용

🔗 출처

profile
et Ji
codesign
이전 포스트

[스파르타 _ 리액트 과정] 8일차

다음 포스트

[스파르타 _ 리액트 과정] 10일차

0개의 댓글