WEB Dev/StudyNote
-
[React] Udemy 강의 노트 3-4WEB Dev/StudyNote 2022. 11. 28. 20:26
컴포지션의 개념 chlidren prop - 리액트에서는 컴포넌트가 가장 중요하다. 이런 컴포넌트에 추가할 수 있는 기능에 대해 배운다. - 컴포넌트는 아주 중요하다. - 컴포넌트 안으로 데이터를 전달하기 위한 props도 중요하다. - 컴포넌트는 JSX 코드를 결합한 사용자 정의 HTML이고 스타일링이다. - 원한다면 자바스크립트 로직을 추가할 수 있다. - props를 통해 모든 것을 설정하는 컴포넌트가 아니라 열고 닫는 태그 사이에 컨텐츠를 전달하고 싶을 때가 있다. - 사용자 지정 컴포넌트를 일종의 컨텐츠를 감싸는 래퍼Wrapper로 사용할 수 없다. - 내장된 HTML 요소인 div나 h2는 사용 가능하다. - chlidren은 예약어이다. - props.children의 값은 사용자 지정 컴포..
-
[React] Udemy 강의 노트 3-3WEB Dev/StudyNote 2022. 11. 26. 21:12
JSX에서 동적데이터 출력 및 표현식 작업하기 - 컴포넌트와 HTML이 정의되면 그것을 재사용하려고 한다. - 일반적으로 만드는 컴포넌트의 데이터들은 고정되어 있지 않다. - 어떤 데이터는 고정될 수 있지만 제목, 양, 날짜 등은 동적인 것으로 변화하기 때문에 HTML 코드로 고정되면 안된다. - 컴포넌트는 HTML과 CSS, 자바스크립트의 조합이다. - 컴포넌트에서 자바스크립트 코드는 함수의 return 전에 입력한다. - 보통은 HTML에 데이터를 고정 코드로 입력하지 않는다. - 대신 동적 데이터 출력을 위해 JSX 코드 안에서 중괄호를 사용해서 기본적인 자바스크립트 코드를 실행할 수 있다는 것이다. - 예를 들어 1+1이나 math.random()같은 메소드나, 변수, 반복문, 조건문을 사용할 수..
-
[React] Udemy 강의 노트 3-2WEB Dev/StudyNote 2022. 11. 25. 00:49
JSX소개 - JSX는 자바스크립트 XML를 의미한다. - 자바스크립트 안에 HTML을 가지고 있다. - 백그라운드에서 변환 과정을 가지고 있다. - 개발자 도구의 Source 탭에서 static/js 폴더에서 같은 자바스크립트 파일을 볼 수 있는데 리액트가 지원하는 많은 기능의 소스 코드를 포함한다. - 전체 리액트 패키지 코드를 bundle.js, main.chunk.js에서 확인할 수 있다. - 브라우저에서 사용할 수 있도록 우리의 코드를 변환해서 보여준다. - 우리는 JSX 구문을 사용하고 (브라우저에서는 지원되지 않는) 자동적으로 변환된다. - 기본적인 자바스크립트를 알고 있어야 한다. - 리액트 작동방식 - 자체 HTML요소인 컴포넌트를 구축한다. - 리액트로 목표 상태를 정의하고 리액트는 화..
-
[React] Udemy 강의 노트 3-1WEB Dev/StudyNote 2022. 11. 23. 00:37
섹션 3 : 리액트 기초 및 실습 컴포넌트 모듈 소개 - 컴포넌트 중심의 사용자 인터페이스 구축하는 방법 - 리액트를 구성하는 기능과 문법, 구성, JSX - 컴포넌트를 구축하는 방법과 사용 방법 - 데이터를 이용하기 컴포넌트란 무엇인가? 왜 리액트는 컴포넌트가 전부라고 하는가 - 사용자 인터페이스를 구축하는 자바스크립트 라이브러리 - 리액트 - 좀 더 간단히 사용자 인터페이스를 만들 수 있다. - 핵심 비즈니스 로직에 집중 - 컴포넌트라는 개념 - 리액트는 컴포넌트가 전부 - 모든 사용자 인터페이스는 컴포넌트로 구성된다. - 재사용성 Reusablilty - 우려 상황의 분리 Separation of Concerns - 프로그래밍에서 중요하다. - 코드를 여러 단위로 분해하고 유지 관리하기 쉽도록 코드..
-
[React] Udemy 강의 노트 2WEB Dev/StudyNote 2022. 11. 13. 18:21
섹션 2 : 자바스크립트 새로고침 모듈 소개 - 리액트 앱은 자바스크립트 ES6와 차세대 기능을 사용 - 좀 이상해 보일 수 있음 - 자바스크립트는 아주 빠르게 진화 중 변수 let과 const 이해하기 - 변수를 생성하는 방식 - 변하지 않은 변수를 상수라고 함 - var 대신 let, const 권장 - let 수정할 수 있는 변수 - const 수정할 수 없는 (절대 변하지 않는 상수) 변수 - const에는 새로운 값을 할당할 수 없음 constant variable 화살표 함수 - 생성자 함수 - 자바스크립트를 생성하는 또다른 구문 - const 선언 - const myFunction = () => { } - this로 인해 생성된 문제를 해결 - this는 항상 원하는 객체를 보지 않지만 화살..
-
[React] Udemy 강의 노트WEB Dev/StudyNote 2022. 11. 8. 23:07
빠르게 요점만 리액트는 무엇일까? - 자바스크립트 라이브러리 - 컴포넌트 기반의 UI 라이브러리 - 사용자 인터페이스를 만드는데 사용 - 자바스크립트는 사용자에게 뭔가 다른 것들을 보여주기 위해 새로운 HTML 페이지를 요청하지 않아도 되게 한다. - 클라이언트 자바스크립트를 작성하는데 도움 - 웹사이트를 위한 최신의 반응형 사용자 인터페이스를 구축 - 복잡한 사용자 인터페이스를 쉽게 구축 - 응용 프로그램을 작은 블록과 작은 컴포넌트들로 분할 - 유지보수가 쉽도록 만듦 - 복잡한 사용자 인터페이스를 더 쉽게 구축 - 화면에 표시되는 내용을 제어하는 싱글 페이지 애플리케이션 리액트 대신 - 앵귤러 - 컴포넌트 기반의 UI 프레임워크 - 리액트보다 많은 내장 기능 - 타입스크립트 내장 - 뷰 - 컴포넌트 ..
-
[CSS스터디] 3회 - flex와 gridWEB Dev/StudyNote 2022. 9. 15. 21:28
Normal Flow 일반적인 위에서 아래로 쌓이거나, 텍스트가 텍스트처럼 쌓이는 구조 Flex Flex Container, Flex flow Flow를 바꾸는 것들, display 속성 중에 하나. (display는 이 요소를 화면에 어떻게 나타낼지 결정하는 것, flex-box는 옛날 문법) flex를 적용해주면 normal flow가 아닌 flex-flow로 적용되게 된다. *자손까지 제어하는 display는 현재 없다. flex도 자식에게까지만 적용된다. Flex Container를 생성하고, 자식요소들을 Flex box로 만드는 display 속성 Flex Flow란? - 내부에 있는 요소들이 어떤 방향으로 쌓이게 만들 것인가? - Flex는 기본적으로 1차원이며 축이 1개이다. 한 방향을 고려..
-
[CSS스터디] 2회 - CSS 레이아웃WEB Dev/StudyNote 2022. 9. 1. 21:57
CSS 흑마법사가 되어봅시다. CSS 레이아웃 - 레이아웃은 뭘까? 어떠한 것들을 어떠한 위치에 배치 (Layout) - 어떤 요소가 어떤 위치에 있을 것인지 - Flex & Grid Layout - 이 두 개만 가지고도 대부분의 레이아웃 구성 가능 - 전통적인 방식 (IE를 기준으로)에서는 Float 레이아웃 사용 - 특수한 레이아웃 (table, ruby) CSS Box Model - 하나의 요소가 박스를 이루는 모델 - 모든 요소는 박스 형태를 취하고 있는데, 그 박스가 어떻게 생겼는지를 나타내는것 - Model은 여러가지 속성들이 합쳐진 개념을 말하는 것 - 박스 - 콘텐츠 박스contents-box (사각형) - 특정한 요소가 본인의 콘텐츠를 담고 있는 영역, 전체 박스(+border, marg..
-
[CSS스터디] 1회 - CSS란?WEB Dev/StudyNote 2022. 8. 25. 21:52
CSS 흑마법사가 되어봅시다. CSS란? 캐스캐이딩 스타일 시트 시트는 데이터가 나열된 공간 논리적인 결과물을 만들지는 않는다. 캐스캐이딩은 폭포 라는 영단어로 폭포같은 특성을 지님 버전이 의미있지 않음 특정한 스타일에 대한 표준이 만들어지고 표준을 관리한다. 모듈 단위로 관리 된다. 셀렉터 101 CSS는 Style의 나열 Style을 HTML 요소를 선택해서 적용 요소 셀렉터 클래스 셀렉터 콤비네이터 콤비네이터 101 셀렉터의 조합은 이론상 무제한 특정한 요소의 자손 요소에 스타일을 주고싶은 경우 자손 콤피네이터 공백 조상 요소공백자식 요소 { } ex) .box .title { } 자식 요소에 관계 없이, 자손 요소 중 해당 요소가 있다면 적용 특정한 요소의 자식 요소에 스타일을 주고싶은 경우 자식..