회고. 22.07.06

• Component Driven Development(CDD)의 필요성과 이점에 대해서 이해한다.

->  부품 단위로 UI를 만들어 가기 때문에 (컴포넌트 기반 개발) 재사용성이 좋다.

( 만약 디자인 수정이 필요할 경우 해당 부품만 변경을 하면 되기 때문에. )  

 

 

• 구조적으로 CSS를 작성하는 방법의 발전과 이유에 대해서 이해한다.

-> 현재 우리는 다양한 환경에서 페이지를 접할 수 있다. 또한 기능이 많아지면서 더욱 퀄리티 높은 웹페이지를 찾게되고, 자연스럽게 프로젝트의 규모가 커지면서 CSS 를 작성할 때 일관성 있는 패턴의 필요성이 대두되었고, 추가로 우리는(프론트엔드 개발자)는 모바일이나 테블릿등 다양한 기기에 보이는 화면에 대응을 해야 하기 때문에 CSS의 효율적인 작업을 위해 구조화가 필요했다. 

이런 구조화의 노력으로 생긴 결과물이 바로 CSS 방법론들이다. 

 

 

• CSS 방법론들의 특징과 장단점을 이해한다. 

-> 

	특징	장점	단점
일반 CSS	기본적인 스타일 방법		일관된 패턴을 갖기 어렵다. 페이지 수정이 일어날 경우  !Important 남발하기 쉬움.
SASS	프로그래밍 방법론을 도입하여, 컴파일된 CSS를 만들어 내는  전처리기	변수,함수,상속 개념 을 활용하여 재사용 가능. CSS의 구조화	전처리 과정이 필요. 디버깅에 어려움이 있음. 컴파일한 CSS파일이 거대해짐.
BEN	CSS 클래스명 작성에 일관된 패턴을 강제하는 방법론	네이밍으로 문제해결. 전처리 과정 불필요.	선택자의 이름이 장황해지고, 클래스 목록이 너무 많아짐. (block-ele-modifier 형식)
Styled-Component (CSS-in-JS)	컴포넌트 기반으로  CSS를 작성할 수 있게  도와주는 라이브러리	CSS를 컴포넌트 안으로 캡슐화 네이밍이나 최적화를 신경 쓸 필요가 없음.	빠른 페이지 로드에 불리함. (const 변수명 = styled.ele``)

전처리기 : 전처리기의 자신만의 특별한 syntax를 가지고 CSS를 생성하도록 하는 프로그램

컴파일러 : 인간에 가까운 언어를 기계에 가까운 언어로 번역하는 친구.

 

 

• Styled Components의 기본 사용법을 익힌다. 

작성 요령 : 함수를 클래스 이름처럼 사용하며 반드시 export를 해준다. 

export const 함수이름 = styled.div` background-color:blue; `

=> 함수이름 이라는 함수는 div 태그의 배경색을 파란색으로 한다. 

 

 

• UI 개발 도구의 필요성을 이해한다. 

-> 개발을 하다보면 class 혹은 id 이름을 짓느라 고민을 하게 되고, CSS 코드가 많아지면 오류, 혹은 수정하고 싶은 부분을 찾기가 

힘들때가 있다. 또한 프로젝트가 규모가 있으면 CSS 파일이 커지게 되고 새로운 속성을 추가할 때 이전의 속성에 영향을 줘서 원하는 결과가 안나오는 경우도 있을 것이다. 이런 문제를 좀 더 편하게 하기 위해 등장한게 바로 CSS를 컴포넌트화 하는 것이다. 

그리고 React 에서는 Styled-Conponent 라는 라이브러리가 있다.

 

 

• useRef 의 필요성에대해 이해한다. 

-> React에서 DOM요소에 접근할 때 주소값을 활용해야 한다. 이때 필요한게 바로 useRef 이다. 

( focus, text-selection, media playback, 애니메이션 사용, d3.js, greensock 등 DOM 기반 라이브러리 활용. ) 

 

 

• useRef 가 필요한 상황들을 기억한다. 

-> DOM 노드, 엘리먼트 그리고 React 컴포넌트 주소값을 참조할 수 있다.

( ref 에 저장해두면 다른 컴포넌트에서도 사용할 수 있다. )

컴포넌트를 변화가 일어나면 re-render가 된다. 하지만 useRef는 re-render 되지 않는다. 

( 변수명.current.focus() 생각해볼것. )

영상같은 경우에도 정지버튼을 눌렀을 경우 리랜더링이 된다면 다시 처음부터 재생되야 하는 상황이 올 텐데,

useRef를 쓸 경우 정지한 지점에서 다시 재생을 할 수 있다. 

 

 

• useRef 의 사용법을 이해한다.

import { useRef } from ' react';

const 주소를_담은_변수 = useRef(참조자료형)

export const newInput = () => {
    return (
    	<>
        	<input ref={주소를_담은_변수} type="text" />
        </>
    )
}

// 다른 컴포넌트에서도 주소를_담은_변수 를 사용할 수 있다.