[ React ] To Do List 만들기 - 01

 

# React로 To Do List 만들기

# React로 weather Open API 불러오기

 

 

ERROR_ 01  : Logo 부분에 img 태그 사용으로 인해 발생 

import React from 'react';
import './Navbar.css';

const Navbar = () => {
    return(
        <div className="navbar">
            <div className="navbar__logo">
                <img clasName="logo">To Do List</img>  // 이부분
            </div>
        </div>
    )
}

export default Navbar;

.

.

img is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.

.

.

> 해결 방안 : < span > 태그로 수정 

import React from 'react';
import './Navbar.css';

const Navbar = () => {
    return(
        <div className="navbar">
            <div className="navbar__logo">
                <span clasName="logo">To Do List</span>  // 이부분
            </div>
        </div>
    )
}

export default Navbar;

 

 

 

 

ERROR _02  :  <Main> 안의 구조 조정 

 

> 해결 방안 :  <Sidebar.css> <Sidebar.jsx> : gap 으로 display:flex 한 <div>들을 뛰어줬는데 보라색 빈공간이 오른쪽 넘어서도 생겨서 이를 맞추기 위해  .count 들의 가로 길이를 임의로 조정 

 

 

****  저렇게 밖에 조정할 수 없는 건가??  ****

 

 

 

이 부분은 그 code pen.io로 부르기 

.sidebar{
    width: 300px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.sidebar > h3 {
    font-size: 2rem;
    padding-top: 40px;
    padding-bottom: 30px;
}

.sidebar__counts{
    border: 1px dotted lemonchiffon;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    height: 250px;
    gap: 20px; /*새로 배운 녀석*/
}

.count{
    border: 1px solid salmon;
    padding: 10px;
    width: 109px; /*위의 gap 연관 : 이렇게 밖에 할 수 없나??*/

}

import React from 'react';
import './Sidebar.css';

const Sidebar = () => {
    return(
        <div className="sidebar">
            <h3>Sidebar</h3>
            <div className="sidebar__counts">
                <div className="count">15<div className="count_text">Total Task</div></div>
                <div className="count">8<div className="count_text">Today Task</div></div>
                <div className="count">5<div className="count_text">Complete</div></div>
                <div className="count">5<div className="count_text">Postpone</div></div>
            </div>
            <div className="sidebar__icon">STAR</div>
        </div>
    )
}

export default Sidebar;