[스타일링]

방법

Framework

관련 내용

Clean Code 는?

0. 시작 전

1. Global 사용은 최소화하며, Local하게 컴포넌트를 작성하자

2. Conditional rendering on either condition
(두 가지 조건에서의 경우, 렌더링 조건문=조건부 삼항 연산자)

Bad example 1, before es6(나쁜 예시 2, es6 이전에는)

import React, { useState } from 'react'

export const ConditionalRenderingBad = () => {
  const [showConditionOneText, setShowConditionOneText] = useState(false)

  const handleClick = () =>
    setShowConditionOneText(showConditionOneText => !showConditionOneText)

    const beforeES6 = if (showConditionOneText) { The condition must betrue! } else { The condition must befalse! }

  return (
    <div>
      <button onClick={handleClick}>Toggle the text</button>
        <p>{beforeES6}</p>
    </div>
  )
}

Bad example 2(나쁜 예시 2)

import React, { useState } from 'react'

export const ConditionalRenderingBad = () => {
  const [showConditionOneText, setShowConditionOneText] = useState(false)

  const handleClick = () =>
    setShowConditionOneText(showConditionOneText => !showConditionOneText)

  return (
    <div>
      <button onClick={handleClick}>Toggle the text</button>
      {showConditionOneText && <p>The condition must be true!</p>}
      {!showConditionOneText && <p>The condition must be false!</p>}
    </div>
  )
}

Good example (좋은 예시)

import React, { useState } from 'react'

export const ConditionalRenderingGood = () => {
  const [showConditionOneText, setShowConditionOneText] = useState(false)

  const handleClick = () =>
    setShowConditionOneText(showConditionOneText => !showConditionOneText)

  return (
    <div>
      <button onClick={handleClick}>Toggle the text</button>
      {showConditionOneText ? (
        <p>The condition must be true!</p>
      ) : (
        <p>The condition must be false!</p>
      )}
    </div>
  )
}

3. Conditional rendering only for one condition
(한 가지 조건에서의 조건문)

Bad example (나쁜 예시 )

import React, { useState } from 'react'

export const ConditionalRenderingWhenTrueBad = () => {
  const [showConditionalText, setShowConditionalText] = useState(false)

  const handleClick = () =>
    setShowConditionalText(showConditionalText => !showConditionalText)

  return (
    <div>
      <button onClick={handleClick}>Toggle the text</button>
      {showConditionalText ? <p>The condition must be true!</p> : null}
    </div>
  )
}

Good example (좋은 예시)

import React, { useState } from 'react'

export const ConditionalRenderingWhenTrueGood = () => {
  const [showConditionalText, setShowConditionalText] = useState(false)

  const handleClick = () =>
    setShowConditionalText(showConditionalText => !showConditionalText)

  return (
    <div>
      <button onClick={handleClick}>Toggle the text</button>
      {showConditionalText && <p>The condition must be true!</p>}
    </div>
  )
}

3. Boolean props
(불리언=참,거짓 props)

Bad example (나쁜 예시 )


import React from 'react'

const HungryMessage = ({ isHungry }) => (
  <span>{isHungry ? 'I am hungry' : 'I am full'}</span>
)

export const BooleanPropBad = () => (
  <div>
    <span>
      <b>This person is hungry: </b>
    </span>
    <HungryMessage isHungry={true} />
    <br />
    <span>
      <b>This person is full: </b>
    </span>
    <HungryMessage isHungry={false} />
  </div>
)

Good example (좋은 예시)

import React, { useState } from 'react'

export const ConditionalRenderingWhenTrueGood = () => {
  const [showConditionalText, setShowConditionalText] = useState(false)

  const handleClick = () =>
    setShowConditionalText(showConditionalText => !showConditionalText)

  return (
    <div>
      <button onClick={handleClick}>Toggle the text</button>
      {showConditionalText && <p>The condition must be true!</p>}
    </div>
  )
}

2.2 property (속성)

   <label for="id">아이디</label>
   <input type="text" id="id" aria-required="true">

2.3 state (상태)

   <button aria-expanded="true">열기</button>
   <div hidden>열기 내용</div>

3. Jenkins 란

3.1 Jenkins 설치

3.2 Jenkins Plugin

3.3 Jenkins 설정

### 3.3.1 General 프로젝트에 대한 설명, url, discard old builds(오래된 빌드 삭제) 등 전반적인 설정을 한다.

### 3.3.2 Source Code Management (소스 코드 관리) Repositories 설정 (URL, 인증)을 할 수 있으며, 어떤 Branches 들을 build 할 것인지 설정할 수 있다.
public 레포지토리는 credentials(인증) 설정할 필요가 없으나, private 레포지토리는 git 과 연동하여 설정해야한다.

### 3.3.3 Build Triggers (빌드 유발) 빌드를 언제 실행할 지를 설정할 수 있다.
- Trigger builds remotely (e.g., from scripts) 빌드를 원격으로 유발 : 외부에서 URL을 통해 빌드를 진행 할 수 있도록 설정합니다.
- Build after other project are built : 다른 프로젝트를 빌드한 후 이어서 현재 프로젝트를 빌드하는 설정.
- Build periodically** : 주기적으로 빌드
- Poll SCM** : 서버에서 변경된 사항이 존재할 때 빌드를 수행하는 설정

    ```
    schedule 예시
    15분 간격으로 빌드 작업을 수행
    H/15 * * * *
    모든 시간의 첫 30분 동안에 10분 간격으로 빌드를 수행
    H(0-29)/10 * * * *
    주말을 제외한 주중에 9시부터 16시 사이에 2시간에 한번씩 빌드를 수행
    H 9-16/2 * * 1-5
    12월 달은 제외하고 매달 1일과 15일에 한번씩 빌드를 수행
    H H 1,15 1-11 * 
    ```

### 3.3.4 Build Environment (빌드 환경) 빌드 환경 설정 - Delete workspace before build start : 빌드를 실행하기 전, 이전에 사용되던 작업 공간 삭제 - Use secret text(s) or file(s) : 다양한 자격 증명에 사용할 인증 파일 또는 텍스트 사용
- Abort the build if it’s struck : 빌드가 교착 상태 등의 이유로 중지되면 지정된 시간 내로 빌드 종료 후 지정된 메시지 출력
- Add timestamps to the Console Output : 빌드 시작 시간, 빌드 종료 시간 등 시간과 관련된 내용을 Console output에 함께 출력
- With Ant : Apache Ant를 사용하여 빌드하는 환경 구성.

### 3.3.5 Build (빌드) 명령어 입력 등 다양한 방법으로 빌드 시킬 수 있다. - Execute Windows batch command: 입력된 Window command line 실행 - Execute Shell: sh -xe 명령어 실행. Linux 전용. - Invoke Ant: Ant 빌드 시스템을 사용하는 프로젝트의 경우에 사용. 입력된 인자를 통해 빌드 - Invoke Gradle script: Gradle를 빌드 시스템으로 빌드하는 프로젝트의 경우에 사용. 입력된 인자를 통해 작업. - Invoke top-level Maven targets: Maven 빌드 시스템으로 빌드하는 프로젝트의 경우에 사용. 입력된 인자를 통해 작업 - Run with timeout: 지정된 시간동안 빌드가 완료되지 않으면 빌드 중지 - Set build status to “pending” on GitHub commit: Git 프로젝트 속성에 정의된 이름 속성으로 작업 이름을 대체

3.3.6 Post-build Actions

빌드 이후 액션을 설정해줄 수 있다. (예, 이메일 알림 등)

00. 그 외

○ 참고 영상

○ 참조 문서 및 사이트