[섞어마셔] 프로젝트 2일차 - 프로젝트 초기세팅, 기획, 디자인 정하기

기초공사가 중요하듯 github 세팅이 중요하다.

 

오늘은 어제 다 못한 프로젝트 초기 세팅을 마무리하였습니다.

다른 팀원분들은 감사하게도 디자인과 기획을 맡아주셔서 많이 편하게 했습니다.

github을 못 다루시는 분이 많아서 조마조마하지만 그래도 끝까지 잘 컨트롤해서 파이팅!!

 

 

오늘 한 일들 (많이도 했다.)

• 기획 확인
• 디자인 확인
• 기획, 디자인 확인되면 개발
• 대표색 선정 → theme 추가 예정
• 폰트 선정 → 폰트 세팅
• css 초기화 세팅
• install한 라이브러리 잘 설치되었나 테스트
• 브랜치 룰 설정
• PR 템플릿 만들기
• 폰트 적용
• css 초기화
• Prettier 세팅

 

1. 기획, 디자인

---

 

다른 팀원분들이 기획과 디자인을 피그마에 만드셔서 설명을 듣고 그대로 적용을 하기로 하였습니다.

React 프로젝트인데 디자인해 주시는 게 얼마나 감사한 일인지...

 

 

2. 프로젝트 세팅

---

• css 초기화 세팅
• install한 라이브러리 잘 설치되었나 테스트
• 브랜치 룰 설정
• PR 템플릿 만들기
• 폰트 적용
• css 초기화
• Prettier 세팅

 

1) css 초기화

자바스크립트 기본 css를 사용하면 불편한 점이 많아서 초기화를 해야 합니다.

그래서 emotion/react를 사용해서 globalStyle을 적용했습니다.

import { css } from "@emotion/react";

export const globalStyles = css`
	* {
		margin: 0; /* margin 초기화 */
		padding: 0; /* padding 초기화 */
		font: inherit; /* font 상속을 못하는 요소(button, input)에게 폰트 적용을 위해 작성 */
		color: inherit; /* a, input, textarea에도 동일한 글자색 적용을 위해 작성 */
	}

	*,
	:after,
	:before {
		box-sizing: border-box;
	}

	:root {
		font-family: "Noto Sans", sans-serif;
		font-optical-sizing: auto;
		font-weight: 500;
		font-style: normal;
		overflow-wrap: break-word;
	}

	html,
	body {
		height: 100%;
	}

	img,
	svg,
	canvas {
		display: block; /* 하단의 여백 제거를 위해 작성 */
		max-width: 100%; /* 이미지 삐져나가는것 방지하기 위해 작성 */
	}

	li {
		list-style: none;
	}

	button {
		background: none;
		border: 0;
		cursor: pointer;
	}

	a {
		text-decoration: none;
	}
`;

 

// index.js

const root = ReactDOM.createRoot(document.getElementById("root"));
const queryClient = new QueryClient();
root.render(
	<QueryClientProvider client={queryClient}>
		<BrowserRouter>
			<Global styles={globalStyles} />
			<App />
		</BrowserRouter>
	</QueryClientProvider>,
);

 

2) PR 템플릿 설정

저번 프로젝트에서도 설정했는데 블로그 글을 작성 안 해서 이번에 작성해 보았습니다. 

[github] 브랜치 룰 설정하기

 

3) 폰트 적용

오랜만에 적용하는 거라 좀 헤맸습니다.

public/index.html 에 아래 코드를 추가

  <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"
      rel="stylesheet"
    />

 

아까 설정해 둔 글로벌 스타일에서 적용했습니다.

	:root {
		font-family: "Noto Sans", sans-serif;
		font-optical-sizing: auto;
		font-weight: 500;
		font-style: normal;
		overflow-wrap: break-word;
	}

 

4) Prittier 설정

 

전지전능한 chatGPT가 알려준 Prittier 옵션들

1. printWidth: 한 줄에 표시할 최대 문자 수입니다. 너무 긴 줄은 여러 줄로 나누어집니다. 기본값은 80입니다.
2. tabWidth: 한 탭의 공백 수를 설정합니다. 기본값은 2입니다.
3. useTabs: 공백 대신 탭을 사용할지 여부를 설정합니다. 기본값은 false입니다.
4. semi: 명령문 끝에 세미콜론을 사용할지 여부를 결정합니다. 기본값은 true입니다.
5. singleQuote: 문자열을 따옴표(')로 감쌀지 또는 쌍따옴표(")로 감쌀지 설정합니다. 기본값은 false로, 쌍따옴표를 사용합니다.
6. quoteProps: 객체 속성의 이름을 어떻게 인용할지 설정합니다. 옵션은 as-needed, consistent, preserve 입니다.
7. jsxSingleQuote: JSX에 문자열을 사용할 때 싱글 쿼트(')를 사용할지 결정합니다. 기본값은 false입니다.
8. trailingComma: 여러 줄을 사용하는 배열이나 객체 리터럴에서 마지막 항목 뒤에 콤마를 추가할지 설정합니다. 옵션은 none, es5, all 입니다.
9. bracketSpacing: 객체 리터럴의 괄호 사이에 공간을 둘지 설정합니다. 기본값은 true입니다.
10. jsxBracketSameLine: JSX 요소의 마지막 태그가 같은 줄에 놓일지 여부를 설정합니다. 기본값은 false입니다.
11. arrowParens: 화살표 함수의 매개변수에 항상 괄호를 사용할지 설정합니다. 옵션은 avoid와 always입니다.

 

여기서 제가 설정한 옵션은 아래와 같습니다.

{
	"singleQuote": false,   // 문자열을 쌍따옴표(")로 감싸도록 설정합니다. 기본값과 동일합니다.
	"semi": true,           // 모든 문장 끝에 세미콜론(;)을 추가하여 문장의 종료를 명확히 합니다.
	"tabWidth": 2,          // 들여쓰기에 사용할 공백 수를 2로 설정합니다. 기본값과 동일합니다.
	"trailingComma": "all", // 가능한 모든 멀티라인에서 마지막 항목 뒤에 콤마(,)를 추가합니다.
	"useTabs": true,        // 들여쓰기에 공백 대신 탭을 사용합니다. 기본값은 false이므로 이 설정은 기본 동작을 변경합니다.
	"printWidth": 100       // 한 줄에 최대 100자까지 허용합니다. 기본값은 80자입니다.
}

 

3. 마무리하며

---

오늘도 너무 바쁜 날이었지만 초기세팅과 기획, 디자인까지 마무리되어서 내가 할 것만 잘하면 끝입니다.

현재는 하루에 질문을 40개 이상씩 받고있지만 내일부터는 각자 코딩하면 되니깐. 편해지겠죠?? 아마도???