namu
2022.03.23
@namu님이 새 포스트를 작성했습니다.
웹 리액트 12일차
12일차와 13일차의 과제가 바뀐 것 같아 13일차 과제를 먼저 수행했습니다. 본 글은 13일차 과제입니다. 결과 Header.js import styles from './Header.module.css'; import youtube_logo from '../../data/youtube_logo.png'; import { FiMenu } from 'react-icons/fi'; import { IoSearchOutline } from 'react-icons/io5'; import { BsGrid3X3Gap } from 'react-icons/bs'; import { HiOutlineDotsVertical } from 'react-icons/hi'; import { useState } from 'react'; function Header({visibleMenu}) {   const [value, setValue] = useState('');   function onClick() {       console.log(value); //콘솔에 출력       setValue('');   }      function onChange(event) {       setValue(event.target.value);   }   return (     <div className={styles.header}>       <div className={styles.tab}>         <FiMenu onClick = {visibleMenu} className={styles.icon} />         <img src={youtube_logo} alt="로고" className={styles.logo} />       </div>       <div className={styles['center-tab']}>         <input className={styles.input} onChange = {onChange} value = {value}/>         <IoSearchOutline className={styles['search-icon']} onClick = {onClick} />       </div>       <div className={styles.tab}>         <BsGrid3X3Gap className={styles.icon} />         <HiOutlineDotsVertical className={styles.icon} />       </div>     </div>   ); } export default Header;
namu
2022.03.21
@namu님이 새 포스트를 작성했습니다.
웹 리액트 11일차
결과 Layout.js import styles from './Layout.module.css'; import Header from './Header'; import Menu from './Menu'; import React, {useState} from 'react';  function Layout({children, activeMenu, visibleMenu }) {     const [showMenu, shownMenu] = useState(true); //상태변수의 초기값     //const[상태함수, 상태 값 변수함수]     function visibleMenu(){         shownMenu(!showMenu);     }     return (       <div className={styles.container}>         <Header visibleMenu={visibleMenu}/>         <div className={styles.layout}>             {showMenu == true ? <Menu activeMenu={activeMenu}/> : <div></div>}             <div className={showMenu == true ? styles.contents : styles.hidden}>{children}</div>         </div>       </div>     );   }      export default Layout; Layout.module.css .container{     display : flex;     position : fixed;     top:0;     left : 0;     right : 0;     bottom : 0;     overflow : overlay;     flex-direction : column; } .layout{     display : flex;     margin-top : 56px;     flex : 1; } .contents{     margin-left : 240px;     flex : 1; } @media screen and (max-width: 911px) {   .contents {     margin-left: 72px;   } } .hidden{   margin-left : 0px;   flex : 1; } //hidden 추가
namu
2022.03.21
@namu님이 새 포스트를 작성했습니다.
웹 리액트 10일차
결과 Layout.js import styles from './Layout.module.css'; import Header from './Header'; import Menu from './Menu'; import React, {useState} from 'react';  function Layout({children, activeMenu, visibleMenu }) {     const [showMenu, shownMenu] = useState(true); //상태변수의 초기값     //const[상태함수, 상태 값 변수함수]     function visibleMenu(){         shownMenu(!showMenu);     }     return (       <div className={styles.container}>         <Header visibleMenu={visibleMenu}/>         <div className={styles.layout}>           {showMenu == true ? <Menu activeMenu={activeMenu}/> : <div></div>}           <div className={styles.contents}>{children}</div>         </div>       </div>     );   }      export default Layout; Header.js import styles from './Header.module.css'; import youtube_logo from '../../data/youtube_logo.png'; import { FiMenu } from 'react-icons/fi'; import { IoSearchOutline } from 'react-icons/io5'; import { BsGrid3X3Gap } from 'react-icons/bs'; import { HiOutlineDotsVertical } from 'react-icons/hi'; function Header({visibleMenu}) {   return (     <div className={styles.header}>       <div className={styles.tab}>         <FiMenu onClick = {visibleMenu} className={styles.icon} /> //여기 onClick         <img src={youtube_logo} alt="로고" className={styles.logo} />       </div>       <div className={styles['center-tab']}>         <input className={styles.input} />         <IoSearchOutline className={styles['search-icon']} />       </div>       <div className={styles.tab}>         <BsGrid3X3Gap className={styles.icon} />         <HiOutlineDotsVertical className={styles.icon} />       </div>     </div>   ); } export default Header; Menu.js 파일에서 display:none으로 처리하는 건 줄 알았는데 그냥 전체 layout에서 menu를 사용하지 않으면 되는 일이었다...
namu
2022.03.18
@namu님이 새 포스트를 작성했습니다.
웹 리액트 9일차
파일 구조 index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import { BrowserRouter } from 'react-router-dom'; ReactDOM.render(   <React.StrictMode>     <BrowserRouter>       <App />     </BrowserRouter>   </React.StrictMode>,   document.getElementById('root'), ); .src/components/shared/Menu.js import { Link } from 'react-router-dom'; import styles from './Menu.module.css'; function Menu() {   return (     <div>       <div>         <Link to="/">홈</Link>       </div>       <div>         <Link to="/explore">탐색</Link>       </div>       <div>         <Link to="/subscription">구독</Link>       </div>       <div>         <Link to="/homework">과제</Link>       </div>     </div>   ); } export default Menu; App.js import { Route, Routes } from 'react-router-dom'; import Home from './pages/Home'; import Explore from './pages/Explore'; import Subscription from './pages/Subscription'; import Homework from './pages/Homework'; function App() {     return (         <Routes>             <Route path="/" element={<Home />} />             <Route path="/explore" element={<Explore />} />             <Route path="/subscription" element={<Subscription />} />             <Route path="/homework" element={<Homework />} /> //과제         </Routes>     ); } export default App; ./src/pages/Homework.js import React, {useState} from 'react';  import Button from './Button.js'; import styles from '../components/shared/Layout.module.css'; function Homework() {     const [value, setValue] = useState(false); //상태변수의 초기값     //const[상태함수, 상태 값 변수함수]     function onClick(){         setValue(value => !value);     }     return (         <div>             {value==true             ? <div class = {styles.main1}>TRUE에용!</div>             : <div class = {styles.main2}>FALSE에용!</div>             }             <Button onClick = {onClick} text="색바꾸기!"/>         </div>     ); } export default Homework; .src/pages/Button.js import React from 'react'; import styles from '../components/shared/Layout.module.css'; function Button({text, onClick}){     return <button class = {styles.title} onClick = {onClick}>{text}</button>; } export default Button; .src/components/shared/Layout.module.css .container{     display : flex;     position : fixed;     top:0;     left : 0;     right : 0;     bottom : 0;     overflow : overlay;     flex-direction : column; } .layout{     display : flex;     flex : 1; } .contents{     flex : 1; } .title {     color: #8aa3b1;     font-weight: 600;     font-size : 5vmin;     width : 20vw;     height : 10vh;     margin-bottom : 10vh;     border-radius : 5%;     border : 1vmin solid rgb(102, 155, 205);     background-color: white;     margin-right : 40vw;     margin-left : 40vw; } .main1{   background-color :rgb(102, 155, 205);   text-align: center;   font-size: 6vmin;   font-weight: 600;   margin-top : 10vh;   margin-bottom : 10vh;    margin-left : 20vw;   margin-right : 20vw;   height : 60vh;   width : 60vw; } .main2{   background-color :rgb(221, 84, 50);   text-align: center;   font-size: 6vmin;   font-weight: 600;   margin-top : 10vh;   margin-bottom : 10vh;    margin-left : 20vw;   margin-right : 20vw;   height : 60vh;   width : 60vw; } 결과
namu
2022.03.17
@namu님이 새 포스트를 작성했습니다.
웹 리액트 8일차
결과 App.js import React, {useState} from 'react';  import Button from './Button.js'; import styles from './Layout.module.css'; function App() {   const [value, setValue] = useState(false); //상태변수의 초기값   //const[상태함수, 상태 값 변수함수]   function onClick(){     setValue(value => !value);   }   return (     <div>       {value==true         ? <div class = {styles.main1}>TRUE에용!</div>         : <div class = {styles.main2}>FALSE에용!</div>       }       <Button onClick = {onClick} text="색바꾸기!"/>     </div>   ); } // ternary operator - (조건) ? (참일 때 실행할 코드) : (거짓일 때 실행할 코드) export default App; Button.js import React from 'react'; import styles from './Layout.module.css'; function Button({text, onClick}){     return <button class = {styles.title} onClick = {onClick}>{text}</button>; } export default Button; Layout.module.css .title {     color: #8aa3b1;     font-weight: 600;     font-size : 5vmin;     width : 20vw;     height : 10vh;     margin-bottom : 10vh;     border-radius : 5%;     border : 1vmin solid rgb(102, 155, 205);     background-color: white;     margin-right : 40vw;     margin-left : 40vw; } .main1{   background-color :rgb(102, 155, 205);   text-align: center;   font-size: 6vmin;   font-weight: 600;   margin-top : 10vh;   margin-bottom : 10vh;    margin-left : 20vw;   margin-right : 20vw;   height : 60vh;   width : 60vw; } .main2{   background-color :rgb(221, 84, 50);   text-align: center;   font-size: 6vmin;   font-weight: 600;   margin-top : 10vh;   margin-bottom : 10vh;    margin-left : 20vw;   margin-right : 20vw;   height : 60vh;   width : 60vw; }
namu
2022.03.16
@namu님이 새 포스트를 작성했습니다.
웹 리액트 7일차
결과 App.js import React, {useState} from 'react';  import Button from './Button.js'; import Layout from './Layout.js'; function App() {   const [value, setValue] = useState(false); //상태변수의 초기값   //const[상태함수, 상태 값 변수함수]   function onClick(){     setValue(value => !value);   }   return (     <Layout>       <Button onClick = {onClick} text="click me !"/>       {value==true&&<div>TRUE</div>}       {value==false&&<div>FALSE</div>}     </Layout>   ); } export default App; App.js (다른 코드 같은 결과 - 삼항연산자 이용) import React, {useState} from 'react';  import Button from './Button.js'; import Layout from './Layout.js'; function App() {   const [value, setValue] = useState(false); //상태변수의 초기값   //const[상태함수, 상태 값 변수함수]   function onClick(){     setValue(value => !value);   }   return (     <Layout>       <Button onClick = {onClick} text="click me !"/>       {value==true         ? <div>TRUE</div>         : <div>FALSE</div>       }     </Layout>   ); } // ternary operator - (조건) ? (참일 때 실행할 코드) : (거짓일 때 실행할 코드) export default App; Button.js import React from 'react'; function Button({text, onClick}){     return <button onClick = {onClick}>{text}</button>; } export default Button; Layout.js import React from "react"; import styles from './Layout.module.css'; function Layout({children}){     return <div className = {styles.main}>{children}</div>; } export default Layout; Layout.module.css .title {     color: #328fc5;     font-weight: 600;     font-size : 5vmin;     width : 6vw;     height : 6vh;     border-radius : 40%;     border : 0.3vmin solid rgb(102, 155, 205);     background-color: white;     margin-right : 0.5vw;     margin-left : 0.5vw; } .main{   color :rgb(102, 155, 205);   text-align: center;   font-size: 6vmin;   font-weight: 600;   margin-top : 10vh;   margin-bottom : 10vh; }
namu
2022.03.12
@namu님이 새 포스트를 작성했습니다.
웹 리액트 6일차
App.js import './App.css'; import youtubeData from './data/youtubeData.json'; function App(){   console.log('영상링크', youtubeData['data'][0]['id']);   console.log('영상제목', youtubeData['data'][0]['title']);   console.log('썸네일', youtubeData['data'][0]['thumbnail']);   console.log('채널 제목', youtubeData['data'][0]['channelTitle']);   console.log('채널 링크', youtubeData['data'][0]['channelUrl']);   console.log('날짜', youtubeData['data'][0]['date']);   console.log('설명', youtubeData['data'][0]['description']);   console.log('조회수', youtubeData['data'][0]['viewCount']);   console.log('좋아요', youtubeData['data'][0]['likeCount']);   console.log('분류', youtubeData['data'][0]['category']);      return <div>bring data by react</div> } export default App; index.js json 데이터 콘솔에 출력하는 오늘 과제와 연관이 있는지는 잘 모르겠다 ㅠㅠ import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(   <React.StrictMode>     <App />   </React.StrictMode>,   document.getElementById('root') ); 파일 구조 결과
namu
2022.03.11
@namu님이 새 포스트를 작성했습니다.
웹 리액트 5일차
결과 App.js import React, {useState} from 'react';  import Button from './Button.js'; import Gugudan from './Gugudan.js'; import Layout from './Layout.js'; function App() {   const [number, setNumber] = useState(1); //상태변수의 초기값   //const[상태함수, 상태 값 변수함수]   function onClick1(){     setNumber(number*2);   }   function onClick2(){     setNumber(number+1);   }   function reset(){     setNumber(0);   }   return (     <Layout>       <Gugudan number = {number}></Gugudan>       <Button onClick = {onClick1} text="*2"/>       <Button onClick = {onClick2} text="+1"/>       <Button onClick = {reset} text = "0"/>     </Layout>   ); } export default App; <Button onClick = {}></>에서 onClick을 onclick으로 적어서 헤맸다 ..ㅠㅠ Button.js import React from 'react'; function Button({text, onClick}){     return <button onClick = {onClick}>{text}</button>; } export default Button; 비구조화 할당 사용 Gugudan.js import React from 'react'; const Gugudan = ({number})=>{     const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];     return (         <div>             {arr.map((n)=>(                 <div>{number}*{n} = {number*n}</div>             ))}             <br></br>         </div>     ); } export default Gugudan; map ? = 리액트에서의 for문 Layout.js import React from "react"; import styles from './Layout.module.css'; function Layout({children}){     return <div className = {styles.main}>{children}</div>; } export default Layout; App.js에서 전체 컨테이너로 <div className ={}></> 대신 <Layout></> 사용 {children} Layout.module.css .main{   color :rgb(102, 155, 205);   text-align: center;   font-size: 6vmin;   font-weight: 600;   margin-top : 10vh;   margin-bottom : 10vh; }
namu
2022.03.10
@namu님이 새 포스트를 작성했습니다.
웹 리액트 4일차
결과 App.js import React, {useState} from 'react';  //useState = State 인지, 값 변경 //React에서 외부모듈 useState Hook 불러오기 import styles from './Hello.module.css'; function App() {   const [number, setNumber] = useState(0); //상태변수의 초기값   //const[상태함수, 상태 값 변수함수]   function plus(){     setNumber(number+1); //값변경   }   function minus(){     setNumber(number-2);   }   function multiply(){     setNumber(number*3);   }   return (     <div className = {styles.main}>       <div>값 : {number}</div>       <button className = {styles.title} onClick={plus}>+1</button>       <button className = {styles.title} onClick={minus}>-2</button>        <button className = {styles.title} onClick={multiply}>x3</button>     </div>   ); } export default App; Hello.module.css .title {     color: #328fc5;     font-weight: 600;     font-size : 3vmin;     width : 6vw;     height : 6vh;     border-radius : 40%;     border : 0.3vmin solid rgb(102, 155, 205);     background-color: white;     margin-right : 0.5vw;     margin-left : 0.5vw; } .main{   color :rgb(102, 155, 205);   text-align: center;   font-size: 10vmin;   font-weight: 600;   margin-top : 30vh;   margin-bottom : 30vh; }
namu
2022.03.08
@namu님이 새 포스트를 작성했습니다.
웹 리액트 2일차
실행 : 맥 터미널 창 2개 사용 (서로 다른 창) (내가 실행에서 막혀서 작성..) //웹에서 리액트 실행 $ cd (file name) $ npm start //코드에디터(vscode)에서 리액트 실행 $ cd (file name) $ code . /* 이미 있는 파일의 경우이고, 처음 리액트 파일을 만들 때는 최초 한 번 한정 아래의 코드를 터미널에 입력해야 함 //최초 1번 (리액트 생성) $ npx create-react-app (file name) 결과 App.js import Hello from './Hello'; function App() {   return (     <div>       <Hello />     </div>   ); } export default App; Hello.js function Hello() {     return <div>         <h1 color="red">youtube!</h1>         <div>             구글의 영상 플랫폼으로 전세계적으로 가장 많이 이용되는 영상 플랫폼이다. <br></br>             2006년에 구글이 인수했다.         </div>     </div>; } export default Hello;