[React] Front-End

TIL 읽을거리 : CSS Modules / BEM 규칙 / Primitive Type / 스코프와 클로저 / React의 디자인 패턴

ddgoori 2021. 10. 9. 07:43

Styled Components VS CSS Modules

 

CSS-in-JS(Styled Components) vs CSS-inCSS(CSS Modules) 성능 비교

지난번 포스팅(CSS-in-JS에서 CSS-in-CSS로 바꿔야 하는 이유)에는 CSS-in-JS에서 CSS-in-CSS 방식으로 변경해야 하는 이유에 대해 설명했다. 요약해보면, 다음과 같다. 성능에 초점을 맞춘다면 , 개발 생산

blueshw.github.io

* next.js 로 프로젝트 뼈대 구성 -> next.js 9.3 버전부터 CSS Module을 기본으로 채택하고있다.

 

 

BEM 규칙

 

예제로 이해하는 BEM.

HTML, CSS(flex/grid), UI/UX, Accessibility

naradesign.github.io

 

 

클래스 명명규칙, BEM

개발 공부 초보자의 입장에서 수많은 클래스의 이름을 지정해주는 것은 여간 까다로운 것이 아닙니다. 프로그램이 복잡해질수록 필요한 클래스명도 덩달아 복잡해질텐데 이는 숙련된 개발자들

velog.io

 

 

배포방법

Netlify, Heroku 등

실무 배포 방법 -> develop버전 url / production url 따로 나옴

 

 

Primitive Type & Reference Type

 

 

JavaScript - Primitive Type(원시 타입) vs Reference Type (참조 타입)에 대해 알아보자

JavaScript는 원시 타입과 참조 타입이라는 두가지 자료형을 제공하며 Object를 제외한 모든것들은 Primitive한 성격을 갖고 있다. Primitive Type : 데이터의 실제 값 할당 Reference Type : 데이터의 위치 값만

velog.io

 

스코프와 클로저

 

자바스크립트의 스코프와 클로저 : NHN Cloud Meetup

자바스크립트의 스코프와 클로저

meetup.toast.com

 

프레임없이 순수바닐라자바스크립트로 컴포넌트 단위 개발

 

Vanilla Javascript로 웹 컴포넌트 만들기 | 개발자 황준일

Vanilla Javascript로 웹 컴포넌트 만들기 9월에 넥스트 스텝 (opens new window)에서 진행하는 블랙커피 스터디 (opens new window)에 참여했다. 이 포스트는 스터디 기간동안 계속 고민하며 만들었던 컴포넌트

junilhwang.github.io

 

React의 디자인 패턴

* 리액트는 MVC에서 View를 담당한다.

* View는 멍청해야한다. => 네트워크 통신하고 이런 것 X

* 유닛테스트 할 때마다 네트워크 통신을 해야하는데, 컴포넌트 = View 는 멍청하게 만들어서 네트워크 같은건 class를

따로 만들어 놓고, dependency injection 해주면, 유닛테스트 할 때는 실제로 네트워크 통신을 하는게 아니라, 네트워크 통신 하는 척만 하는 것을 전달해주면 테스트가 빨라진다.

 

👨‍💻 MVC, MVVM, FLUX 패턴과 코드의 흐름 - OOP Study 2

이번주에는 자동차경주게임 미션을 진행했는데, mvc패턴으로 디자인하는 것과 모든 로직에 단위 테스트를 구현하는 것이 중심의 미션이었다. 이번 미션부터는 vanillaJS가 아닌 리액트와 타입스크

taeny.dev