2. React Component를 활용한 웹페이지 디자인 연습
CSS, React 라이브러리 및 템플릿을 component화 시켜 예발자닷컴 메인 페이지를 반응형으로 디자인했다.
CSS, React 라이브러리 및 템플릿을 component
화 시켜 예발자닷컴 메인 페이지를 반응형으로 디자인했다.
해보면서 익히자는 취지였기 때문에 리액트로 컴포넌트 만드는 방법 정도의 강의를 듣고 시작했다. 눈에 보이는 화면에만 집중해서 코드가 매우 지저분하다. 심지어 만들어 놓고 안 쓰는 컴포넌트들도 삭제하지 않고 그대로 나뒀다. 나중에 시간을 내서 리팩토링 해보면 좋을 것 같다.
아무튼 아래의 것들에 아주 조금은 익숙해진 것 같다.
리액트의 폴더 구조
함수형 컴포넌트 설계
state와 props를 이용해 데이터 관리
자바스크립트 이벤트
개발자도구를 활용해 css 적용
완성한 메인 페이지
undefined
undefined
잔행하면서 고민한 부분들을 간략하게 정리했다.
🩸 React
1. 폴더 구조 설계
기능별로 컴포넌트를 쪼개 구조화 하는 방식으로 개발했다.
지금은 메인 페이지 하나만 만들어봐서 굳이 페이지 js파일을 나누지 않았지만, 실제 개발할 때는 이 블로그 글을 참고하면서 컴포넌트와 props 설계를 고려하면 좋을 것 같다.
2. 함수형 컴포넌트 hooks 사용법
머티리얼 ui의 컴포넌트들은 class형이 아니라 함수형으로 구현되어 있어서, 기존의 state와 props 사용법과 약간 다르게 데이터를 전달해야 한다.
jumbotron.js
먼저 hooks API가 제공하는
useEffect
,useState
를 import한다.Jumbotron(props)
컴포넌트의 매개변수로props
를 전달받는다.useState('초기값')
를 쓰면 변수의 초기값을 세팅할 수 있다. 나는 그냥 빈 문자열로.변수가
const [title]
객체 배열의 형태인 이유는useState('초기값')
함수의 반환값이 2개 이기 때문이다. 우리는 그중 첫번째 인덱스에props
값을 저장한다.두번째 인덱스는
setTitle
이라고 나중에 값을 바꿀 때 쓸 수 있는데, 나는 props를 한번만 사용하고 말거라 굳이setTitle
를 쓸 필요가 없었다.
{props.title}
와 같이 사용한다. 이 값은 점보트론 컴포넌트를 사용할 App 컴포넌트에서 넣어준다.
App.js
컴포넌트를 불러올 때
props
데이터를 넣어준다.
더 자세한 hooks 사용법은 아래 블로그들 참고.
3. but never used
에러 처리
but never used
에러 처리const [title] = useState('');
로 선언한 title
변수는 컴포넌트에서 중괄호{ }
를 이용해서 사용한다. 이때 아래같은 에러가 나는걸 확인할 수 있다.
jsx
로 처리되는 변수들은 shadowing이 되서 eslint
가 인식하지 못하기 때문이다. 그래서 쓰고 있는데도 선언해놓고 사용하지 않는다는 에러를 발생시킨다.
해결법
아래 주석을 문제되는 라인 옆에 추가한다.
4. jsx문법으로 외부 js파일 불러오기
index.html
script src 속성에 경로를 입력하는 식으로 가져오면 될 줄 알았는데, jsx는 방법이 약간 다른 것 같다. 파일을 링크하는 형태 말고 script 태그 안에 js파일 내용을 그냥 적어야 브라우저가 인식한다.
그런데 이 방법은 보기 좋지도 않고, 여러 js파일을 사용하기도 어렵다.
구글링해서 나오는 방법으로 해도 동작하지 않아서 미해결.
🧱 Design Templates
1. Material-UI
부트스트랩과 다르게 react Component 를 통채로 제공하는 라이브러리. 근데 생각만큼 컴포넌트가 다양하지 않고 CSS 변경하기가 어렵다. 원래 이 실습 자체를 머티리얼UI 실습으로 시작했는데, 결국 하나도 사용하지 않았다.
material-UI CSS 적용하는 방법
MuiThemeProvider
: 최종 렌더링 할 컴포넌트를 감싸준다.createMuiTheme
:scss
문법으로 CSS 요소들을 수정할 수 있게 해주는 함수.
material-UI 웹폰트 적용하는 방법
머티리얼이 기본으로 제공하는 폰트들이 몇 개 있는데, 걔네들을 사용하고 싶으면 createMuiTheme
를 통해 CSS를 먹일 수 있다. 그런데 한글폰트는 당연히 없어서, 사용하려면 약간 복잡하다. 그냥 header에 링크하는 방법으로는 안된다.
상업용 무료 한글 폰트는 눈누에서 다운받을 수 있다.
src디렉토리 안에 fonts 디렉토리 생성하고, 다운받은 폰트파일(.ttf) 을 넣는다.
index.css에서 font-family를 등록한다.
이때
url
에는 다운받은 폰트가 위치한 상대경로를 넣어주고,format
은 트루타입!위의 CSS적용법을 참고해, index.js에서 createMuiTheme 에 fontFamily를 추가한다.
index.js의 App 컴포넌트에 전체 적용.
2. Codepen
머티리얼UI에서 제공하는 컴포넌트들이 마음에 들지 않아서, 주로 구글링을 해서 템플릿을 찾았다. awesome 30 react table template
처럼 어-썸을 붙이는게 구글링 꿀팁.
아무튼 주로 codepen 이란 사이트로 많이 링크된다. 개인이 작성한 HTML, CSS, JavaScript 템플릿들을 공유하는 오픈소스 커뮤니티인 것 같다. 아래 코드들을 많이 참고해 사용했다.
3. bitly
이미지 주소가 너무 길어서 코드가 지저분해질 때 사용하면 좋은 사이트.
키워드를 지정해서 단축 URL로 변환해준다.
🎨 CSS / JS
1. 모바일 터치 제스처 사용하기
Hammer : 터치 제스처를 인식하게 해주는 자바스크립트 라이브러리
Timeline
컴포넌트 CSS에 넣으면 좋을듯.
2. .SCSS
파일 .CSS
파일로 변환하기
.SCSS
파일 .CSS
파일로 변환하기codepen의 템플릿 코드들은 주로 scss
파일로 스타일을 적용한다. 아마 문법이 간단하고 구조적이어서 그런듯. 아무튼 css로 변환하는 방법은 여러가지가 있는데, 나는 node-sass
라는 패키지를 사용해 컴파일했다.
node-sass
설치
node-sass [옵션] <입력파일경로> [출력파일경로]
출력파일이 이미 존재하면 덮어쓰기가 되고, 없으면 생성된다. 나는 특별한 옵션을 넣지는 않았다.
3. background-color 그라데이션
4. 텍스트 overflow 막기
텍스트가 div 태그 밖으로 넘치면 스크롤이 나온다.
5. 텍스트 수직정렬하기
정렬대상의 부모요소에 아래 속성을 적용한다.
6. CSS에 애니메이션 넣기
😼 Git
1. git pull과 fetch의 차이
pull
원격 저장소로부터 필요한 파일을 다운 + 병합한다.
지역 브랜치와, 원격 저장소 origin/master 가 같은 위치를 가리킨다.
fetch
원격 저장소로부터 필요한 파일을 다운만 한다. (병합은 따로 해야 한다.)
신중할 때 사용한다.
사용하는 이유
원래 내용과 바뀐 내용과의 차이를 알 수 있다.
commit이 얼마나 됐는지 알 수 있다.
세부 내용 확인 후
git merge origin master
하면 git pull 상태와 같아진다.
사용법
Last updated