보일러플레이트 코드

yellowbutter·2023년 11월 14일
0

TIL

목록 보기
17/24
post-thumbnail

보일러 플레이트

코딩을 하다 보면 의미 없는 코딩을 할 때도 있고 불필요한 작업에 업무 생산성이 떨어지는 경우가 있다.

이럴 경우를 대비해 보일러 플레이트로 기본적인 골격을 미리 만들어서 업그레이드하는 방식이며 불필요한 코드와 생산성을 높일 수 있는 방법이다.

어원

'묻지도 따지지도 않고 따라 적는 코드'를 우리는 보일러 플레이트(Boiler Plate) 코드라고 한다. 이 용어는 미국 신문 업계 초창기에 매일 바뀌지 않고 동일한 내용(신문의 제목, 형태 등 변하지 않는 부분)을 효율적으로 출력하기 위해 '박아 놓고 똑같이 사용하기 위해' 작성된 철판 모형을 의미한다.

이런 용어가 프로그래밍으로 넘어와서 '별 수정 없이 반복적으로 사용되는 코드'를 보일러 플레이트라고 한다.

묻지도 따지지도 말고 그냥 복사한 다음, 필요 부분만 수정하면 된다는 말이다.

예시

가장 대표적인 예로 create-react-app 활용하면 미리 갖춰진 골격을 주고 개발자는 거기서 원하는 서비스에 맞춰서 개발을 하는 것이다.

만약 create-react-app 없이 첨부터 세팅을 한다면 정말 힘든 시간을 보내게 될 것이다.

구성요소

BoilerPlate 코드란 모든 코드를 작성하기 위해 항상 필요한 부분을 의미한다. 
BoilerPlate는 다음 4가지로 구성되어 있다.

Import : 필요한 코드를 불러들이는 부분

import React from 'react';

Component : 현 페이지를 구현하는 코드

const Home = () => {
  const name = 'Coding Grandpa';

  return (
    <div>
      <h4>Welcome to the world!</h4>
      <span> I like bread.</span>
    </div>
  )
};

StyleSheet : 페이지의 객체를 꾸미기 위한 style

Export : 현 Javascript 코드를 타 Javascript에서 접근하기 위한 부분

export default Home

참고 자료
보일러플레이트(Boilerplate code)란? - 개념, 필요한 이유
보일러 플레이트(Boiler Plate) 이해하기

profile
기록은 희미해지지 않는다 🐾🧑‍💻

0개의 댓글