Skip to content

Lucky-pear/rwrw-web

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

끄적끄적 Web

React.js / TypeScript

How to run

env 설정

to be continued

App 실행

  • local, dev
yarn start
  • production to be continued

Basic rules

package install

yarn 을 사용하여 install 하기 때문에 npm install 을 사용하는것을 금지한다

Code Convention

Dir 구조

- src
|- components
|  # 도메인이나 역할 분류에 따라 디렉토리 생성
|  # 디렉토리는 lower Camel Case, 컴포넌트는 Upper Camel Case
|  # 컴포넌트명은 도메인명을 항상 포함한다
|- constants
|  # 공통 readonly 상수
|- pages
|  # route 구조에 따라 생성
|  # 하위 컴포넌트 이름은 Page라는 접미어를 붙인다
|- utils
|  # 각종 유틸 로직 (mappers, types 등등)'
|- styles
|  # style 관련된 내용(컴포넌트, 함수 포함)
|- App.tsx
|  # App.tsx는 Context provider로서만 사용하도록 한다. 로직이 되는 코드는 작성하지 않는다.

컴포넌트 내부 Wrapper 사용규칙

  • Container

    • 컴포넌트 내부에서 Wrapper를 사용한다.
    // Bad Case
    function BadCase(): JSX.Element {
      return (
        <div>
          <Wrapper></Wrapper>
        </div>
      );
    }
    // Good Case
    function GoodCase(): JSX.Element {
      return (
        <Wrapper>
          <SomeOtherWrapper></SomeOtherWrapper>
        </Wrapper>
      );
    }

    size 단위 규칙

    • 모든 size 단위는 rem만 사용한다. root(GlobalStyle.ts)에 font-size: 10px을 지정하여, 소수점 한자리를 당겨서 사용한다. 가령, width: 24px 인 경우 다음과 같이 사용한다.
    .circle {
      width: 2.4rem;
    }

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published