230524 TIL_개인 프로젝트3 (개인 지출 관리 사이트 제작) > React (keys) > CSS(box-shadow, sweetalert2), 알고리즘(타임어택, split)

개인 프로젝트

프롭스 드릴링 과제 자체 종료 🔔
context API 가 뭔지 까먹은 나를 위해 강의 2회차 하기로... 🥹
바보 같은 나.... 왜 ... 모르겠는데 왜... 바보...
미래의 나를 위해 또 남긴다... 🦕

context API

1. src 폴더 내에 context 폴더 만들기
2. 폴더 안에 @@@@context.js 파일 만들기 (왜 js 파일인지는 모르겠다.. .🧐🧐🧐 api가 다 끝나고 나면 한 번 여쭈러 가야겠다. 일단 나는 jsx로 마만들었음 (ustState 훅 써야 해서ㅠㅠ)

@@@@context.jsx 파일

import { createContext } from "react";

export const ExpenseContext = createContext();

4. 일단 나는 컴포넌트별로 나눈 곳에서 두 컴포넌트에서 사용한다 싶으면 일단 @@@@context.jsx 파일로 이사시켰다. useState 두 개 이사... 초기값과 useState 두 개 이사시킴
   초기 값은 바깥으로 이사해서 createContext(); 상단에 위치

그리고...

@@@@context.jsx 파일

const init = {초기값}
const initialMonth = {초기값2}

export const ExpenseContext = createContext();

export const ExpensesProvider = ({ children }) => {
  const [expenses, setExpenses] = useState(init);
  const [activeIndex, setActiveIndex] = useState(initialMonth);

  return (
    <ExpenseContext.Provider
      value={{ expenses, setExpenses, activeIndex, setActiveIndex }}
    >
      {children}
    </ExpenseContext.Provider>
  );
};

여기서부터 낑낑 거렸다. ^-^... 히히... ExpenseContext를 만들었다. 만들었는데...

그 이후 사용하는 거는 사실 쓰는 곳에다가

5. import & useContext 선언

import { ExpenseContext } from "../context/ExpenseContext";

const { expenses } = useContext(ExpenseContext);

그리고 이제 쓰면 되지 뭐야~~~

의외로 할만 했다 후우...... 휴..ㅜ.ㅜ

CSS

box-shadow

그림자만 넣어도 폼이 입체적으로 보여서 좀 완성도가 올라가는 느낌이다. 앞으로 자주 애용하기로...
2px 2px 2px 2px rgba(98, 134, 115, 0.3);

버튼이나 클릭하는 곳에 쉐도우 넣어 놓고 호버 시에 움직이기로 했다!!!

&:hover {
   box-shadow: 4px 4px 15px 5px rgba(98, 134, 115, 0.3);
   transform: translateY(-0.25rem);
   transition: transform 0.1s ease-in-out;
 }

오오오~ 색은 그냥 대충 아무거나 해도 되는 거 같다.
근데 내가 원하는 흐물텅 느낌이 아니고 살짝 뚝뚝 끊기는 것 같아서 아쉬워서 더 찾아보니 더 있다!!

  &:hover {
    box-shadow: 4px 4px 15px 5px rgba(98, 134, 115, 0.3);
    transform: translateY(-0.25rem);
    transition: transform 0.2s ease-in-out;
  }
  & {
    transform: translateY(0);
    transition: stransform 0.2s ease-in-out;
  }

다른 거 거슬리지 않게, 이동축은 저 정도면 충분한 거 같고, 효과는 초로 조절하면 되는 듯 하다. 호오오~~~

sweetalert2

터미널에서 깔기

yarn add sweetalert2

2. 쓸 곳에 임포트

import Swal from "sweetalert2";

3. 알럿 쓸 곳에 하기

Swal.fire({
        title: "내용을 입력해주세요!",
        text: "각 항목에 맞는 내용을 기입해주세요.",
      });

알고리즘

타임어택~~

문제 1)
snake_case로 구분되어있는 문자열 my_string이 매개변수로 주어질 때, my_string에 나온 단어를 앞에서부터 순서대로 담은 문자열 배열을 return 하는 solution 함수를 작성해 주세요.

? 너무 쉬워서 그 다음 문제 풀려고 보니 문제 1이 끝이었다. 편안하다.

function first(my_string) { return my_string.split("_") }

스플릿에서 언더바만 썼다가 오류 나길래 어 맞다 하고 "_" 로 수정...

[일주일 회고록]

리팩토링 다 끝나고 나서는 다시 한 번 과제를 하려고 한다. 이번 과제는 응용의 한계를 느꼈다!! 차근차근 생각하면 됐을 것 같은데, 뭔가 갑자기 많은 지식을 습득하려다 엥 하고 뱉어낸 거 같아 얼른 내 것으로 만들고 싶다.

수요일 제출.. 오늘은 context API 완성이 목표. 월요일은 리덕스 완성이 목표. 화요일은 처음부터 다시 차근차근 생각하고 이해하면서 n차 해보기
과제 기간에는 12시간 이상씩 코딩하니까 그래도 뭔가 잠깐은 되는구나... 👀

그래도 스탠다드반 강의 + 개인 과제 하면서 스타일 컴포넌츠가 뭔지는 알게 되어 다행이다^^.... (ㅋㅋㅋㅋㅋㅋㅋ 부족한 만큼 CSS 조금 더 열심히 해야지 🦕)

넘 웃겼던 것 : 몰랐는데 갑자기 노트북에서 띵~ 띵 ~ 소리가 들리길래 뭐지... ? 🧐 하고 봤더니 내가 터치 패드를 딸칵딸칵 누르면서 띵띵 하는 소리를 듣고 있었다.....ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 나는 트랙 패드 터치로도 되고 + 꽤나 빠르게 설정해놨는데도 고뇌하다 보니 나도 모르게 꾸욱꾸욱 누르고 있었다 보닼ㅋㅋㅋㅋㅋ 중간에 혼자 웃었네...

고민하는 거, 생각하는 거 필요하지만 너무 과하면 머리가 안 돌아간다~~! 좀 더 편하게 하기로..... 달달 커피랑 같이 당 충전하면서 하기 !!!! ☕️