목록frontend/react (25)
DEVLOG
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/lkkIW/btqOc9QpJAQ/jR9kpyjrRSEW1RonVFrA7K/img.png)
mesonia.tistory.com/54 React CSS 스타일링 :: styled-components REACT에서 스타일링할 때는 다양한 방식이 있고 그 중에서 정답은 없다! 회사에서 사용하는 스킬, 개발자마다 각자의 취향에 따라 선택하기 때문ㅠ.ㅠ 일반적으로 다음과 같은 스타일링 방법들이 mesonia.tistory.com 이론과 실습1에 이어서 눈알이 빙빙 돌아가는 실습2도 공부해보자해보자:) styled-components 실습2 Button.js import React from 'react'; import styled, {css} from 'styled-components'; import { darken, lighten } from 'polished'; const colorStyle = cs..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/oHneo/btqOeBFHWoy/U13pDigKDFZVrJgLHcZt90/img.png)
REACT에서 스타일링할 때는 다양한 방식이 있고 그 중에서 정답은 없다! 회사에서 사용하는 스킬, 개발자마다 각자의 취향에 따라 선택하기 때문ㅠ.ㅠ 일반적으로 다음과 같은 스타일링 방법들이 존재한당 일반 CSS Sass CSS Module styled-components 이번 시간에는 styled-components에 대해 공부해보아야징~ styled-components 자바스크립트 파일 안에 스타일을 선언하는 방식을 'CSS-in-JS'라고 부르는데, 이와 관련된 라이브러리는 정말 많다. 이 많은 라이브러리 중 개발자들이 선호하는 styled-components는 스타일을 자바스크립트 파일에 내장시키는 방식으로 스타일을 작성함과 동시에 해당 스타일이 적용된 컴포넌트를 만들 수 있게 해준답니당~ sty..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bm6ScA/btqN7S0I9ll/1GezdOj2ZKJGR02AQng6a1/img.jpg)
리포지토리 생성 $ git init $ git add . $ git commit -m 'initial commit' git push $ git remote add origin https://github.com/username/repository-name.git $ git push origin master gh-pages패키지 설치 npm install --save gh-pages 뭔짓을 해도 설치가 안되던 gh-pages 패키지가 위와 같은 코드에 정상적으로 설치가 됐다..!!!! 언제 안될지 그때 또 이 코드가 먹을지는 모르겠지만..일단 기록.. 끄적끄적 package.json파일 수정 react앱 deploy $ npm run deploy 위 단계 완료 후 homepage주소로 들어가면 뿅! 나타나야..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bszKqV/btqN5ggK2Za/754X4k8lmWYX7pmhEJZz7K/img.png)
FontAwesome i태그 쓰는걸 좋아해서 자주 사용해왔는데 아무렇지 않게 리액트에서 i태그를 쓰고 실행을 하니까 문제가 있다는 걸 알았다....ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ 한번에 되는게 없는 까다로운 리액트님... 검색해보니까 이것저것 해야할 일이 조금 있다..!! 준비하기 패키지설치 npm이나 yarn같은 패키지관리자를 사용하여 프로젝트에 패키지를 설치해야한다. npm npm i --save @fortawesome/fontawesome-svg-core npm install --save @fortawesome/free-solid-svg-icons npm install --save @fortawesome/react-fontawesome yarn yarn add @fortawesome/fontawesome-sv..