제2회 프론트엔드 조사 발표 자료

3774 단어 프런트 엔드웹자바스크립트초보자미경험 엔지니어

제2회 프런트 엔드 조사 발표~TypeScript/Sass/webpack~



마지막 회의



제 1 회 프론트 엔드 조사 발표는 여기

  • 자바스크립트의 개발 효율성을 높이고 싶습니다.

  • TypeScript를 사용해 보겠습니다


  • CSS의 서비스 가능성을 향상시키고 싶습니다.

  • Sass를 사용해 보자

  • BEM을 사용해 봅시다


  • 페이지 표시 속도를 향상시키고 UX를 향상시키고 싶습니다.

  • webpack을 사용해 보자

  • SPA를 도입해 보자


    • 이번 화제



    TypeScript, Sass, webpack을 사용한 샘플로 어떤 이점이 있는지 설명합니다.

    TypeScript/Sass/webpack의 예



    -전제지식-
  • TypeScript나 Sass로 쓴 코드는 브라우저에서 해석할 수 있는 언어로 변환할 필요가 있다.
  • TypeScript➡JavaScript
  • Sass➡CSS

  • 이 변환을 트랜스파일이라고 한다

    • 샘플 페이지




  • 버튼을 클릭하면 날짜가 표시되는 페이지


  • 버튼 장식 ➡CSS
  • 버튼 클릭시 동작 ➡ JavaScript


  • 버튼 장식 ➡Sass
  • 버튼 클릭시 동작 ➡TypeScript

    • Sass



    우선 일반 CSS로 작성한 경우

  • CSS와 실제 구조가 직관적으로 일치하지 않습니다
  • 색상과 같은 공통 설정을 관리하기 어렵습니다

    • Sass(SCSS기법)로 쓰면 구조를 알기 쉽다!

  • 중첩 블록에서 CSS의 구조가 직관적이고 이해하기 쉽습니다
  • 변수를 사용할 수 있으므로 색상 등을 관리하기 쉽습니다

    • TypeScript





    형을 명시하기 때문에 어떤 처리인지 파악하기 쉽다


  • 코딩 중, 변환시에 구문 에러를 알 수 있다
  • JavaScript는 오류를 알지 못하고 놓치는 경우도 있습니다


    • webpack




  • 자바 스크립트와 CSS를 번들로 js를 내뿜는다
  • 트랜스파일~번들의 자동화도 할 수 있다

    • 자꾸 자바 스크립트와 CSS를 웹 팩으로 번들


  • 불필요한 줄 바꿈이나 공백이 삭제되었습니다


  • 변수 선언 및 변수 이름이 최적화되었습니다

    • 제대로 움직이는


    정리：TypeScript／Sass／webpack을 사용하면・・・


  • 보기 쉬운 코드 & 정적 체크로 개발 효율 향상
  • CSS 복잡화 회피, 유지 보수성 향상
  • webpack에 의한 불필요 코드 삭제 → 번들로 경량화
    • 여유를 선택해보세요
    Prettier 입문

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage