Enjoy Programming

react에서 styling해주는 방법은 css파일을 만들어 한번에 import 해주거나 또는 각 컴포넌트들과 묶어서 css를 import해주는 방법이 있다. react는 각 부분부분을 나누어 쓰는 컴포넌트화 시키는 것에 의미가 있기에 이런식으로 index.js파일을 포함한 폴더를 만들어서 default로 내보내주면 인식이된다. 음 .. index라는게.. 의미가 크구나 싶다. 아직 잘 이해는 안간다 계속 봐야 할듯 하다. 그런데 css를 하다보면 class명을 주기가 참 까다롭다. class명이 중복되지 않도록 코드를 짜는게 상당히 성가시다. 물론 같은 class를 줘서 함께 prop을 주기는 좋지만~ 코드가 방대해지다 보면 다른 부분과 겹칠 가능성도 농후한데 react에서는 css모듈이라는 것을 이용..

아 어려웠다 웹팩 설치.. 프로그래밍을 배우며 항상 어렵게 느껴지는게 바로 설정이다... 무언가 새로운 툴을 설치하고 설정하고 하는게 참 어렵다... ㅋㅋ 자 장장 두시간에 걸쳐 설정한 webpack을 알아보자 유튜브 클론코딩을 하던 중 서버쪽은 어느정도 진행이 되었는데 이제 클라이언트 쪽의 css나 javascript를 아직 하나도 안했다. 자 그럼 웹팩이란 무엇인가. 개발을 하다보면 자바스크립트 코드가 많아지고 여러개의 자바스크립트 파일을 만들게 된다. 이 파일들이 많아 질 수록 브라우저에서 로딩하는 것이 많이지기에 브라우저가 느려질 수 있고 또한 그만큼 네트워크 비용을 치뤄야 하는 단점이 있다. 그리고 파일들 간에 작성이 잘못된 경우 충돌의 위험성도 있다. 이러한 단점을 보완한 하나의 파일로 bun..

Sass(syntactically awesome stylesheets)는 css 의 pre-processor로 css의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 css를 생성하기 위한 css의 확장판이다. css자체로 사용하여도 무리는 없지만 프로젝트의 규모가 커지고 수정이 빈번함에 따라 유지보수가 어려워 지는 단점이 있다 이런 css의 한계를 보완하기 위해 sass는 다음과 같은 추가 기능과 도구를 제공한다. 변수의 사용, 조건문과 반복문, import, nesting, mixin, extend/inheritance 등이 있다. 쉽게말해 궁극적인 목표는 css의 결함을 보정하는 것이다. 단지 css의 부족한 부분만 돕기를 원한다. SCSS Sass는 처음에 들여쓰기의 감지를 그..