그리드 시스템 (Grid System) 용어 unit : 그리드 한 칸의 크기를 이야기 함. gutter : unit 사이의 거리를 gutter라고 함 (사실은 유닛 좌+우 값) column : gutter + unit은 column column의 모양은 다음과 같음 -> [gutter][unit][gutter...

사용하는 이유? 협업을 통해 프로그래밍을 할 때 ‘CI(Continuous Integration)’이 중요하다. 서로 다른 작업을 할 때 버전이 멀어지지 않도록 지속적으로 통합해야 한다는 이야기다. 또한 컴포넌트를 분리하여 재사용이 가능한 코드를 작성하는 것이 중요하다. 스토리북은 재사용이 가능한 ‘UI컴포넌트’를 구축하여 디자이너와 개...

BigInt 지원 버전 IE : X chrome : 67이상 safari : 14이상 Samsung Internet : 9.2이상 BigInt란? 길이의 제약 없이 정수를 다룰 수 있게 해주는 숫자형 사용 방법 숫자 뒤에 n을 붙이거나 BigInt("234"); 식으로 문자열을 가지고 만들 수 있음 cons...

Mutable 의미 생성된 이후에 상태가 변경될 수 있는 객체 예시 JavaScript에서는 Object와 Array가 있음 Immutable 의미 생성된 이후에 상태가 변경되지 않는 객체 예시 JavaScript에서는 객체, 배열을 제외한 모두 사용 이유 성능을 향상시키기 위해 메모리 사용을 줄이기 위해 Referen...

‘명령형(imperative) 코드’와 ‘선언형 (declarative) 코드’ 명령형 코드 결과를 얻기 위해 단게를 작성해야 하는 코드 function abc(a, b) { return a + b; } 선언형 코드 CSS같은 것 결과를 얻기 위해 단계가 필요하지 않고 바로 결과를 입력하는 것 background-...

시작하기 TypeScript를 사용하기 시작하면서 객체의 타입 선언을 위해 Interface와 Type을 사용하고 있다. 그런데 막상 두 개는 무슨 차이가 있는 지 잘 모르면서 사용하고 있는 것 같았다. 무슨 차이가 있을까? 공식문서에서 살펴 보았다. 첫 번째 확장 방식이 다르다. 인터페이스는 extends 블라블라 형태로...

HTTP 요청 메서드 HTTP 요청 메서드는 리소스에 수행하기 원하는 행동을 이야기 함. CRUD에는 POST(Create), GET(Read), PUT(Update), DELETE(Delete)가 있음. 그리고 Update는 다시 하나가 더 있음. 그것이 PATCH Put과 Patch의 차이 PATCH 메서드는 리소스의 ...

들어가기 어떤 회사는 Redux를 사용하고 어떤 회사는 Context API를 사용하는 것을 보면서 두 개는 무슨 차이인지 궁금해졌다. 전역 상태를 관리하기 위해서 Redux를 처음으로 배웠었는데, React Context API도 전역 상태를 관리해준다고 한다. 두 개는 같은 것이 아닌 것 같은데… 무슨 차이일까? Redux와 Co...

들어가기 sass는 lint를 사용해서 통일된 스타일 코드를 유지할 수 있는데, Styled-Components에서는 방법이 없나? 라는 생각이 들어서 찾아보던 중 공식 사이트에서 ‘stylelint’를 발견! 그래서 정리합니다. stylelint 적용하기 설치 stylelint 설치하기 (npm instal...

들어가기 프론트엔드를 공부하면서 인터렉티브한 UI에 관심이 많았고, 여러 사람들의 포트폴리오에서 이런 것들을 보며 즐거움을 느꼈다. 가끔은 어떻게 만들었는지 궁금할 때도 있다. 그럴 때 하는 것이 opt + shift + i! 그런데 가끔은 정말 특이한 콘솔을 볼 때가 있다. 위 처럼 이쁜 콘솔 로그를 사용해 들어오는 개발자에...