개념정리가 중요한 날이였다.

TIL(Today I Learned) - 오늘의 공부

  1. 팀 공부 아티클 스터디
    • 2020년과 이후 JavaScript의 동향에 대해 알아보는 시간을 가졌다.
  2. 노션의 Java 톺아보기 과제 수행
    • 자바스크립트의 정의와 프레임워크들에 대해 알아 보았다.
  3. 왕초보 웹개발 종합반 2주차 (2-8)
    • JavaScript의 기초적인 문법을 배웠다.

TIL(Today I Learned) - 학습 과정 중 특이사항

  • 아티클 스터디의 주제에 대해서 공부하고 최대한 요약하려 했으나 내용이 난잡하게 기록되어(정보가 너무 많아) 있어 검색하며 이해하는데 시간이 많이 걸려 일부만 요약하게 되었다.

  • Java 톺아보기가 의외로 빨리 끝날 줄 알았으나, 여러 자료 정리 및 크로스 체크를 해가며 요약을 해나가니 시간이 많이 걸렸다.

  • GitHub에 코드와 글을 올려서 사이트에 적용시키는데, 새로운 포스트가 적용 안되서 코드들을 다시 봐야했다…

과제 제출

Java 톺아보기

Javascript 이란?

주제 : 자바스크립트란?

자바스크립의 정의

‘웹페이지에 생동감을 불어넣기 위해’ 만들어진 프로그래밍 언어로
자바스크립트는 브라우저뿐만 아니라 서버에서도 실행가능하며
이 외에도 자바스크립트 엔진(JavaScript engine)이라 불리는 특별한 프로그램이 들어 있는 모든 디바이스에서도 동작

브라우저에는 ‘자바스크립트 가상 머신’ 이라는 엔진이 내장되어 있음 ( 코드네임 - 사용처 )
- V8 – Chrome과 Opera
- SpiderMonkey – Firefox
- IE는 버전에 따라 ‘Trident’나 ‘Chakra’라 불리는 엔진을 사용
‘ChakraCore’는 Microsoft Edge에 사용되며,
‘SquirrelFish’는 Safari에 사용

JavaScript가 런타임에 따라 할 수 있는 일

자바스크립트의 능력은 실행 환경(런타임)에 상당한 영향을 받음

  1. Node.js
    • 임의의 파일을 읽거나 쓰고, 네트워크 요청을 수행하는 함수를 지원
  2. 브라우저
    • 페이지에 새로운 HTML 추가 및 기존 HTML 및 스타일 수정
    • 마우스 클릭이나 포인터의 움직임, 키보드 키 눌림 등과 같은 사용자 행동에 반응
    • 네트워크를 통해 원격 서버에 요청을 보내거나, 파일 다운로드, 업로드
    • 쿠키(웹 서버가 생성하여 웹 브라우저로 전송하는 작은 정보 파일)를 가져오거나 설정
    • 사용자에게 질문을 건네거나 메시지를 보여줌
    • 클라이언트 측에 데이터 저장(로컬 스토리지)

브라우저 내의 JavaScript 제약 사항

브라우저는 보안을 위해 자바스크립트의 기능에 제약을 걸어놓았음
=> 이러한 제약은 악성 웹페이지가 개인 정보에 접근하거나 사용자의 데이터를 손상하는 것을 막기 위해 만들어짐

  • 웹페이지 내 스크립트는 디스크에 저장된 임의의 파일을 읽거나 쓰고, 복사하거나 실행할 때 제약을 받을 수 있음
    => 특정 상황에서만 파일 접근을 허용
    => 카메라나 마이크 같은 디바이스와 상호 작용하려면 사용자의 명시적인 허가가 있어야 함

  • 브라우저 내 탭과 창은 대개 서로의 정보를 알 수 없음

  • 페이지를 생성한 서버와 쉽게 정보를 주고받을 수 있지만, 타 사이트나 도메인에서 데이터를 받아오는 건 불가능
    => 가능하다 할지라도 원격 서버에서 명확히 승인을 해줘야 함

그러나 브라우저 환경 밖, 예를 들어 서버라면 이러한 제약은 존재하지 않음

자바스크립트만의 강점

  • HTML/CSS와 완전히 통합할 수 있음

  • 간단한 일은 간단하게 처리할 수 있게 해줌

  • 모든 주요 브라우저에서 지원하고, 기본 언어로 사용됨

자바스크립트 ‘너머의’ 언어들

자바스크립트의 문법 자체만으론 모든 사람의 요구를 충족시키진 못함
=> 브라우저에서 실행 되기 전에 자바스크립트로 transpile(변환) 가능한 언어들이 등장함

자바스크립트로 transpile(변환)이 가능한 언어모음

  • CoffeeScript : 자바스크립트를 위한 ‘syntactic sugar’로 짧은 문법을 도입하여 명료하고 이해하기 쉬운 코드를 작성할 수 있음

  • TypeScript : 개발을 단순화 하고 복잡한 시스템을 지원하려는 목적으로 ‘자료형의 명시화(strict data typing)’에 집중해 만든 언어

  • Flow : 자료형을 강제하는데, TypeScript와는 다른 방식을 사용

  • Dart : 모바일 앱과 같이 브라우저가 아닌 환경에서 동작하는 고유의 엔진을 가진 독자적 언어

3줄 요약

  • 자바스크립트는 브라우저에서만 쓸 목적으로 고안된 언어이지만, 지금은 다양한 환경에서 쓰이고 있음
  • 브라우저 환경에서 가장 널리 사용되는 언어로 자리매겼으며 HTML/CSS와 완전한 통합이 가능
  • 자바스크립트로 ‘트랜스파일’할 수 있는 언어가 많아 언어마다 고유한 기능을 제공가능

Javascript 프레임워크 알아보기

Express.js

  • Express.js의 특징
    1. 미들웨어 ( 요청, 응답 객체 및 다음 미들웨어 함수에 액세스할 수 있는 함수 )
    2. 라우팅 ( 애플리케이션의 엔드포인트(URI)가 클라이언트 요청에 응답하는 방식 )
    3. 템플릿화
      • 서버에서 HTML 템플릿을 생성 하여 웹 페이지에 동적 콘텐츠를 구축할 수 있는 템플릿 엔진을 제공
    4. 디버깅
      • Express는 버그가 발생한 정확한 부분을 식별하므로 작업이 더욱 쉬워짐
  • 장점
    1. Express는 강요된 길이 없으며, 맞춤화가 가능
    2. 요청 처리를 위해 미들웨어를 사용가능
    3. 프런트엔드와 백엔드 개발 에 단일 언어가 사용됨
    4. Express를 사용하면 MySQL, MongoDB 등의 데이터베이스와 빠르게 연결가능
    5. Express를 사용하면 템플릿에 인수를 전달하여 HTML 페이지를 동적으로 렌더링할 수 있음
  • 단점
    1. 때로는 사물을 정리할 구조적 방법이 없어서 코드를 이해할 수 없게 되는 경우도 있음
    2. 콜백이 너무 많은 문제(콜백 지옥)
    3. 표시되는 오류 메시지는 이해하기 어려움

Nest.js

  • Nest.js의 특징
    1. 학습 및 숙달의 용이성
      • Angular 생태계(TypeScript로 개발하는 개발 플랫폼)에서 전환하는 개발자에게 접근하기 쉽고, 빠르고 원활한 개발 프로세스를 촉진
    2. 견고한 아키텍처 구조
      • 사전 설정된 구조는 확장성과 유지 관리성이 뛰어난 엔터프라이즈급 애플리케이션의 생성을 간소화
    3. 백엔드 서비스의 다양성
      • 다양한 백엔드 서비스를 쉽게 만들 수 있도록 지원
      • 표준 아키텍처의 대부분은 이미 Nest.js 프레임워크에 통합되어 있어 개발을 가속화
    4. 최신 기술 활용
      • TypeScript와 같은 최신 기술을 활용하여 Nest.js는 뛰어난 문서화와 간단한 단위 테스트 기능
      • 확장 가능하고 유지 관리가 가능하며 엔터프라이즈에 적합한 애플리케이션을 구축할 수 있음
    5. 광범위한 커뮤니티 지원
      • TypeORM 및 Mongoose와 같은 기본 개념부터 로깅, 검증, 캐싱 및 WebSockets와 같은 고급 기능에 이르기까지
        Nest.js는 개발 노력을 강화하는 데 충분한 리소스를 제공함
  • 장점
    1. TypeScript를 활용하여 유형 검사 및 코드 자동 완성과 같은 기능을 통해 강력한 타입을 지원하고 개발자 생산성을 향상시킴
    2. 모듈식 아키텍처는 확장성을 높여주므로 대규모 애플리케이션과 마이크로서비스에 적합함
    3. 종속성 주입(DI) 패턴을 채택하여 모듈화되고 재사용 가능하며 테스트 가능한 코드를 촉진함
    4. 이벤트 기반 아키텍처와 반응형 프로그래밍 모델을 활용하여 많은 수의 동시 요청을 효율적으로 처리해 실시간 애플리케이션을 빌드하는 데 적합
    5. Express.js 프레임워크 위에 구축되어 강력한 기능을 활용하면서 자체적인 추가 추상화(간결화)와 기능을 추가한 것이기에 Express.js와 호환성이 높음
    6. NestJS에는 포괄적인 설명, 튜토리얼 및 예제를 제공하는 훌륭한 문서가 있음
  • 단점
    1. 보일러플레이트 코드로 미니멀리스트 프레임워크에 비해 더 많은 코드를 작성해야 할 수 있음
    2. 미니멀리스트 프레임워크에 비해 도입하는 추가 추상화와 계층으로 인해 약간의 성능 오버헤드가 발생할 수 있음
    3. NestJS는 Express 미들웨어와의 호환성으로 이점을 얻지만 Express나 Koa와 같은 다른 프레임워크에 비해 상대적으로 생태계가 작음