프로그래머스 데브코스 - 9월 1주차 WIL

지인혁·2023년 9월 25일
1
post-thumbnail
post-custom-banner

🤔들어가며

데브코스를 합격하고 교육을 받은지 1주가 지났다. 데브코스에서의 기록을 기존에 작성해왔던 네이버 블로그에 작성할까 싶었지만 이 참에 velog를 사용해보기로 했다.

첫 주의 강의라서 그런지 알고 있었던 내용도 포함되어있었다. 하지만 기초적인 컴퓨터과학 지식과 자바스크립트의 탄생부터 중요한 문법까지 자세하게 설명해줬다. 제일 좋았던 점은 "왜 이렇게 동작하는지" 에 중점을 맞춘 느낌의 교육이라 내가 몰랐던 부분까지 새로 알게되어 탄탄하게 성장하는 기분이였다.

처음에는 강의 내용을 모두 작성할려고 했지만 하나의 WIL에 너무 많은 양이 담기기도 했고 시간적으로도 효율적이지 못했다. 그래서 내가 몰랐던 내용이나, 알고 있지만 정말 중요한 내용을 중점으로 작성할려고 한다.


✅ JavaScript 주요 문법(1) 9.20

메모리

자바스크립트를 공부하면서 메모리에 대한 이해를 한적이 없었다. 강의 첫 날부터 이런 깊은 부분까지 교육해주면서 자바스크립트에서 메모리는 어떻게 할당되고 어떻게 사용되고 있는지 깊게 알게 되었다.

😮 특히 const로 배열, 객체로 선언해도 요소를 변경해도 에러를 발생시키지 않는다는 것을 알고 사용하고 있었는데 heap 메모리의 존재와 객체 타입은 heap 메모리에 저장되며 heap은 동적으로 커지고 작아지는 이유 때문에 const로 배열, 객체를 선언하여 사용할 수 있단느 것을 알게 되었다.

또한 가비지 콜렉터(Garbage Collector)에 대해 알 수 있었는데 가비지 콜렉터는 메모리에 누구도 참조하지 않는 메모리가 있다면 이때 가비지 콜렉터가 이 메모리를 회수해가며 메모리가 관리된다.

스코프

호이스팅

호이스팅에 대해 어느정도 이해가 있었지만 이번 기회에 velog를 통해 다시 정리하면서 몰랐던 부분이 있었다. 바로 let, const는 호이스팅이 되지 않는다고 인지하고 있었지만 let, const도 호이스팅이 되는 것이다.

그리고 호이스팅이 되지만 왜 에러를 발생하는지 TDZ에 대해 더 알게 되었다.

클로저

자바스크립트를 공부해오면서 나름 이해를 했다고 한 키워드 클로저이다.

function counting() {
    let i;

    for(i=0 ; i<5 ; i++) {
        setTimeout(() => {
            console.log(i);
        }, i * 100);
    }
    // 5 5 5 5 5
}

하지만 위 코드가 어떤 결과를 출력할지 예상하지 못한다면 강사님께서 클로저에 대한 이해가 아직 부족하다고 했다.

나는 출력결과를 예상하지 못했고 다시 클로저에 대해 더 공부했다. 공부하면서 렉시컬 환경에 대해 아직 이해가 부족함을 느끼고 새로 알게된 사실이 있었다. 렉시컬 환경이 함수 호출 시에만 생성되는 줄 알았는데 블록 범위 생성시에도 렉시컬 환경이 생성된다는 점이다.

😲 또한 예전부터 클로저를 공부하면서 클로저를 어디에 써먹을 수 있을까? 클로저를 어떻게 이용할 수 있을까? 등 많은 생각이 있었다. 하지만 강사님께서 클로저에 대해 공부해야하는 이유를 한 마디로 설명해주셨다. 클로저를 잘 알아야하는 이유는 유용하게 사용하기보단 알기 힘든 버그를 잘 수정하기 위해서다!


✅ JavaScript 주요 문법(2) 9.21

브라우저에 URL을 입력하면 어떤 일이 발생할까?

IP : 논리적인 주소이며 도로명 주소라 생각하면 이 IP로만으로 실제 위치를 알 수가 없다.
MAC : 물리적인 주소이며 GPS 좌표 위도, 경도라 생각해보자 그럼 실제 위치를 알 수가 있다.

  1. URL을 해석

    • URL은 다양한 정보로 이루어져있으며 이를 해석함
  2. DNS를 조회

    • DNS는 도메인과 IP주소를 서로 변환해줌
    • DNS로 요청을 보내기전에 브라우저 캐시와 hosts 파일을 참조하여 해당 도메인이 캐싱되어있는지 확인하며 있다면 내부적으로 IP를 반환하고 없다면 DNS를 호출하게 된다.
    • DNS가 호출되면 Root Server -> TLD Server -> Autouriti Server 순서로 탐색하게 되며 ip를 반환하게 된다.
  3. 해당 IP가 존재하는 서버로 이동

    • 네트워크 장비 라우터를 통해 이동
    • 동적 라우팅을 통해 이동
  4. ARP를 이용하여 MAC 주소 변환

    • Address Resulution Porotcol
    • 논리 주소인 IP주소를 물리 주소인 MAC 주소로 변환하는 프로토콜
    • 실제 통신을 위해 변하지 않는 고유한 MAC 주소가 필요
    • 네트워크 내 ARP를 Broadcasting하면 해당 IP 주소를 가지고 있는 기기가 MAC 주소를 반환
  5. TCP 통신을 통해 Socket을 연다.

    • 네트워크를 통해 서버로 패킷을 전달
    • 3 way handshake로 연결을 요청
    • 요청이 수락되면 패킷을 받아 처리
  6. 서버는 응답을 반환

    • HTTP 프로토콜로 들어온 패킷을 읽고 처리
    • 요청에 따른 응답을 반환
  7. 브라우저를 렌더링한다

    • 서버에서 받은 HTML 파일을 읽어 DOM Tree를 구축
    • 만들어진 DOM Tree를 이용해 화면에 그린다.
    • 스크립트 파일 실행

주소를 찾을때 한 번에 찾아가는게 아니라 대역폭을 줄여가며 하나씩 찾아가게 된다.

HTTPS

예전에 보안문제로 인해 HTTPS에 대해 찾아본 적이 있었다. 근데 너무 어렵고 복잡해서 그냥 HTTP의 보안 이 추가된 정도만 인지하고 있었다.

하지만 강의에서 HTTPS에 대해 설명은 해주지 않았지만 찾아보라는 선택 과제를 통해 공부를 해봤다. 역시 처음에는 이해하기 힘들어서 유튜브 영상으로 시각적인 이해를 더하며 깊은 동작까지 이제는 이해를 할 수 있었다.

시간

협정 세계시(UTC) : UTC는 세계 표준시를 의미하며, 모든 시간대는 UTC+0을 기준으로 환산한다. 런던은 UTC의 기준점이 되는 도시로서 런던의 시간을 기준으로 +, -로 시간을 계산한다.

타임스탬프(Timestamp) : 타임스탬프는 1970년 1월 1일 0시 0분 0초 이후를 UTC기준으로 흘러간 시간이다. 1970년 이전 시간은 음수로 표현된다. 운영체제마다 다를 수 있지만 유닉스 계열 운영체제에서는 시간을 표시하는 방법을 Unix Time이라고 부른다.

타임존(Timezone) : 타임존은 UTC 기준으로 각 지역의 표준시간이 얼마나 차이를 나타낸다. 예를 들어보자 우리나라는 런던을 기준으로 UTC+9시를 갖는다. 만약 영국이 1시라면 우리나라는 10시가 된다.

그럼 각 지역의 현지 시각은 어떻게 계산할까?? 각 지역에서 발생한 타임스탬프를 지역마다 타임존을 통해 연산해주면 각 지역의 현지 시각을 계산할 수 있다.

😱 학부시절때 sns서비스 프로젝트를 하면서 채팅 내용옆에 현재 시간을 DB에서 꺼내 시각화하는 기능이 있었다. 이때 timestamp를 사용했는데 내 역할이 아니라서 개발할때 시간을 특이하게 저장하는구나 하고 넘어갔다.

근데 강의에서 시간이야기가 나오길래 웬 시간?? 이렇게 생각했다. 그러다 timestamp를 보고 예전 프로젝트와 연관성이 있다고 생각해 더욱 집중하면서 들었다. 이제서야 좀 이해가 되는거 같다 왜 그때 시간을 저렇게 저장했고 글로벌 시간을 고려한다면 이렇게 저장해야하는 이유가 있다는 것을

나중에 Date객체로 글로벌 시간을 계산하는 방법을 공부하여 velog에 기록해야겠다.

프로토타입(Prototpye)

이벤트 루프(Event Loop)

이벤트 루프파트는 이전에 공부한 내용이 있어서 쉽게 이해를 하면서 강의를 보고 있었다. 하지만 마지막에 Queue가 Task Queue말고 다른 큐가 있다는 사실은 선택 과제를 통해 처음 알게된 사실이였다.

모듈(Module)

모듈 : 설계 시점에 의미있는 요소
컴포넌트 : 런타임 시점에 의미있는 요소

웹은 여러개의 자바스크립트로 이루어져 있으며 자바스크립트에서는 js파일 하나가 프로그램이기 때문에 파일 하나 하나를 모듈이라고 한다.

모듈은 import와 export를 통해 불러오거나 내보낼 수 있고 자바스크립트의 런타임 시점에 직접적으로 실행된다.

특징

  • let, var을 생략하고 변수를 선언할 수 없는 use strict로 실행된다.
  • import를 하지 않으면 서로 참조가 불가능하다.
  • 중복으로 실행해도 단 한 번만 평가된다.
  • DOM이 모두 생성된 이후에 지연 실행(defer)된다.

정규표현식

정규표현식은 특정한 패턴을 이용해 문자를 검색, 대체, 추출할 수 있는 방법이다. 대신 성능이 매우 느리지만 매우 편하기 때문에 사용된다.

표현 방법
/regexr/i : '/'를 열면 시작하고 '/' 사이가 패턴이 된다. 그리고 닫는 '/' 이후 플래그가 된다.

생성 방법

  • const regExp1 = new RegExp("^\d+"); // (표현식)
  • const regExp2 = new RegExp("^\d+", "gi"); // (표현식, 플래그)
  • const regexp1 = /^\d+/; // /표현식/
  • const regexp2 = /^\d+/gi; // /표현식/플래그

정규식 관련 메서드

  • RegExp.prototype.test() : 찾는 패턴이 있으면 true 없으면 false
  • RegExp.prototype.exec() : 입력받은 문자열에 찾는 패턴이 있는지 검색후 있으면 패턴정보 반환, 없으면 null 반환
  • String.prototype.match() : 찾고자 하는 패턴이 있는지 검색하는 기능
  • String.prototype.replace() : 찾고자 하는 패턴을 원하는 문자열로 바꾸는 기능
  • String.prototype.search() : 패턴이 있는지 찾은후 위치정보를 반환하는데, 무조건 제일 처음 위치 반환

🤣 예전부터 코딩테스트나 프로젝트를 할때 정규표현식이 항상 발목을 잡았다. 이해는 되는데 잘 사용하는 법이 어려워 손 놓고 있었다. 꾸준히 정규표현식도 연습해 잘 활용할 수 있도록 하자ㅜㅜ

정규표현식 연습 사이트1 https://rubular.com/
정규표현식 연습 사이트2 https://regexone.com/
정규표현식 연습 사이트2 http://alf.nu/RegexGolf?world=regex&level=r00

쿠키, 세션, 웹 스토리지, IndexedDB

쿠키 : 쿠키는 클라이언트 측에서 사용하는 작은 데이터 조각이다. 서버가 HTTP 응답 헤더를 통해 클라이언트에게 쿠키를 전송하고, 이후 클라이언트가 동일한 서버로 요청을 보낼 때마다 이 쿠키 정보가 HTTP 요청 헤더에 포함된다.

쿠키는 브라우저를 닫아도 데이터가 유지되지만 수명시간이 존재한다.

XSS(Cross-Site Script) 공격을 당할 수 있다. JavaScript를 이용해 악의적인 사용자가 다른 사용자의 쿠키값을 탈취할 수 있으며 쿠키를 암호화하지 않고 보내면 쿠키값을 중간에 탈취 당할 가능성이 있다. 이는 HTTPS라는 프로토콜을 통해 해결할 수 있다.

관련 함수

  • set-cookie: 키 : 값 형태로 쿠키를 저장.
  • expires : 쿠키 만료 날짜를 지정.
  • HttpOnly : JavaScript에서 쿠키에 접근 못하도록 막는다.
  • Max-Age: 쿠키 수명을 지정.
  • Domain : 도메인이 일치하는 요청만 쿠키가 전송.
  • Path : 패스와 일치하는 요청만 쿠키가 전송.

Session : 세션은 서버에서 생성하고 관리하는 데이터 저장소다. 사용자가 웹 사이트에 로그인하면 서버에서 해당 사용자를 위한 고유한 세션을 생성하고 그 ID를 클라이언트에게 쿠키를 통해 전달한다.

세션을 서버에 저장하기 때문에 사용자가 많아지면 메모리 관리가 어렵다. 그래도 요즘은 JWT라는 토큰을 사용한다.

웹 스토리지 : 더 넓은 용량과 더 나은 보안성을 제공하는 클라이언트 사이드 스토리지 기능으로, Local Storage와 Session Storage 두 가지 형식이 존재한다.

  • Local Storage

페이지 리로드나 브라우저 종료 후 재실행 등의 상황에서도 데이터가 지속적으로 저장되며, 만료 기간이 없다.

저장했던 도메인과 이용하는 도메인이 다른 경우엔 접근할 수 없으며 key : value 형태로 저장한다.

  • Session Storage

페이지 리로드 및 복원 시에도 유지되나, 탭/브라우저 종료 시 삭제되므로 한 세션이 유지되는 동안만 데이터 저장.

저장했던 도메인과 이용하는 도메인이 다른 경우엔 접근할 수 없으며 key : value 형태로 저장한다.

  • IndexedDB

브라우저에서 사용할 수 있는 클라이언트 측의 대용량, 구조화된 데이터 저장소이며, 네트워크 연결 없이도 작동이 가능하다.

key : value 형태로 데이터가 저장되며 문자열 타입이 아니어도 된다. 인덱스를 사용하여 빠르게 검색이 가능하다.

IndexedDB 작업은 비동기로 처리되므로, 대규모 데이터를 처리하더라도 UI가 멈추지 않는다.


✅ 자료구조 & 알고리즘 9.22

자료구조와 알고리즘

자료구조 : 메모리를 효율적으로 사용하며 빠르고 안정적으로 데이터를 처리하는 것이 궁극적인 목표로 상황에 따라 유용하게 사용될 수 있도록 특정 구조를 이루고 있다.

알고리즘 : 특정 문제를 효율적이고 빠르게 해결하는 것이 궁극적인 목표로 정해진 일련의 절차나 방법을 공식화한 형태로 표현한 것을 말한다.

단순 구조

  • 정수
  • 실수
  • 문자열
  • 논리

선형 구조 : 자료들이 선형으로 나열되어 있는 구조

  • 배열
  • 연결 리스트 : 각 요소를 포인터로 연결하여 관리하는 선형 구조
  • 스택 : LIFO(Last in First Out) 개념을 가진 선형 자료구조

비선형 구조 : 계층적 구조나 망형 구조를 표현하는 구조

  • 트리
  • 그래프

시간 복잡도

O(1) < O(logn) < O(n) < O(nlogn) < O(n2) < O(2^n) < O(n!)

상수항은 무시
ex) n 6 = O(n), n 3 = O(n)

가장 큰 항 외엔 무시
O(n^2 + n) = O(n^2)

스택

연결 리스트

🥱마치며

첫 주 강의를 마치며 첫 WIL이다. 아는 내용도 있었지만 새롭게 알게되거나, 잘못 이해하고 있던 내용도 많았다. 또한 브라우저, 보안 등 여러 cs지식도 자세히 알게되었다.

무엇보다 단순히 암기 방식의 교육이 아니고 선택 과제를 찾아보거나 원리 중점에 설명을 듣고나니 스스로 학습하는 능력과 지식 습득에 있어 더 깊은 이해를 할 수 있는 점이 좋았다.

이러한 지식들을 얼른 활용하여 개발에 적용할 수 있는 상황이 왔으면 좋겠다~

profile
대구 사나이
post-custom-banner

0개의 댓글