React Component로 웹페이지 디자인하기

이대현·2020년 6월 25일

CSS JavaScript React bootstrap component material

예발자닷컴 개발 기록

목록 보기

2/8

CSS, React 라이브러리 및 템플릿을 component화 시켜 예발자닷컴 메인 페이지를 반응형으로 디자인했다.

해보면서 익히자는 취지였기 때문에 리액트로 컴포넌트 만드는 방법 정도의 강의를 듣고 시작했다. 눈에 보이는 화면에만 집중해서 코드가 매우 지저분하다. 심지어 만들어 놓고 안 쓰는 컴포넌트들도 삭제하지 않고 그대로 나뒀다. 나중에 시간을 내서 리팩토링 해보면 좋을 것 같다.

아무튼 아래의 것들에 아주 조금은 익숙해진 것 같다.

리액트의 폴더 구조
함수형 컴포넌트 설계
state와 props를 이용해 데이터 관리
자바스크립트 이벤트
개발자도구를 활용해 css 적용

완성한 메인 페이지

잔행하면서 고민한 부분들을 간략하게 정리했다.

🩸 React

1. 폴더 구조 설계

기능별로 컴포넌트를 쪼개 구조화 하는 방식으로 개발했다.

react-yebalja(프로젝트명)
│
└ src 
   |
   │        
   ├ page  ┬ components ┬ Jumbotron.js // 점보트론
   │       │            ├ SectionBox.js // 섹션 타이틀
   │       │            ├ HorizontalTimeline.js // 연간 타임라인 
   │       │            ├ Table.js   // 비교 표
   │       │            └ Footer.js // 푸터
   │       │           
   │       ├ home.js  // 메인 페이지
   │       └ detail.js // 디테일 페이지
   ├ index.js
   ├ App.js
   └ App.css

지금은 메인 페이지 하나만 만들어봐서 굳이 페이지 js파일을 나누지 않았지만, 실제 개발할 때는 이 블로그 글을 참고하면서 컴포넌트와 props 설계를 고려하면 좋을 것 같다.

2. 함수형 컴포넌트 hooks 사용법

머티리얼 ui의 컴포넌트들은 class형이 아니라 함수형으로 구현되어 있어서, 기존의 state와 props 사용법과 약간 다르게 데이터를 전달해야 한다.

jumbotron.js

import React ,{useEffect, useState} from 'react';
import '../styles/Jumbotron.css'

export default function Jumbotron(props) {
	const [title] = useState('');
  	const [content] = useState('');

	return (
			<div class="jumbotron jumbotron-fluid">
  				<div className="container">
    				<h1>{props.title}</h1>
    				<p>{props.content}</p>
  				</div>
			</div>
	);
  }

먼저 hooks API가 제공하는 useEffect, useState 를 import한다.
Jumbotron(props) 컴포넌트의 매개변수로 props를 전달받는다.
useState('초기값')를 쓰면 변수의 초기값을 세팅할 수 있다. 나는 그냥 빈 문자열로.
변수가 const [title] 객체 배열의 형태인 이유는 useState('초기값') 함수의 반환값이 2개 이기 때문이다. 우리는 그중 첫번째 인덱스에 props 값을 저장한다.
- 두번째 인덱스는 setTitle 이라고 나중에 값을 바꿀 때 쓸 수 있는데, 나는 props를 한번만 사용하고 말거라 굳이 setTitle 를 쓸 필요가 없었다.
{props.title} 와 같이 사용한다. 이 값은 점보트론 컴포넌트를 사용할 App 컴포넌트에서 넣어준다.

App.js

import React, {Component} from 'react';
import './styles/App.css';
import Jumbotron from './components/Jumbotron'

class App extends Component {
	render() {
	  return (
		<div className="App">
			<Jumbotron 
				title={'예발자닷컴'} 
				content={'예비개발자를 위한 무료 부트캠프 코스를 한 눈에 비교하세요.'}>
			</Jumbotron>
		</div>
	  );
	}
  }

  export default App;

컴포넌트를 불러올 때 props 데이터를 넣어준다.

더 자세한 hooks 사용법은 아래 블로그들 참고.

3. `but never used` 에러 처리

const [title] = useState(''); 로 선언한 title 변수는 컴포넌트에서 중괄호{ } 를 이용해서 사용한다. 이때 아래같은 에러가 나는걸 확인할 수 있다.

'title' is assigned a value but never used    no-unused-vars

jsx로 처리되는 변수들은 shadowing이 되서 eslint가 인식하지 못하기 때문이다. 그래서 쓰고 있는데도 선언해놓고 사용하지 않는다는 에러를 발생시킨다.

해결법

아래 주석을 문제되는 라인 옆에 추가한다.

// eslint-disable-next-line

4. jsx문법으로 외부 js파일 불러오기

index.html

script src 속성에 경로를 입력하는 식으로 가져오면 될 줄 알았는데, jsx는 방법이 약간 다른 것 같다. 파일을 링크하는 형태 말고 script 태그 안에 js파일 내용을 그냥 적어야 브라우저가 인식한다.

그런데 이 방법은 보기 좋지도 않고, 여러 js파일을 사용하기도 어렵다.

구글링해서 나오는 방법으로 해도 동작하지 않아서 미해결.

🧱 Design Templates

1. Material-UI

부트스트랩과 다르게 react Component 를 통채로 제공하는 라이브러리. 근데 생각만큼 컴포넌트가 다양하지 않고 CSS 변경하기가 어렵다. 원래 이 실습 자체를 머티리얼UI 실습으로 시작했는데, 결국 하나도 사용하지 않았다.

material-UI CSS 적용하는 방법

//index.js

import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
  typography: {
    subtitle1: {
      fontSize: 12,
    },
    body1: {
      fontWeight: 500,
    },
    button: {
      fontStyle: 'italic',
    },
  },
});

ReactDOM.render(
	<MuiThemeProvider theme={theme}>
    	<App />
	</MuiThemeProvider>
  document.getElementById('root')
);

MuiThemeProvider : 최종 렌더링 할 컴포넌트를 감싸준다.
createMuiTheme : scss 문법으로 CSS 요소들을 수정할 수 있게 해주는 함수.

material-UI 웹폰트 적용하는 방법

머티리얼이 기본으로 제공하는 폰트들이 몇 개 있는데, 걔네들을 사용하고 싶으면 createMuiTheme를 통해 CSS를 먹일 수 있다. 그런데 한글폰트는 당연히 없어서, 사용하려면 약간 복잡하다. 그냥 header에 링크하는 방법으로는 안된다.

상업용 무료 한글 폰트는 눈누에서 다운받을 수 있다.

src디렉토리 안에 fonts 디렉토리 생성하고, 다운받은 폰트파일(.ttf) 을 넣는다.
index.css에서 font-family를 등록한다.
```
// index.css
@font-face { font-family: 'NEXON Lv2 Gothic Bold'; src: url('../fonts/NEXON\ Lv2\ Gothic\ Bold.ttf') format('truetype'); }
```
이때 url 에는 다운받은 폰트가 위치한 상대경로를 넣어주고, format은 트루타입!

위의 CSS적용법을 참고해, index.js에서 `createMuiTheme` 에 fontFamily를 추가한다.

const theme = createMuiTheme({
  typography: {
    fontFamily: 'NEXON Lv2 Gothic Bold',
  },
});

index.js의 App 컴포넌트에 전체 적용.

ReactDOM.render(
	<MuiThemeProvider theme={theme}>
    	<App />
	</MuiThemeProvider>
  document.getElementById('root')
);

2. Codepen

머티리얼UI에서 제공하는 컴포넌트들이 마음에 들지 않아서, 주로 구글링을 해서 템플릿을 찾았다. awesome 30 react table template 처럼 어-썸을 붙이는게 구글링 꿀팁.

아무튼 주로 codepen 이란 사이트로 많이 링크된다. 개인이 작성한 HTML, CSS, JavaScript 템플릿들을 공유하는 오픈소스 커뮤니티인 것 같다. 아래 코드들을 많이 참고해 사용했다.

timeline
- https://codepen.io/tutsplus/pen/ZKpNwm/
- 사용법

table

https://codepen.io/chriscoyier/pen/PgXRRM

footer

https://codepen.io/julesforrest/pen/qLpgNB

3. bitly

이미지 주소가 너무 길어서 코드가 지저분해질 때 사용하면 좋은 사이트.
키워드를 지정해서 단축 URL로 변환해준다.
http://bitly.kr/

🎨 CSS / JS

1. 모바일 터치 제스처 사용하기

Hammer : 터치 제스처를 인식하게 해주는 자바스크립트 라이브러리
Timeline 컴포넌트 CSS에 넣으면 좋을듯.

// ADD SWIPE SUPPORT FOR TOUCH DEVICES
		function setSwipeFn(tl, prev, next) {
		  const hammer = new Hammer(tl);
		  hammer.on("swipeleft", () => next.click());
		  hammer.on("swiperight", () => prev.click());
		}

2. `.SCSS` 파일 `.CSS` 파일로 변환하기

codepen의 템플릿 코드들은 주로 scss 파일로 스타일을 적용한다. 아마 문법이 간단하고 구조적이어서 그런듯. 아무튼 css로 변환하는 방법은 여러가지가 있는데, 나는 node-sass 라는 패키지를 사용해 컴파일했다.

node-sass

설치
```
$ npm install -g node-sass
```
node-sass [옵션] <입력파일경로> [출력파일경로]
```
$ node-sass main.scss main.css
```
출력파일이 이미 존재하면 덮어쓰기가 되고, 없으면 생성된다. 나는 특별한 옵션을 넣지는 않았다.

3. background-color 그라데이션

background: #74ebd5;
background: -webkit-linear-gradient(to right, #74ebd5, #ACB6E5);
background: linear-gradient(to right, #74ebd5, #ACB6E5)

4. 텍스트 overflow 막기

overflow:auto

텍스트가 div 태그 밖으로 넘치면 스크롤이 나온다.

5. 텍스트 수직정렬하기

정렬대상의 부모요소에 아래 속성을 적용한다.

display: flex;
justify-content: center;
flex-direction: column;

6. CSS에 애니메이션 넣기

:hover 라는 CSS 의사 클래스를 적용한다. footer의 손 이모티콘을 흔들게 만들 수 있다.

😼 Git

1. git pull과 fetch의 차이

pull

원격 저장소로부터 필요한 파일을 다운 + 병합한다.
지역 브랜치와, 원격 저장소 origin/master 가 같은 위치를 가리킨다.

fetch

원격 저장소로부터 필요한 파일을 다운만 한다. (병합은 따로 해야 한다.)
신중할 때 사용한다.
사용하는 이유
- 원래 내용과 바뀐 내용과의 차이를 알 수 있다.
```
git diff HEAD origin/master
```
- commit이 얼마나 됐는지 알 수 있다.
```
git log --decorate --all --oneline
```
- 세부 내용 확인 후 git merge origin master 하면 git pull 상태와 같아진다.
사용법

git checkout master
git fetch
git checkout 새 브랜치

이대현

삽질의 기록들 👨‍💻

이전 포스트

👨‍👨‍👦‍👦 Github로 협업 프로젝트 관리하기

다음 포스트

예발자닷컴 프론트서버 업데이트 하기

1개의 댓글

Accel.

2022년 3월 30일

안녕하세요 혹시 리액트에서 hammer.js 사용하신 방법 알수 있을까요? 자바스크립트 라이브러리로 알고 있어서요

답글 달기

React Component로 웹페이지 디자인하기

예발자닷컴 개발 기록

완성한 메인 페이지

🩸 React

1. 폴더 구조 설계

2. 함수형 컴포넌트 hooks 사용법

jumbotron.js

App.js

3. `but never used` 에러 처리

해결법

4. jsx문법으로 외부 js파일 불러오기

index.html

🧱 Design Templates

1. Material-UI

material-UI CSS 적용하는 방법

material-UI 웹폰트 적용하는 방법

`src`디렉토리 안에 `fonts` 디렉토리 생성하고, 다운받은 폰트파일(`.ttf`) 을 넣는다.

index.css에서 `font-family`를 등록한다.

위의 CSS적용법을 참고해, index.js에서 `createMuiTheme` 에 fontFamily를 추가한다.

index.js의 App 컴포넌트에 전체 적용.

2. Codepen

timeline

table

footer

3. bitly

🎨 CSS / JS

1. 모바일 터치 제스처 사용하기

2. `.SCSS` 파일 `.CSS` 파일로 변환하기

node-sass

3. background-color 그라데이션

4. 텍스트 overflow 막기

5. 텍스트 수직정렬하기

6. CSS에 애니메이션 넣기

😼 Git

1. git pull과 fetch의 차이

pull

fetch

👨‍👨‍👦‍👦 Github로 협업 프로젝트 관리하기

예발자닷컴 프론트서버 업데이트 하기

1개의 댓글

React Component로 웹페이지 디자인하기

예발자닷컴 개발 기록

완성한 메인 페이지

🩸 React

1. 폴더 구조 설계

2. 함수형 컴포넌트 hooks 사용법

jumbotron.js

App.js

3. but never used 에러 처리

해결법

4. jsx문법으로 외부 js파일 불러오기

index.html

🧱 Design Templates

1. Material-UI

material-UI CSS 적용하는 방법

material-UI 웹폰트 적용하는 방법

src디렉토리 안에 fonts 디렉토리 생성하고, 다운받은 폰트파일(.ttf) 을 넣는다.

index.css에서 font-family를 등록한다.

위의 CSS적용법을 참고해, index.js에서 createMuiTheme 에 fontFamily를 추가한다.

index.js의 App 컴포넌트에 전체 적용.

2. Codepen

timeline

table

footer

3. bitly

🎨 CSS / JS

1. 모바일 터치 제스처 사용하기

2. .SCSS 파일 .CSS 파일로 변환하기

node-sass

3. background-color 그라데이션

4. 텍스트 overflow 막기

5. 텍스트 수직정렬하기

6. CSS에 애니메이션 넣기

😼 Git

1. git pull과 fetch의 차이

pull

fetch

👨‍👨‍👦‍👦 Github로 협업 프로젝트 관리하기

예발자닷컴 프론트서버 업데이트 하기

1개의 댓글

3. `but never used` 에러 처리

`src`디렉토리 안에 `fonts` 디렉토리 생성하고, 다운받은 폰트파일(`.ttf`) 을 넣는다.

index.css에서 `font-family`를 등록한다.

위의 CSS적용법을 참고해, index.js에서 `createMuiTheme` 에 fontFamily를 추가한다.

2. `.SCSS` 파일 `.CSS` 파일로 변환하기