React 실습

기술과제

• 방화벽이 무엇인지 ?
  • 인바운드 / 아웃바운드
• MYSQL EC2에서 설치한거 연결 성공 하는걸 목표가지고 셋업 해보기
• SPA 프레임워크가 무엇이고 어떤것이 있는지 간단하게

코딩과제

1. SPA란 무엇인가 ?
2. React란 무엇인가 ?
3. JSX란 무엇인가 ?
4. 컴포넌트가 무엇인지 ?
5. 소스코드 설치 해보기

+실습

---

기술과제

 

(1) 방화벽이 무엇인지? (인바운드 / 아웃바운드)

 

방화벽이란?

-서버와 서버 간 통신을 하는데 있어서 정의된 보안 규칙에 기반하여 네트워클 트래픽을 제어하는 보안 시스템
-네트워크를 통과하는 통신을 허용/거부/검열/수정하는 모듈
-외부로부터 침입을 막아 네트워크 단계 보안 시스템 중 가장 널리 쓰이는 방법

인바운드

-외부에서 내부로 들어오는 트래픽을 제어(ex 포트 80인 서버에 들어오는 웹요청..등)
-서버에 불필요한 엑세스를 차단하고 보안 강화
-클라이언트->서버
-클라이언트가 업로드 할 때
-ex. 첨부파일을 서버에 저장

아웃바운드

-외부로 향함
-서버 외부로 나가는 불필요한 정보를 전송하거나 악성 사이트에 엑세스 하는 것을 방지
-서버->클라이언트
-클라이언트가 다운로드할 때
-ex. 첨부파일을 다운로드

 

(2) MYSQL EC2에서 설치한거 연결 성공 하는걸 목표가지고 셋업 해보기

-실패....

 

(3)SPA 프레임워크가 무엇이고 어떤것이 있는지 간단하게

-밑에서 설명...

 

---

코딩과제

 

spa

-싱글페이지어플리케이션
-페이지는 가만히
-ajax통신을 가지고 웹을 앱같이 보이게
-깜박임 없이

 

spa 프레임워크란?

-웹사이트를 만드는데 앱처럼 보이기 위해서 사용

장점
안드로이드/아이폰 지원 가능->개발 한번만 해도 가능
html 전체를 불러오지 않고 페이지 이동방식 보다 데이터 불러 오는 속도는 빠르고 데이터 데이터 소모가 적다  

단점
검색엔진에 노출이 안된다는 단점이 있다.(해결방법이 있긴 하다.)

 

- 가장 많이 사용되는 프레임워크:angular,vue,react

react

lib
-하나의 기능을 담고 있는 거
reamework
-lib를 묶어서 하나의 패키지로 담고 있는 거

 

react란 대표적인 프레임워크 중 하나. 

컴포턴트

레이아웃의 하나의 기능을 하나의 파일로 가지고 다른 페이지에서도 사용 가능하게 해준다
리액트가 하고자 하는 것 중에 가장큰 이유
컴포넌트는 잘게잘게 잘라서 쓰는게 효율적이다

react 실행 방법

cd TEST_PATH
cd react-study
npm start

뉴스페이지 만들어보기 실습

※주의: 자료가 너무 많아 중요한 몇몇 코드들만 가져옴

 

React  작동 과정

- React에서, 여러 개의 재사용 가능한 각각의 기능을 하는 컴포넌트들을 하나의 앱으로 조합하여 구축하고, 인덱스 파일을 통해 렌더링하여 앱의 진입점을 설정

-이는 앱을 기능별로 분할하고 관리하기 쉽게 해주는 구조를 제공

 

인덱스 - Index.js

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

  <React.StrictMode>

    <App />

  </React.StrictMode>

);

-랜더링하여 앱의 진입

 

앱 - App.js

// import Hello from './Hello';

import "./App.css";

import Nav from "./Nav";

import Ad from "./Ad";

import Post from "./Post";

import Posts from "./Posts";

import Content from "./Content";

import Category from "./Category";

function App() {

  const category_list = [

    {

      "id" : 1,

      "name": "스포츠"

    },

    {

      "id" : 2,

      "name": "정치"

    },

    {

      "id" : 3,

      "name": "경제"

    },

    {

      "id" : 4,

      "name": "월드뉴스"

    }

  ]

  return (

    <>

    <Nav is_login={true}/>

    <Category list={category_list}/>

    <Content>

      <Ad/>

      <Posts>

        <Post title="뉴스기사1" content="뉴스 내용1" image_src="https://s.pstatic.net/dthumb.phinf/?src=%22https%3A%2F%2Fs.pstatic.net%2Fstatic%2Fwww%2Fmobile%2Fedit%2F20240418_1095%2Fupload_1713424573422VFtxP.jpg%22&type=f504_292&service=navermain"/>

        <Post title="뉴스기사2" content="뉴스 내용2" image_src="https://s.pstatic.net/dthumb.phinf/?src=%22https%3A%2F%2Fs.pstatic.net%2Fstatic%2Fwww%2Fmobile%2Fedit%2F20240422_1095%2Fupload_1713764518653r1HMv.jpg%22&type=f504_292&service=navermain"/>

        <Post title="뉴스기사3" content="뉴스 내용3" image_src="https://s.pstatic.net/dthumb.phinf/?src=%22https%3A%2F%2Fs.pstatic.net%2Fstatic%2Fwww%2Fmobile%2Fedit%2F20240418_1095%2Fupload_1713424583552s1tPi.jpg%22&type=f504_292&service=navermain"/>

      </Posts>

    </Content>

    </>

  );

}

export default App;

- 각각의 기능을 하는 컴포넌트들을 하나의 앱으로 조합하여 구축

 

컴포넌트

- 컴포넌트를 작성하고 모듈로 내보내는 과정= import로 React를 가져오고 함수를 만들어 export로 모듈을 내보내준다

 

-jsx문법

//import 변수명 from 모듈명

import React from "react";

//함수선언

function Hello() {

    //jsx문법

    return <div>안녕하세요!</div> //html이 아니지만 html처럼 보인다

   

}

//모듈을 내보낼때

export default Hello;

-JSX(JavaScript XML)는 React에서 사용되는 JavaScript의 확장 문법

-이를 사용하면 JavaScript 코드 안에서 HTML과 유사한 구문을 사용하여 UI를 작성 가능

-JSX는 개발자가 React 컴포넌트를 더 직관적으로 작성할 수 있도록 도와주며, 가독성을 향상 시켜줌

 

-문법

1. 태그 사용: HTML과 비슷한 태그를 사용
2. 단일 태그: HTML과 달리 단일 태그를 사용 가능. (닫는 태그가 필요하지 않은 경우에는 /를 사용)
3. className 사용...그 이외는 나중에 더 추가할 것

 

-Nav.js

import react from 'react';

import "./Nav.css";

function Nav({is_login}){

    console.log(is_login);

    return(

    <div className="header">

        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/BBC_News_2022_%28Alt%29.svg/1200px-BBC_News_2022_%28Alt%29.svg.png" className='logo'/>

        <ul className="icons">

            {is_login ? (<li><a href="#">로그아웃</a></li> ): (<li><a href="#">로그인</a></li>)}

        </ul>

    </div>

    )

}

export default Nav;

-로고 사진 구글링으로 가져와서 넣어주기

-로그인이 true면 화면에 로그아웃이 나오거나 false면 로그인이 나오기

 

-Nav.css

.header {

    display: flex;

    justify-content: space-between;

    padding: 10px;

    border-bottom: 1px solid #dbdbdb;

}

.logo {

    width: 100px;

}

.icons {

    display: flex;

    list-style: none;

    padding-left: 0;

}

.icons li{

    padding: 5px;

}

.icons a{

    color : #000;

    text-decoration:  none;

}

 

-className의 이름을 가져와 크기, 색,  넓이 등을 꾸며준다

-Post.js

import React from "react";

import "./Post.css"

function Post(props){

    return (

        <div className="post">

            <div className="post-title">

                <h2>{props.title}</h2>

            </div>

            <img class="post-image" src={props.image_src}/>

            <div className="post-content">

                {props.content}

            </div>

        </div>

    )

}

export default Post;

-뉴스기사 제목/이미지/내용으로 구성된 하나의 칸 만들기

 

-Posts.js

import React from "react";

import "./Posts.css";

function Posts(props) {

    return (

        <div className="posts">

            {props.children}

        </div>

    )

}

export default Posts;

-post 칸들을 하나로 모은 컴포넌트

 

-Category.js

import React from 'react';

import "./Category.css";

function Category({list}) {

   

  return (

    <ul className="category">

        {list.map(item => (<li key={item.id}><a href="#">{item.name}</a></li>))}

    </ul>

  )

}

export default Category

-map을 사용하여 반복

-앱에 있는 Category_list에 있는 리스트(스포츠,정치,경제,월드뉴스)를 반복시켜주는 함수를 만듬

 

결과물

뉴스페이지 만들어보기