<div id="readability-page-1" class="page"><div><img src="https://media.vlpt.us/images/hyounglee/post/d7f4709f-15f7-433a-83c4-604a75a04f34/image.png">
<blockquote>
한번 리뷰 받은 내용은 두번 다시 실수하지 말자! 
사수한테 칭찬받고 싶은 신입 ESFJ 개발자의 기록
</blockquote>
!youtube[UUJKiTcnGK0]
한줄로 짤 코드를 누가 열줄로 해놨어요... 
클래스 구구... 코테에서 한줄로 푼다면 우와~ 하겠지만, 누구나 이해하고 수정해야 하는 코드라면..?
실제 업무에 들어가면 다른 개발자와 함께 파일을 다루게 된다. 때문에** 혼자 이해하는 코드를 짜는 것만큼 이기적인 개발자가 없다**..! 일하면서 리뷰받았던 내용을 간단하게 정리해봤다. 협업하는 프론트엔드 개발자라면 기본적으로 알아야 하는 것들. 사소하지만 중요한 것들!
<h2 id="basics">Basics</h2>
<ol>
<li>안쓰는 코드면 기능 잘 돌아가나 확인하고나서 주석처리 남겨두지 말고 지우자.</li>
<li>공통 컴포넌트를 수정할 때는 해당 컴포넌트를 사용하고 있는 다른 컴포넌트에 영향이 없는지 꼭 확인하자.</li>
<li>콘솔로그 지우자.. 부끄러움은 너의 몫</li>
</ol>
<pre><code>// Bad
console.log('ㅓ애멀ㄷㄹ메ㅐㄷ러매왜안들어와 ㅠㅠㅠㅐㅓ먈');
console.log('===================안돼애애애ㅐㅐㅐㅐㅐㅐㅐㅐㅐ');

// Good
...</code></pre>
<ol start="4">
<li>커밋 메세지 잘 남겨놓자. 한달 뒤 롤백할 수도 있다는 마음으로..</li>
</ol>
<h2 id="javascript">JavaScript</h2>
<ol>
<li>img path 변수에 담을때는 마지막에 <code>/</code> 붙이지 않고, 사용하는 부분에서 붙인다.</li>
</ol>
<pre><code>// Bad
const imgPath = `${URL}/icon/2.0/main/`
...
background: url(`${imgPath}logo_red_18.png`) center no-repeat;

// Good
const imgPath = `${URL}/icon/2.0/main`
...
background: url(`${imgPath}/logo_red_18.png`) center no-repeat;</code></pre>
<ol start="2">
<li>컴포넌트를 만들 때 텍스트, 이미지, 크기 등의 기본값은 최대한 표준이 될 수 있는 것으로 잡자.</li>
</ol>
<pre><code>// Bad
&lt;span&gt;{more || '댓글 더보기'}&lt;/span&gt;

// Good
&lt;span&gt;{more || '더보기'}&lt;/span&gt;</code></pre>
<ol start="3">
<li>변수명 항상 최선인가 고민하자.. 변수명 대충하는 사람, 인성에 문제있어?</li>
</ol>
<pre><code>isAbc // boolean
abcValue // string, number ...</code></pre>
<ol start="4">
<li><code>{}</code> 중괄호 안쓸 수 있으면 최대한 사용하지 않는게 깔끔하다.</li>
</ol>
<pre><code>// That's nono
handleClick = () =&gt; { console.log(something) };

// Goood
handleClick = () =&gt; console.log(something);</code></pre>
<ol start="5">
<li>if문은 중첩하는 것보다 조건마다 return 시키는게 이해하기 편하다.</li>
</ol>
<pre><code>// Bad
const checkId = () =&gt; {
 if (condition) {
 if (!id.test(idCheck)) {
 setError(true);
 return false;
 }
 return true;
 }
 return false;
};

// Good
const checkId = () =&gt; {
 if (!condition) {
 return false;
 }

 if (!id.test(idCheck)) {
 setError(true);
 return false;
 }
 return true;
};</code></pre>
<ol start="6">
<li>함수는 서로 상호작용하거나 공통되는 부분이 있는 것이 아니라면 따로 분리하자.</li>
</ol>
<h2 id="styled-components">Styled-components</h2>
<ol>
<li>공통 컴포넌트를 <code>import</code>하여 사용하는 경우 **<code>as</code>**를 잘 활용하자. (styled-components)</li>
</ol>
<pre><code>// Bad
import Title from '~/component/styleguide';

const Title2 = styled(Title)`
 font-weight: bold;
`

// Good
import { Title as CommonTitle } from '~/component/styleguide';

const Title = styled(CommonTitle)`
 font-weight: bold;
`</code></pre>
<ol start="2">
<li>css 추가가 없(어졌)다면 html 태그로 수정하자.</li>
</ol>
<pre><code>// Nooooooo
const Wrap = styled.div``;
...
&lt;Wrap&gt;...&lt;/Wrap&gt;

// Yesssss
...
&lt;div&gt;...&lt;/div&gt;
</code></pre>
<h2 id="typescript">TypeScript</h2>
<ol>
<li>타입스크립트에서 <code>any</code> 쓰지마 제발... 애니스크립트 아니라고...</li>
</ol>
<pre><code>// Bad
interface AnyScript {
 id: any;
 name: any;
 age: any;
 func: (e: any) =&gt; any;
}

// Good
interface TypeScript {
 id: number;
 name: string;
 age: number;
 func: (e: string) =&gt; void;
}</code></pre>
<ol start="2">
<li>interface, type 이름, enum의 이름과 키는 PascalCase로 작성한다.</li>
</ol>
<pre><code>// Bad
enum color {
 red = 0,
 blue = 1,
 green = 2
}

// Good
enum Color {
 Red = 0,
 Blue = 1,
 Green = 2
}</code></pre>
<ol start="3">
<li>interface 필수값 여부 체크하자. 물음표 살인마... 극혐이니까...</li>
</ol>
<pre><code>// Bad
interface Person {
 name?: string;
 age?: number;
 nationality?: string;
 job?: string;
}

// Good
interface Person {
 name: string;
 age: number;
 nationality: string;
 job?: string;
}</code></pre>
<ol start="3">
<li>jsx 태그를 사용하지 않는 파일이라면 확장자명을 <code>.ts</code>로, 사용한다면 <code>.tsx</code>로 한다. 
<code>.ts</code>에서는 <code>&lt;</code> 꺽쇠가 jsx 태그인지 타입을 지정하는 것인지 구분을 못하기 때문이다.</li>
</ol>
<h2 id="react">React</h2>
<ol>
<li>props는 immutable이다. 수정이 필요하다면 복사해서 수정하자.</li>
</ol>
<pre><code>// Nope
function Popup({style}: PopupProps) {
 const [opacity, setOpacity] = useState(0);
 style.overlay.opacity = opacity;
...

// Yep
function Popup({style}: PopupProps) {
 const [opacity, setOpacity] = useState(0);
 const popupStyle = {
 ...style,
 overlay: { ...style.overlay, opacity }
 }
 popupStyle.overlay.opacity = opacity;
}
</code></pre>
<ol start="2">
<li>props 넘길때 파라미터 없다면 함수 또 만들지 말라고.. 제발..</li>
</ol>
<pre><code>// Noooo
&lt;Input onChange={() =&gt; handleChange()} /&gt;

// Yes
&lt;Input onChange={handleChange} /&gt;</code></pre>
<ol start="3">
<li>자식 컴포넌트에게 setState를 넘겨주지 말고 handler를 만들자.</li>
</ol>
<pre><code>// Bad
&lt;Tab setName={setName} /&gt;
&lt;Tab setName={setName} /&gt;

// Better
const onClickTab = (t) =&gt; setName(t);
...
&lt;Tab onClick={onClickTab} /&gt;
&lt;Tab onClick={onClickTab} /&gt;</code></pre>
<ol start="4">
<li>생각보다 많은 컴포넌트를 재사용할 수 있단다. 가능하면 무족권 조건문 처리하자!</li>
</ol>
<hr>
실수도 반복하면 실력, 리뷰를 받으면 가슴에 새기는 개발자가 됩시다! 
PR에 🎉 👍 😄 🚀 ❤️ 만 달리는 그날까지~!~!~!~!~!~!</div></div>

(งᐖ)ว

한번 리뷰 받은 내용은 두번 다시 실수하지 말자!
사수한테 칭찬받고 싶은 신입 ESFJ 개발자의 기록
!youtube[UUJKiTcnGK0]
한줄로 짤 코드를 누가 열줄로 해놨어요...
클래스 구구... 코테에서 한줄로 푼다면 우와~ 하겠지만, 누구나 이해하고 수정해야 하는 코드라면..?
실제 업무에 들어가면 다른 개발자와 함께 파일을 다루게 된다. 때문에** 혼자 이해하는 코드를 짜는 것만큼 이기적인 개발자가 없다**..! 일하면서 리뷰받았던 내용을 간단하게 정리해봤다. 협업하는 프론트엔드 개발자라면 기본적으로 알아야 하는 것들. 사소하지만 중요한 것들!
Basics
안쓰는 코드면 기능 잘 돌아가나 확인하고나서 주석처리 남겨두지 말고 지우자.
공통 컴포넌트를 수정할 때는 해당 컴포넌트를 사용하고 있는 다른 컴포넌트에 영향이 없는지 꼭 확인하자.
콘솔로그 지우자.. 부끄러움은 너의 몫
// Bad
console.log('ㅓ애멀ㄷㄹ메ㅐㄷ러매왜안들어와 ㅠㅠㅠㅐㅓ먈');
console.log('===================안돼애애애ㅐㅐㅐㅐㅐㅐㅐㅐㅐ');
// Good
...
4. **커밋 메세지** 잘 남겨놓자. 한달 뒤 롤백할 수도 있다는 마음으로..
# JavaScript
1. **img path** 변수에 담을때는 마지막에 `/` 붙이지 않고, 사용하는 부분에서 붙인다.
```jsx
// Bad
const imgPath = `${URL}/icon/2.0/main/`
...
background: url(`${imgPath}logo_red_18.png`) center no-repeat;
// Good
const imgPath = `${URL}/icon/2.0/main`
...
background: url(`${imgPath}/logo_red_18.png`) center no-repeat;
컴포넌트를 만들 때 텍스트, 이미지, 크기 등의 기본값은 최대한 표준이 될 수 있는 것으로 잡자.
// Bad
{more || '댓글 더보기'}
// Good
{more || '더보기'}
3. **변수명** 항상 최선인가 고민하자.. 변수명 대충하는 사람, 인성에 문제있어?
```jsx
isAbc // boolean
abcValue // string, number ...
{} 중괄호 안쓸 수 있으면 최대한 사용하지 않는게 깔끔하다.
// That's nono
handleClick = () => { console.log(something) };
// Goood
handleClick = () => console.log(something);
5. if문은 중첩하는 것보다 **조건마다 return** 시키는게 이해하기 편하다.
```jsx
// Bad
const checkId = () => {
 if (condition) {
 if (!id.test(idCheck)) {
 setError(true);
 return false;
 }
 return true;
 }
 return false;
};
// Good
const checkId = () => {
 if (!condition) {
 return false;
 }
 if (!id.test(idCheck)) {
 setError(true);
 return false;
 }
 return true;
};
함수는 서로 상호작용하거나 공통되는 부분이 있는 것이 아니라면 따로 분리하자.
Styled-components
공통 컴포넌트를 import하여 사용하는 경우 as를 잘 활용하자. (styled-components)
// Bad
import Title from '~/component/styleguide';
const Title2 = styled(Title)font-weight: bold;
// Good
import { Title as CommonTitle } from '~/component/styleguide';
const Title = styled(CommonTitle)font-weight: bold;
2. css 추가가 없(어졌)다면 **html 태그로** 수정하자.
```jsx
// Nooooooo
const Wrap = styled.div``;
...
<Wrap>...</Wrap>
// Yesssss
...
<div>...</div>
TypeScript
타입스크립트에서 any 쓰지마 제발... 애니스크립트 아니라고...
// Bad
interface AnyScript {
id: any;
name: any;
age: any;
func: (e: any) => any;
}
// Good
interface TypeScript {
 id: number;
 name: string;
 age: number;
 func: (e: string) => void;
}
2. interface, type 이름, enum의 이름과 키는 **PascalCase**로 작성한다.
```jsx
// Bad
enum color {
 red = 0,
 blue = 1,
 green = 2
}
// Good
enum Color {
 Red = 0,
 Blue = 1,
 Green = 2
}
interface 필수값 여부 체크하자. 물음표 살인마... 극혐이니까...
// Bad
interface Person {
name?: string;
age?: number;
nationality?: string;
job?: string;
}
// Good
interface Person {
 name: string;
 age: number;
 nationality: string;
 job?: string;
}
3. jsx 태그를 사용하지 않는 파일이라면 **확장자명**을 `.ts`로, 사용한다면 `.tsx`로 한다. 
`.ts`에서는 `<` 꺽쇠가 jsx 태그인지 타입을 지정하는 것인지 구분을 못하기 때문이다.
# React
1. **props는 immutable이다.** 수정이 필요하다면 복사해서 수정하자.
```jsx
// Nope
function Popup({style}: PopupProps) {
 const [opacity, setOpacity] = useState(0);
 style.overlay.opacity = opacity;
...
// Yep
function Popup({style}: PopupProps) {
 const [opacity, setOpacity] = useState(0);
 const popupStyle = {
 ...style,
 overlay: { ...style.overlay, opacity }
 }
 popupStyle.overlay.opacity = opacity;
}
props 넘길때 파라미터 없다면 함수 또 만들지 말라고.. 제발..
// Noooo
<Input onChange={() => handleChange()} />
// Yes
3. 자식 컴포넌트에게 **setState를 넘겨주지 말고 handler를 만들자**.
```jsx
// Bad
<Tab setName={setName} />
<Tab setName={setName} />
// Better
const onClickTab = (t) => setName(t);
...
<Tab onClick={onClickTab} />
<Tab onClick={onClickTab} />
생각보다 많은 컴포넌트를 재사용할 수 있단다. 가능하면 무족권 조건문 처리하자!
실수도 반복하면 실력, 리뷰를 받으면 가슴에 새기는 개발자가 됩시다!
PR에 🎉 👍 😄 🚀 ❤️ 만 달리는 그날까지!!!!!!

사수에게 칭찬받는 PR 체크리스트

댓글