리액트 숙련 - [과제] 아티스트 컬렉션 만들기 (6)

새벽로즈·2023년 11월 17일

TIL 과제 내일배움캠프

TIL

목록 보기

48/72

jsx와 js의 차이

jsx는 return 문 아래 JSX가 있는지 유무에 따라 jsx, js 구분함

cotext 브랜치 생성

git checkout -b context 
git push -u origin context

props-drilling 브랜치에서 context 브랜치 생성하고 이동해서. 푸시함

styled.components를 이동

기존에는 styled.components를 상단에 두었는데 재상 튜터님이 그건 좋지 못한 거라 하셔서 두가지 방법을 배웠다.

좋지 않은 이유?
코드를 열었을때 무슨 파일인지 식별하기 어려움

하단에 두기

import styled from "styled-components";
import { Link } from "react-router-dom";

function List({ selectedMember, letters }) {
  //const navigate = useNavigate();
  return (
    <MainList>
      {letters
        .filter(function (letter) {
          if ("전체보기" === selectedMember) {
            return true;
          }
          return letter.writedTo === selectedMember;
        })
        .map(function (item) {
          const color = item.writedTo === "쿠로미" ? "#A1619D" : "#E86F9A";
          return (
            <Link to={`/detail/${item.id}`} key={item.id}>
              <MainBox
                key={item.id}
                //onClick={() => {
                //  navigate(`/detail/${item.id}`, { state: letters });
                //}}
              >
                <ToWho color={color}>To. {item.writedTo}</ToWho>
                <section>
                  <p>
                    <img src={item.avatar} alt="사진" />
                  </p>
                  <NameData>
                    <h3>{item.nickname}</h3>
                    <p>{item.createdAt}</p>
                  </NameData>
                </section>
                <MainText>{item.content}</MainText>
              </MainBox>
            </Link>
          );
        })}
    </MainList>
  );
}

export default List;

const MainBox = styled.div`
  // border: 1px solid #aaa;
  padding: 20px;
  border-radius: 20px;
  box-shadow: 3px 3px 5px #aaa;
  margin: 30px 0;
  position: relative;
  background-color: #f4eef0;

  img {
    width: 80px;
    height: 80px;
  }

  section {
    display: flex;

    align-items: center;

    /*background-color: skyblue;*/
  }
`;

const NameData = styled.div`
  margin-left: 30px;
  font-weight: bold;
`;

const MainText = styled.div`
  margin-top: 20px;
  /* background-color: pink;*/
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  height: 30px;
`;

const MainList = styled.section`
  /*background-color: beige;*/
  margin: auto;
  max-width: 1200px;
  min-width: 800px;
  padding: 40px 0;
  font-size: 22px;
  line-height: 2rem;
`;

const ToWho = styled.p`
  position: absolute;
  right: 20px;
  font-weight: bold;

  color: ${(props) => props.color || "#A1619D"};
`;

새롭게 파일 만들어서 export , import 하기

import styled from "styled-components";
export const FormBox = styled.form`
  max-width: 1200px;
  min-width: 800px;
  margin: auto;
  margin-top: 50px;
  background-color: #d8c6de;
  //border: 1px solid #aaa;
  box-shadow: 3px 3px 5px #aaa;
  font-size: 16px;
  padding: 50px;
  display: flex;
  gap: 20px;
  flex-direction: column;
  border-radius: 10px;
  button {
    border: none;
    font-weight: 500;
    padding: 20px 10px;
    background-color: #f4cad6;
    font-size: 20px;
    border-radius: 8px;
    cursor: pointer;
    &:hover {
      background-color: #fffacd;
    }
  }
`;

export const FormGroup = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;

  select {
    padding: 10px 20px;
    width: calc(100% - 156px);
    border: none;
    font-size: 20px;
    outline: none;
    font-weight: 500;
    font-family: inherit;
    -webkit-appearance: none; /* 화살표 없애기 for chrome*/
    -moz-appearance: none; /* 화살표 없애기 for firefox*/
    appearance: none; /* 화살표 없애기 공통*/
    &::-ms-expand {
      display: none; /*for IE10,11*/
    }
  }

  label {
    padding-right: 20px;
    font-size: 20px;
    font-weight: 600;
  }

  textarea {
    padding: 10px;
    width: calc(100% - 60px);
    height: 66px;
    border: none;
    font-weight: 500;
    &::placeholder {
      color: #ccc;
    }
    font-size: 20px;
  }

  input {
    font-weight: 500;
    padding: 10px;
    width: calc(100% - 60px);
    border: none;
    &::placeholder {
      color: #ccc;
    }
    font-size: 20px;
  }
`;

1) 같은 폴더에 파일명.style.js 만들기
2) 코드 넣기
3) 위에 styled.components import 하기
4) 기존 파일에 import 해주기

import { FormBox, FormGroup } from "./InputForm.style";

그래서 모든 파일 styled.components 정리

모든 파일의 코드를 아래에 배치하거나 따로 export, import를 함

프로그래머를 위한 수학

와, 나는 수포자다.. 수학을 잘.. 모른다.
재상 튜터님께 고민을 말씀드렸더니 프로그래머를 위한 수학도 요즘 나온다고 하셨다.

제일 먼저 소개해주신 것은 '수학리부트'... 800페이지와 1kg가 넘는 수학의 정석 느낌.. 가격도 4만원 넘게 비싸다..

그다음은 '다시 고등수학' 이건 500페이지 조금 넘는데 가격도 착하다.
확률과 통계, 선형대수학, 미분과 적분이 중요하다 하셨다.

다음 추천받은건 '모두의 인공지능 기초 수학' 이건 300페이지 조금 넘고 파이썬이 조금 담겨져 있는데 목차 구성이 괜찮다 하셨다.

와 진짜 수학 과외라도..받아야할 거같다.

Data.js 와 Data.json

[
  {
    "createdAt": "Fri Nov 08 2023 오후 3:45:16",
    "nickname": "별헤는 밤",
    "avatar": "https://raw.githubusercontent.com/allone9425/nbc_fan/56b984e3565f06b12070cc5c468f5a2d97a9b1a5/src/assets/1.svg",
    "content": "별 하나에 추억과 별 하나에 사랑과 별 하나에 쓸쓸함과 별 하나에 동경과 별 하나에 시와 별 하나에 어머니, 어머니.",
    "writedTo": "쿠로미"
  },
  {
    "createdAt": "Wed Nov 05 2023 오전 7:45:16",
    "nickname": "서시",
    "avatar": "https://raw.githubusercontent.com/allone9425/nbc_fan/56b984e3565f06b12070cc5c468f5a2d97a9b1a5/src/assets/2.svg",
    "content": "죽는 날까지 하늘을 우러러 한 점 부끄럼이 없기를, 잎새에 이는 바람에도 나는 괴로워했다. 별을 노래하는 마음으로 모든 죽어가는 것을 사랑해야지",
    "writedTo": "마이멜로디"
  },
  {
    "createdAt": "Sat Nov 08 2023 오후 5:42:22",
    "nickname": "꽃",
    "avatar": "https://raw.githubusercontent.com/allone9425/nbc_fan/56b984e3565f06b12070cc5c468f5a2d97a9b1a5/src/assets/3.svg",
    "content": "내가 그의 이름을 불러주기 전에는 그는 다만 하나의 몸짓에 지나지 않았다. 내가 그의 이름을 불러주었을 때, 그는 나에게로 와서 꽃이 되었다.",
    "writedTo": "마이멜로디"
  },
  {
    "createdAt": "Mon Nov 03 2023 오전 9:43:26",
    "nickname": "풀꽃",
    "avatar": "https://raw.githubusercontent.com/allone9425/nbc_fan/56b984e3565f06b12070cc5c468f5a2d97a9b1a5/src/assets/4.svg",
    "content": "자세히 보아야 예쁘다. 오래 보아야 사랑스럽다. 너도 그렇다.",
    "writedTo": "쿠로미"
  },
  {
    "createdAt": "Thu Nov 13 2023 오후 9:27:36",
    "nickname": "꽃밭",
    "avatar": "https://raw.githubusercontent.com/allone9425/nbc_fan/56b984e3565f06b12070cc5c468f5a2d97a9b1a5/src/assets/5.svg",
    "content": "마음에 사무치면 꽃이 핀다더니 너 때문에 내 마음엔 이미 발 디딜 틈 없는 너만의 꽃밭이 생겼더구나",
    "writedTo": "마이멜로디"
  },
  {
    "createdAt": "Sun Nov 09 2023 오후 6:23:19",
    "nickname": "내가 너를",
    "avatar": "https://raw.githubusercontent.com/allone9425/nbc_fan/56b984e3565f06b12070cc5c468f5a2d97a9b1a5/src/assets/default.svg",
    "content": "너를 좋아하는 마음은 오로지 나의 것이요. 나의 그리움은 나 혼자만의 것으로도 차고 넘치니까.",
    "writedTo": "쿠로미"
  }
]

1) 기존에는 js 였는데 개인과제 노션처럼 json으로 변경했다.
데이터 내에 있는 모든 함수는 제거했다.

  const [letters, setLetters] = useState(
    data.map((aData) => {
      return {
        ...aData,
        id: uuid(),
      };
    })
  );

2) 그리고 Router.js에서 변경해줬다.

다행히 무사히 잘 뜨는 것 같다

context 변경

1. context 폴더를 만들었다
2. LettersContext.js파일을 만들었다
3. 코드를 넣었다. 전체 팬레터 State가 Letters 였다.

import { createContext } from "react";

export const LettersContext = createContext(null);
export const SelectMemberContext = createContext(null);

최상단에 import 한다

import { useState } from "react";
import { LettersContext } from "context/LettersContext";
import { SelectMemberContext } from "context/LettersContext";

☞ 와 LettersContext와 SelectMemberContext는 한줄에 같이 못쓴다. 빨간색 오류가 엄청 떠서 너무 놀랬었다.

해당하는 파일 안에 입력한다

 const { letters } = useContext(LettersContext);

Router.js에서 provider로 감싸 준다.

 <BrowserRouter>
      <LettersContext.Provider
        value={{
          letters,
          setLetters,
        }}
      >
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/detail/:id" element={<Detail />} />
        </Routes>
      </LettersContext.Provider>
    </BrowserRouter>