코딩 컨벤션

코딩_커밋_컨벤션

You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload to refresh your session.

https://github.com/boostcamp-2020/Project18-D-WEB-Boostact/wiki/%EC%BD%94%EB%94%A9_%EC%BB%A4%EB%B0%8B_%EC%BB%A8%EB%B2%A4%EC%85%98

prettier

Options · Prettier

Prettier ships with a handful of format options.

https://prettier.io/docs/en/options.html#prose-wrap

//.prettierrc.js

module.exports = {
  printWidth: 80,
  semi: true,
  singleQuote: true,
  tabWidth: 2,
  useTabs: false,
  endOfLine: 'auto',
  jsxSingleQuote: true,
  bracketSameLine: true,
  quoteProps: 'as-needed',
  trailingComma: 'es5',
  arrowParens: 'always',
  bracketSpacing: true,
};

컴포넌트

• Arrow Function Component Syntax

• 파일 아래서 export 하기

const MyComponent = ({ propA, propB }) => {

}

export default MyComponent;

const Container = styled.div`
`;

페이지

const AboutUsPage = ({ propA, propB }) => {

}

export default AboutUsPage;

이벤트 핸들러

파일 구조

• app
• user
• user.css
• user_component.tsx
• page.tsx

• pages
• api
• index.ts

• components

• 파일 구조 참고 예시
File Structure - React
React doesn't have opinions on how you put files into folders. That said there are a few common approaches popular in the ecosystem you may want to consider. Grouping by features or routes One common way to structure projects is to locate CSS, JS, and tests together inside folders grouped by feature or route.

https://reactjs.org/docs/faq-structure.html