# Post CSS
팀프로젝트 프론트엔드 기술 스택에 관한 짧은 고찰
어떤 글을 쓸 거냐면 > 팀 프로젝트 프론트엔드 단에서 해당 기술 스택을 사용하기로 결정한 이유와 사용하면서 느꼈던 점을 회고해보고자 한다. Next.js 선정 이유 리액트의 CSR을 사용해봤기 때문에 Next.js을 사용하면서 SSR을 사용해보자는 의견 폴더 방식 라우팅의 편리함에 대한 필요성 참고 13.1 버전의 최신 버전을 사용함으로써 최근 현업에서 적용되는 기술들에 대해 미리 예습할 수 있다. 또한 타입 스크립트 사용이 가능하고 바벨이나 웹팩 설정을 자유자재로 커스텀할 수 있다는 장점이 있었다. 백엔드와 협업 시
Post CSS와 CSS Module
CSS Module 사내 프로젝트 중에서도 [파일명].module.css를 사용하는 것이 있었고 이번에 Next.js 강의를 들으면서도 [파일명].module.css가 있었다 이 것의 사용법은 이러하다 사용 시 클래스 명이 고유하게 생성된다 고유한 클래스명 덕분에 클래스명을 지을 때 중복에 대한 고민을 하지 않아도 된다 module.css는 Post css라고 한다 현재 Next.js로 만든 프로젝트는 별도의 모듈 설치없이도 module.css를 사용할 수 있다 CRA를 eject 해보면 postCss관련 라이브러리들이 설치되어있는 것을 확인 할 수 있다 Next.js에서도 유사하게 이미 포함되어있는 것 같다 PostCSS가 뭔지 알아보자 Post C
[CSS]-클래스명 이제 생각하지마! Tailwind CSS!
기존 작업들은 모두 Emotion을 사용해서 styled-component 방식으로 CSS를 적용했는데 이번에 React에서 많이 사용하는 Tailwind CSS에 대해 배워보았다!! Tailwind 공식사이트 바로가기 Tailwind CSS 설치하기 > 터미널에 ** 입력 ** 입력 tailwind.config.js 파일로 가서 경로 설정 메인 최상위 css파일 상위에 코드 추가 (작업 파일은 index.css에 함!) 이렇게 설치를 끝냈다면 클래스명 추가만으로 원하는 style을 설정할 수 있다! 클래스명 추가 방법은 예를 들어 text의 스타일을 설정하고자 할 때, text- 입력 후 command+i를 클릭하면 자동 완성 리스트가 뜬다! vscode인 경우 Tailwind CSS IntelliSense 플러그인을 설치하면 command+
React Css
Post Css -중복적으로 작성해야 하는 경우가 많기 떄문에 반복적인 코드 작성을 최소화 하려고 사용한다 -순수 css를 사용하고 -어디서나 사용가능하다 -다양한 플러그인을 사용할 수 있어서 덜 제한적으로 사용이 가능하다 고립성독립성 순수css -> 입문자에게 좋다! -회사에서 많이 사용하고, 큰 규모에서는 postcss가 좋다 . Styled-components -자바스크립트에서 css를 사용할수 있게 해주는 자바스크립트 라이브러리 이다 -성능이 좋지않다. 재컴파일 되어야한다 . -react , react-native에서만 사용가능 강점- 고립성/독립성 / 자바스크립트를 통한 편리함을 느낄 수 있다. 단점 - 비지니스 로직과 스타일이 뒤엉킬수 있다 Tailwind 성능 -원하는 클래스 이름들을 조립한다. -어디서나 사용가능하다 단점 사용법을 익혀야 사용할 수 있다. 강점 잘 정의된 디자인 시스템 /클래스 이름 창작의 괴로움이 없다! -정
Post css ClassName overide
Post css 에서 기본 className 사용하기 문제상황 post css 에선 사진과 같이 ‘-’ 형태의 기본 클래스 명을 사용하지 못함. -> (인식을 못하기 때문에 스타일 적용 안됨.) > _⇒ 다른 라이브러리를 사용할때 라이브러리에서 자동으로 적용해주는 클래스 명을 custom 하기 어려울 수 있음. 해결방법 &:global(’적용하고자 하는 클래스명’) {…} 식으로 넣어주면 post css 에서도 기본 클래스명 custom 가능!🙌
CSS 프레임워크
CSS 프레임워크 종류 전처리기 CSS 전처리기는 우리(개발자)에겐 CSS보단 친화적이지만 브라우저가 해석하지 못하는 언어로 작성된 스크립트를 별도 플러그인과 프레임워크를 통해 우리가 아는 CSS로 변환하는데 사용한다. 기존 CSS의 단점인 유지보수의 불편함 등을 보완한다. Sass (Syntactically Awesome Style Sheets) Sass는 기본적으로 SASS, SCSS 두 문법을 제공한다. 어떤 문법을 써도 Sass의 기능을 다 사용할 수는 있지만 모양새가 많이 다르다. SASS는 identation(들여쓰기)과 newline을 사용하고 SCSS는 curly braces(중괄호)와 semicolon을 사용한다.