[20190909 TIL] 스타일 유틸

2019-09-09 TIL

Snippet (스니펫) 기능

에디터의 스니펫 기능을 사용하면 컴포넌트를 자동 생성할 수 있어 편리합니다.

VS Code의 generate-react-component를 사용하는 것입니다.

파일 탐색기에서 마우스 오른쪽 버튼 클릭 Generate new component 메뉴 선택했을 때, 리액트 컴포넌트를 위한 디렉터리와 파일들을 자동으로, 원하는 설정으로 만들어 줍니다.

먼저, generate-react-component 를 설치하고 에디터를 재시작하세요.

기본 리액트 컴포넌트 템플릿은 Sass를 사용하지 않고 .css 파일을 활용한 CSS 모듈을 사용합니다. 따라서 이 템플릿을 커스터마이징해야 합니다.

다음 명령어로 템플릿을 내려받으세요.

$ git clone https://github.com/vlpt-playground/react-sass-component-template.git
$ cd react-sass-component-template
$ pwd

pwd 명령어를 입력하면 현재 경로의 절대 경로가 나타날 것입니다. 이 경로를 복사하여 VS Code의 환경설정에 넣어야 합니다.

설정 창을 열고, “generate-react-component.componentTemplatePath” 값을 템플릿이 위치한 절대 경로로 설정하세요.

이제 템플릿을 사용한 컴포넌트를 자동으로 만들 수 있습니다. 에디터의 탐색기 부분에서 common 디렉터리를 마우스 오른쪽 버튼으로 누른 후 Generate new component 메뉴를 선택하세요.

글로벌 스타일

base.scss

/* body, 타이포그래피 등 기본 스타일 설정 */
@import url("//fonts.googleapis.com/earlyaccess/notosanskr.css");
@import url("//cdn.jsdelivr.net/gh/velopert/font-d2coding@1.2.1/d2coding.css");

body {
    margin: 0;
    box-sizing: border-box;
    font-family: "Noto Sans KR", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

// box-sizing 일괄 설정
* {
    box-sizing: inherit;
}

// 링크 스타일 밑줄 및 색상 무효화
a {
    text-decoration: inherit;
    color: inherit;
}

• 포스트 제목, 내용 등에 주로 사용할 Noto Sans KR

• 마트다운 에디터를 만들 때 코드 작성에 사용할 D2 Coding

box-sizing 값을 border-box로 설정하여 크기를 쉽게 지정할 수 있게 했으며, 링크는 자동으로 생성되는 밑줄과 파란색 색상을 비활성화했습니다.

스타일 유틸 설정

• open-color : 색상 쉽게 선택할 수 있음

  • 색상 팔레트 : https://yeun.github.io/open-color/

• include-media : 반응형 디자인 쉽게 적용할 수 있음

• material-shadow 믹스인 : 그림자를 간편하게 설정할 수 있음

CSS Module 사용 시 주의할 점

CSS Module을 사용하여 새로운 className을 만든다면 스타일 코드를 작성한 수 웹 브라우저에서 새로고침을 직접해야 반영됩니다.

원래 CSS를 변경할 때는 웹 브라우저에서 새로고침하지 않아도 되는데, 새로운 className을 만들 때는 이 기능이 제대로 적용되지 않습니다.

속성 강제 적용 !important 선언

!important는 위의 모든 순서를 무시하고, !important을 선언한 속성에 가장 먼저 우선 순위를 부여합니다.

같은 요소에 !important를 한 번 이상 선언하면, 원래의 순서로 되돌아 갑니다.

주의할 점은 !important는 전체 스타일이 아닌 개별 속성에 적용하며 IE6 이전 버전에서 인식되지 않을 수 있습니다.

꼭 필요한 경우가 아니라면 되도록 사용하지 않는 게 좋습니다.

!important는 스타일의 자연스런 흐름들 방해하고 !important를 사용하지 않는다는 것은 css를 제대로 이해하고 있다는 의미입니다.

선택자 { 속성:속성값!important; }

리덕스 초기화 파일

import { createAction, handleActions } from 'redux-actions';

import { Map } from 'immutable';
import { pender } from 'redux-pender';

// action types

// action creators

// initial state
const initialState = Map({});

// reducer
//export default handleAction({}, initialState);
export default handleActions({

}, initialState);

리덕스 초기화 파일이다…

오늘의 교훈은 “오타를 조심하자” 입니다..

이틀간 무엇이 잘못되었는지 계속 console의 오류를 보고 구글링을 하고 버전도 다운그레이드 해보고 여러 번 시도를 했지만…

문제는 handleAction이 아닌 handleActions… 에스 !!! 에스!!!!!!! 에스 !!!!!!!!!!

오타 체크도 했지만 왜 내 눈에 안보였는가…

조심하자!!!

EditorPaneContainer 컴포넌트 생성 후, EditorPane 수정

제목과 태그는 input에 onChange 이벤트를 설정하여 값을 줄 수 있지만, CodeMirror는 initializeEditor 함수가 호출될 때 이벤트를 직접 등록해야 합니다.

또 props로 받은 markdown 값을 CodeMirror 인스턴스에 반영해야 하기 때문에, componentDidUpdate 부분에서 markdown 값을 바꾸면 setValue를 사용하여 내용을 변경해 주어야 합니다. 이 과정에서 cursor 위치가 초기화될 수 있기 때문에 setCursor를 사용하여 cursor 값을 유지해야 합니다.

query-string 라이브러리

이 라이브러리의 v6 이상은 구현 웹 브라우저에서 호환되지 않기 때문에 설치할 때는 뒤에 @5를 붙여 v5를 설치하세요.

$ yarn add query-string@5

remove-markdown 라이브러리

마크다운에서 사용하는 #, **, ```, > 등 특수 문자가 고스란히 보이는 문제점이 있을 때, 숨기게 할 수 있는 라이브러리

모달(Modal)

기존 페이지를 가리면서 뜨는 박스를 모달이라고 합니다.

먼저 ModalWrapper 컴포넌트를 만들어 포스트 삭제 모달을 구현하겠습니다. 이 컴포넌트는 state가 있는 클래스형 컴포넌트로 전체 화면을 불투명한 회색 배경으로 바꾸고, 그 위에 흰색 박스를 보여 줍니다. 이 과정을 모달의 가시성 상태와 전환 효과 상태를 관리해 보겠습니다.

또 ModalWrapper 컴포넌트는 나중에 비밀번호 로그인을 구현할 때 로그인 모달을 만드는 과정에서 재사용하기도 합니다.

모달 전환 효과 구현

CSS의 @keyframes를 사용하여 구현합니다. @keyframes을 사용하여 전환 효과의 시작 부분, 마지막 부분의 스타일을 지정해 주면 스타일이 서서히 변화하면서 애니메이션 효과가 구현됩니다.

네 가지 종류의 @keyframes

• fadeIn : 투명도가 0% -> 100%
• fadeout: 투명도가 100% -> 0%
• slideUp: 아래에서 위로 올라오는 효과
• slideDown: 위에서 아래로 내려가는 효과