Front-end

생명 주기 (라이프 사이클) 페이지 처음 열렸을 때 ~ 페이지가 닫혔을 때 까지 이 사이에 일어나는 이벤트나 상태 값 변경등을 관리 * 옛날에는 클래스형 사용했다 class 클래스명 extends Components { ... }; Class형의 문제점: Class는 다양한 기능을 사용할 수 있지만 기계와 사용자를 혼돈시킨다. 숙련된 React 개발자 조차도 Class의 완벽한 이해를 하는 것은 힘든 일 ===> 함수형으로 리엑트를 만들어보자 해서 나온게 function형 리액트의 등장 ===> class 형에서 관리하던 생명주기를 function에서 관리를 해줘야하는데 그를 위해서 등장한게 Hooks함수 Hooks 함수(함수형에서만 사용 가능) (이해할때 그냥 대충 class형이 있었는데 너무 어려워서..

Styled-components - React의 css 스타일링 방법 중 하나 - css 파일이 아닌 js 파일에 직접 기술 - 컴포넌트 호출 시 필요한 컴포넌트만 호출 - className을 사용하지 않아 겹치는 오류 방지 단점 - css를 줘야할 태그들은 전부 컴포넌트화 ex) - 따라서 가독성이 떨어진다. - css를 수정할 때 직접 수정할 컴포넌트를 찾아가야함 그외의 스타일링 방법 1. className로 css를 주는 방법 2. SASS, SCSS (CSS보다 상위버전) - 복잡한 작업을 쉽게 해주고, 코드의 재활용성을 높여줌 - css 내에서 변수가 사용 가능 = 확장성이 높음 - 코드의 가독성을 높여주고 유지보수를 쉽게 해준다 3. Emotion - Styled-components와 대체될 ..

* React란? : React는 복잡한 사용자 인터페이스를 쉽게 구축하기 위해 페이스북에서 만든 JavaScript 라이브러리 : 각각의 독립적인 컴포넌트(HTML덩어리) 단위들을 서로 조립해서 만드는 것 * JSX 문법 - React에서 사용하는 문법 - 새로 배울 필요는 없는 문법, 쓰다 보면 알 수 있다 * 라이브러리 (도서관 = 책들의 집합) - 모든 코딩을 직접하기에는 무리가 있습니다. 따라서, 시간 절약을 위해 남들이 짜놓은 코드를 가져와서 사용 * React 핵심 컨셉 - re-render와 component * component - 한가지의 기능을 수행하는 UI 단위 - 컴포넌트도 DOM TREE처럼 Virtual DOM TREE라는 가상의 돔트리(Virtual DOM TREE) 형식으로..

상대 크기 em / rem em 단위는 상위 요소 크기의 몇배인지를 나타내는 크기(1.5em : 상위요소의 1.5배) rem 단위는 문서의 최상위 요소, 즉 html 요소 크기의 몇 배인지를 나타내는 크기(1.5rem : html요소의 1.5배) CSS 2D transform 이차원 좌표에서 요소를 변형시키는 속성 이동, 확대/축소, 회전, 경사 등을 만들 수 있음 translate, scale, rotate, skew 벤더 프리픽스(vender prefix) 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알리기 위해 사용하는 접두사를 의미 아직 CSS 권고안에 포함되지 않은 기능이나, 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용할 때..

플렉서블 레이아웃(flex) 대부분의 웹사이트는 수직 구성 레이아웃 구성 시 가장 많이 사용되는 요소들은 대부분 블록개념으로 표기 수직구성은 쉽게 구성할 수 있으나, 수평 구성은 구현하기 쉽지 않음 과거에는 수평구성을 , float, inline-block으로 구성 좀 더 쉽게 수평구성을 구현하기 위해서 flex를 사용한다. display:flex flex-wrap 플렉스 라인에 더이상 여유가 없을 때 플렉스 요소의 위치를 다음줄로 넘길지 여부를 설정 nowrap : 기본 설정. 플렉스 요소가 다음줄로 넘어가지 않음. 요소의 너비를 줄여 한 줄에 모두 배치 wrap : 플렉스 요소가 여유 공간이 없으면 다음줄로 넘어감. wrap-reverse: 플렉스 요소가 여유 공간이 없으면 다음줄로 넘어감, 위쪽으로..

CSS Position 요소의 위치를 결정하는 방식을 설정 1. 정적(static) 위치 지정방식 기본값 HTML 요소의 위치를 결정하는 기본적인 방식 top, left, right, bottom 속성들을 사용할 수 없음 단순히 웹 페이지의 흐름에 따라 차례대로 요소들의 위치를 결정하는 방식 2. 상대(relative) 위치 지정방식 HTML 요소의 기본 위치를 기준으로 위치를 재설정하는 방식 기본 위치는 정적 위치 지정방식일 때 결정되는 위치를 의미 *뷰포트 가상의 화면 화면 디스플레이 상의 표시 영역을 뜻한다. 모바일 뷰포트는 상하 좌우로 스크롤을 움직이거나 줌인, 줌아웃을 통해 뷰포트를 변경하며 사용 3. 고정(fixed) 위치 지정방식 뷰포트를 기준으로 위치를 설정하는 방식 웹 페이지가 스크롤 되..

CSS의 배경 background-attachment 위치가 설정된 배경 이미지를 원하는 위치에 고정시킬 수 있음 고정된 배경 이미지는 스크롤과 무관하게 화면의 위치에서 이동되지 않음 fixed background-size 배경 이미지 크기를 설정 px, %를 사용 크기를 하나만 지정하게 될 시에는 가로크기를 기준으로 비율을 유지한 채 크기를 설정하게 됨 cover 배경 이미지의 가로, 세로 모두 요소보다 크다는 조건하에 가능한 크기 가능한 이미지를 작게 설정 이미지의 가로, 세로 비율은 유지 배경 이미지의 크기는 요소의 크기보다 항상 크거나 같음 contain 배경 이미지의 가로, 세로 모두 요소보다 작다는 조건하에 가능한 크기 가능한 이미지를 크게 설정 이미지의 가로, 세로 비율은 유지 배경 이미지의..

CSS 선택자 10. 속성 선택자 [속성명 ~= "속성값"] : 속성값이 완벽히 일치하는 문자를 가지고 있는 요소를 선택 = "apple" - 값이 "apple"인 것을 선택 ~= "apple" - 값이 "apple" 혹은 "apple"과 다른값이 띄어쓰기로 있는경우 ex) "apple banana" / "banana apple" [속성명 *= "속성값"] : 속성값이 포함된 문자를 가지고 있는 요소를 선택 [속성명 $= "속성값"] : 속성값이 접미사로 끝나는 문자를 가지고 있는 요소를 선택 [속성명 |= "속성값"] : 속성값이 완벽히 일치하거나, 접두사로 존재하는 -으로 연결된 문자를 가지고 있는 요소를 선택 |= "apple" - 값이 "apple"이거나 혹은 "apple-tree"인 것을 선택 ..