mobssie

리액트 공통컴포넌트 체크리스트

Developer Mobssie — Mon, 13 May 2024 07:59:02 +0900

명확한 인터페이스 설계: 컴포넌트의 props는 명확하고 이해하기 쉬워야 합니다.
구조 분해 할당을 사용하면 명확한 인터페이스 설계를 통해 컴포넌트의 사용법을 쉽게 파악할 수 있습니다.
코드의 가독성이 향상되며, 오류의 가능성을 줄일 수 있습니다.

// 좋은 예
const Button = ({ label, onClick }) => (
  <button onClick={onClick}>{label}</button>
);
// 나쁜 예
const Button = (props) => (
  <button onClick={props.handleClick}>{props.text}</button>
);

예를 들어 { label, onClick }을 사용하는 경우, 이 props가 Button 컴포넌트에서 어떻게 사용되는지 바로 알 수 있습니다.
label은 버튼에 표시될 텍스트를 나타내고, onClick은 버튼 클릭 시 실행할 함수를 나타냅니다.
반면, props로 전체를 받아서 사용하는 경우 (props.handleClick, props.text 같이), 이 props들이 구체적으로 어떤 역할을 하는지 파악하기 위해 추가적인 코드 분석이 필요할 수 있습니다.

Props 전달 최소화: 컴포넌트에 전달하는 props는 최소화하여, 각 컴포넌트의 역할과 책임을 명확하게

// 좋은 예
const UserProfile = ({ user }) => (
  <div>
    <Avatar image={user.avatar} />
    <UserName name={user.name} />
  </div>
);


// 나쁜 예
const UserProfile = ({ avatar, name }) => (
  <div>
    <Avatar image={avatar} />
    <UserName name={name} />
  </div>
);

Button 컴포넌트에서는 간단하고 명확한 인터페이스를 유지하는 것이 중요하지만
UserProfile에서는 user 객체와 같이 복합적인 데이터 구조를 효율적으로 다루는 것이 중요합니다.
user 객체를 통째로 넘겨 주어, 나중에 user 객체 내 다른 속성이 필요할 때 추가적인 props 변경 없이 사용할 수 있어야 합니다.

단일 책임 원칙 준수: 각 컴포넌트는 하나의 기능만 수행해야 합니다.
코드의 복잡성을 줄이고, 유지보수를 용이하게 만들며, 시스템의 확장성을 향상시키는 데 기여합니다.

// 좋은 예
const LoginForm = () => (
  <form>
     <UsernameInput />
     <PasswordInput />
     <LoginButton />
  </form> 
);

// 나쁜 예
const LoginForm = () => (
   <form>
     <label>
       Username:
       <input type="text" name="username" />
     </label>
     <label>
       Password:
       <input type="password" name="password" />
     </label>
     <button type="submit">Login</button>
   </form>
);

* 첫번째 예제 : LoginForm 컴포넌트가 오직 로그인 폼을 구성하는 데 집중하고 있고, 'UsernameInput', 'PasswordInput', 'LoginButton'과 같은 하위 컴포넌트를 사용하여 각각의 입력 필드와 로그인 버튼을 독립적으로 관리합니다.

* 두번째 예제 LoginForm 컴포넌트 자체 내에서 모든 요소를 직접 처리합니다. 이 방식은 간단한 폼에서는 작업하기 쉽지만, 각 요소를 수정하거나 확장할 때 전체 폼을 다루어야 하므로 유지보수가 더 복잡해질 수 있습니다.

첫 번째 방식은 각 요소를 독립적으로 관리하고 확장하는 데 더 효과적입니다.

재사용 가능성 고려: 컴포넌트는 재사용 가능하도록 유연하게 설계해야 합니다.

// 좋은 예
const Button = ({ type = 'button', children, ...props }) => (
   <button type={type} {...props}>
     {children}
   </button> 
);

// 나쁜 예
const SubmitButton = () => (
   <button type="submit">Submit</button>
);

SubmitButton 컴포넌트는 오직 'submit' 유형의 버튼으로만 사용되고, 버튼의 내용도 'Submit'으로 고정하면 컴포넌트의 사용 가능성이 크게 제한되며, 다른 컨텍스트나 다른 텍스트를 요구하는 상황에서는 새로운 컴포넌트를 만들어야 합니다.

Button 컴포넌트는 type 속성의 기본값을 'button'으로 설정하고, 다른 값으로 쉽게 변경할 수 있는 기능은 React 컴포넌트에서 프롭스를 활용하여 구현할 수 있습니다. 이는 컴포넌트의 인스턴스를 생성할 때 type 프롭스에 원하는 값을 전달함으로써 가능합니다.
* type은 기본값이 'button'이지만, 'submit', 'reset' 등 다른 값으로 쉽게 변경가능
* children을 사용하여 버튼의 내용을 자유롭게 정의
* props를 통해 className, onClick 같은 이벤트 핸들러나 스타일 등의 속성을 자유롭게 추가가 가능

테스트 가능한 컴포넌트 작성: 컴포넌트는 쉽게 테스트할 수 있도록 작성해야 합니다.

// 좋은 예 (유연한 초기 상태 설정)
export const Counter1 = ({ initialValue = 0 }) => {
  const [count, setCount] = React.useState(initialValue);
   return (
     <div>
       <button onClick={() => setCount(count + 1)}>Increase</button>
       <p>{count}</p>
     </div> 
   );
};

// 나쁜 예 (고정된 초기 상태 설정)
export const Counter2 = () => {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increase</button>
      <p>{count}</p>
    </div>
  );
};

* Counter1 컴포넌트는 initialValue prop을 받아서 초기 상태 값을 설정할 수 있습니다.
이는 테스트 중에 다양한 초기 값으로 컴포넌트를 쉽게 테스트할 수 있게 합니다.

<Counter initialValue={10} />

* Counter2 컴포넌트는 초기 상태 값을 고정적으로 0으로 설정하고 있어, 다른 초기 상태 값을 가지고 테스트를 수행하기 어렵습니다.
개발 과정에서나 다른 상황에서 컴포넌트를 재사용할 때 제한적일 수 있습니다.

의존성 최소화: 컴포넌트는 외부 의존성을 최소화해야 합니다.

// 좋은 예
// 데이터를 가져오는 로직을 포함하지 않기 때문에, 그 자체로는 어떠한 외부 데이터 의존성도 갖지 않습니다.
const UserAvatar = ({ user }) => (
  <img src={user.avatarUrl} alt={user.name} />
);

// 나쁜 예
// userId가 변경될 때마다 데이터를 새로 불러오는 로직을 내부적으로 포함하고 있기 때문에, 
// 컴포넌트의 사용이 그 상황에 맞춰져 있고, 데이터를 가져오는 API의 의존성이 큽니다.
const UserAvatar = ({ userId }) => {
const [user, setUser] = React.useState(null);
  React.useEffect(() => {
    fetchUserById(userId).then(setUser);
  }, [userId]);
  if (!user) return <div>Loading...</div>;
  return <img src={user.avatarUrl} alt={user.name} />;
};

스타일 캡슐화: 컴포넌트의 스타일은 독립적이어야 하며, 외부 스타일의 영향을 받지 않도록 설계합니다.

// 좋은 예 (CSS 클래스를 사용한 스타일링)
const Button = ({ children, variant = 'primary' }) => (
  <button className={`button button-${variant}`}>{children}</button>
);

// 나쁜 예 (인라인 스타일을 사용한 스타일링)
const Button = ({ children }) => (
  <button style={{ backgroundColor: 'blue', color: 'white' }}>{children}</button>
);

첫번째 예시 버튼 컴포넌트는 variant prop을 받아서 이를 기반으로 다양한 스타일을 적용할 수 있습니다.
className은 "button" 과 "button-{variant}"의 조합을 사용합니다.
CSS 파일에 정의된 스타일을 사용하여, 컴포넌트의 스타일이 일관되고, 중복을 피하며, 스타일 변경이 필요할 경우 CSS 파일만 수정하면 되기 때문에 유지보수가 쉽습니다.

두번째 예시 버튼 컴포넌트 인라인 스타일을 사용하여 버튼의 배경색과 텍스트 색상을 직접 지정합니다.
이 방식은 스타일 변경이 빈번하지 않고, 특정 컴포넌트에만 적용되는 간단한 스타일링에 적합할 수 있습니다.
그 상황이 아니라면 인라인 스타일은 스타일 정보를 자바스크립트 파일 내부에 포함시키므로 CSS 캐싱의 이점을 활용할 수 없고,
스타일 변경 시 여러 컴포넌트의 코드를 각각 수정해야 할 수 있습니다.

첫번째 예시인 CSS 클래스를 사용한 스타일링을 적용했을때
styled-components와 같은 CSS-in-JS 라이브러리를 사용하여 스타일을 컴포넌트에 직접 캡슐화합니다.
이 방식은 스타일을 완전히 독립적으로 만들고, props를 통해 동적으로 스타일을 조정할 수 있어 유연합니다.
컴포넌트의 스타일이 외부 CSS의 영향을 받지 않으며, 테마나 상태에 따라 스타일을 쉽게 변경가능합니다.

import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: ${(props) => props.theme.primary};
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px;

  &:hover {
    background-color: ${(props) => props.theme.primaryDark};
  }
`;

const Button = ({ children }) => (
  <StyledButton>{children}</StyledButton>
);

컴포넌트의 상태 관리를 명확히: 상태 관리는 내부적으로 캡슐화하여 컴포넌트 외부에서 쉽게 이해할 수 있도록 해야 합니다.
Toggle 컴포넌트는 자신의 상태를 내부적으로 관리하고 있습니다.
다른 컴포넌트와의 상태 공유나 외부에서의 상태 조작 없이 독립적으로 기능하게 됩니다.

// 좋은 예
const Toggle = () => {
  const [isOn, setIsOn] = React.useState(false);
  const toggle = () => setIsOn(!isOn);
  return <button onClick={toggle}>{isOn ? 'ON' : 'OFF'}</button>;
};

// 나쁜 예
const Toggle = ({ isOn, toggle }) => (
  <button onClick={toggle}>{isOn ? 'ON' : 'OFF'}</button>
);

상태가 공유되어야 하는 상황에서는 이 방식이 비효율적일 수 있는데 아래와 같습니다.

상태 lifting을 적절히 사용

const ParentComponent = () => {
  const [activeTab, setActiveTab] = React.useState(0);
  return (
    <div>
      <Tabs activeTab={activeTab} setActiveTab={setActiveTab} />
      <TabContent activeTab={activeTab} />
    </div>
  );
};

상태 공유: ParentComponent는 activeTab이라는 상태를 가지며, 이를 Tabs 컴포넌트와 TabContent 컴포넌트와 공유합니다. 이 구조는 activeTab 상태가 Tabs 컴포넌트에서 변경되었을 때, 그 변경사항이 TabContent에도 반영됩니다. 상태를 상위 컴포넌트에서 관리함으로써, 상태 관련 로직이 한 곳에 집중하는게 용이해지고, 상태를 필요로 하는 다른 컴포넌트에 쉽게 전달할 수 있습니다.

컴포넌트의 불변성 유지: 컴포넌트의 상태는 불변성을 유지하도록 처리해야 합니다.
불변성을 유지한다는 것은 데이터 구조를 직접 수정하지 않고, 새로운 데이터 구조를 생성하여 갱신하는 것을 의미합니다.

// 좋은 예
const AddItem = ({ items, setItems }) => {
  const [itemName, setItemName] = React.useState("");
  const addItem = () => {
    setItems([...items, itemName]); // 불변성 유지
    setItemName("");
  };
  return (
    <div>
      <input
        value={itemName}
        onChange={(e) => setItemName(e.target.value)}
        type="text"
      />
      <button onClick={addItem}>Add Item</button>
    </div>
  );
};

불변성 유지: addItem 함수에서 items 배열을 직접 변경하지 않고, 새 배열을 생성하여 itemName을 추가합니다. 이는 원래 배열을 복사하고 ([...items]), 새 항목을 배열의 끝에 추가합니다. React가 상태 변경을 감지하고 컴포넌트를 적절하게 재렌더링하도록 합니다.

왜 중요한가?: 불변성을 유지하면 React의 최적화된 상태 관리와 렌더링 메커니즘이 효과적으로 작동합니다. 또한, 미래의 복잡한 버그를 방지하고, 상태의 변경 이력을 추적하기 쉬워집니다.

// 나쁜 예
const AddItem = ({ items, setItems }) => {
  const [itemName, setItemName] = React.useState("");
  const addItem = () => {
    items.push(itemName); // 직접적인 props 변경
    setItems(items); // 문제의 소지가 있음
    setItemName("");
  };
  return (
    <div>
      <input
        value={itemName}
        onChange={(e) => setItemName(e.target.value)}
        type="text"
      />
      <button onClick={addItem}>Add Item</button>
    </div>
  );
};

불변성 위반: 이 예에서 items.push(itemName)는 기존 items 배열에 직접 아이템을 추가합니다. 이러한 방식은 items 배열의 원본을 변경하기 때문에 React가 상태의 변경을 제대로 감지하지 못할 수 있습니다.
왜냐하면 배열 객체의 참조가 변경되지 않았기 때문입니다. 결과적으로, 이로 인해 UI가 제대로 업데이트되지 않을 수 있습니다.

컴포넌트의 사이드 이펙트 제어: 사이드 이펙트는 useEffect 등을 통해 관리해야 합니다.
useEffect를 사용하여 사이드 이펙트를 제어하는 것은 컴포넌트의 생명주기에 따른 작업을 정리하고, 리소스의 낭비를 방지하는 데 중요

// 좋은 예 (useEffect를 통한 사이드 이펙트 제어)
const Timer = () => {
  const [time, setTime] = React.useState(0);
  React.useEffect(() => {
    const timerId = setInterval(() => setTime(time + 1), 1000);
    return () => clearInterval(timerId);
    // clearInterval을 호출함으로써 컴포넌트가 언마운트 되거나 업데이트 되기 전에 타이머를 정확히 제거
  }, [time]);
  //  [time]에 time을 넣어주어서, time이 변할 때마다 이펙트가 다시 실행
  
  return <div>{time} seconds</div>;
};

// 나쁜 예 (제어되지 않은 사이드 이펙트)
const Timer = () => {
  const [time, setTime] = React.useState(0);
  setInterval(() => setTime(time + 1), 1000);  // Uncontrolled side effect
  return <div>{time} seconds</div>;
};

setInterval이 useEffect 내부에서 관리되지 않기 때문에, 컴포넌트가 언마운트된 후에도 인터벌이 계속 실행될 수 있습니다.
이는 메모리 누수를 유발하고 애플리케이션의 성능을 저하시킬 수 있습니다.

컴포넌트가 표현하는 데이터의 타입 체크하기: 타입 체크를 통해 컴포넌트에 전달되는 데이터가 올바른 형태인지 검증

interface User {
  name: string;
  age: number;
}

interface UserProfileProps {
  user: User;
}

const UserProfile: React.FC<UserProfileProps> = ({ user }) => {
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.age} years old</p>
    </div>
  );
};

효율적 상태 관리: 상태가 필요한 경우, 최소한으로 유지하고 가능하다면 계산된 상태를 사용합니다.
React에서는 상태 관리를 위해 useState 또는 다른 상태 관리 훅(useReducer, useContext 등)을 사용하는 것이 필수입니다.
상태의 변화가 UI에 자동으로 반영되도록 하고, 상태 변화를 효과적으로 관리됩니다.

useState를 사용하여 count 상태를 관리하면 상태가 업데이트될 때마다 컴포넌트가 자동으로 리렌더링되도록 보장됩니다.
컴포넌트의 initialValue prop을 통해 초기 카운트 값을 설정하면 재사용성을 높이고, 다양한 초기 상태를 갖는 카운터를 쉽게 구현 됩니다.

// 좋은 예 (올바른 상태 관리)
const Counter = ({ initialValue }) => {
  const [count, setCount] = React.useState(initialValue);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increase</button>
      <p>Count: {count}</p>
    </div>
  );
};

// 나쁜 예 (부적절한 상태 관리)
const Counter = () => {
  let count = 0; // This is not reactive and not recommended in React
  const increase = () => {
    count++;
    console.log(count); // This will not trigger a re-render
  };
  return (
    <div>
      <button onClick={increase}>Increase</button>
      <p>Count: {count}</p>
    </div>
  );
};

count++가 실행되어도 React는 이를 감지하지 못하며, 따라서 값이 변경되어도 컴포넌트가 리렌더링되지 않습니다.
count 값이 변경되더라도, 그 변경 사항이 UI에 반영되지 않습니다.

데이터 플로우를 명확히 하고 단방향으로 유지: 데이터는 항상 상위에서 하위 컴포넌트로 흐르도록 설계

// ParentComponent
const ParentComponent = () => {
  const [message, setMessage] = React.useState("Initial message");

  const changeMessage = () => {
    setMessage("Message updated by child");
  };

  return (
    <div>
      <h1>{message}</h1>
      <ChildComponent onChangeMessage={changeMessage} />
    </div>
  );
};

// ChildComponent
// 자식 컴포넌트는 부모 컴포넌트로부터 함수를 prop으로 받아, 해당 함수를 통해 부모 컴포넌트의 상태를 변경
const ChildComponent = ({ onChangeMessage }) => {
  return (
    <button onClick={onChangeMessage}>Change Message</button>
  );
};

모든 상태 변경 로직이 부모 컴포넌트에 있어서 자식 컴포넌트는 독립적이고 예측 가능한 동작을 유지할 수 있습니다.

// 나쁜 예
// ChildComponent
// 자식 컴포넌트가 자체적으로 상태를 변경하려고 하면 단방향 데이터 플로우 원칙에 어긋
const ChildComponent = ({ message, setMessage }) => {
  const localChangeMessage = () => {
    setMessage("Message updated by child");
  };

  return (
    <button onClick={localChangeMessage}>Change Message</button>
  );
};.

모든 상태 변경이 부모 컴포넌트를 통해 이루어져야 하며, 자식 컴포넌트는 상태를 직접 변경하지 않는다는 단방향 데이터 플로우의 원칙따라야 합니다. 데이터 흐름을 명확하게 하고, 상태 관리를 더 쉽게 할 수 있도록 도와줍니다.

CloudFront와 EC2의 비용 차이

Developer Mobssie — Fri, 19 Apr 2024 11:08:54 +0900

CloudFront와 EC2의 비용 차이 사용 사례, 구성, 소비되는 트래픽 양이나 리소스에 따라 다르다

Amazon CloudFront

장점: CloudFront는 CDN(Content Delivery Network) 서비스로서, 전 세계에 분산된 엣지 로케이션을 통해 사용자에게 빠르게 콘텐츠를 제공합니다. 사용자가 여러 지역에 걸쳐 있을 경우, 응답 속도가 빠른 장점

콘텐츠 전송 네트워크(CDN)로, 정적 파일을 전 세계 다양한 지역에 위치한 엣지 로케이션에서 빠르게 제공합니다. CloudFront는 주로 데이터 전송량과 HTTP 요청 수에 기반하여 요금이 청구되며, 이는 대량의 데이터를 처리할 때 특히 비용 효율적일 수 있습니다. 예를 들어, CloudFront는 S3 버킷과의 데이터 전송료를 부과하지 않으며, 데이터를 전세계 사용자에게 빠르게 배포할 수 있어 응답 속도가 빨라

* 데이터 전송량과 요청 수에 기반한 요금이 청구

* CloudFront는 캐싱 서비스로 CDN을 제공

* 비용은 데이터 전송, 요청 수, 함수 실행 횟수 등에 따라 달라짐

Amazon EC2

장점: EC2는 가상 서버를 제공하므로, 서버 측 로직을 실행하거나 데이터베이스와 같은 다른 서비스와 상호작용이 필요한 동적 웹 애플리케이션에 적합합니다. EC2 인스턴스에서는 Node.js, Python, Ruby 등 다양한 백엔드 애플리케이션을 실행

서버 인스턴스를 제공하며, 이 인스턴스에서는 동적 웹 애플리케이션을 호스팅할 수 있습니다. EC2의 비용은 주로 인스턴스 유형, 운영 시간, 추가 네트워크 사용량 등에 따라 결정됩니다. EC2는 특히 사용자 정의가 필요하거나 서버 사이드 처리가 중요한 동적 콘텐츠를 다룰 때 유용

* 컴퓨팅 용량에 따라 시간 또는 초 단위로 요금이 청구

* 가상 서버를 제공

* 인스턴스 유형, 운영 시간, 추가적인 스토리지 사용 등에 따라 비용이 달라

* 온디맨드 인스턴스, 예약 인스턴스, 스팟 인스턴스 등 다양한 요금제를 선택

json 응답값 표로 쉽게 정리하기

Developer Mobssie — Fri, 12 Apr 2024 11:05:32 +0900

JSON 데이터 복사

코드

// 예제 JSON 데이터
const jsonData = {
    item_id: 6520,
    model_no: "DD1391-100",
    category_name: "신발",
    release_date_info: {
        release_date: "2021-04-02 10:30:00",
        release_date_type_text: "출시일"
    },
    product_info: {
        name_kor: "나이키 덩크 로우 레트로 화이트 블랙",
        colors: "블랙",
        details: {
            material: "leather",
            sizes: [7, 8, 9, 10]
        }
    }
};

let fields = [];

function extractFields(obj, depth = 1) {
    for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
            const currentDepth = "Depth" + depth;
            fields.push({ [currentDepth]: key });

            if (typeof obj[key] === 'object' && obj[key] !== null && !Array.isArray(obj[key])) {
                extractFields(obj[key], depth + 1);
            }
        }
    }
}

extractFields(jsonData);
console.table(fields);

결과

NPM 배포하기 - ESLINT

Developer Mobssie — Fri, 5 Apr 2024 22:21:22 +0900

1. NPM 사이트에 회원가입하기

먼저, NPM의 공식 웹사이트에 접속해 회원가입을 합니다. NPM 계정이 있어야만 패키지를 배포할 수 있습니다.

2. GitHub에서 리포지토리 생성하기

코드를 관리할 GitHub 리포지토리를 생성합니다. 리포지토리 이름은 배포할 NPM 패키지의 이름과 일치시키는 것이 좋습니다.

3. 리포지토리를 로컬에 클론하기

생성한 리포지토리를 로컬 컴퓨터에 클론합니다. 터미널에서 다음 명령어를 입력하세요:]]

git clone <클론할 리포지토리 주소>

4. package.json 파일 생성하기

클론한 리포지토리 폴더로 이동한 뒤, 아래 명령어를 실행하여 package.json 파일을 생성합니다. 이 파일은 패키지의 메타데이터를 담고 있으며, 프로젝트의 심장과도 같은 역할을 합니다.

$ npm init -y
// 또는
$ npm init --scope=<조직-이름>

--scope 옵션으로 패키지 이름 앞에 조직 이름을 붙일 수 있습니다.

예를 들어 npm 패키지 설치 시 다음과 같은 명령어로 설치 가능합니다.
$ npm install @<조직 이름>/<패키지 이름>

5. 배포할 코드 작성하기

루트 디렉토리에 index.js 파일을 만들고, 배포할 코드를 작성합니다. 예를 들어, ESLint 규칙을 정의한 모듈을 배포한다면 다음과 같이 작성할 수 있습니다:

// ESLint 규칙 추가를 위한 설정 
module.exports = {
	rules: { 
    	'no-console': 'off'
    } 
}

6. NPM에 로그인하기

NPM에 패키지를 배포하기 전에 먼저 NPM 계정으로 로그인해야 합니다. 터미널에서 다음 명령어를 입력하세요:

npm login

아이디와 비밀번호를 입력하면 로그인이 완료됩니다.

7. 패키지 배포하기

모든 준비가 끝났다면, 이제 패키지를 배포할 차례입니다. 다음 명령어로 배포를 진행하세요:

npm publish

배포가 성공적으로 완료되면, NPM 사이트에서 로그인한 뒤, 내가 올린 패키지를 확인할 수 있습니다.

ESLINT (https://eslint.org/docs/latest/use/getting-started)

1. eslint 를 글로벌로 설치

npm install -g eslint

2. 프로젝트 내에서 설치

ESLint 설정 파일(.eslintrc 또는 package.json 내의 eslintConfig 섹션)을 자동으로 생성

eslint --init

다른프로젝트에 적용하기

yarn add @<조직 이름>/<패키지 이름>

yarn add @purejjr/eslint-config --dev -W

ESLint 동작 방식

nodemon

Developer Mobssie — Wed, 3 Apr 2024 22:11:35 +0900

Nodemon이란?

Nodemon은 Node.js 애플리케이션의 개발을 조금 더 발랄하게 만들어주는 유틸리티입니다. 코드에 변경이 생기면, 자동으로 애플리케이션을 재시작해줍니다.

설치 방법

npm install -g nodemon

프로젝트의 개발 의존성으로만 추가하고 싶다면(프로젝트 개발 시에만 사용하고 실제 운영 환경(production)에서는 사용X):

npm install --save-dev nodemon

예시 사용법

nodemon app.js

app.js는 메인 애플리케이션 파일입니다. 이제 Nodemon이 코드 변경을 감지하고, 애플리케이션을 자동으로 재시작해줍니다.

node cors 해결하기

Developer Mobssie — Sat, 23 Mar 2024 14:18:30 +0900

npm https://www.npmjs.com/package/cors

cors

Node.js CORS middleware. Latest version: 2.8.5, last published: 5 years ago. Start using cors in your project by running `npm i cors`. There are 14357 other projects in the npm registry using cors.

www.npmjs.com

cors 패키지를 설치해서 해결가능

npm i cors

미들웨어를 추가

const cors = require('cors')
app.use(cors())

옵션 설정하기

특정 도메인만 허용하거나, 특정 HTTP 메서드만 허용하는 등의 세밀한 제어가 필요할 때는 cors 미들웨어의 옵션을 설정할 수 있습니다.

const corsOptions = {
  origin: 'https://example.com',
  optionsSuccessStatus: 200 // 일부 구형 브라우저를 위한 옵션
}

app.use(cors(corsOptions));

https://example.com 도메인에서 오는 요청만 허용합니다.

특정 경로에 대해 CORS 설정

전체 앱이 아닌 특정 경로에 대해서만 CORS를 설정하고 싶을 때는, 해당 경로에 cors 미들웨어를 적용할 수 있습니다.

app.get('/products/:id', cors(), function (req, res, next) {
  res.json({msg: '이 경로는 CORS를 허용합니다!'});
})

node로 API 만들기 (express)

Developer Mobssie — Sat, 23 Mar 2024 13:12:29 +0900

node express

https://www.npmjs.com/package/express

npm init
npm i express
node app.js

node app.js로 실행이 되는지 확인

body parsing하기

app.use(express.json())
app.use(express.urlencoded({ extended: true }))

let id = 2;
const todoList = [{
  id: 1,
  test: '할일',
  done: false
}];

app.get('/api/todo', (req, res) => {
  res.json(todoList)
})

app.post('/api/todo', (req, res) => {
  const { test, done } = req.body;
  todoList.push({
    id: id++,
    test,
    done,
  });
  return res.send('success')
})

app.listen(3000, () => {
  console.log('server');
})

서버를 껏다가 다시 켜서 http://localhost:3000/api/todo에서 확인

[{"id":1,"test":"할일","done":false}]

POSTMAN으로도 잘 동작하는지 확인

[ETC] AWS EC2_콘솔에 로그인하기

Developer Mobssie — Thu, 8 Feb 2024 09:47:41 +0900

루트 사용자

AWS 루트 사용자는 회원가입 시 만든 계정으로서 모든 AWS 권한을 갖고 있는 사용자
이 계정은 탈취당할 시 복구가 매우 어려울 뿐만 아니라, 최근에는 해커들이 비트코인 채굴에 AWS 계정을 착취하여 사용하기 때문에 상상을 초월하는 과금폭탄을 맞을 수 있다

IAM 사용자 (Identity and Access Management)

AWS 관리를 제외한 서비스 관리용 계정
IAM은 지역별(region) 서비스가 아닌 글로벌 서비스
IAM 사용자는 IAM을 통해 생성한 사용자로 루트 사용자로부터 권한을 부여받은 서비스만 관리가 가능

먼저 지역설정하기 지역을 설정해야 인스턴스에 접근했을때 응답이 빠르다.

먼저 지역설정합니다.

이유는 지역을 설정해야 인스턴스에 접근했을때 응답이 빠르기때문이죠.

서비스에서 EC2검색합니다.

인스턴스 > 인스턴스로 들어갑니다. 아직 인스턴스가 없기때문에 없다고 뜹니다.

인스턴스 시작을 누르고 Quick Start에서 Amazon Linux를 사용해볼께요.

t2.micro 프리 티어 사용가능은 체험판 인스턴스라고 할수있습니다.

최소 8 로 사용해야하고 연습용이기 때문에 범용 SSD볼륨인 gp2를 선택하겠습니다. [관련내용]

Invalid hook call

Developer Mobssie — Tue, 25 Apr 2023 16:49:42 +0900

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

useEffect(()=> {
  const checkedItems = checkboxRefs.reduce<TCart[]>((res, ref, i)=> {
    if(ref.current!.checked) res.push(items[i])
    return res
  }, [])
  setCheckedCartState(checkedItems)
}, [items, formData])

=> Hook의 규칙을 어기고 useEffect의 위치를 잘못 넣어서 나는 오타 에러.

PWA - 서비스 워커 웹 캐싱(service worker)

Developer Mobssie — Tue, 25 Apr 2023 16:39:44 +0900

* 서비스워커는 백그라운드에서 실행하는 스크립트

* 클라이언트에 설치되는 프록시 => Request를 가로채 Proxy Server와 비슷하게 동작

브라우저 백그라운드에서 네트워크를 가로채는 Thread

웹 캐싱은 CacheStorage를 사용.
Sqlite 같은 클라이언트 데이터베이스인데, Key:value 로 구성된 데이터베이스

ServiceWorker 적용 전 알아두어야할 점은 서비스워커는 보안상의 이유로 HTTPS에서만 실행

사용방법

public폴더(index.html이 있는)에 생성

메인 script파일에 다음과 같이 service-worker를 불러오는 구문을 추가

// navigator (브라우저)에 serviceWorker 기능이 있는지 확인
if ("serviceWorker" in navigator) {
  // 서비스워커 설치시 DOM 블로킹을 막아준다.
  window.addEventListener("load", function () {
    // 서비스워커를 register 하면 promise를 반환한다.
    navigator.serviceWorker
      .register("/sw.js")
      .then(() => {
        console.log("서비스 워커가 등록되었다.");
      })
      .catch((error) => {
        console.log(error);
      });
  });
}

// service-worker.js

var PRE_CACHE_NAME = "캐시-스토리지1";
// 캐시하고 싶은 리소스
var urlsToCache = [
  "/public/image/image1.png",
  "/public/css/font-awesome.min.css",
];

// 서비스워커가 설치될 때
self.addEventListener("install", (event) => {
  // 캐시 등록 이벤트가 끝날 때까지 기다려
  event.waitUntil(
    // '캐시-스토리지1'을 연다.
    // @return {Promise} 연결된 Cache Database를 반환한다.
    caches
      .open(PRE_CACHE_NAME)
      .then((cache) => {
        console.log("캐시 디비와 연결됨");
        // addAll 메소드로 내가 캐싱할 리소스를 다 넣어주자.
        return cache.addAll(urlsToCache);
      })
      .then(() => {
        // 설치 후에 바로 활성화 단계로 들어갈 수 있게 해준다.
        return self.skipWaiting();
      })
  );
});

오래된 캐시 삭제

// 서비스 워커가 활성화 될 때
self.addEventListener("activate", (event) => {
  // 영구적으로 가져갈 캐시 스트리지 화이트리스트
  var cacheWhiteList = [PRE_CACHE_NAME, DYNAMIC_CACHE_NAME];

  event.waitUntil(
    // 캐시 스토리지의 모든 스토리지명을 가져온다.
    caches.keys().then((cacheNames) => {
      // 캐시를 삭제하는 건 Promise를 반환하므로 Promise.all을 사용해 끝날 시점을 잡아야한다.
      return Promise.all(
        // 이 결과는 [Promise, Promise...] 형태가 되시겠다.
        cacheNames.map((cacheName) => {
          // 각각의 캐시 스토리지명이 화이트 리스트와 같지 않을 경우
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            // 캐시를 삭제하는 Promise를 배열에 추가한다.
            return caches.delete(cacheName);
          }
        })
      );
    })
  );

  // activate 시에는 clients claim 메소드를 호출해서
  // 브라우저에 대한 제어권을 가져와야한다.
  return self.clients.claim();
});

결과적으로 DYNAMIC_CACHE_NAME이 아닌 캐시 스토리지는 삭제된다.

GraphQLError: Syntax Error: Expected Name, found "$"

Developer Mobssie — Sun, 1 Jan 2023 22:27:57 +0900

GraphQLError: Syntax Error: Expected Name, found "$"

export const UPDATE_CART = gql`
  mutation UPDATE_CART($id: id, $amount: amount) {
    id
    imageUrl
    price
    title
    amount
  }
`

* $표기를 안붙여서 나는 에러

($episode: Episode)변수 정의

https://graphql.org/learn/queries/#variables

스택이용해 배열 거꾸로 출력하기

Developer Mobssie — Mon, 24 Oct 2022 19:13:50 +0900

function solution(num_list) {
    const answer = [];
    while(num_list.length){
       answer.push(num_list.pop())     
    }
    return answer;
}

[leetcode] 20. Valid Parentheses

Developer Mobssie — Mon, 24 Oct 2022 18:56:47 +0900

function isValid(s) {
    let stack =[];
    let obj = {
        '(': ')',
        '[': ']',
        '{': '}'
    }
    for(let i = 0; i < s.length; i++){
        if(s[i] === '(' || s[i] === '{' || s[i] === '['){
            stack.push(s[i]);
        } else {
            let peek = stack.pop();
            if(s[i] !== obj[peek]){
                return false
            }
        }
    }
    return !stack.length;
}

https://leetcode.com/problems/valid-parentheses/submissions/

[vue] Property 'props' does not exist on type '{}' (ts 2339)

Developer Mobssie — Mon, 24 Oct 2022 17:05:26 +0900

TypeScript가 구성 요소 옵션 내에서 유형을 올바르게 추론할 수 있도록 하려면 defineComponent()사용하여 구성 요소를 정의해야한다.

import { defineComponent } from '@vue/composition-api';
export default defineComponent({
  name: 'ColorList',
  props: {
    colorInfo: { type: Array, default: ()=> [] },
  },
});

공식문서 참고 : https://vuejs.org/guide/typescript/overview.html#definecomponent

[프로그래머스] 분수의 덧셈

Developer Mobssie — Wed, 19 Oct 2022 16:47:25 +0900

[프로그래머스] 분수의 덧셈

function solution(denum1, num1, denum2, num2) {
    let answer = [];
    let denum = denum1 * num2 + num1 * denum2; // 분자
    let num = num1 * num2; // 분모
    
    function getGcd(a, b) {
        while ( b !== 0) {
            n = a % b;
            a = b;
            b = n;
        }
        return a;
    }
    const calcGcd = getGcd(denum, num); // 분자와 분모의 최대공약수
    return [denum, num].map(v => v/calcGcd);
}

최대공약수를 사용해서 분자와 분모의 초대공약수를 구해서 나눠 리턴한다.

최대공약수 구하는 방법은 이전 블로그 내용을 참고.

https://developer-mobssie.tistory.com/96

[js] 최대 공약수, 최소공배수 구하기 (feat. 유클리드 호제법)

Developer Mobssie — Wed, 19 Oct 2022 15:54:45 +0900

공약수는 두 개 이상의 자연수의 공통된 약수이고, 공약수 중에서 가장 큰 공약수를 바로 최대공약수라 하고,

두 수의 공약수가 1밖에 없을 때 이 두 수를 서로소라고 한다.

12와 18의 최대공약수는?
12의 약수: 1, 2, 3, 4, 6, 12
18의 약수: 1, 2, 3, 6, 9, 18

두 수의 공약수는 1, 2, 3, 6이고 이 중 가장 큰 공약수, 최대공약수가 6

유클리드 호제법을 이용한 풀이

- a, b 를 서로 나눌때, 나누어진다면 b가 최대 공약수 이다. (a>b)

- 만약 a,b가 나누어지지 않으면 b와 a를 b로 나눈 나머지를 다시 나눈다

- 서로가 나누어지면 a%b 가 최대공약수이다. 나누어지지 않는다면 위처럼 b와 a를 b를 나눈 나머지를 다시 나눈다.

const solutuon = (n, m) => {
  const gcd = (a, b) => {
    if (b === 0) return a; // 나누어지면 a 리턴
    return gcd(b, a % b); // 나누어지지 않는다면 b와 a%b를 다시 나눈다
  };
  const lcm = (a, b) => (a * b) / gcd(a, b); // 두 수의 곱을 최대공약수로 나눈다.
  return console.log(
    `최대 공약수는? ${gcd(n, m)}, 최대 공배수는? ${lcm(n, m)}`
  );
};
console.log(solutuon(6, 12));

또는

let N = 24, M = 18;

function getGcd(a, b) {
  while (b !== 0) {
    n = a % b;
    a = b;
    b = n;
  }
  return a;
}

let gcd = getGcd(N, M); //최대공약수
let gcf = (N * M) / gcd; //최소공배수

유클리드 호제법(- 互除法, Euclidean Algorithm)은 2개의 자연수 또는 정식(整式)의 최대공약수(Greatest Common Divisor)를 구하는 알고리즘의 하나이다.

호제법이란 말은 두 수가 서로(互) 상대방 수를 나누어(除)서 결국 원하는 수를 얻는 알고리즘을 나타낸다.

2개의 자연수(또는 정식) a, b에 대해서 a를 b로 나눈 나머지를 r이라 하면(단, a>b), a와 b의 최대공약수는 b와 r의 최대공약수와 같다.
이 성질에 따라, b를 r로 나눈 나머지 r'를 구하고, 다시 r을 r'로 나눈 나머지를 구하는 과정을 반복하여 나머지가 0이 되었을 때 나누는 수가 a와 b의 최대공약수이다.

이는 명시적으로 기술된 가장 오래된 알고리즘으로서도 알려져 있으며, 기원전 300년경에 쓰인 유클리드의 《원론》 제7권, 명제 1부터 3까지에 해당한다.

- 위키백과, 우리 모두의 백과사전.

약수 구하기 (배열)

function solution(num) {
	const arr = [];
    for(let i = 2; i < num; i++){
    	if(num % i === 0) {
        	arr.push(i)
        }
    }
    return arr;
}


console.log(solution(28));

배수 구하기 (배열)

function solution(num){
	let arr = [];
	for(let i = 0; i <= 1000; i++) {
    	if(i % num === 0 && i !== 0){
        	arr.push(i)
        }
    }
    return arr;
}

console.log(solution(50))

[node] node 삭제 및 nvm이용해 node 설치하기(feat. brew)

Developer Mobssie — Fri, 14 Oct 2022 15:21:58 +0900

여러가지 노드버전을 사용해야하는경우

기존 노드 삭제후 설치할것!!

https://velog.io/@minidoo/Node-mac%EC%97%90%EC%84%9C-Node.js-%EC%99%84%EC%A0%84%ED%9E%88-%EC%82%AD%EC%A0%9C%ED%95%98%EA%B8%B0

홈브로우 설치(https://brew.sh/index_ko.html)

* brew 여부 체크

$ which brew

Homebrew가 설치되어있지 않다면 brew not found가 출력된다.

설치되어있다면, 다음 명령어로 기존 Homebrew를 삭제

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/uninstall.sh)"

brew를 실행했을 때 command not found 에러가 나면 잘 삭제된 것

간혹 삭제해도 brew 명령어가 남아있거나, Homebrew가 서로 다른 경로에 여러 벌 설치되는 경우가 있는데,

brew가 실행되지 않을 때까지 uninstall을 반복하면 된다고 한다.

설치후 실행

$ echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/<USER_ID>/.zprofile
$ eval "$(/opt/homebrew/bin/brew shellenv)"

$ which brew
/opt/homebrew/bin/brew

$ brew --version
Homebrew 3.6.5
Homebrew/homebrew-core (git revision b3db74ae86e; last commit 2022-10-14)

* 설치

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

* 브로우를 이용해 nvm 설치 시작

$ brew install nvm

* 환경 셋팅

# zsh 은 둘 중에 하나만 사용해도 된다.
$ vim ~/.zshenv 
$ vim ~/.zprofile 

# bash
$ vim ~/.bash_profile

* Edit, i 를 눌러 insert해서 아래 내용을 zsh, bash안에 넣기

export NVM_DIR="$HOME/.nvm"
[ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && \. "/opt/homebrew/opt/nvm/nvm.sh"  # This loads nvm
[ -s "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm" ] && \. "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm"  # This loads nvm bash_completion

상단 내용을 넣고 ESC + wq!

# zsh 
$ source ~/.zshenv 
$ source ~/.zprofile 

# bash
$ source ~/.bash_profile

source로 환경 변수를 적용 시킨다.

$ nvm -v

버전확인해 설치가 잘 되었는지 확인해 보고 원하는 node 버전을 설치한다.

$ nvm install 16.0.0

사용시

$ nvm ls
$ nvm use 16.0.0

참조, https://www.lainyzine.com/ko/article/how-to-install-homebrew-for-m1-apple-silicon/

순열

Developer Mobssie — Sat, 17 Sep 2022 11:08:23 +0900

순열이란, 서로 다른 N개 중에서 R개를 선택하는 경우 (순서 중요 )

swap을 이용한 순열 만들기

/**
 *
 * @param {array} array
 * @param {number} deep
 * @param {number} target
 */
const permutation = (array, res = [], target = array.length, deep = 0) => {
	if (deep === target) {
		res.push(array.slice(0, target));
		return;
	}
	for (let index = deep; index < array.length; index++) {
		swap(array, deep, index);
		permutation(array, res, target, deep + 1);
		swap(array, deep, index);
	}
};

const swap = (array, a, b) => {
	let tmp = array[a];
	array[a] = array[b];
	array[b] = tmp;
};

const getPermutationList = (array, target) => {
	let res = [];
	permutation(array, res, target);
	return res;
};

const array = Array(3)
	.fill()
	.map((_, i) => i + 1);
console.log(getPermutationList(array));

/* --------------------------------------------------
[ 1, 2, 3 ]
[ 1, 3, 2 ]
[ 2, 1, 3 ]
[ 2, 3, 1 ]
[ 3, 2, 1 ]
[ 3, 1, 2 ]
*/

CI/CD

Developer Mobssie — Thu, 15 Sep 2022 19:54:07 +0900

CI/CD

CI는 빌드/테스트 자동화 과정

CD는 간단히 말하면 배포 자동화 과정

[프로그래머스] 성격 유형 검사하기

Developer Mobssie — Fri, 19 Aug 2022 15:28:46 +0900

잇몸으로 윽깬 나의 코드

function solution(survey, choices){
    let answer = ''
    let selectType = ''
    let score = [0, 3, 2, 1, 0, 1, 2, 3]
    let surveyType = ['RT','CF','JM','AN']
    let surveyList = surveyType.join('').split('')
    let surveyMap = new Map()
    
    for(let i = 0; i < surveyList.length; i++){
        surveyMap.set(surveyList[i], 0)
    }
    for(let i = 0; i < survey.length; i++){
        if(choices[i] > 4) selectType = survey[i].charAt(1)
        else if(choices[i] < 4) selectType = survey[i].charAt(0)
        surveyMap.set(selectType, surveyMap.get(selectType) + score[choices[i]])
    }
    
    answer = surveyType.map(v => {
        const keys = v.split('')
        return (surveyMap.get(keys[0]) || 0) >= (surveyMap.get(keys[1]) || 0) ? keys[0] : keys[1]
    })
    
    return answer.join('');
}
const survey = ['AN', 'CF', 'MJ', 'RT', 'NA']
const choices = [5, 3, 2, 7, 5]
solution(survey, choices)

참조하고 수정한 다른 코드

function solution(survey, choices){
    let answer = ''
    let surveyType = ['RT','CF','JM','AN']
    let surveyList = surveyType.join('').split('')
    
    var surveyMap = new Map()
    for(let i = 0; i < surveyList.length; i++){
        surveyMap.set(surveyList[i], 0)
    }
    choices.forEach((score, i) => {
        let [A, B] = survey[i].split('');
        if(score > 4) surveyMap.set(B, surveyMap.get(B)+score-4);
        else if(score < 4) surveyMap.set(A, surveyMap.get(A)+4-score);
    })
    answer = surveyType.map(v => {
        const keys = v.split('')
        return (surveyMap.get(keys[0]) || 0) >= (surveyMap.get(keys[1]) || 0) ? keys[0] : keys[1]
    })
    
    return answer.join('');
}
const survey = ['AN', 'CF', 'MJ', 'RT', 'NA']
const choices = [5, 3, 2, 7, 5]
solution(survey, choices)

ES2022 (ES13) Class Fields 변경된 내용

Developer Mobssie — Fri, 19 Aug 2022 12:11:47 +0900

Class Public Instance Fields & Private Instance Fields

before

class ColorButton extends HTMLElement {
  
  constructor() {
    this.color = "red"
    this._clicked = false
  }
}

const button = new ColorButton()
// Public fields can be accessed and changed by anyone
button.color = "blue" 

// Curse your sudden but inevitable betrayal 
console.log(button._clicked) // Prints: false, can be accessed from the instance
button._clicked = true // Doesn't throw an error, can be read from the instance

after : 필드를 정의와 동시에 초기화가 가능해졌다.

class ColorButton extends HTMLElement {
  color = "red"
  _clicked = false
}

after : private fields _ 대신 #사용해 프라이빗하게 사용 가능하다.

class ColorButton extends HTMLElement {
  // All fields are public by default
  color = "red"

  // Private fields start with a #, can only be changed from inside the class
  #clicked = false
}

const button = new ColorButton()
// Public fields can be accessed and changed by anyone
button.color = "blue"

// SyntaxError here 
console.log(button.#clicked) // Cannot be read from outside
button.#clicked = true // Cannot be assigned a value from outside

Private instance methods and accessors

class Banner extends HTMLElement {
  // Private variable that cannot be reached directly from outside, but can be modified by the methods inside:

  #slogan = "Hello there!"
  #counter = 0

  // private getters and setters (accessors):

  get #slogan() {return #slogan.toUpperCase()}
  set #slogan(text) {this.#slogan = text.trim()}

  get #counter() {return #counter}
  set #counter(value) {this.#counter = value}

  constructor() {
    super();
    this.onmouseover = this.#mouseover.bind(this);
  }

  // private method:
  #mouseover() {
    this.#counter = this.#counter++;
    this.#slogan = `Hello there! You've been here ${this.#counter} times.`
  }
}

https://yagmurcetintas.com/journal/whats-new-in-es2022?ref=morioh.com&utm_source=morioh.com

ES2022 (ES13) Top-level Await Operator

Developer Mobssie — Thu, 18 Aug 2022 12:37:16 +0900

async 없이 사용 가능해졌다.

import {getUser} from "./data/User"
let user = await getUser();

https://yagmurcetintas.com/journal/whats-new-in-es2022?ref=morioh.com&utm_source=morioh.com

ES2021 (ES12) Logical assignment operators (논리 할당 연산자)

Developer Mobssie — Thu, 18 Aug 2022 12:23:30 +0900

// before
obj.prop = obj.prop || foo(); // obj.prop이 잘못된 값일 경우 할당
obj.prop = obj.prop && foo(); // obj.prop이 올바른 값일 경우 할당
obj.prop = obj.prop ?? foo(); // obj.prop이 null이나 undefined일 경우 할당

// after
obj.prop ||= foo();
obj.prop &&= foo();
obj.prop ??= foo();

[monorepo] nx를 이용하여 App 생성하기

Developer Mobssie — Fri, 5 Aug 2022 15:21:32 +0900

npx create-nx-workspace [만들고 싶은 APP 이름] --preset=react

nx는 npx 를 이용하여 workspace를 생성할 수 있고,

참고 :

https://nx.dev/generators/workspace-generators

https://medium.com/@trustyoo86/nx%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-react-monorepo-%EB%A7%8C%EB%93%A4%EA%B8%B0-workspace-%EB%A7%8C%EB%93%A4%EA%B8%B0-a53cd5374bcd

nx를 이용한 react monorepo 만들기 — workspace 만들기

monorepo란, 다양한 모듈을 여러개의 repository로 관리하지 않고, 하나의 repository에서 패키지 등으로 분기하여 관리하는 것을 의미합니다.

medium.com

[monorepo] 모노레포 nx 설치

Developer Mobssie — Wed, 20 Jul 2022 12:38:42 +0900

모노레포 환경 설치

sudo npm install -g nx
npm create-nx-workspace

* workspace name : 작업공간에 일반적으로 조직 이름인 이름을 지정한다.

우리 조직의 모든 프로젝트를 포함하는 모델 리포지토리이므로 회사의 이름을 지정하거나 이름을 넣는다.

* What to create in the new workspace : 내부에 단일 응용프로그램을 생성하게된다.

단일 저장소는 여러개의 서로 다른 프로젝트를 포함하는 저장소일 뿐이고

잠재적으로 전체 조직의 모든 단일 프로젝트 일 수 도 있다.

모두 같은 유형일 필요는 없고 프로젝트 환경을 새로 만들 수도 있다.

react, angular, vue, express, next.js 등 설정할 수 있다.

app폴더 안에 여러 다른 응용 프로그램 간 공유하려는 모든 코드는 이 lib 폴더 안에 있다.

서로 다른 앱간에 쉽게 공유할 수 있다는 이점이 있다.

libs 폴더에 일종의 공유 ui 라이브러리를 가질 수 있다.

모든 응용 프로그램에 단일 라이브러리를 사용 할 수있다.

[확장프로그램 : nx console]

다양한 옵션을 클릭하고 사용 가능한 명령을 확인할 수 있다.

작은 창이 나타나는데 여기에서 명령 사이에 새 응용 프로그램을 생성하고 싶다면 리스트에서 선택

nx serve [projectname]

ex: nx serve api

ex: nx serve my-nx

computed property names in JavaScript

Developer Mobssie — Mon, 16 May 2022 19:03:39 +0900

const key = 'name';
const value = 'Atta';

const user = {};
user[key] = value;

console.log(user.name); // Atta

const key = 'name';
const value = 'Atta';

const user = {
    [key]: value
};

console.log(user.name);

const key = 'name';
const value = 'Atta';

const user = {
    [key + '34']: value
};

console.log(user.name34); // Atta

const key = 'name';
const value = 'Atta';

const user = {
    [`${key}34`]: value
};

console.log(user.name34); // Atta

TypeError: firebase_compat_app__WEBPACK_IMPORTED_MODULE_0__.default.auth is not a function

Developer Mobssie — Wed, 30 Mar 2022 21:06:06 +0900

[에러 메세지]

TypeError: firebase_compat_app__WEBPACK_IMPORTED_MODULE_0__.default.auth is not a function

Modularv9 와 Compat라이브러리 유형 사이에 구문을 혼합해서 사용한 문제

[인증 상태 관찰자 설정 및 사용자 데이터 가져오기]

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth();
onAuthStateChanged(auth, (user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/firebase.User
    const uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});

doc

https://firebase.google.com/docs/auth/web/start

vue 3.0 프로젝트

Developer Mobssie — Mon, 24 Jan 2022 18:07:38 +0900

vue3 + pinia + vue-router + vite + tailwind

npm i -g @vue/cli
vue --version

UNMET PEER DEPENDENCY 에러시

Developer Mobssie — Mon, 24 Jan 2022 18:07:12 +0900

UNMET PEER DEPENDENCY 에러시

npm install -g npm

npm 업데이트하기

ESLINT 설정

Developer Mobssie — Thu, 13 Jan 2022 14:55:44 +0900

ESLINT는 코드 품질

Prettier는 코드 스타일, 포멧팅에만 관점.

설정파일 우선순위가 있음.

1. .eslintrc.js 2. .eslintrc.cjs 3. .eslintrc.yaml 4. .eslintrc.yml 5. .eslintrc.json 6. package.json

{
	env: {
		// 환경은 사전 정의된 전역 변수를 제공합니다
		"browser": true, // browser 전역변수 사용
    "node": true // NODE 전영변수 사용
	},
	extends: [
		// ESLINT에서 Default Rules
		"eslint:recommended",
		"plugin:vue/recommended",
		"plugin:@typescript-eslint/recommended",
	],
	plugins: [
		// 외부 모둘을 통한 파싱작업을 수행을 지정.
		// `eslint-plugin-` 접두사 플러그인 이름에서 생략
		"vue" // eslint-plugin-vue
		"@typescript-eslint",
	],
	rules: {
		// [rule name]: [ Error Level, Option ]
		// Error Level: off/warn/error
		// Option: rule에 따른 설정
		indent: ["error", 2]
	},
	...
}

참고: https://hyovelop.notion.site/ESLINT-8dd655f716dd42a1b9a9320214b33e65

URL.revokeObjectURL()

Developer Mobssie — Mon, 27 Dec 2021 18:50:52 +0900

URL.revokeObjectURL() 정적 메서드는 이전에 URL.createObjectURL()을 통해 생성한 객체 URL을 해제.

객체 URL을 더는 쓸 일이 없을 때 사용해서, 브라우저가 이제 해당 객체를 메모리에 들고 있지 않아도 된다

in 연산자

Developer Mobssie — Sat, 25 Dec 2021 21:48:53 +0900

in 연산자는 명시된 속성이 명시된 객체에 존재하면 true를 반환

속성 in 객체명

- 배열의 내용이 아닌, 인덱스 값을 명시

- length는 Array(배열) 객체의 속성

- 반드시 in 연산자의 오른쪽에 객체를 명시하여야 한다.

- in 연산자는 프로토타입 체인에 의하여 접근할 수 있는 속성에 대하여 true를 반환

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/in

Axios stream

Developer Mobssie — Wed, 15 Dec 2021 15:54:48 +0900

import axios, { AxiosInstance } from 'axios';
import { Readable } from 'stream';

const response = await axios.get('', { responseType: 'stream'});
const readable: Readable = response.data

axios의 config에 responseType: ‘stream’으로 설정하여 반환되는 데이터를 readable 객체로 받을 수 있습니다.

원격 브런치 삭제하기

Developer Mobssie — Tue, 14 Dec 2021 11:57:23 +0900

기존에 사용하던 git default 브런치 명이 master에 main으로 바꼈다.

main으로 변경 후에 remote에 있는 브랜치 삭제

git push origin --delete master

WebApi를 이용한 JS기능

Developer Mobssie — Sun, 12 Sep 2021 20:57:58 +0900

https://youtu.be/Vatd-V0pLXo

생성자 함수(constructor Function)

Developer Mobssie — Wed, 8 Sep 2021 14:30:49 +0900

- 자바스크립트 객체 생성 방법은 다양하다.

- 클래스를 사용해도 되지만, 단순하고 심플하게 함수를 클래스처럼 사용 할 수있다.

- 클래스와 마찬가지로 생성자 키워드인 new로 인스턴스를 생성할 수 있고, 내부 메서드와 변수를 사용할 수도 있다.

- 클래스처럼 상속을 통해 확장을 할 수는 없다.

Computed : get, set

Developer Mobssie — Wed, 8 Sep 2021 11:13:36 +0900

computed는 기본적으로 읽기 전용이다.

Computed프로퍼티는 method와 비슷하지만 Computed는 proxy역활을 한다. 때로는 캐싱.

=>> 연결하는 역할을 한다.

set methods 을 설정하면, newValue 매개변수를 받음

https://vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods

WindowEventHandlers.onpopstate

Developer Mobssie — Wed, 11 Aug 2021 11:56:25 +0900

WindowEventHandlers.onpopstate

https://developer.mozilla.org/ko/docs/Web/API/WindowEventHandlers/onpopstate

window의 popstate 이벤트 핸들러

- 같은 document에 관한 두개의 히스토리 엔트리에 변화가 일어날 때마다, popstate event가 window 객체에 붙게 된다.

- 만약 활성화된 엔트리가 history.pushState() 메서드나 history.replaceState() 메서드에 의해 생성되면, popstate 이벤트의 state 속성은 히스토리 엔트리 state 객체의 복사본을 갖게 된다.

- history.pushState() 또는 history.replaceState()는 popstate 이벤트를 발생시키지 않는 것에 유의한다.

- popstate 이벤트는 브라우저의 백 버튼이나 (history.back() 호출) 등을 통해서만 발생된다. 그리고 그 이벤트는 같은 document에서 두 히스토리 엔트리 간의 이동이 있을 때만 발생이 된다.

- 브라우저는 popstate 이벤트를 페이지 로딩시에 다르게 처리한다. Chrome(v34 이전버전) 와 Safari는 popstate 이벤트를 페이지 로딩시에 발생시킨다. 하지만 Firefox 는 그렇지 않다.

History.pushState()

Developer Mobssie — Wed, 11 Aug 2021 11:42:47 +0900

History.pushState()

https://developer.mozilla.org/ko/docs/Web/API/History/pushState

브라우저의 세션 기록 스택에 상태를 추가한다.

history.pushState(state, title[, url]);

state

- 새로운 세션 기록 항목에 연결할 상태 객체.

- 사용자가 새로운 상태로 이동할 때마다 popstate 이벤트가 발생! 이 때 이벤트 객체의 state 속성에 해당 상태의 복제본이 담겨 있다.

- 상태 객체는 직렬화 가능한 객체라면 모두 가능합니다.

title

- 빈 문자열을 지정하면 나중의 변경사항에도 안전하다. 아니면, 상태에 대한 짧은 제목을 제공할 수도 있다.

url

- 브라우저를 재시작할 경우 탐색을 시도할 수도 있음.

- 상대 URL을 지정할 수 있으며, 이 땐 현재 URL을 기준으로 사용.

- 새로운 URL은 현재 URL과 같은 출처를 가져야 하며, 그렇지 않을 경우 예외가 발생.

- 지정하지 않은 경우 문서의 현재 URL을 사용.

Object.entries()

Developer Mobssie — Fri, 18 Jun 2021 11:00:15 +0900

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/entries

Object.entries() 메서드는 for...in와 같은 순서로 주어진 객체 자체의 enumerable 속성 [key, value] 쌍의 배열을 반환합니다. (for-in 루프가 다른점은 프로토 타입 체인의 속성도 열거한다는 점입니다).

Object.entries() 에 의해 반환된 배열(array)의 순서는 객체가 정의된 방법과 관련이 없습니다. 배열 순서가 쓸 곳이 있다면, 다음과 같이 정렬을 먼저 하시는 것이 좋습니다 Object.entries(obj).sort((a, b) => b[0].localeCompare(a[0]));.

const object1 = {
  a: 'somestring',
  b: 42
};

for (const [key, value] of Object.entries(object1)) {
  console.log(`${key}: ${value}`);
}

// expected output:
// "a: somestring"
// "b: 42"
// order is not guaranteed

node.js 와 Typescript module system에 대해서

Developer Mobssie — Wed, 2 Jun 2021 22:51:47 +0900

node.js와 Typescript의 module system

타입스크립트 모듈 시스템은 자바스크립트 최신문법을 계승했기 때문에 차이를 잘 알아야 한다.

node.js	typescript
common.js	module.js

Javascript file과 Typescript file은 module화 할 수 있다.

module화 하는 이유는

* 다른파일에서 사용할 수 있게 해줌.
* 가독성과 재사용성을 높히기 위해서 사용함.

[node.js에서 module화 하는 방법]

const hello = 'module'
module.exports = 'hello';

@module.js

const hi = require('./module');

@run.js

▶ require만 하면 다시 사용할 수 있다.

객체를 export할 때 에는 export자체가 객체(object)

const hello = 'module'

exports.a = 'b';
exports.b = false;

//또는
module.exports = {
    a: 'b',
    b: false,
}

@module.js

const {a, b} = require('./module');

@run.js

const hello = 'module'
const a = 'b'
const b = false
export { a };
export { b };

@module.js

import   hello, { a, b } from './module';
console.log(a,b)

@run.js

▶ module.exports 파일에서 한번만 사용가능.

export 들밑에 module.exports 사용하게 되면

Result: module.exports 사라짐.

Because: overriding~! 덮어 써버림! (exports는 === 임)
But: export default는 덮어쓰지 않는다.

타입스크립트도 import export로 사용하는데
타입스크립트에서 가져올때에는

import * as hi from 'module'

▶ 문법적으로 맞음

import hi from 'module'

▶ config.js에서 옵션으로 esModuleInterop: true 로 설정하면 사용 가능하다.

▶▶▶ 차이는 알아두는게 좋음

exports interface Card {

}

export class Hero implements Card {

}

▶ 같은 파일 안에서 interface나 class도 module화도 가능하다.

▶ import와 export가 있으면 모듈이고, 없으면 그냥 스크립트이다.

▶ d.ts 는 d.ts 는 타입스크립트 코드의 타입 추론을 돕는 파일이고, 보통 내 프로젝트가 라이브러리일때 사용 한다.

[import 사용법]

// ES2015모드
import {Card, Player} from './types'
// common.js 모드
import A = require('./common')

[Vue Error] Consider upgrading your version of 'tslib'

Developer Mobssie — Tue, 1 Jun 2021 14:53:15 +0900

This syntax requires an imported helper named '__spreadArray' which does not exist in 'tslib'. Consider upgrading your version of 'tslib'.

npm ls -g --depth=0

버젼 확인 해보니 공동으로 사용하는 eslint package 기준 버젼이 달라 에러가 났던것.

sudo npm install -g <package>@<version>

사용하여 해결

async, await, try, catch

Developer Mobssie — Tue, 1 Jun 2021 11:38:07 +0900

promise를 좀 더 편하게 사용할 수 있는 async, await에 대해서 정리

1. function 앞에 async를 붙이면 해당 함수는 항상 프라미스를 반환한다

promise가 아닌 값을 반환하더라도 이행 상태의 프라미스(resolved promise)로 값을 감싸 이행된 프라미스가 반환되도록 한다

2. 함수 안에서 await를 사용할 수 있다.

document.onvisibilitychange

Developer Mobssie — Mon, 31 May 2021 21:20:36 +0900

document.onvisibilitychange

syntax

obj.oncisibilitychange = function;

example

document.onvisibilitychange = function() {
  console.log("visibility of page has changed!")
}

Document.visibilityState

Developer Mobssie — Mon, 31 May 2021 19:45:45 +0900

Document.visibiltyState는 읽기전용 property로, 이 element가 현재 표시된 컨텍스트를 나타내는 document의 가시성을 반환한다.

document가 background 또는 보이지 않는 탭(다른 탭)에 있는지, 또는 pre-rendering을 위해 로드 된 것인지를 아는 것은 유용하다.

가능한 값은

* 'visible' : 페이지 내용은 적어도 부분적으로 보일 수 있다. 실제로 아는 페이지가 최소화 되지 않은 창에서의 선택된 탭을 의미함.

* 'hidden' : 페이지 내용은 사용자에게 표시되지 않다. 실제로 이는 docuement가 background-tap(다른탭)이거나, 최소화 된 창의 일부이거나, OS 화면 잠금이 활성 상태임을 의미

* 'prerender' : 페이지 내용이 pre-rendering되어 사용자에게 보이지 않는다. (document.hidden 목적으로 숨겨진 것으로 간주 한다.)

document는 이 상태에서 시작 될 수 있지만, 절대로 다른 값에서 이 값으로 전환되지는 않습니다.

* 'unloaded' : 페이지가 메모리에서 로드죄지 않는다.

이 property의 값이 변경되면 visibilitychange이벤트가 Document로 전송된다.

일반적으로 document pre-rendering시에 일부 assets의 다운로드를 막을 수 있다.

document가 백그라운드에 있거나 최소화 된 상태에서 일부 작어블 중지 할 수 있다.

document.addEventListener("visibilitychange", function() {
  console.log(document.hidden);
  // 숨김 여부가 변했을 때의 행동
});

typescript 설치부터 사용법 정리

Developer Mobssie — Mon, 24 May 2021 23:46:30 +0900

타입스크립트는 변수랑 함수의매개변수랑 리턴값에 타입이 붙은 것이다.

설치

npm init

npm i typescript

npm i -g typescript (명령어로 설치/+ 전역설치)]

= npx tsc lecture.ts -w

프로젝트에 설치한 버젼이랑 같이 설치가되서 npx로 해야한다.

tsc 엔터 (타입스크립트 컴파일 하는명령어)

tsc lecture (해당하는 폴더에)

tsc를 통해서 ts를 컴파일해서 js로 변경해서 html에는 항상 js를 연결.

[자동으로 컴파일]

tsc lecture.ts -w

HTMLDivElement : 타입스크립트에서 만들어 놓음

Package-lock : lock파일은 github에 같이 올려야함.

정확한 버젼이기때문에 똑같은 버젼이 깔림.

Package.js : 범위

[tsconfig.ts]

Target: es6로 하고 바벨,

module

undefined와 null을 구분하는 module

"strictNullChecks": true,

[error 해결]

에러코드 나오면 코드를 구글에 검색

예// TS2304

tsconfig.ts에서 “lib”: [“ES5” .. ..]

도저히 해결 할 수없는 에러일때에는 뒤에 느낌표를 붙여준다.

[this와 타입 범위 이해]

this를 썻다. 그런데 arrow function이 아닌 그냥 function이면 this의 타입을 첫번째 매개변수로 넣어 줘야 한다. this 타입추론이 정확해진다.

btn.addEventListener('click', function(this: HTMLButtonElement, e: Event){
const myChoice = this.textContext as keyof RSP;

as 를 써서 타입을 정확하게 맞춰주는것.

타입스크립트가 스스로 추론하지 못하는것들을 범위를 쫍혀줘야 한다.(타이트하게)

let imgCoords: RSP[keyof RSP] = '0';

범위를 잘 이해해야함.

[interface]

interface는 확장할수있다. 객체에서 사용.

따로따로 적어주면 합쳐진다.

어떤값이 들어올지 모르면 엄격하게 하지 않을때

Interface RSP {

[c: string] : string

}

Interface RSP {
  [c: string] : string
}

이런 식으로 클래스 표현이 가능하다.

interface Example {
  new (a: number, b: number): number
}

new를 붙이면 class를 interface로 표현 가능하다.

interface Example {
    add: (a: number, b: number) => number
  } // 객체의 속성. 함수타입
  const ex: Example = {
    add: (a, b) => {
    return a + b;
  }
}

[제네릭]

짝마추기

document.addEventListener<'submit'>('submit', () => {

})

’submit’이 가능한 이유는 타입스크립트에 선언되어있기때문,

submita 이렇게 다른 문자열이 오면 에러가 난다.

function add(a: string, b: string): string{
  return a + b;
}
function add(a: number, b: number): number{
  return a + b;
}

이렇게 표현하고 싶을때 사용한다

interface obj<T> {
  add: (a: T, b: T) => T;
}
const a: obj<number> = {
  add: (a, b) => a + b,
}
const b: obj<string> = {
  add: (a, b) => a + b,
}
a.add(1, 2);
a.add('1', '2'); // error
b.add(1, 2); // error
b.add('1', '2');

제네릭 타입제한

ex <T extends string>

interface obj<T extends string> {
  add: (a: T, b: T) => T;
}
const a: obj<number> = {
  add: (a, b) => a + b,
} // error
const b: obj<string> = {
  add: (a, b) => a + b,
}
a.add(1, 2);
b.add('1', '2');

[type]

유니언이 필요한경우 | type을 사용

[keyof]

let imgCoords: RSP[keyof RSP] = ‘0’

>> 중복을 줄일수잇어서 좋다

[as]

강제로 변환해주는 것(범위를 좁혀주는 작업)

작은 집합은 큰 집합에 들어갈수있는데 큰 집합은 작은 집합으로 들어가지 못하기때문에 똑같이 마춰주는게 베스트!

[private, public, protected]

public < protected < private

public: 인스턴스에서도 접근가능.

protected: 자식들도 접근가능. extends 로 접근가는데. (부모는 안됨)

private: 나한테에서만 접근할수있는것.

[implements]

new를 쓴다면 class를 사용하고, extends를 실제로 사용하면 class

interface를 implements로 구현만 하면.. implements

Vue 데이터 전달하기

Developer Mobssie — Tue, 18 May 2021 20:00:22 +0900

pass props : 부모에서 자식에게 데이터를 전달

Emit Events : 자식이 부모에게 데이터를 전달

독립적으로 컴포넌트가 존재 자식이나 부모가 누군지 몰라서 동작함.

네이밍 규칙

컴포넌트내에 속성으로는 kebab-case / 스크립트 내부에서는 camelCase 사용

동적 Props

v-bind를 이용해서 데이터를 전달해야 한다.

부모 컴포넌트의 message가 변경된 경우 자식 컴포넌트는 다시 message 데이터를 받아 다시 렌더링을 함.(v-bind 생량가능)

<div id="app">
  <input type="text" v-model="message">
  <simple-component :message="message"></simple-component>
</div>
<script>
  var simpleComponent = {
    props: ['message'],
    template: '<div>{{message}}</div>'
  }
  new Vue ({
    el: '#app',
    data: {
      message: 'Hello, Vue!'
    },
    component: {
      'simple-component': simpleComponent
    }
  });
</script>

주의점: 단방향이기 때문에 부모에서 업데이트가되면 자식에게도 업데이트가되지만, 그 반대는 안됨.

props를 변경하고 싶다면

1. props의 초기 값을 컴포넌트 로컬 데이터로 정의

2. props로 부터 계산된 속성을 정의

props 검증하기

props의 데이터타입이 중요하다면 props 데이터 타입을 강제할 수 있다. 협업할때 유용하다.

아래와 같이 validation도 가능하다

...
<div id="app">
  <simple-component :price="price"></simple-component>
</div>
...
<script>
  var simpleComponent = {
    props: {
      name: {
        type: String,
        defalut: '구형 스마트폰' //기본값을 정의할 수 있음. 
      },
      price: {
        type: Number,
        validation: function (value) {
          // value 값이 50000이상이 아니면 검증 실패
          return value >= 500000
        }
      },
      message: {
        type: [String, Object],
        requeired: true
      },
      object: {
        type: Object,
        // 타입이 Object인 경우 함수를 통해 반환해야 함
        default: function () {
          return { message: '메세지' }
        }
      }
    },
    template: '<div>{{ name }}, {{ price }}원, {{ message }}</div>'
  };
  
  new Vue({
    el: '#app',
    data: {
      name: '최신형 스마트폰',
      price: 497000,
      message: '최신형 스마트폰 싸게 팝니다!'
    },
    components: {
      'simple-component': simpleComponent
    }
  })
</script>

type, default, required, validation

type 옵션에서 사용 가능한 타입은

String, Number, Boolean, Function, Object, Array

여기서 Object와 Array의 경우 default를 정의할때 함수를 이용해 반환해 줘야함.

자식 컴포넌트가 부모컴포넌트에게 데이터를 전달 할 순 없지만 이벤트를 통해 메시지를 전달할 수 있다.

v-on을 이용해 템플릿에 사용자 지정 이벤트를 만들 수 있다. 이때 자식 컴포넌트는 $emit을 이용해 이벤트를 실행

Vue 컴포넌트 분리하는 방법

Developer Mobssie — Tue, 18 May 2021 16:34:40 +0900

컴포넌트는 Vue 오브젝트를 확장한 오브젝트이다. 확장이란 미리 Vue 오브젝트에 옵션을 정의해 이미 옵션이 정의된 Vue오브젝트를 생성하는 것을 의미함. 컴포넌트를 생성하면 확장된 Vue 인스턴스가 생성.

<div id="app">
  <date></date>
  <date></date>
  <date></date>
</div>
<script>
  Vue.Component('date',{
    template: '<div>{{ now }}</div>',
    data: function () {
      return {
        now: new Date()
      }
    }
  })
</script>

Vue.Component는 컴포넌트를 글로벌하게 등록하는 메서드

컴포넌트를 사용하면 공통적인 로직이나 템플릿을 엘리먼트를 통해 재활용할 수 있다.

주의할점! : 확장된 Vue 인스턴스, 즉 컴포넌트에서 data를 정의할 때 반드시 함수로 정의해야 한다.

컴포넌트 이름은 하이픈을 포함한 소문자이어야 한다.

로컬 컴포넌트 : Vue 인스턴스 혹은 컴포넌트의 옵션으로 등록해 해당 컴포넌트 내부에서만 사용하도록 지정 할 수 있다.

var dateComponent = {
  template: '<div>{{ now }}</div>',
  data: function () {
    return {
      now: new Date()
    }
  }
}
new Vue({
  el: '#app',
  components: {
  	date: dateComponent
  }
})

ul, ol, table, select같은 내부에 엘리먼트가 정해져있는 컴포넌트는 is 옵션을 사용해 렌더링해야함

템플릿 분리

<script type="text/x-template" id="todo-component">
  <div>
  	<p></p>
  </div>
</script>
<script>
  var todoComponent = {
    template: '#todo-component',
    data: function () {
      return {
        todos: [
          '열심히 일하기',
          '효도하기',
          '연애하기'
        ]
      }
    }
  };
  new Vue({
    el: '#app',
    components: {
      'todo-component' : todoComponent
    }
  })
</script>

Vue 인스턴스 사용하는 방법

Developer Mobssie — Mon, 17 May 2021 18:38:53 +0900

템플릿 문법은 주로 디렉티브(Directive)로 이루어져있음. DOM 엘리먼트에 속성을 추가하는 것을 의미.

데이터바인딩

Mustache : {{ expression }}

v-text : Mustache와 거의 동일하게 작동. 중괄호로 감싸는 대신 디렉티브를 이용해서 데이터를 바인딩 가능

v-html : HTML 문자열을 그대로 바인딩.

v-bind : View의 텍스트를 렌더링하는 문법이 아닌 태그의 속성에 데이터를 바인딩하는 문법.

조건문

v-if : 조건에 따라 템플릿을 보여줌 (v-else, v-else-if)

template if : v-if는 디렉티브이기때문에 한 가지 엘레먼트에만 적용가능하지만 template 엘레먼트 한 번에 처리 가능하다. 엘레먼트는 가상의 엘레먼트이기 때문에 자식들만 묶어서 렌더링 된다.

v-show: true 일 경우 렌더링

** v-if vs v-show

v-if	v-show
초기 조건이 false일 경우 렌더링하지 않음.	항상 렌더링 됨.
조건이 false가 될 경우 엘리먼트가 삭제됨	CSS display 속성을 토글함
template구문을 지원함.	template 구문을 지원하지 않음
v-else 를 사용할 수 있음.	v-else를 사용할 수 없음.

▶ v-if는 조건이 false일 경우 DOM 트리에서 삭제되지만 v-show는 단순히 display속성을 토글.

▶ 만약 조건이 자주 바뀌는 로직이라면 v-if 보다 v-show를 쓰는것이 성능 면에서 우세.

반복문

v-for : 이 디렉티브는 반복적인 엘리먼트를 렌더링해야 할 때 유용함.

template v-for: 여러개의 엘리먼트를 포함해서 반복 렌더링할때 사용.

▶ v-if / v-for : 같은 엘리먼트에 존재할때 우선순위는 v-for가 v-if보다 높습니다.

이벤트 수식어

이벤트

v-on : v-on:{이벤트}="자바스크립트 표현식", click, keyup, keydown, input

capture

HTML DOM 이벤트 : 클릭, 입력과 같은 유저 상호작용이 일어나면 브라우저는 HTML DOM 이벤트가 발생하는데 이때 이벤트는 부모 엘리먼트, 자식엘리먼트로 전달된다. 자식엘리먼트 쪽으로 전파되는것을 버블링, 부모 엘리먼트 쪽으로 전파 되는것을 캡처링이라고 한다.

기본값은 버블링 페이즈

@click.capture

stop

stop 수식어는 이벤트가 전파되어 원하지 않는 결과가 생기는 일이 많기 때문에 이를 막을 수 있게 만드는 수식어.

func2 : function(){
	
},
func2_original : function(){
	e.stopPropagation();
}

@click="func2.stop"는 func2_original()과 완전히 동일한 동작을 함

@click.stop / e.stopPropagation();

self

self 수식어는 이벤트 전파로 실행되는 것이 아닌, 이벤트의 근원지가 해당 엘리먼트일 때 핸드러를 호출하도록 함.

(event.target이 해당 엘리먼트일 때에만 실행되도록 함)

@click.self

prevent

브라우저엔 기본적으로 특정 태그에 대한 액션을이 미리 정의되어있는데 막아주는 역활을 한다.

@click.prevent / event.preventDefault()

once

한번만 실행해야하는경우

@click.once

키 수식어

<input type="text" @keydown="preventKey">

new Vue({
  el: '#app',
  methods:{
    preventKey: function () {
      if(event.keyCode == 8 || event.keyCode == 46)
      event.preventDefault();
    }
  }
})

delete를 막는예제 (키 수식어를 사용하지 않음)

키 수식어를 사용한 예제



<input type="text" @click.delete="preventKey">

new Vue({
  el: #app,
  methods: {
    preventKey: function () {
      event.preventDefault();
    }
  }
})

▶ delete(+backspace), enter, tab, esc, space, up, down, left, right

수식어 체이닝

키 입력 하나에만 대응할 수 있는 것이 아니라, 수식어로 달아 놓은 여러 키 모두에 대해 핸들링 할 수있다.

보조키 수식어

shift, alt, control, meta-window or command key 또한 미리 Vue에 정의 되어 있다.

보조키 수식어는 키 수식어 뿐만 아니라 마우스수식어와도 함께 쓸수있으며, 다른키와 입력될 때만 트리거 된다.

즉, shift키 하나만 입력하는 것은 이벤트가 트리거되지 않는다.

ex) @keyup.shift라고만 사용했을 대엔 shift와 다른 모든 키의 조합에 트리거 된다.

사용자 정의 키 수식어

키 코드를 직업쓰거나, 직접 해당 키 코드의 별칭을 옵션으로 설정하고 별칭으로 정의한 수식어로 사용할 수 있다.

ex) @key.a

v-on, v-bind는 생략가능하다. 단, @ 기호를 붙여한다.

모델

v-model : 폼과 데이터를 바인딩하는 디렉티브이다.

Vue.js는 기본적으로 단방향 바인딩이지만, v-model은 양방향 바인딩입니다.

<div id="app">
  <input v-model="name">
</div>

<script>
  new Vue({
    el: #app,
    data: {
      name: 'Mobssie'
    }
  })
</script>

코드를 실행했을 때 input 엘리먼트의 값을 수정한다면 name 변수의 값도 input 엘리먼트에 입력한 값과 동일하게 변경된다.

반대로 name 데이터의 값을 변경한다면, input 엘리먼트에 입력된 값 또한 name 데이터의 값과 동일하게 수정된다.

하지만 엄밀히로는 이는 데이터 양방향 바인딩은 아니다.

v-model은 사용자의 입력에 대해 매핑된 변수를 업데이트 해주는 이벤트가 포함되어있는것.

엘레먼트 속성에 정의된 값은 무시되고 데이터값이 우선시 된다.

한글자가 완성될 때에만 데이터에 반영되기 때문에 이럴 경우에는 v-model이 아닌 v-on:input을 이용하면 된다.

값 바인딩하기

폼 엘리먼트의 속성으로 정의해 놓은 정적 value가 아니라, 동적으로 vue instance의 변수를 폼의 값으로 바인딩할때

<div id="app">
  <input type="checkbox" v-model="checkboxModel" 
  		  v-bind:true-value="trueValue" v-bind:false-value="falseValue">
  {{ checkboxModel }}        
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      checkboxModel: 'hello',
      trueValue: 'hello',
      falseValue: 'world'
    }
  });
</script>

수식어

v-model을 이용할때, vue에선 작은 편의성 기능들을 수식어로 제공

.lazy

input값을 변경할 대 즉시 값이 동기화 되지 않는다.

하지만

v-model.lazy 사용하면 즉시 데이터가 동기화 된다.

.trim

입력값의 앞뒤 공백들 제거한다.

v-model.trim

.number

입력값을 number로 형변환가능하다.

v-model.number

필터

필터는 자바스크립트 표현식 뒤에 적용하고 싶은 필터를 파이프 기호( | )와 함께 추가하면 된다. 이렇게 필터를 정의하면 공통적으로 같은 서식을 적용해야 하는 상황에 편리하게 대처할 수 있다.

<div id="app">
  {{ price | number }}
</div>
<script>
  new Vue({
    el: #app,
    data: {
      price: 24300
    },
    filters: {
      number : function(value) {
        retrun new Intl.NumberFormat().format(value)
      }
    }
  })
</script>

Vue 속성 사용

Developer Mobssie — Mon, 17 May 2021 17:38:23 +0900

methods

computed : 데이터의 경우에는 methods보다 computed를 사용하는 것이 좋음

계산된 속성은 getter, setter

watch : Vue 인스턴스의 데이터가 변경되는 시점을 감시해 메서드를 호출

데이터가 변경되면 watch는 변경됨을 확인하고 메서드를 실행

▶ 라이프사이클이 Vue 인스턴스의 이벤트를 후킹하는 것이라면, watch는 Vue 인스턴스의 데이터의 변경을 후킹하는 것.