[React] React 개요 및 설치, 기본 동작

** 프레임워크 vs 라이브러리 ** 프레임워크는 내가 개발할 때 환경에 종속되어 개발하는 경우를 말함 라이브러리는 내가 개발하는 언어에 추가로 파일을 연결하여 개발하는 경우를 말함 즉, 프레임워크는 미리 만들어진 틀 안에서 그 제한된 환경 안에서 사용하는 것이고 라이브러리는 원래 있는 환경에서 미리 만들어진 것을 가져와서 쓰는 것이다. 1. React(리액트) - 복잡한 사용자 인터페이스(UI)를 쉽게 구축하기 위해 페이스북에서 제작한 javascript로 만든 라이브러리 - React는 웹 브라우저의 UI를 구현하는 라이브러리로 기본적으로 CSS, HTML, JavaScript 개발언어를 이용한 컴포넌트 기반 프론트엔드 라이브러리이다. - React는 state가 변경되면 그 컴포넌트 만 리렌더링이 ..

[CSS] 반응형 웹(viewport, 미디어 쿼리)

1. 반응형 웹 - 다양한 화면 크기의 디바이스(PC, 모바일, 태블릿 등)에서 웹 서비스를 제대로 보여주기 위한 기술 또는 개념 반응형 웹의 일반적인 조건 - 데스크탑, 태블릿, 모바일에 대해 각각의 기기에서 문제없이 동작해야 함 - 사용자가 서로 다른 기기(다양한 크기의 화면)에서 접속시 즉시 반응하여 화면의 내용을 보여주어야 함 2. 뷰포트(viewport) - 일반적으로 모바일 기기에 적용하기 위해 생성된 개념 - 가상의 윈도우(화면)에 웹 페이지를 렌더링하여 확대/축소/스크롤 등을 하기 위한 가상 렌더링 화면 - 기본적으로 데스크탑 브라우저에서는 viewport를 사용하지 않기 때문에 무시됨 데스트탑(viewport) vs 모바일(viewport) - 데스트탑 : 브라우저 창이 곧 viewpor..

[CSS] CSS Flex(Flexible Box) - Items

1. Flex(Flexible Box)의 개념 - Flex는 요소의 크기가 서로 다르거나 동적인 경우 효율적으로 요소를 정리하기 위해 고안된 레이아웃 방법 중 하나 - Flex는 Container와 Item 두가지 개념이 있다. Container Items를 감싸는 부모 요소 박스를 의미 Items 각 요소를 의미하며, 반드시 Container 자식으로 존재해야 함 2. Flex Items 요소의 속성 order Flex Item의 순서를 설정 flex-grow Flex Item의 증가 너비 비율을 설정 align-self 교차 축(cross-axis)에서 아이템의 정렬 방법을 설정 flex flex-grow, flex-shrink.. 축약형 ..... 3. order(row, column) - Flex..

[CSS] CSS Flex(Flexible Box) - Container

1. Flex(Flexible Box)의 개념 - Flex는 요소의 크기가 서로 다르거나 동적인 경우 효율적으로 요소를 정리하기 위해 고안된 레이아웃 방법 중 하나 - Flex는 Container와 Item 두가지 개념이 있다. Container Items를 감싸는 부모 요소 박스를 의미 Items 각 요소를 의미하며, 반드시 Container 자식으로 존재해야 함 2. Flex Container 요소의 속성 display 컨테이너를 수직/수평 방향으로 정렬 flex-direction 아이템들의 주축(main-axis) 정렬 방향(수직/수평)을 설정 flex-wrap 아이템들의 줄묶음(줄 바꿈) 설정 justify-content 주축(main-axis)의 정렬 방법을 설정 align-content 교차 ..

[JavaScript] JavaScript HTML template

1. HTML template - 반복적인 HTML 부분을 화면에서는 보이지 않는 template로 만들어 두고 서버에서 전달되는 JSON과 연결하여 반복적인 tag를 만들어 내는 기법 - 즉, 반복적인 HTML 코드를 template에 넣어놓고 JavaScript를 이용해서 받은 데이터로 교체해주고 HTML로 나타내주는 것이다. - 바꾸고 싶은 데이터 부분을 {icon}, {img}, {title} ...로 해준 다음 JavaScript에서 서버에서 받은 데이터(JSON)의 각 데이터로 replace를 해준다. 그런 다음 원하는 태그 쪽에 appendChild() 해주면 된다. - 여기서 그냥 태그를 appendChild를 해주면 여러 개가 적용이 되지 않는다. - 그래서 태그이름.cloneNode(t..

[JavaScript] JavaScript 함수형 프로그래밍

1. 함수형 프로그래밍 Simple is the Best! 즉, 기능 동작을 위해 간단하고, 간결하고, 간소하게 작성하는 방법론 함수형 프로그래밍은 객체지향 프로그래밍과 비교되는 방법론으로 객체지향 프로그래밍에 비해 더 간결하고, 더 예측 가능하고, 더 테스트하기 쉬운 경향이 있다. 단, 이 장점들이 단순히 함수형 프로그래밍이 객체지향 프로그래밍에 비해 더 쉽다는 것은 아니다. 2. 함수형 프로그래밍의 3대 개념 ① 순수 함수(Pure Function) ② 불변성(Immutable state) ③ 1급 객체(First-class) 3. 순수 함수(Pure Function) - 같은 입력 값이라면, 항상 같은 결과 값을 반환한다. - 외부적인 것에 영향을 받지 않는다. - 예측이 가능해야 한다. 4. 불변..

[JavaScript] DOM 노드 읽기, 탐색, 추가, 삭제

1. DOM 노드 - DOM : Document Object Model - 웹 문서의 모든 요소를 자바스크립트를 이용해 조작할 수 있도록 객체를 사용하여 문서를 해석하는 방법 - 웹 문서의 모든 요소들을 객체로 만들고 이를 트리 구조로 구성한 모델 - 브라우저의 문서에 객체(태그)를 의미 2. DOM 노드 읽기 - 노드 읽기 : 문서에 DOM 노드(객체)를 가져와 자바스크립트에서 읽거나 사용 getElementById() 요소에 지정된 id를 통해 객체를 가져옴 getElementsByTagName() 요소에 태그명을 통해 객체를 배열로 가져옴 getElementByName() 요소에 이름을 통해 객체를 배열로 가져옴 getElementByClassName() 요소에 지정된 클래스명을 통해 객체 배열을 ..

[CSS] CSS 애니메이션

1. CSS 애니메이션 - 웹 페이지를 보다 시각적으로 역동적이게 움직이게 하기 위한 스타일 기능 - 이 속성은 블록 요소(Block Element)를 기본으로 하여, 일반적으로 div 블록을 사용 * 애니메이션의 대표적인 속성 transform 트랜스폼은 요소 이동, 크기 변경, 위치, 색상 등 속성 변경 수행 transition 트랜지션은 시간 경과에 따라 하나의 속성 상태가 다른 속성 상태로 변형 transform과 transition이 짝이고, @keyframe와 animation이 짝이다 @keyframe 키프레임 애니메이션을 만들 수 있도록 해주는 블록 키워드 animation 키프레임 애니메이션 실행을 위해 CSS에 설정해주는 속성 2. transform / transition transfo..

[CSS] CSS 위치 지정 및 화면 중앙 배치

1. 가로 가운데 정렬 방법 margin 이용 가로 가운데 정렬 방법 margin-left: auto; margin-right: auto; margin: 0 auto; margin: 0 auto 0 auto; text-align 이용 가로 가운데 정렬 방법 - 부모에 스타일 적용해야 함 text-align: center; // left, right 단, 자식 박스는 반드시 display: inline-block; or inline; 여야 한다. position/transform 이용 가로 가운데 정렬 방법(박스 높이를 모를 경우) - 부모에 스타일 적용해야 함 position: relative; left: 50%; transform: translateX(-50%); display flex 가로 가운데 정..

[CSS] CSS float, clear 속성

1. float 속성 - float 사전적 의미는 뜨다, 띄우다, 뜨는 물건, 부유물 이라는 의미이다. - 태그에 플로팅 속성을 준다면, 다른 태그에 영향 없이 왼쪽 또는 오른쪽으로 정렬하여 띄운다는 기본속성을 가짐 - 단, 위 또는 아래에 태그가 있거나 부모 태그가 있다면 예상치 못한 상황이 발생할 수 있는 것에 주목 left 요소를 왼쪽으로 정렬 right 요소를 오른쪽으로 정렬 2. clear 속성 - float 속성을 적용하면 그 이후에 오는 다른 요소들까지 똑같은 속성이 전달되어 둘러싼 형태가 되거나 부유된 영역 아래(under)로 들어가게 된다. - 이러한 문제를 해결하기 위해 그 전의 상태로 돌릴 경우 사용한다. both 오른쪽/왼쪽 취소(가장 많이 사용) left 왼쪽 취소 right 오른..