This document contains summaries of 3 topics: 1. The Airbnb JS Style Guide is presented as a coding style guide to enhance developer experience and collaboration. It discusses code quality practices like ESLint, Prettier, and clean code. 2. Sass is introduced as a CSS preprocessor that addresses limitations of CSS syntax. It allows features like variables, nested rules, and mixins to make CSS more modular and maintainable. 3. The document closes with a brief Q&A section.

1. 프로젝트 아스테라
✨ ✨

2. Contents 2
1
3
Airbnb JS Style Guide
┃개발자 경험 향상을 위한, 협업을 위한 코딩 스타일 지침서
Sass(Scss)
┃CSS의 한계를 보완하기 위한 전처리기
Q&A
┃질의응답

3. 1. Airbnb JS Style Guide
개발자 경험 향상을 위한, 협업을 위한 코딩 스타일 지침서

4. what is Airbnb?

5. 개발자 경험 + 협업 능력 향상을 위한 방법들은 많다!
ESLint Prettier Clean Code

6. 하지만 조금 더 기본적인 가이드가 있으면 좋지 않을까?
그렇게 나온 것이 프로그래밍 스타일 가이드

7. 출처: Compare the Top 3 Style Guides and Set Them Up With ESLint

8. 코드를 아름답게 짜고 싶은 분들에게 바칩니다.
무지성 코딩 ㄴㄴ

9. #1. Array

10. #2. Object

11. #3. Destructuring

12. #4. Function

13. #5. String

14. #6. Iterator

15. 가이드를 준수하며 개발자 경험이 향상된 나의 모습

16. 2. Sass(Scss)
CSS의 한계를 보완하기 위한 전처리기(Pre-processor)

17. 전처리기(Pre-processor)를 알아보기 전에
CSS의 문법적 한계를 살펴보자!

18. 딱 보기에는 문제가 없을 것 같은데..

19. CSS는 웹 규모가 커지면 점점 불편함이 생긴다
불필요하게 반복되는 선택자와 속성이 대표적!

20. 그래서 문법을 확장한 전처리기들이 등장하기 시작!

21. Syntatically Awesome Style Sheet ( ≒ SCSS)
문법적으로 아주 어———썸한 스타일링 기술 😎

22. #1. 변수와 데이터 타입
CSS SCSS

23. #2. 중첩 표현 (부모-자식 & 형제)
CSS SCSS

24. #3. 속성 세분화
CSS
SCSS

25. #4. 믹스인(Mix-in)

26. #5. 조건문

27. #6. 반복문

28. Finish. 문법 활용
SCSS
HTML

29. 전처리기는 웹 브라우저에서 읽을 수 없기 때문에
관련 라이브러리를 이용해 CSS로 컴파일을 해야 한다
모듈 번들러 Webpack

30. Finish. 결과물

31. Q&A

32. Thank you