240523 TIL

 

1. 오늘 한 일

 

- 알고리즘 문제 풀기

-  React 숙련 과제 

 

(처음에 경로 잘못 설정해서 다시 처음부터 필요한 패키지 깔고 초기세팅 완료했다)

pages hooks components 폴더까지 만듦 

 

모르는 개념은 찾아가면서 함 . 아직 안 보고 치는 경지까진 안 와서 구글링 or 강의자료 or AI로 개념 물어봄 

 

App.jsx 

import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import "./App.css";
import React from "react";
import Home from "./Pages/Home";
import SubPage from "./Pages/SubPage";
import { createGlobalStyle } from "styled-components";

// 전역 스타일링 - App.jsx에 적어주기
const GlobalStyle = createGlobalStyle`
  body {
    background-color:#CDE8E5;
  }
`;

function App() {
  return (
    <Router>
      <GlobalStyle />
      <nav>
        <Link to="/">Home</Link>
        <Link to="/SubPage">SubPage</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/SubPage" element={<SubPage />} />
      </Routes>
    </Router>
  );
}

export default App;

 

전역 스타일링 - App.jsx에  const [변수선언] = createGlobalStyle`

// 이 안에 css 코드 작성해주면 됨 

` (백틱 써주기)

Home.jsx

import React from "react";
import styled from "styled-components";

const Contain = styled.div`
  width: 100%;
  height: 1080px;
  align-items: center;
  justify-content: center;
`;

const Title = styled.h1`
  font-size: 20px;
  color: #888;
`;

function Home() {
  return (
    <>
      <Contain>
        <Title></Title>
      </Contain>
    </>
  );
}

export default Home;

 

 

SubPage.jsx

import React from "react";
import styled from "styled-components";

const Box = styled.div`
  width: 1000px;
  height: 500px;
  background-color: #f2f2f2;
  display: flex;
  margin: 0 auto;
  border-radius: 15px;
  margin-top: 25px;
`;

function SubPage() {
  return (
    <>
      <Box></Box>
    </>
  );
}

export default SubPage;

 

 

2. 내일의 계획 & 느낀 점

 

- 내일도 쭉 과제할 예정

- 개념정리는 확실히 해서 까먹지 않도록 해야겠다.

- 과제하면서 몰랐던 부분도 많이 알아간다. 

- 파일명은 앞에 대문자로 쓰는 걸 습관 들이는 연습 하기 (경로가 안 맞고 대소문자 구분을 안 해서 오류가 난 경우가

있었음)