2024. 7. 2

Javascript

실습한 소스 정리

•

obj_copy.js

const obj1 = {
    key1: 10,
    key2: "안녕하세요",
    key3: {
        isLogin: false
    }
}
const obj2 = obj1 // 주소값 복사
const obj3 = { ...obj1 } // 객체의 얕은 복사 [객체 내의 객체는 주소값 복사]
const obj4 = JSON.parse(JSON.stringify(obj1));

obj1.key1 += 1;
obj1.key3.isLogin = true;

console.log("obj1", obj1);
console.log("obj2", obj2);
console.log("obj3", obj3);
console.log("obj4", obj4);
JavaScript
복사

•

spread_po.js

const [name, ...info] = ["최민식", 50, "서울"];

console.log("name", name);
console.log("info", info);

const names = ['최민식', '유해진', '이도현', '김고은'];
const stars = ['이도현', ...names, ...names];
console.log(stars);

const fruits = ['사과', '오렌지', '딸기', '수박'];
const [apple, orange, ...rest] = fruits;
console.log(rest);

let me = {
    my_name: "jonathan",
    my_age: 10,
    my_region: '서울',
    my_email: 'jonathan@naver.com'
}

const { my_name, my_age, ...my_rest } = me;
console.log(my_rest);
JavaScript
복사

•

arrow_func.js

function sum1(x, y) { return x + y; }
const sum2 = function (x, y) { return x + y; }
const sum3 = (x, y) => { return x + y; }
const sum4 = (x, y) => x + y;
const sum5 = (x, y) => { return x + y; }

console.log(sum1(1, 2))
console.log(sum2(1, 2))
console.log(sum3(1, 2))
console.log(sum4(1, 2))
console.log(((x, y) => x + y)(1, 2))
console.log(sum5(1, 2))
JavaScript
복사

•

map.js

// 배열 메서드 map
// 배열 안의 요소들을 처리해서, [새로운 배열 생성]

const arr = [1, 3, 5, 7, 9];
const mapArr1 = arr.map((value) => value + 1);
const mapArr2 = arr.map((value, index) => value + index);
const mapArr3 = arr.map((value, index, array) => value + array[4]);

console.log(mapArr1);
console.log(mapArr2);
console.log(mapArr3)
JavaScript
복사

•

filter.js

// 배열 메서드 filter
// 콜백 조건에 충족하는 요소만을 추출해 [새로운 배열 반환]

const arr = [1, 2, 3, 4, 5, 6];
// const mapArr1 = arr.map(value => value % 2 == 1);
// console.log(mapArr1);

const filterArr1 = arr.filter(value => value % 2 == 1);
console.log(filterArr1);

const filterArr2 = arr.filter((value, index) => index > 3);
console.log(filterArr2);

const filterArr3 = arr.filter((value, index, array) => value > array[2]);
console.log(filterArr3);
JavaScript
복사

•

forEach.js

// 배열 메서드 forEach
// 배열 각 요소에 대해서 함수를 실행한다.

const weekArr = ['월', '화', '수', '목', '금']
weekArr.forEach((value => {
    console.log(value + "요일");
}));
JavaScript
복사

•

reduce.js

// 배열 메서드 reduce
// 배열을 통해 하나의 값을 만든다

const arr = [1, 2, 3, 4, 5];
const value1 = arr.reduce((acc, cur) => { return acc + cur });
const value2 = arr.reduce((acc, cur) => { return acc + cur }, 900);

console.log(value1);
console.log(value2);

const lastArr = arr.reduce((acc, cur) => {
    if (cur % 2 === 0) {
        acc.push(cur)
    }
    return acc;
}, []);

console.log(lastArr)
JavaScript
복사

React

•

first_react

import './App.css';

function App() {
  const name = "React"
  const url = "https://naver.com"
  const style = { color: 'red', backgroundColor: 'black' }
  const num = 10;

  return (
    // 중괄호를 이용해 변수 삽입 가능 
    <div>
      <h1>{name + " JS"} 시작</h1>
      <a href={url}>네이버</a>

      {/* 단일 태그도 태그를 닫아야 한다 */}
      <br></br>
      <input type='text' value={name}></input>
      <br/>
      <input type='password' />

      {/* class, for => className, htmlFor */}
      <div className="title">제목</div>
      <label htmlFor="user_id">아이디</label>
      <input type='text' id="user_id"></input>

      {/* style */}
      <div style={{color: 'red', backgroundColor: 'black'}}>안녕하세요</div>
      <div style={style}>안녕하세요</div>

      <div>
        {
            num > 10 ?
            <h1>num은 10보다 크다</h1> :
            <h1>num은 10보다 같거나 작다</h1>
        }
      </div>

    </div>
    );
    
}

export default App;
JavaScript
복사

•

component_react

◦

Comp.jsx

const Comp = () => {
    return (
        <div>
            나의 첫 컴포넌트
        </div>
    )
}

export default Comp;
JavaScript
복사

◦

Comps.jsx

const Header = () => {
    return (
        <div>
            <h1>
                <a href='/'>React</a>
            </h1>
        </div>
    );
}

const Navi = () => {
    const menuList = [
        { name: "홈", link: "/" },
        { name: "추천", link: "recomm" },
        { name: "뷰티", link: "beauty" },
    ]
    return (
        <nav>
            {
                menuList.map((menu) => {
                    return (
                        <div>
                            <a href={menu.link}>
                                {menu.name}
                            </a>
                        </div>
                    )
                })
            }
        </nav>
    );
}

const Article = (props) => {
    const style = {
        textAlign: 'center',
        backgroundColor: "#aaa",
        height: '20vh',
        margin: '10px 50px', 
    }
    return (
        <article style={style}>
            <h2>{props.text}</h2>
        </article>
    );
}
 
export default { Header, Navi, Article };
JavaScript
복사

◦

Introduce.jsx

import Button from "../Button";

const Introduce = (props) => {
    return (  
        <div>
            <h2>안녕하세요</h2>
            <Button size="small" color='red'>클릭</Button>
            <Button size="medium" color='orange'>누르세요</Button>
            <Button size="large" color='yellow'>Click</Button>
            <Button event={() => alert('클릭되었습니다.')}></Button>
            <p>내 친구 이름 {props.name}입니다.</p>
            <p>내 친구의 성별은 {props.gender}입니다.</p>
        </div>
    );
}

Introduce.defaultProps = {
    name: "minsung",
    gender: '남자'
}

export default Introduce;
JavaScript
복사

◦

App.js

import './App.css';
import Comp from './components/Comp';
import Comps from './components/Comps';
import Introduce from './components/Introduce';

function App() {
  return (
    <div>
      <Comps.Header></Comps.Header>
      <Comps.Navi></Comps.Navi>
      { /* props: 부모컴포넌트가 자식컴포넌트에게 전달하는 값 */ }
      <Comps.Article text="환영합니다."></Comps.Article>
      <Comps.Article text="만나서 반갑습니다."></Comps.Article>
      <Comp />
      <Introduce name="유재석" gender="남자"></Introduce>
      <Introduce name="김종국" gender="남자"></Introduce>
      <Introduce name="지석진" gender="남자"></Introduce>
      <Introduce name="전소민" gender="여자"></Introduce>
      <Introduce></Introduce>
    </div>
  );
}

export default App;
JavaScript
복사

•

layout_react - 게시판 꾸미기

◦

Layout.css

header {
    background-color: lightgreen;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header a {
    text-decoration: none;
    color: black;
    font-size: 18px;
}

header nav {
    display: flex;
}

header nav li {
    background-color: lightsalmon;
    list-style-type: none;
    margin-right: 10px;
    padding: 3px 6px;
    border-radius: 10px;
    border: 1px solid black;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.15);
}

main {
    padding: 50px;
    min-height: 50vh;
}

footer {
    background-color: #bbb;
    padding: 20px;
}
CSS
복사

◦

Layout.jsx

import "./Layout.css";

const Layout = ({children}) => {
    return (
        <>
            <header>
                <a href="/">메인로고</a>
                <nav>
                    <li><a href="/#menu1">menu1</a></li>
                    <li><a href="/#menu2">menu2</a></li>
                    <li><a href="/#menu3">menu3</a></li>
                    <li><a href="/#menu4">menu4</a></li>
                </nav>
            </header>
            <main>
                {children}
            </main>
            <footer>연락처 정보</footer>
        </>
    );
}
export default Layout;
JavaScript
복사

◦

App.js

import logo from './logo.svg';
import './App.css';
import Layout from './components/Layout';

function App() {
  return (
    <div className="App">
      <Layout>
        <div>
          <h1>게시판 화면</h1>
          <table>
            <tr>
              <th>번호</th>
              <th>제목</th>
              <th>작성자</th>
            </tr>
            <tr>
              <td>1</td>
              <td>안녕하세요</td>
              <td>minsung</td>
            </tr>
            <tr>
              <td>2</td>
              <td>현실은 차갑다</td>
              <td>minsung</td>
            </tr>
          </table>
        </div>
      </Layout>
        
    </div>
  );
}

export default App;
JavaScript
복사

JSON 서버 설치

•

npm 실행

sudo npm i -g json-server
CSS
복사

•

server 실행 (json server와 react 서버가 동시에 실행되어 있어야 함)

json-server --watch data.json --port 8080

--watch/-w can be omitted, JSON Server 1+ watches for file changes by default
JSON Server started on PORT :8080
Press CTRL-C to stop
Watching data.json...

♡⸜(˶˃ ᵕ ˂˶)⸝♡

Index:
http://localhost:8080/

Static files:
Serving ./public directory if it exists

Endpoints:
No endpoints found, try adding some data to data.json
CSS
복사

2024. 7. 2

Javascript

실습한 소스 정리

React

JSON 서버 설치

기타