하얀 코딩

HTML의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정짓는 display 속성을 가집니다. 대부분의 HTML 요소는 이러한 display 속성값으로 다음 두 가지 값 중 하나를 가지게 됩니다. block vs inline-block vs inline block inline-block inline 줄바꿈 여부 줄바꿈이 일어남 줄바꿈이 일어나지 않음 줄바꿈이 일어나지 않음 기본적으로 갖는 너비(width) 100% 글자가 차지하는 만큼 글자가 차지하는 만큼 width, height 사용 가능 여부 가능 가능 불가능 , , , , , 요소는 display 속성값이 블록(block)인 대표적인 요소입니다. , , 요소는 display 속성값이 인라인(inline)인 대표적인 요소입니다.

Hook Hook은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능이다. 1. React 16.8 버전 (2019년도) 에 추가된 공식 라이브러리 2. Class형 컴포넌트에서만 쓸 수 있었던 state와 life cycle을 Function형 컴포넌트에서도 사용 가능 3. 현재 공식문서에서는, Class형 컴포넌트보다는 Function형 컴포넌트로 새로운 React 프로젝트를 만들기를 권장 4. 단, 기존의 Class형 컴포넌트들을 Hook을 이용한 Function형 컴포넌트로 refactoring할 이유는 전혀 없음 Why do you need it? hook을 사용해 함수형 컴포넌트에서도 state와 생명주기를 다룰 수 있기에 클래스형 컴포넌트에서만 가능하던 상태관리를 더..

props (properties) 1. 컴포넌트의 속성(property)을 의미합니다. props는 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값으로, 웹 애플리케이션에서 해당 컴포넌트가 가진 속성에 해당합니다. 2. 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값입니다. React 컴포넌트는 JavaScript 함수와 클래스로, props를 함수의 전달인자(arguments)처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다. 따라서, 컴포넌트가 최초 렌더링 될 때 화면에 출력하고자 하는 데이터를 담은 초깃값으로 사용할 수 있습니다. 3. 객체 형태입니다. props로 어떤 타입의 값도 넣어 전달할 수 있도록 props는 객체의 형태를 가집니다. 4...

JSX (JavaScript XML) const element = Hello, world!; JSX는 리액트 컴포넌트에서 xml 형식의 값을 반환해는 것 JSX는 JavaScript가 확장된 문법이지만, 브라우저가 바로 실행할 수 있는 JavaScript 코드가 아니다. 그렇다면 어떻게 해야 할까? 바로 브라우저가 이해할 수 있는 JavaScript 코드로 변환을 해주어야 한다. 이때 이용하는 것이 바로 “Babel”입니다. Babel은 JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일합니다. 컴파일 후, JavaScript를 브라우저가 읽고 화면에 렌더링할 수 있다. Babel이란? Babel 은 자바스크립트의 문법을 확장해주는 도구다. 아직 지원되지 않는 최신 문법이나, 편의상 사용하거..

특징 1. 선언형 리액트는 한 페이지를 보여주기 위해 HTML / CSS / JS로 나눠서 적기 보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향한다. 2. 컴포넌트 기반 리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발한다. 컴포넌트로 분리하면 서로 독립적이고 재사용이 가능하기 때문에, 기능 자체에 집중하여 개발이 가능하다. 3. 범용성 Facebook에서 만든 Javascript 라이브러리로 프로젝트 어디에든 유연하게 적용 될 수 있다. 안정적이고 가장 유명하며, React-native로 모바일 개발도 가능하다. 4.가상 DOM 리액트는 메모리에 가상 DOM을 유지하고, 필요할 때만 실제 DOM에 렌더링하는 방식을 사용합니다...

오늘날 웹 페이지에는 다른 페이지나 다른 사이트로 연결되는 수많은 하이퍼 링크(hyperlink)가 존재합니다. 이러한 하이퍼 링크를 간단히 링크(link)라고도 부르며, HTML에서는 태그로 표현합니다. 태그는 텍스트나 단락, 이미지 등 다양한 HTML 요소에 사용할 수 있습니다. 속성 href : 링크를 클릭하면 연결할 페이지나 사이트의 URL 주소를 명시합니다. target : 태그의 target 속성은 링크로 연결된 문서를 어디에서 열지를 명시합니다. target 속성값설명 _blank 링크로 연결된 문서를 새 창이나 새 탭에서 오픈. _self 링크로 연결된 문서를 현재 프레임(frame)에서 오픈. (기본설정) _parent 링크로 연결된 문서를 부모 프레임(frame)에서 오픈. _top 링..

HTML에는 미리 예약된 몇몇 문자가 있으며, 이러한 문자를 HTML 예약어(reserved characters)라고 부릅니다. 이러한 HTML 예약어를 HTML 코드에서 사용하면, 웹 브라우저는 그것을 평소와는 다른 의미로 해석합니다. 따라서 HTML 예약어를 기존에 사용하던 의미 그대로 사용하기 위해 별도로 만든 문자셋을 엔티티(entity)라고 합니다. HTML에서 제공하는 대표적인 엔티티(entity)는 다음과 같습니다. 엔티티 문자 엔티티 이름 16진수 설명 공백 줄 바꿈 없는 공백 > > 보다 큰 & & & AND 기호 " " " 큰따옴표 ' ' ' 작은따옴표 예시 태그는 단락을 나타내는 태그입니다. 심볼(Symbol) 특수문자 HTML 예약어 이외에도 키보드에 입력할 수..

... 제목 (Heading) 가장 큰 태그부터 가장 작은 태그까지 다양한 크기로 제목을 표현할 수 있습니다. 이런 태그는 제목의 표현이라는 기능 외에도 또 다른 중요한 역할을 하고 있습니다. 여러 검색엔진은 각 웹 사이트의 내용을 바로 이 태그를 이용하여 키워드를 수집하고, 그 내용을 파악합니다. 따라서 HTML 문서에 포함되는 제목은 태그로 작성해야만 검색엔진에 의해 제대로 검색될 확률을 높일 수 있습니다. 단락 (Paragraph) 1. 태그의 위아래로는 약간의 여백(margin)이 자동으로 삽입됩니다. 2. 태그 내에서 작성된 여러 번의 띄어쓰기와 줄 나누기는 오직 하나의 띄어쓰기로만 표현됩니다. 3. 태그(break line)를 사용하면 새로운 단락을 만들지 않고도 줄을 나눌 수 있습니다. 4...