패스트캠퍼스 데브캠프
김민태의 데브캠프 2기 - 실시간 강의(11/08) 정리
vitamin3000
2024. 11. 8. 19:44
- css
- css가 가진 다양한 한계를 극복하려는 시도 존재
- react에서도 css를 다양하게 적용시킬 수 있는 여러 가지 라이브러리 존재
- css를 라이브러리(모듈) 형태로 따로 분리시킴으로써 이점을 가짐
- react에서 css를 적용시키는 방법(React Styling)
- inline
- html 태그 안에 style 속성을 직접 선언하는 방식
- 해당 jsx와 같은 파일 내에, style 객체 변수 선언 후 태그 안에 변수명 집어넣기로 좀 더 간편하게 가능
- 대신 해당 파일 내에서만 적용 범위 한정
- 객체의 값을 좀 더 다양하게 선언하면, 상황에 맞는 값을 유연하게 inline 형태로 집어넣을 수 있음
- 속도가 굉장히 빨라, 퍼포먼스적인 부분에서도 도움이 됨
- 단점 :
- 의사코드(클래스)를 쓸 수 없음(ex: hover, media-query, …)
- media query 사용 불가
- normal
- import를 사용하는 방법
- javascript 자체에서는 import 문법을 제공하지 않음.(svg도 마찬가지)
- ⇒ bundler가 해석기를 제공함
- bundler가 javascript에서 필요한 만큼의 css만 제공
- javascript에서 필요한 css만 import하여 사용
- link 태그를 이용하는 방법
- 장점 :
- css를 알고 있다면, 딱히 추가로 배울 것이 없음
- 단점 :
- 전역 범위로 스타일이 적용되기 때문에 네이밍 충돌이 발생할 수 있음
- import를 사용하는 방법
- css-in-js
- css와 component 개념을 통합하려는 시도
- 대표적으로 styled component가 존재
- styled component 형태로 변수를 선언하며, 해당 변수를 component처럼 사용 가능
- 선언하는 그 자체로 격리(범위)가 됨
- 선언할 때, css 형태 그대로 선언 가능(로직 필요 x)
- 예상치 못한 곳에 css에 적용되는 상황이 일어나지 않음
- css 확장 문법 및 props를 받도록 할 수도 있음(활용성이 높다)
- 활용법(templete literal)
- 단점 :
- 실행하는 순간에 css의 적용이 확정됨(만들어져 있는 파일을 전달하지 x)
- ⇒ 속도가 느려짐(UI가 만들어질 때마다 css를 다시 적용해야 하므로)
- css module
- bundler가 제공하는 방식
- 로컬 범위의 스타일을 제공하여 클래스명 충돌을 방지
- bundler가 고유한 클래스명을 생성해 전역 네임스페이스에서 충돌하지 않도록 함
- 번들링을 통해 import를 처리
- 파일명 예시) App.module.css
- inline
- css 전처리기
-
- {} 이 없어서 편리하긴 하나, 오히려 {} 이 없어서 불편한 부분도 존재(구분이 힘듦)
- nesting
- mixinsass 문법
-
- 번외
- tailwind css(css library)
- 참고 자료
- css에 관한 모든 문법에 대한 커스텀 문법이 다 세팅되어 있고, 클래스 또한 미리 만들어져 있음
- 문법에 대해 어느 정도 적응이 되면, 스타일 지정을 매우 빠르게 할 수 있음
- 장점
- 체계를 알고 있으며, UI 설정이 매우 빨라진다
- 단점
- 커스텀 문법을 배워야 함
- 해당 css를 쓰지 않는 개발자와의 소통이 힘듬(협업의 부재)
- 한번 사용하면, 다른 css로 수정이 힘듦
- tailwind css(css library)
- Router
- CSR(client side rendering)
- 브라우저에서 페이지를 렌더링
- SSR(server side rendering)
- 서버에서 html을 생성하여 클라리언트에 전달하는 방식
- CSR(client side rendering)
- 개발 용어
- load
- 어떠한 데이터를 컴퓨터 시스템에서 실행을 할 수 있는 상태로 만들어 주는 것
- 실행하는 작업은 CPU가 하지만, 기본 상태에서 바로 실행하지는 못함
- 컴퓨터의 물리적 저장소의 데이터(실행 불가능)를 메모리(메인 저장 장치)에 옮겨서 실행 가능한 상태로 만드는 것이 load
- fetch
- 필요한 데이터를 특정 위치에서 가져오는 작업
- 가져온 데이터를 사용하는 주체가 용도에 맞게 알아서 적절하게 씀
- 왜 api로 데이터를 가져오는 것을 fetch라고 하는가?
- fetch는 load와 달리 실행된다는 것을 강요하지 않음.
- 데이터를 불러오지만, 실행성과 용도가 정의되지 않기 때문
- buffer/cache
- 데이터를 효율적으로 관리하기 위한 메모리 저장소
- buffer
- 데이터를 임시 저장하는 메모리 공간으로, 주로 데이터의 이동 속도를 맞추기 위해 사용
- 선형적인 흐름으로 데이터 전달할 때 주로 쓰임
- ex) 스트리밍: 네트워크에서 데이터를 스트리밍할 때, 한꺼번에 모든 데이터를 받는 대신 버퍼를 통해 데이터를 점진적으로 로드
- 주로 load에서 많이 쓰임
- cache
- 자주 사용하는 데이터를 미리 저장해두고, 재사용 시 빠르게 불러와 성능 향상
- 원본 데이터를 자주 호출하는 대신, 캐시에서 직접 데이터를 불러와 작업 부하 경감
- 주로 fetch 과정에서 많이 쓰임
- css
- css가 가진 다양한 한계를 극복하려는 시도 존재
- react에서도 css를 다양하게 적용시킬 수 있는 여러 가지 라이브러리 존재
- css를 라이브러리(모듈?) 형태로 따로 분리시킴으로써 이점을 가짐
- react에서 css를 적용시키는 방법
- inline
- html 태그 안에 style 속성을 직접 선언하는 방식
- 해당 jsx와 같은 파일 내에, style 객체 변수 선언 후 태그 안에 변수명 집어넣기로 좀 더 간편하게 가능
- 객체의 값을 좀 더 다양하게 선언하면, 상황에 맞는 값을 유연하게 inline 형태로 집어넣을 수 있음
- 속도가 굉장히 빨라, 퍼포먼스적인 부분에서도 도움이 됨
- 단점 :
- 의사코드(클래스)를 쓸 수 없음(ex: hover, media-query, …)
- normal
- import를 사용하는 방법
- javascript 자체에서는 import 문법을 제공하지 않음.(svg도 마찬가지)
- ⇒ bundler가 해석기를 제공함
- bundler가 javascript에서 필요한 만큼의 css만 제공
- link 태그를 이용하는 방법
- 장점 :
- css를 알고 있다면, 딱히 추가로 배울 것이 없음
- 단점 :
- 전역 범위로 스타일이 적용되기 때문에 네이밍 충돌이 발생할 수 있음
- import를 사용하는 방법
- css-in-js
- css와 component 개념을 통합하려는 시도
- 대표적으로 styled component가 존재
- styled component 형태로 변수를 선언하며, 해당 변수를 component처럼 사용 가능
- 선언하는 그 자체로 격리가 됨
- 선언할 때, css 형태 그대로 선언 가능(로직 필요 x)
- 예상치 못한 곳에 css에 적용되는 상황이 일어나지 않음
- css 확장 문법 및 props를 받도록 할 수도 있음(활용성 굳)
- 활용법(templete literal)
- 단점 :
- 실행하는 순간에 css의 적용이 확정됨(만들어져 있는 파일을 전달하지 x)
- ⇒ 속도가 느려짐(UI가 만들어질 때마다 css를 다시 적용해야 하므로)
- css module
- bundler가 제공하는 방식
- 로컬 범위의 스타일을 제공하여 클래스명 충돌을 방지
- bundler가 고유한 클래스명을 생성해 전역 네임스페이스에서 충돌하지 않도록 함
- inline
- css 전처리기
-
- {} 이 없어서 편리하긴 하나, 오히려 {} 이 없어서 불편한 부분도 존재(구분이 힘듦)
- nesting
- mixinsass 문법
-
- 번외
- tailwind css(css library)
- 참고 자료
- css에 관한 모든 문법에 대한 커스텀 문법이 다 세팅되어 있고, 클래스 또한 미리 만들어져 있음
- 문법에 대해 어느 정도 적응이 되면, 스타일 지정을 매우 빠르게 할 수 있음
- 장점
- 체계를 알고 있으며, UI 설정이 매우 빨라진다
- 단점
- 커스텀 문법을 배워야 함
- 해당 css를 쓰지 않는 개발자와의 소통이 힘듬(협업의 부재)
- 한번 사용하면, 다른 css로 수정이 힘듦
- tailwind css(css library)
- Router
- CSR(client side rendering)
- 브라우저에서 페이지를 렌더링
- SSR(server side rendering)
- 서버에서 html을 생성하여 클라리언트에 전달하는 방식
- CSR(client side rendering)
- 개발 용어
- load
- 컴퓨터 시스템에서 실행을 할 수 있는 상태로 만들어 주는 것
- 실행하는 작업은 CPU가 하지만, 기본 상태에서 바로 실행하지는 못함
- 컴퓨터의 물리적 저장소의 데이터(실행 불가능)를 메모리(메인 저장 장치)에 옮겨서 실행 가능한 상태로 만드는 것이 load
- fetch
- 필요한 데이터를 특정 위치에서 가져오는 작업
- 가져온 데이터를 사용하는 주체가 용도에 맞게 알아서 적절하게 씀
- 왜 api로 데이터를 가져오는 것을 fetch라고 하는가?
- fetch는 load와 달리 실행된다는 것을 강요하지 않음.
- 데이터를 불러오지만, 실행성과 용도가 정의되지 않기 때문
- buffer/cache
- 데이터를 효율적으로 관리하기 위한 메모리 저장소
- buffer
- 데이터를 임시 저장하는 메모리 공간으로, 주로 데이터의 이동 속도를 맞추기 위해 사용
- 선형적인 흐름으로 데이터 전달할 때 주로 쓰임
- ex) 스트리밍: 네트워크에서 데이터를 스트리밍할 때, 한꺼번에 모든 데이터를 받는 대신 버퍼를 통해 데이터를 점진적으로 로드
- 주로 load에서 많이 쓰임
- cache
- 자주 사용하는 데이터를 미리 저장해두고, 재사용 시 빠르게 불러와 성능 향상
- 원본 데이터를 자주 호출하는 대신, 캐시에서 직접 데이터를 불러와 작업 부하 경감
- 주로 fetch 과정에서 많이 쓰임
-
- load
- css
- load