[230527] 사이드 프로젝트 작업

Today

• 주말에 비와서 쳐지길래 카페가서 사이드 프로젝트 작업했다.
• 아아 연하게 + 티라미수로 당 채우면서 작업하니 햇삐

Today I Learned

1. 아토믹 디자인

• 요즘 사이드프로젝트로 리액트 작업하면서 폴더관리, 시스템 디자인을 어떻게 해야하는지 고민스럽다. 사실 리액트 기능도 아직 제대로 못쓰면서 앞선 생각이긴한데 회사에서 unity 작업할때 신경써서 하니깐 웹 작업은 어떻게 하는지 미리부터 궁금함

• 공통 컴포넌트 일반적으로 사용하는 방식은 아토믹이라고 함 (ChatGPT)

• 아래는 폴더 구조 예시이다.

src/
  components/
    atoms/
      Button/
        Button.js
        Button.css
      Input/
        Input.js
        Input.css
    molecules/
      LoginForm/
        LoginForm.js
        LoginForm.css
      Dropdown/
        Dropdown.js
        Dropdown.css
    organisms/
      Header/
        Header.js
        Header.css
      Footer/
        Footer.js
        Footer.css
    templates/
      Dashboard/
        Dashboard.js
        Dashboard.css
      LandingPage/
        LandingPage.js
        LandingPage.css
    pages/
      HomePage/
        HomePage.js
        HomePage.css
      AboutPage/
        AboutPage.js
        AboutPage.css
  containers/
    ...
  utils/
    ...
  ...

• atoms 폴더는 가장 작은 단위의 컴포넌트인 아톰(Atoms)을 포함
• molecules 폴더는 아톰을 조합한 분자(Molecules) 컴포넌트를 포함
• organisms 폴더는 분자 컴포넌트를 조합한 유기체(Organisms) 컴포넌트를 포함
• templates 폴더는 여러 개의 유기체 컴포넌트를 조합한 템플릿(Templates) 컴포넌트를 포함
• pages 폴더는 템플릿 컴포넌트를 사용하여 구성된 페이지 컴포넌트를 포함

우리 프로젝트는 어떻게 적용할지 작업하면서 계속 고민 필요

2. 게시물 작업

• 탭 마다 표시되는 게시글이 조금씩만 달라서 prop 값에 따라 다르게 그려주는 컴포넌트를 만들었다.
• 아마 아토믹에서 ` molecules``organisms ` 정도 단계일 것 같은데 해당 페이지에서만 사용해서 공통 컴포넌트로 안빼도 될 것 같다 판단

interface PostProp {
  title?: string;
  content?: string;
  componetType?: "none" | "slider" | "list";
  componet?: Array<any>;
}

3. css white-space

• json -> 파싱 -> string 파일 받아서 컴포넌트로 줄바꿈 된 상태로 그리기
• white-space: pre-line 속성을 사용하여 줄바꿈을 적용하기 위해서는 텍스트 내에 실제로 줄바꿈을 나타내는 문자가 포함되어야 함
• 일반적으로 줄바꿈은 \n이나 <br> 태그를 사용하여 표현 가능