Today

1. [특강]5분 기록 보드

• TIL과의 다른점
  하루하루 지나쳐 가는 수많은 고민의 흔적을 남김
• 활용 : 추후 비슷한 기록들을 모아 하나로 엮어 정리 가능

2. 정리

이번 협업 프로젝트에서 npm을 사용하기로 했는데 습관적으로
yarn을 사용하게 되면서 저번에 튜터님이 알려주신 내용을 그대로 적용해서 파일의 캐시 정리 완료

• [패키지 매니저] npm / yarn 공존 해결

3. 프로젝트

공용 컴포넌트 만들기

각종 props를 통해 커스텀 후 사용

• button

import React from "react";

interface ButtonProps {
  buttonName: string;
  bgColor?: string;
  textColor?: string;
  paddingY?: string;
  marginY?: string;
  buttonWidth?: string;
  onClick: () => void;
}

const Button = ({ buttonName, bgColor, textColor, paddingY, marginY, buttonWidth, onClick }: ButtonProps) => {
  return (
    <button
      className={`${bgColor ? bgColor : "bg-green"} rounded ${
        textColor ? textColor : "text-white"
      } font-semibold mx-1 ${marginY ? marginY : "my-2"}   ${
        paddingY ? paddingY : "py-1"
      } px-4  hover:bg-white hover:text-green ${buttonWidth ? buttonWidth : null}`}
      onClick={onClick}
    >
      {buttonName}
    </button>
  );
};

export default Button;

• input

"use client";

import React, { useState } from "react";

interface InputProps {
  type: string;
  inputValue: string | number;
  setInputValue: React.Dispatch<React.SetStateAction<string | number>>;
  placeholder: string;
}

const Input: React.FC<InputProps> = ({ type, inputValue, setInputValue, placeholder }) => {
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(event.target.value);
  };
  return (
    <input
      className="bg-transparent border-b-2 text-center p-0.5"
      type={type}
      value={inputValue}
      onChange={handleChange}
      placeholder={placeholder}
    ></input>
  );
};

export default Input;

헤더

헤더 부분은 추후 로그인 기능과 연결을 위해
ui만 그림

---

Learn

5분 기록보드 특강을 들으면서 느낀 점이 있다면,

평소 수많은 고민을 해보고 수많은 콘솔을 찍어보는데 이런 과정들이 그냥 지나쳐 가는게 아쉽다 나중에 분명 잊어버리면 똑같은 고민을 하거나
내가 작성한 Notion, blog 들을 뒤져가며 다시 할텐데 정리 해두는 것도 나쁘지 않겠다.

그만큼 블로그에 정리도 잘 해두어야 겠다.

---

주절주절

내일도 화이팅