[FE] 사용한 프레임 워크 및 라이브러리 설명
Table of Contents
- 페이스북이 만든 Javascript 기반의 라이브러리.
- 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 라이브러리.
-
'Component' 라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 도와준다.
- 쉽게 얘기하면, 작은 부품들을 조립하여 하나의 어플리케이션을 만들 수 있게 한다.
- JSX 라는 Javascript 확장문법을 사용하여 javascript 파일에 html을 작성할 수 있게 한다.
지속해서 데이터가 변화하는 대규모 애플리케이션을 구축하기 위해 React를 만들었다.
React는 SPA(Single Page Application) 개발 라이브러리이다.
- 한 개(Single)의 Page로 구성된 Application.
- 하나의 html 파일을 가지고, 나머지는 javascript를 이용하여 동적으로 화면을 구성
- 단 한 번만 리소스(HTML, CSS, JavaScript)를 로딩하며, 그 후에는 데이터를 받아올 때만 서버와 통신한다.
- 즉, 최초 페이지를 로딩한 시점부터는 페이지 리로딩 없이 필요한 부분만 서버로 부터 받아서 화면을 갱신한다.
새로고침을 통한 페이지 리로딩을 최소화하기 때문에, 네이티브 앱과 유사한 UX을 제공할 수 있다.
- node -v : v16
- npm -v : 8
npx create-react-app study-demo1주요 파일
- public/index.html
- src/index.js
- src/App.js
../webapp/프론트 프로젝트명/package.json 에 proxy설정
"proxy": "http://localhost:8081"- typescript를 사용하지 않아 함수의 parameter, return, 변수의 값과 타입을 네이밍으로만 추론해야한다.
- 함수의 기능이나 변수명에 추가적인 설명이 필요할 때 작성하는 주석 양식이 통일되지 않아서 헷갈릴 수 있다.
- react 컴포넌트의 props의 경우 proptypes로 사용하지만 추론이 안 된다. 런타임에 발생하는 에러로 앱이 동작하지 않는 건 아니지만 런타임에서 에러가 발생해야 타입이 잘못 지정된 걸 알 수 있다. (런타임 전에 코드를 작성할 때 알아야 코드 작성 시간이 단축된다.)
- 추상화된 로직(utils, hooks) 혹은 컴포넌트에 적절한 주석이 없어 사용하고 협업하는 입장에서 이해하는데 상당한 시간이 필요하다.
물론 typescript를 사용하면 되지만 이미 프로젝트가 많이 진행된 상태였고, 1차 배포까지 얼마 남지 않아 차선책으로 js-doc를 사용해보고자 하였다.
- 바닐라 자바스크립트를 사용하지만 타입 지정 및 타입 추론이 가능하다.
- 주석을 체계적으로 사용할 수 있다.
- PropTypes와 함께 사용이 가능하다.
- 추상화된 로직(utils, hooks) 혹은 컴포넌트에 적절한 양식으로 설명을 작성하기 수월하다.
구현 예제: https://codesandbox.io/s/custom-hooks-practice-rqe5nc
https://www.inkoop.io/blog/a-guide-to-js-docs-for-react-js/
https://gist.github.com/DeruiDENG/074b15de1ebc23ee8d307c14198c1231
https://github.com/yulpumta-clone-team/Co-nect/issues/177
https://2021.stateofcss.com/en-US/technologies/css-in-js/
- 스타일 정의를 CSS 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법
- 웹 애플리케이션을 여러 개의 재활용이 가능한 빌딩 블록으로 분리하여 개발하는 컴포넌트 기반 개발 방법이 주류가 됨
- Usage, Awareness : styled-components
- Satisfaction, Interest : CSS-Modules
- 사용자 친화적인 UI를 그대로 가져다가 쓸 수 있음. 개발속도 향상 및 간결한 css 코드 작성 가능
- Tailwind CSS, React Bootstrap, Ant Design, Semantic UI 등
styled-components활용하기로 결정
styled-components 설치하기
npm i styled-components공식문서에 따르면 맨 위에 쓰라고 정해져 있는데, 아래하던 위에 하던 적용한 스타일에 변화가 없어 styled-component가 css파일을 어떤 형태로 불러오는지 확인해봤습니다.
// 1번
<ThemeProvider theme={theme}>
<App />
<GlobalStyle />
</ThemeProvider>
//2번
<ThemeProvider theme={theme}>
<GlobalStyle />
<App />
</ThemeProvider>-
HTML에서[style](https://ofcourse.kr/html-course/%ED%83%9C%EA%B7%B8%EC%9D%98-%EC%86%8D%EC%84%B1#style-%EC%86%8D%EC%84%B1)을 직접 지정한 속성 -
#id로 지정한 속성 -
.클래스,:추상클래스로 지정한 속성 -
태그이름으로 지정한 속성 - 상위 객체에 의해
상속된 속성
styled-component자체는 html파일
안에<style></style>에 써짐
createGlobalStyle로 적용한 css 속성은 태그 이름에 지정한 속성
styled-component로 컴포넌트마다 지정한 속성은 .클래스에 지정한 속성
<S.~ /> : 스타일 컴포넌트
<~ />: 일반 jsx 컴포넌트
S.으로 시작하게 써서 일반 jsx 컴포넌트와 구분하였다.
// style.js
export const Container = styled.div``;
export const Header = styled.div``;
export const CardsGrid = styled.div``;
// SomeComponent
import * as S from "./style";
export default SomeComponent (){
const getSomething = () => {};
return (
<S.Container>
<S.Header>
Header Text
</S.Header>
<S.CardsGrid>
<Card>
<Card>
<Card>
</S.CardsGrid>
</S.Container>
)
}https://velog.io/@sonic/회고-Styled-Components를-사용하며
UI 협업을 위한 storybook 정적 배포 빌드 github action으로 자동화를 진행했다.
빌드된 결과는 하단 storybook 배포 페이지에서 확인이 가능하게 끔 했다.