What Is Quick Drop?
간단하게 말하면 간단하게 물품기부를 진행할 수 있는 기부 플랫폼이다.
Tech Stack
-
React
내심 Flutter 를 사용해보고 싶었으나, 리액트를 사용하자는 의견이 많아서 리액트를 사용하여 FE로 구현하게 되었다. -
Styled-Components
저번 Greenary 프로젝트때 사용해봤던 경험이 있고, 컴포넌트안에 CSS 코드까지 한눈에 볼 수 있어서 채택하였다.
물론 tailwind CSS도 고려해보았으나, UI 구현은 편리 하겠으나, 협업 관점에서 코드가 너무 읽기 불편하다고 생각이 들어서 Styled-Components를 사용하기로 하였다.
물론 Styled-component 역시 코드가 길어진다는 단점이 있겠지만, Refactoring 을 통해 더 효율적으로 발전시켜나갈 예정이다.
초기 세팅
이번에 프로젝트를 진행하면서 처음으로 초기 세팅을 진행하였다.
처음이기 때문에 구글링하면서 초기 세팅을 진행하였는데, 아무런 생각없이 글만 따라하다가
같이 회의 하시던 BE 분께서 뭔가 이상하다고 하셔서 차분히 찾아보니
App.js를 글만 보고 아무 생각없이 지워버렸...다(부끄럽네...)
그래서 다시한번 이곳에 정리해보고자 한다.
App.js, index.js, index.html
- App.js
import React from 'react';
import Home from './pages/Home/Home';
function App() {
return <Home />;
}
export default App; App 컴포넌트가 화면에 표현될 요소들을 담고 있다.
- index.js
ReactDom.render(element, container[,callback]
즉 첫번째 파라미터를 두번째 파라미터에 렌더링하는 역할을 담당한다.
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root'),
);즉 첫번째 파라미터인 App 컴포넌트를 root 라는 id를 갖고 있는 DOM 요소에 렌더링 하는 역할을 하는 것.
(BrowserRouter는 routing 관련이므로 지금은 넘어가보자)
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
body 태그 안 <div id="root"></div> 요부분에 App.js 에 담은 내용들이 출력이 되는 것이다.
esLint
{
"extends": ["react-app", "plugin:prettier/recommended"],
"rules": {
"no-var": "warn", // var 금지
"no-multiple-empty-lines": "warn", // 여러 줄 공백 금지
"no-console": ["warn", { "allow": ["warn", "error"] }], // console.log() 금지
"eqeqeq": "warn", // 일치 연산자 사용 필수
"dot-notation": "warn", // 가능하다면 dot notation 사용
"no-unused-vars": "warn", // 사용하지 않는 변수 금지
"react/destructuring-assignment": "warn", // state, prop 등에 구조분해 할당 적용
"react/jsx-pascal-case": "warn", // 컴포넌트 이름은 PascalCase로
"react/no-direct-mutation-state": "warn", // state 직접 수정 금지
"react/jsx-no-useless-fragment": "warn", // 불필요한 fragment 금지
"react/no-unused-state": "warn", // 사용되지 않는 state
"react/jsx-key": "warn", // 반복문으로 생성하는 요소에 key 강제
"react/self-closing-comp": "warn", // 셀프 클로징 태그 가능하면 적용
"react/jsx-curly-brace-presence": "warn", // jsx 내 불필요한 중괄호 금지
"prettier/prettier": [
"error",
{
"endOfLine": "auto"
}
]
}
}개발자마다 코드를 쓰는 스타일이 다 다르다.
함수 하나를 쓰더라도, 개발자 10명이 있으면 4~5개의 스타일이 나온다.
협업 입장에서 그 format을 통일하는 것은 코드를 읽는 데 있어서 많은 도움이 된다.
여러 방법이 있겠지만 널리 쓰이는 esLint를 통해서 코드 형식을 맞추기로 하였다.
같이 FE 담당하시는 분이 프로젝트가 처음이셔서, 하나하나씩 찾아가면서 주석을 하나씩 달아주었다.
그리고 참고하였던 velog 글 역시 공유 드렸다.
Home.jsx UI 요소 구현 완료
검정색 영역에는 Carousel이 들어갈 예정이다.
개발을 하면서 설렘을 느낄 때가 있는데
첫번째는 repository에 첫 commit을 할 때이고,
두번째는 첫 Component를 완성할 때이고
마지막은 완성후 배포할 때인데
어찌저찌 첫 컴포넌트를 완성해냈다.
TroubleShooting
yarn 과 npm 통일
이를 팀 레포에 푸시하고 팀원분께 풀 요청을 드렸는데
yarn.lock 에서 conflict가 발생한다고 연락을 주셨다
-
발생 원인
npm과 yarn 을 혼용했기 때문이다. -
해결방법
그래서 yarn과 npm 중 yarn으로 통일하기로 하였다.
위 글을 참고하여 package.json 파일의 engines 값을 이용하여 강제화 및 .npmrc 파일을 생성하여 yarn으로 통일 시켰다.
- package.json 파일
// 윗부분 생략
"engines": {
"npm": "npm 대신 yarn을 사용해주세요"
}- npmrc
engine-strict = true- 결과
이렇게 npm 명령어를 사용하게 되면 에러를 뱉고, npm 대신 yarn을 사용하라는 텍스트를 터미널에서 확인할 수있다.
그리고 팀원분 역시 pull을 무사히 진행할 수 있었다.
