훌륭한 개발자의 덕목 중 하나인 유지보수 능력! 그걸 잘 하려면 코드의 어느 위치에 무엇이 있는지 잘 알아야 한다. 그러기 위해선 처음에 코드를 칠 때부터 깔끔하게 치면 좋을것..! 오늘은 그 팁에 대해 알아보려고 한다~
BEM
뱀… 우리가 아는 그 뱀이 아니다. Block Element Modifier의 줄임말이다. 클래스명을 지을 때 아무렇게나 짓지말고 그 클래스가 속한 범위내의 구조대로 이름을 짓는것이다. 근데 BEM 규칙을 따르자고 만들긴 했지만 실제 업무 들어가면 회사마다 스타일이 다르니 회사의 방침을 따를 것..!! (경험상 회사 들어가기 전에 한번 써보는것도 나쁘지 않을것 같음)
쓰는 방법은 대충 이러하다.
<div class="card">
<div class="card__header">
<h2 class="card__header__title">Title text here</h2>
</div>
<div class="card__body">
<img class="card__body__img" src="some-img.png">
<p class="card__body__text">Lorem ipsum dolor sit amet, consectetur</p>
<p class="card__body__text">Adipiscing elit.
<a href="/somelink.html" class="card__body__text__link">Pellentesque amet</a>
</p>
</div>
</div>제일 큰 div의 클래스명인 card가 제일 앞에있고 그 card의 헤더부분과 바디부분으로 나뉘는데.. 이렇게 클래스명만 보면 굉장히 직관적이기 때문에 남의 코드라도 쉽게 파악할 수 있다는 장점쓰! 근데 쓰다보면 언더바 파티가 열린다~ 가장 큰 단점쓰 ㅋㅋ
CSS는 타입별 속성대로 그룹화해서 적자
위에서 html 태그 구조를 BEM method로 쓰는 방법을 알아보았는데 CSS 적는대로 나름의 규칙들이 많다. 그 중에 하나인… 타입별 속성대로 그룹화해서 적자는 방법을 적어본다. abc 순으로 적는 방법도 있다는데 그것보다는 타입별로 나눠서 쓰는 이 방법이 좀 더 괜찮아보인다 ㅋㅋ
- Layout Properties (position, float, clear, display)
- Box Model Properties (width, height, margin, padding)
- Visual Properties (color, background, border, box-shadow)
- Typography Properties (font-size, font-family, text-align, text-transform)
- Misc Properties (cursor, overflow, z-index)
이 방법의 예시..
.button {
display:inline-block;
margin:1em 0;
padding:1em 4em;
color:#fff;
background:#196e76;
border:0.25em solid #196e76;
box-shadow:inset 0.25em 0.25em 0.5em rgba(0,0,0,0.3),
0.5em 0.5em 0 #444;
font-size:3em;
font-family:Avenir, Helvetica, Arial, sans-serif;
text-align:center;
text-transform:uppercase;
text-decoration:none;
}확실히 이렇게 나눠서 적으니까 훨씬 깔끔하다! CSS 수정할때도 두리번두리번 거리지 않아도 뭐가 어디에 있는지 눈에 잘 들어온다ㅋㅋ
이렇게 쓰는 습관을 들여야하는데… 생각없이 코드 치다보면 내 책상처럼 더러워져있는 코드판 ㅠㅠ
destructuring
ES6에서 처음 나온 개념이다. 이건 나중에 다시 정리할거긴한데 간단히 코드로 보자면!
Routes 이름 하나하나 다 변수화 시켜서 고고고
const title = this.state.videoTitle.trim();
const link = this.state.videoLink.trim();
const thumbnail = this.state.videoThumbnail.trim();
const cate = this.state.videoCate.trim();
const desc = this.state.videoDesc.trim();이러한 코드가 있는데.. 오른쪽 항에 있는 것들은 다 state안에 있는 값이다. 그러므로 우리는 선언을 해준다!
const {
videoTitle,
videoLink,
videoThumbnail,
videoCate,
videoDesc
} = this.state;이렇게 선언을 해주면 위의 코드에서 this.state를 생략할 수 있다 개이득! 다시 써보면
const title = videoTitle.trim();
const link = videoLink.trim();
const thumbnail = videoThumbnail.trim();
const cate = videoCate.trim();
const desc = videoDesc.trim();이렇게 깔끔하게 딱 떨어진다!
변수화를 생활화 하자
토큰이나 url같은 공통적인 값들은 src폴더 아래 config 폴더를 따로 파서 정리해놓으면 좋다.
import { ADDRESS } from "Config/Config.js";
//중략
let request = fetch(ADDRESS + "recipe/category");
//중략코드를 다 쓰지 않아서 약간 이상하긴한데! 여튼 이런식으로.. 변수화를 생활화 한다면 훨씬 보기 좋은 깔끔한 코드 완성쓰! 자주 쓰는 함수는 src폴더 아래 utils 폴더에 정리해놓으면 좋다. 이때, 인자 유무가 중요한데, 함수 조건을 인자 있/없으로 구분해서 코드를 짜놓아야 한다!
경로설정 - package.js에서 설정
../../이렇게 들어가면 너무 복잡해지니깐 아예 경로설정을 해주는 것! 먼저 package.json에 들어간다.
"scripts": {
"start": "NODE_PATH=./src react-scripts start",
"build": "NODE_PATH=./src react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}scripts 객체 안의 start와 build 안에 "NODE_PATH=./src 를 추가해준다.
이 말인즉슨, src밑에 있는 경로를 절대경로로 설정하겠다는 뜻이다!
우리가 보통 리액트에서 import할 때는 경로를 타고타고 들어가서…
import Main from "Pages/Main/Main" 이렇게 가거나 쩜쩜을 남발하게 되는데
인제 import Main from "Pages/Main" 까지만 쓰도록 바꿔줄 수 있다.
물론 이렇게 하려면 index.js가 각 폴더 안에 있어야 한다.
Main이라는 폴더 안에는 Main.js와 index.js가 있는 것이고,
그 index.js에는 export { default } from "./Main" 이렇게 쓰면 된다.
이게 뭘 줄인거냐면…
import Main from "./MAin"
export default Main이걸 줄여서 한 줄로 뙇!
이렇게 쓰는 이유는 경로를 줄이려고도 있지만 로직을 좋게하려는 이유도 있다. index.js에서 Main을 정의하고 에러가 났을때 index.js가 굉장히 많은데 어떤 경로의 index.js에서 에러가 난지 모른다… 여튼 바꾸면 사용하는 쪽에서 Main을 접근하게 되서 디버깅을 할때도 훨씬 수월하다는 점..!
styled component 쓸 때 export 위에다 쓰기
나같은 경우는 깔끔함(?)을 위해 export 위에 styled component 요소들을 나열하곤 했는데 그것보단 export는 가장 하단에 있는게 낫다고 한다!
import 순서
- react 먼저
- library ex) Link 같은 것,
- util (config.js)
- component 아래 있는 것들
- css 관련된것
css는 습관적으로 가장 하단에 쓰긴 했는데 라이브러리를 표기할땐 좀 정신없이 썼던것 같다.. 앞으론 최대한 이 순서대로 적어야지!!