일단은 HTML부터 하나하나 복습하면서 정리하는 것이라 포스코X코딩온 KDT에서 배웠던 핵심 개념만 짚고 넘어가면서 쭉 정리해보고자 한다. 추후에 책과 자료들을 읽으며 내용을 더 보충할 예정이다. 그때 사용할 자료를 미리 올려놓자면,

HTML : https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/HTML_basics 

 

HTML 기본 - Web 개발 학습하기 | MDN

HTML (Hypertext Markup Language)은 웹 페이지와 그 내용을 구조화하기 위해 사용하는 코드입니다. 예를 들면, 콘텐츠는 여러 개의 문단, 글 머리 목록이 구조화된 것이거나 사진이나 데이터 테이블일 수

developer.mozilla.org

CSS : https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/CSS_basics

 

CSS 기초 - Web 개발 학습하기 | MDN

CSS (Cascading Style Sheets)는 웹페이지를 꾸미려고 작성하는 코드입니다. CSS 기초 에서 여러분이 처음 시작하며 필요한 내용을 익히도록 도와드립니다. 저희는 다음과 같은 질문에 관한 답을 드리겠

developer.mozilla.org

이들을 사용할 것이다. 지금은 강의에서 사용한 자료를 기반으로 정리와 지금까지 해왔던 실습을 정리해본다.

HTML이란?

Hypertext Markup Language를 축약해서 적은 것이며, 마크업 언어는 태그를 이용하여 구조화 하는 언어를 말한다.

기본적으로 웹페이지를 제작하기 위해서 HTML, CSS, JS를 필수적으로 알고 써야하며 이를 집을 짓는 과정에 빗대어 설명하자면, 아래와 같이 설명할 수 있다.

HTML : 집의 구조 

CSS : 인테리어

JS : 집의 기능

<기본요소 privew>

 

<!DOCTYPE html> 선언

 HTML5의 문서는 반드시 맨 처음에  <!DOCTYPE html>를 선언하고 시작을 해야한다. 이는 선언된 페이지의 HTML 버전이 무엇인지를 웹 브라우저에 알려주는 역할을 하는 선언문으로, 대소문자를 구분하지 않는다. 이를 선언하는 이유는 HTML의 버전별로 사용되는 태그와 사용되지 않는 태그가 있다. 구버전에서 신버전의 HTML 태그를 사용한다면, 문법오류가 나기 때문에 위의 선언을 통해 웹이 각 버전에 맞게 문법을 검사할 수 있도록 알려주는 것이다.

 

HTML의 구조와 기본 문법

실질적인 HTML 문서는 두 번째 행부터 시작된다고 할 수 있다. HTML의 구조는 모두를 포함하는 <html> 태그 안의 두 구조로 나눌 수 있는데, 문서의 정보와 메타데이터(제목, 저장 방식, 브라우저의 크기 등)를 정의하는 <head></head>태그와 웹 브라우저에 출력되는 모든 요소를 다루는 <body></body>로 나눌 수 있다.

 

▶ <head> 태그

HTML 문서의 메타데이터(데이터에 대한 정보를 저장하고 알려주는 데이터)와 정보를 저장

아래의 데이터를 다루고 화면에 표시되지 않는다.

• title : HTML 문서의 제목

• style : HTML 문서의 Style 정보 정의

• link : 외부 리소스와의 연결 정보를 정의(CSS 파일 연계에 사용)

• script : Javascript 를 정의

• meta : 페이지 설명, 키워드, 저자, 화면 크기 등의 정보. 주로 브라우저 또는 검색 엔 진에서 사용 

 

▶<body> 태그

HTML 문서의 실제 콘텐츠를 정의하는 데 사용되고, 다양한 태그를 통해 웹페이지의 구조를 설계할 수 있다.

 

- 요소(Element)와 중첩

HTML의 기본 구조는 시작태그와 종료태그가 있고 그 사이의 내용으로 구성된다. 이렇게 태그로 만들어진 구성을 요소(Element)라고 한다. 이들은 중첩을 통해 부모요소와 자식요소, 상위요소와 하위요소로 나눌 수 있다.

 

- 빈요소(Empty)

내용이 없고 속성만 있는 요소이다.

<br> : 줄바꿈

<hr> : 구분선

<img> : 이미지 불러오기

<input> : 타입 지정을 통해 다양한 기능으로 사용가능(input 속성 설명 페이지 따로 작성할 예정)

<link> : css 연결이나 리소스 연결

<meta> : HTML 문서에 대한 정보

 EX) <meta charset="utf-8">
 : 웹 페이지의 문자 인코딩 방식을 utf-8로 지정해라.

등이 존재한다.

 

 - 속성(Attribute)

요소의 성질과 특성을 정의하고, 추가적인 정보(예를 들어 이미지 파일의 경로, 크기 등)를 제공 한다.

 

 

HTML 태그의 종류

기본적으로 사용하는 태그를 알아보자

태그 이름 기능 및 특징
제목 태그, <h1~6></h1~6> - heading의 약자
- 자동 줄바꿈
- 하나의 HTML 문서에는 하나의 h1 태그를 권장
- 웹 엔진이 제일 먼저 검색함
본문 태그, <p></p> - paragraph의 약자
줄바꿈 태그, <br> / 수평 줄, <hr> - 줄을 바꿔줌
- 수평줄을 만들어준다.
목록 태그, <ul></ul> or <ol></ol> - ul : 순서가 없는 목록
앞에 표시되는 ● 없애는 법 > list-style: none;

- ol : 순서가 있는 목록
<ol type= '지정 숫자로 순서 표시'> 
1: 숫자
a/ A : 영어 소문자/ 대문자
i/ I : 로마숫자 소문자/ 대문자
<ol start ="시작할 숫자 지정">
<ol reveresd> 역순으로 표시
리스트, <li> <ul>과<ol>의 각 항목을 나열할 때, 사용한다.

내부에서 중첩도 가능하다.
이미지 태그,
<img src = "이미지 경로" alt="사진 출력 안될시 텍스트 표시">
거의 동일하게 오디오 파일을 첨부하는 audio 태그도 있음.
<audio src = "이미지 경로" alt = "위와 동일">		 - 이미지 주소를 가져와 웹사이트에서 불러오거나 파일에 넣은 후 이미지를 표시한다.
- inline 태그이다.
하이퍼링크, <a href='연결할 링크의 경로'> 내용 </a> - 웹 페이지를 연결하거나 외부 사이트에 연결을 해준다.
- 폴더 내에서 웹페이지를 이동할 때에도 사용할 수 있다.

href (이동하고자 하는 파일의 경로를 받는다.)

target(새창이나 새탭에서 연결을할 때 사용한다.)

title (커서를 올렸을때 나오는 설명을 적을 수 있다.)
id (같은 페이지 안에서 이동할 때 사용 각 div의 id를 이용)
<=> href = "#아이디이름"
입력값 받기!, <input> - 속성을 통해 다양한 방식으로 입력값을 받을 수 있다.
type 종류 [ • button(버튼 생성)/ • text(텍스트 값 입력)/
• password(입력값 안보이게 변경)/ • checkbox(여러개 체크 가능 name으로 묶을 수 있다.)/ • radio(하나만 선택 가능)/ • date/ • color/ • range/ • file]
\선택 메뉴 만들기, <select> <select> : select 폼 생성

<option> : select 폼의 옵션 값 생성 
- value : 실제적으로 전달 되는 값
- selected : 최초에 선택 된 값으로 설정

<optgroup>: option 을 그룹화
label : optgroup 이름 설정
disabled : 옵션은 보이지만 선택을 못하도록 설정
table 태그


table 속성
• border : 테두리 두께
• cellspacing : 테두리 간격 사이의 너비
• cellpadding : 셀 내부의 간격
• align : 테이블 정렬 속성
• width 와 height : 테이블의 너비와 높이
• bgcolor 와 bordercolor : 테이블 배경색과, 테두리 색

공간은 점유하는 colspan(행)과 rowspan(열)

테이블의 각 영역(header, body, footer)을 명시하는
thead / tbody / tfoot 요소 
웹에 직접 표시되는 것은 아니지만 영역을 나누어 구분해준다.
    <table border="1px">
        <thead>
            <tr>
                <th>분식 메뉴</th>
                <th>금액</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>떡볶이</td>
                <td>4500</td>
            </tr>
            <tr>
                <td>순대</td>
                <td>4500</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>총 합계</td>
                <td>9000</td>
            </tr>
        </tfoot>
    </table>
form 태그 form 전송을 다룰 때 더 자세히 설명 
<추후 링크 추가>

▶ html 실습

1. 설문 조사 폼 만들기

 

 

2. colspan과 rowspan을 이용하여 아래와 같은 표 만들기

 

3. 아래 표 만들기

 

'웹 풀스택 공부 과정 정리 > HTML, CSS, JS' 카테고리의 다른 글

[JavaScript] 드루아 ver 1.1.0 (1) Variable ~ Object Method  (1) 2024.09.15

Component

컴포넌트란?

- 리액트로 만들어진 앱을 이루는 최소한의 단위

- 기존의 웹 프레임워크는 MVC방식으로 분리하여 관리하여 각 요소의 의존성이 높아 재활용이 어렵다는 단점이 있었다. 반면 컴포넌트는 MVC의 뷰를 독립적으로 구성하여 재사용을 할 수 있고 이를 통해 새로운 컴포넌트를 쉽게 만들 수 있다.
- 컴포넌트는 데이터(props)를 입력받아 View(state) 상태에 따라 DOM Node를 출력하는 함수.
- 컴포넌트 이름은 항상 대문자로 시작하도록 한다. 
   (리액트는 소문자로 시작하는 컴포넌트를 DOM 태그로 취급하기 때문이다.

- UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 코딩한다.

- “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.

 

컴포넌트의 종류

함수형 컴포넌트 (Stateless Functional Component)
- 가장 간단하게 컴포넌트를 정의하는 방법은 자바스크립트 함수를 작성하는 것이다.

import React from 'react';

function MyComponent(props) {
	return <div>Hello, {props.name}</div>;
}

export default MyComponent;

위의 예시처럼 export 구문을 통해 가져와 사용할 수 있고, import할때 확장자를 생략할 수 있는데 이 이유는 "웹팩 코드 검색 확장자(webpack module resolution)" 기능 덕분이다. 확장자가 파일 이름에 없는 경우 웹팩의 확장자 옵션(extentions)에 정의된 확장자 목록을 통해 확장자 이름을 포함한 파일이 있는지 확인하여 자동으로 임포트 한다.

 

2) 클래스형 컴포넌트 ( Class Component )

- 컴포넌트 구성 요소, 리액트 생명주기를 모두 포함하고 있다. (리액트 생명주기는 따로 조금더 자세히 알아보도록 한다.)

- 프로퍼티, state, 생명주기 함수가 필요한 구조의 컴포넌트를 만들 때 사용한다.

import React from 'react';

class MyComponent extends React.Component {
	constructor(props) { // 생성함수
		super(props);
	}
	
	componentDidMount() { // 상속받은 생명주기 함수
	}
	
	render() { // 상속받은 화면 출력 함수, 클래스형 컴포넌트는 render() 필수
		return <div>Hello, {this.props.name}</div>;
	}
}

export default MyComponent; //다른 JS파일에서 불러올 수 있도록 내보내주기

함수형 컴포넌트가 사용하기 더 쉽기 때문에 주로 함수형 컴포넌트를 사용하고, 함수형 컴포넌트로 하지 못하는 작업을 처리할 때가 있는데 이때 클래스형 컴포넌트를 활용한다.

 

map

map()이란? 

리액트에서 동적인 배열을 렌더링해야 할 때는 자바스크립트 배열 내장함수인 map()을 사용하여 일반 데이터 배열을 리액트 엘리먼트로 이루어진 배열로 변환해준다. map() 함수는 배열안에 있는 각 원소를 변환할때 원소들을 이용하여 새로운 배열을 만들어주는 역할을 한다. 보통 반복문을 대체하여 사용한다.

 

for문과 map 비교

 

for문

const numbers = [1, 2, 3]
for (let i = 0; i < numbers.length; i++) {
    console.log(numbers[i])
}

map

const numbers = [1, 2, 3];
const listItems = numbers.map((number, idx) => {
    console.log(number);
});

이러한 map에 대해 더 자세히 알아보자면

 - arr.map(callbackFunction, [thisArg])
 - arr.map(callbackFunction(currenValue, index, array), thisArg)

위의 두가지 방법으로 사용할 수 있다.

callbackFunction : 새로운 배열의 요소를 생성하는 함수로 세가지 인수를 갖는다.

 - currenValue : 현재 배열값

 - index : 현재 배열값 내의 인덱스 값

 - array : 현재 배열

thisArg : 콜백 함수 내부에서 사용할 this 컨퍼런스를 설정

 

props(프로퍼티)

- 프로퍼티, props(properties의 줄임말) 라고 한다.
- 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용한다.
- 프로퍼티는 수정할 수 없다는 특징이 있다.(자식입장에선 읽기 전용인 데이터이다.)

프로퍼티에 문자열을 전달할 때는 큰따옴표(" ")를, 문자열 외의 값을 전달할 때는 중괄호({ })를 사용 한다.

 

ex) 1개의 props 넘기기

 

app.js (문자열은 큰따옴표( " " ) 를 사용하여 값을 전달) 

import React, { Component } from 'react';
import Header from './component/Header';
import Footer from './component/Footer';
import Main from './component/Main';

function app() {
  return (
    <div>
      <Header />
      <Main name="동덩"/>
      <Footer />
    </div>
  );
}

export default app;

index.js

import React from 'react';

function index(props) {
    return (
        <div>
            <main>
                <h1>안녕하세요. {props.name} 입니다.</h1>
            </main>
        </div>
    );
}

export default index;

위와 같은 방법으로 값을 넘겨줄 수 있다.

 

숫자를 넘겨줄때는 {}를 사용한다.

app.js

import React, { Component } from 'react';
import Header from './component/Header';
import Footer from './component/Footer';
import Main from './component/Main';

function app() {
  return (
    <div>
      <Header />
      <Main name={9} color="red"/>
      <Footer />
    </div>
  );
}

export default app;

 

프로퍼티의 Type

- 프로퍼티의 자료형을 미리 선언할 수 있다.
- 리액트 엔진이 프로퍼티로 전달하는 값을 효율적으로 알 수 있고, 버그예방에도 도움이 된다.
- 리액트에서 제공하는 prop-types를 이용하여 각각의 자료형을 선언하면 된다.

 

프로퍼티의 기본값 및 필수값 설정

1) 기본값 설정

 - 컴포넌트에 props 기본값을 설정하고 싶은 경우 defaultProps를 설정하면 된다.

ex) Main.js (name 프로퍼티가 없는 경우, '디폴트'라는 값을 사용 하게 처리)

import React from 'react';
import PropTypes from 'prop-types' // 프로퍼티 타입을 지정해주기 위해 사용 한다.

function Main({name, color}) {
    return (
        <div>
            <main>
                <h1 style={{color}}>안녕하세요. {name} 입니다.</h1>
            </main>
        </div>
    );
}

// 프로퍼티 타입 지정
Main.propTypes = {
  name: PropTypes.string
}

// 프로퍼티 기본값 지정
Main.defaultProps = {
  name: '디폴트'
}

export default Main;

app,js

import React, { Component } from 'react';
import Header from './component/Header';
import Footer from './component/Footer';
import Main from './component/Main';

function app() {
  return (
    <div>
      <Header />
      <Main color="blue"/>
      <Footer />
    </div>
  );
}

export default app;

 

2) 필수값 설정

- 디폴트 설정을 하지 않는 경우 해당 프로퍼티를 필수 프로퍼티로 선언 할 수도 있다.

ex) index.js (isRequired 를 통한 필수값 설정)

import React from 'react';
import PropTypes from 'prop-types' // 프로퍼티 타입을 지정해주기 위해 사용 한다.

function index({name, color}) {
    return (
        <div>
            <main>
                <h1 style={{color}}>안녕하세요. {name} 입니다.</h1>
            </main>
        </div>
    );
}

// 프로퍼티 타입 지정 및 필수값 설정
Main.propTypes = {
  name: PropTypes.string.isRequired,
}

export default index;

 

'웹 풀스택 공부 과정 정리 > React.js' 카테고리의 다른 글

React를 이용해 블로그를 만들어보자(0) - 백엔드 setting  (0) 2024.02.04
리액트 전체적으로 훑어보기 + 이모저모 정리(feat. TypeScript)  (2) 2023.10.19
웹개발 배워보자! - 리액트(2) | state 변경하는 법  (0) 2023.08.13
웹개발 배워보자! - 리액트(1) | 리액트 환경 셋팅과 간단한 문법 조금  (0) 2023.08.06

 

usestate

>> let [글제목, b] = useState(['내용1', '내용2', ...]);

 

Warning 메세지는 앱을 실행하는데에는 큰 문제가 없는 메세지이다. 이를 없애는 방법은 코드의 맨 위에

/* eslint-disable */ 

를 사용하면 된다 (Lint 기능을 끈다.)

 

- 좋아요 버튼& 갯수 UI 만들기

좋아요 옆에 들어가는 숫자를 state로 만들자

let [좋아요, c] = useState(0);

 

클릭했을때 원하는 기능을 실행하기 위해선 onClick을 사용하면된다. 이를 보통 이벤트 리스너라고 한다.

onClick은 태그 바로 옆에 선언해서 사용할 수 있다. onClick = {함수이름}을 넣어서 사용할 수 있다.

 함수 이름 안에 그냥 함수를 넣어도 된다. ( function()이나 ()=>를 넣어도 된다.)

- state를 변경하는 법

좋아요 = 좋아요 + 1 등호를 이용해 바꿀 수  없다.

이럴때는 state 변경 함수를 써야한다.

state를 변경하면 html이 재랜더링이 된다.

이를 사용하는 방법은 따봉변경(원하는 기능 적기)

위의 경우에는

이렇게 하면 좋아요 이모티콘을 누를때마다 이모티콘 옆의 숫자가 증가한다.

 

state를 변경할때는 무조건 변경함수를 이용해야한다.

 

array object state 변경하는법

이런 방법으로 글제목을 바꿀 수 있다 하지만 이렇게 사용하면 확장성이 부족함으로 

위와 같이 인덱싱 방법으로 하는 것이 더 빠르다. 

하지만 array나 object를 다룰 때는 원본을 보존하는 것이 좋기 때문에 원본은 보존하는 것이 좋다. 그렇기 때문에 내용을 수정할 복사본을 따로 만들어 사용할 수 있다.

여기서 복사본 [...글제목]에서 글제목 앞에 ...을 붙여서 위와 같이 만들어야만 변경이 된다. 

이렇게 해야하는 두가지 이유가 있는데

첫 번째는 기존 state의 값과 신규 state의 값이 같을 경우 변경을 해주지 않는 state 변경함수의 특징 때문이다. 

두 번째는 array/object 담을때 다음과 같이 let arr = [1, 2, 3] 처럼 지정할 경우 1,2,3을 가리키는 주소만 지정되기 때문에 내용이 바뀌지 않는다 그렇게 때문에 ...을 사용해야지 데이터를 직접 수정할 수 있다.

 

여기서 글제목은 array 데이터가 아니라 그 저장 공간의 주소 혹은 위치를 가르키는 화살표라고 생각할 수 있다.

그래서 copy == 글제목을 비교하면 항상 같다고 나온다.

 

결론적으로 ...은 괄호를 벗기고 그 안의 데이터를 가져오는 것이다.

 

 

'웹 풀스택 공부 과정 정리 > React.js' 카테고리의 다른 글

React를 이용해 블로그를 만들어보자(0) - 백엔드 setting  (0) 2024.02.04
리액트 전체적으로 훑어보기 + 이모저모 정리(feat. TypeScript)  (2) 2023.10.19
웹개발 배워보자! - 리액트(3) | Component, map, props  (0) 2023.08.20
웹개발 배워보자! - 리액트(1) | 리액트 환경 셋팅과 간단한 문법 조금  (0) 2023.08.06

리액트를 쓰는 이유 

1. 싱글 페이지 어플리케이션을 만들려고 만든다 : 앱처럼 부드럽게 동작하는 웹페이지

2. 제일 오래됐고 유저가 많다

3. html 재사용이 편리하다

4. 리액트를 통해 앱개발도 가능하다

5. 요즘 대부분의 회사는 리액트를 사용한다.

 

개발 환경 셋팅

1. Node.js 설치

2. vscode 설치

 

리액트 프로젝트 실행하기

리액트를 사용할 폴더를 하나 만들어주고,

시프트 우클릭을 한 후 여기에 powershell열기를 클릭

뜬 창에 위 명령어를 입력한다 이후에 vscode에서 오픈폴더를 눌러 폴더를 연후에 app.js(메인페이지)에서 코드를 짜면 된다. 이는 create-reacte-app 라이브러리를 이용하여 필요한 파일들을 한번에 설치해주는 것인데 이는 Node.js를 설치할때 같이 설치된다.

 

App.js의 코드는 index.js가 index.html로 연결시켜주기 때문에 바로바로 적용이 된다.

 

npm start를 터미널에 입력하여 미리보기를 볼 수 있다.

 

js 내에서도 div, p 태그등을 사용할 수 있다.

 

이는 리액트에서 사용하는 언어가 JSX라는 언어를 사용하기 때문에 사용 가능하다.

CSS를 연결할때 VUSGKRP import를 사용하여 불러올 수 있다.

 

- 레이아웃을 만들 때 쓰는 JSX 문법 3개

 

1. 클래스를 넣을땐 class를 사용하지 않고, className을 사용한다.

왜냐하면 js에서 클래스를 만들 때 사용하는 class와 겹치기 때문이다.

 

2. 데이터바인딩 : 리액트에서 변수를 html 구조 사이에 넣을때 {}를 사용하여 넣을 수 있다.

3. jsx 상에서 스타일 속성을 사용할려면 ""가 아니라 {}를 사용하고 객체형으로 값을 넣어줘야 한다.

- 기호는 사용하지 못한다.

 

- 중요한 데이터는 state에..!

자료를 잠깐 보관할때는 state를 사용할 수 있다.

import  {useState} from 'react'; 

로 불러와 사용한다. 그 후에 아래와 같이 사용한다.

a : state에 보관한 자료

b : state 변경을 도와주는 함수

 

일반 변수의 내용이 갑자기 변경되면 html에 자동으로 반영되지 않는다.

> state는 자동으로 html의 내용이 변경이 된다. 즉, html이 자동으로 랜더링된다.

 

 

 

'웹 풀스택 공부 과정 정리 > React.js' 카테고리의 다른 글

React를 이용해 블로그를 만들어보자(0) - 백엔드 setting  (0) 2024.02.04
리액트 전체적으로 훑어보기 + 이모저모 정리(feat. TypeScript)  (2) 2023.10.19
웹개발 배워보자! - 리액트(3) | Component, map, props  (0) 2023.08.20
웹개발 배워보자! - 리액트(2) | state 변경하는 법  (0) 2023.08.13

+ Recent posts

티스토리툴바