setSnackbarMessage로 메세지만 바꿔주면 자동적으로 스낵바가 하단에서 나오는 사용자경험을 가진다

사용부

import { FoundationStyles, LayoutStyles, TypographyStyles } from '@lib/foundation';
import { useSnackbar, SnackBar } from '@lib/components/SnackBar';

const getRandomMsg = () =>
  Array(5)
    .fill('')
    .map((_, i) => `${i + 1}번째 테스트 메세지 입니다`)[Math.floor(Math.random() * 5)];

function App() {
  const [snackbarMessage, setSnackbarMessage] = useSnackbar();

  return (
    <>
      <FoundationStyles />
      <LayoutStyles size='tablet' system='android'>
        <TypographyStyles.Body1>Hello World</TypographyStyles.Body1>
        <button onClick={() => setSnackbarMessage(getRandomMsg())}>Open Snackbar</button>
        <SnackBar message={snackbarMessage} setMessage={setSnackbarMessage} duration={3000} isAppbar={false} />
      </LayoutStyles>
    </>
  );
}

export default App;

특이한 점은 스낵바 컴포넌트를 써야하는 페이지에 스낵바 컴포넌트를 위치시키면서, useSanckbar라는 커스텀 훅을 쓰고 있다는 점이다 그리고 해당 커스텀훅의 리턴값이 스낵바에서 노출시키고 싶은 메세지의 값과, 해당 메세지를 set시키는 setter함수라는 것을 알 수 있다 (일종의 useState의 setXxxx함수) setSnackbarMessage를 내려준 이유는, 일정시간후에 스낵바 컴포넌트에서 메세지를 빈 문자열 ''로 초기화하여 컴포넌트를 제거해주기 위해서이다

컴포넌트

useSnackbar.ts

import { useState } from 'react';

type ReturnType = [string, (text: string) => void];

export const useSnackbar = (): ReturnType => {
  const [message, setMessage] = useState({ text: '' });

  function setSnackbarMessage(text: string): void {
    setMessage({ text });
  }

  return [message.text, setSnackbarMessage];
};

useSnackbar는 그냥 useState를 쓰는것과 비슷하다고 볼 수 있지만 메세지의 타입이 조금 다르다 일반적이라면 string값을 사용할텐데 여기서는 개체안에 text라는 키에 밸류로 저장하고 이를 반환한다

더욱 이상한 점은 불변성을 지키지 않는 형태를 가지는 것이다

이는 내가 의도한 코드인데, 이렇게되면 같은 메세지라 할지라도 다른 상태로 리액트가 인식하여 리렌더링을 유발할 것이다 (예를 들어, 무엇인가를 연속적으로 삭제하여 '삭제되었습니다'라는 알림이 여러번 뜨는것과 같은 상황)

index.tsx

export const SnackBar: FC<SnackBarProps> = ({ message, duration, setMessage, isAppbar }) => {
  useEffect(() => {
    if (message.length) {
      const timer = setTimeout(() => {
        setMessage('');
      }, duration);

      return () => {
        clearTimeout(timer);
      };
    }
  }, [message]);

  return (
    <>
      {message.length ? (
        <St.SnackBar key={Math.random()} duration={duration} isAppbar={isAppbar}>
          <Typo.Caption1>{message}</Typo.Caption1>
        </St.SnackBar>
      ) : null}
    </>
  );
};

컴포넌트는 메세지가 빈 문자열이 아니라면 전달받은 duration뒤에 메세지를 빈 문자열로 할당하여 스낵바 컴포넌트를 언마운트 하게된다

또한 useEffect에서 return문을 사용하여 언마운트시에 타이머를 클리어해주는 혹시 모르는상황에도 처리를 해주었다

type.ts

특별한건 없고 메세지를 세팅하는 함수의 타입은 string을 인자로 받아 아무것도 반환하지 않는 void함수로 해주었다

type SetMessage = (text: string) => void;

export type SnackBarProps = {
  message: string;
  duration: number;
  setMessage: SetMessage;
  isAppbar: boolean;
};

구현화면

이렇게 같은 메세지이더라도 렌더링되는 스낵바 컴포넌트를 제작하였다

문제점

버튼을 연타하여 5번 스낵바를 오픈했다고 가정해보자 첫번째 스낵바가 오픈이 되면서 컴포넌트 내부에서 타이머가 실행된다 듀레이션이 지나면 메세지를 빈 문자열로 초기화하여 렌더링되던 스낵바가 보이지않게 된다 두번째 오픈이 될 때 해당 첫 타이머가 클리어 되어야 안정적으로 듀레이션동안 알림을 줄 수 있다 문제는 메세지가 바뀜에따라 컴포넌트가 없어졌다가 다시 생기는것이 아니라는 점이다 (없어졌다가 생기는 마법같은 현상이라면 유즈이펙트의 리턴문에서 클리어해주기에 문제가 없다) 하지만 컴포넌트는 그대로 존재하고 메세지만 바뀌기에 첫 타이머의 클리어가 되지않는 문제가 발생한다

위에서 말했듯이 props로 세터함수를 내려받은 뒤, 타이머를 스낵바 컴포넌트 내부에서 실행시키는 로직은 특수한 상황에서 원하는대로 클리어가 되지않는다

그렇다면 타이머와 클리어 로직은 스낵바 컴포넌트의 외부에서 관리되어야 한다는 의미이고, 이러한 내부 로직을 사용자에게 강제할 수 없으니 useSnackbar 내부로 전부 밀어넣으면 된다고 생각했다

리팩토링 코드

useSnackbar.ts

useEffect로 메세지를 감시하고, 클리어 로직을 리턴문에 넣어서 컴포넌트가 사라질 때를 대비하였고, 커런트값을 가진다면(==아직 스낵바가 동작중인데 스낵바가 또 오픈이되는 상황이라면) 클리어 로직을 걸어주었다

이렇게되면 사용부에서는 스낵바의 렌더링 로직은 몰라도되는채로, 듀레이션만 유즈스낵바와 컴포넌트의 프롭스로 동일하게 넣어준다면 원하는 시간에 맞게 스낵바 알림이 뜨는 기능을 구현할 수 있다

import { useState, useRef, useEffect } from 'react';

type Timer = ReturnType<typeof setTimeout>;

export const useSnackbar = (ms: number): [string, (text: string) => void] => {
  const [message, setMessage] = useState({ text: '' });
  const timer = useRef<Timer>();

  function setSnackbarMessage(text: string): void {
    setMessage({ text });
  }

  useEffect(() => {
    if (!message.text.length) return;
    if (timer.current) clearTimeout(timer.current);

    timer.current = setTimeout(() => {
      setSnackbarMessage('');
    }, ms);
    return () => {
      clearTimeout(timer.current);
    };
  }, [message]);

  return [message.text, setSnackbarMessage];
};

index.tsx

타이머와 관련된 로직을 전부 제거하고 전달받던 세터함수도 빼주었다

import { FC } from 'react';
import { TypographyStyles as Typo } from '@lib/foundation';
import * as St from './style';
import { SnackBarProps } from './type';
import { useSnackbar } from './useSanckbar';
export { useSnackbar };

export const SnackBar: FC<SnackBarProps> = ({ message, duration, isAppbar, width = '1024px' }) => {
  return (
    <>
      {message.length ? (
        <St.SnackBar key={Math.random()} duration={duration} isAppbar={isAppbar} width={width}>
          <Typo.Caption1>{message}</Typo.Caption1>
        </St.SnackBar>
      ) : null}
    </>
  );
};

type.ts

너비가 맞지않게 나온다는 의견이 있어, 프롭스로 전달받고 없으면 너비만큼의 기본값을 주는 코드로 변경

export type SnackBarProps = {
  message: string;
  duration: number;
  isAppbar: boolean;
  width?: string;
};

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.

팀 프로젝트에서 (야매)Typography 시스템을 만들고나서의 회고.

언어별 폰트를 다르게 렌더한다

디자이너: "한글은 프리텐다드로 해주시고, 나머지는 로보토 폰트로 렌더링 해주세요(개발 부탁해요)" 개발자: '...'

이제껏 폰트를 깊게 고민하거나, 제대로 된 CSS시스템을 설계해본적이 없는데, 이번 팀 프로젝트에는 두 개의 폰트를 쓰고 있었고 언어별로 다르게 렌더링이 되어야 했다(위와 같은 상황)

@font-face의 기본 스펙

@font-face {
    font-family: '내가 쓸 폰트이름_보통 폰트 홈페이지에 기재되어있다';
    font-weight: 900;
    font-display: swap;
    src: local('컴퓨터에 있다면 가져다 쓸 폰트 이름'), 
         url('../fonts/woff2/Pretendard-Black.woff2') format('woff2'), 
         url('../fonts/woff/Pretendard-Black.woff') format('woff');
    /* 유니코드 레인지로 이 폰트를 지정해줄 범위를 적어준다 */
    unicode-range: U+AC00-D7A3;
}

쓸만한 범위들 한글 범위: U+AC00-D7A3 영어 대문자 범위 : U+0041-005A 영어 소문자 범위 : U+0061-007A 숫자 범위 : U+0030-0039 특수 문자: U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E

유니코드 레인지는 위의 특수 문자처럼 쉼표로 구분하여 여러가지를 지정할 수 있다

createGlobalStyle에 CSS 넣기

'글로벌스타일 내부에서 import하면 끝이지~(아님)'

Please do not use @import CSS syntax in createGlobalStyle at this time, as the CSSOM APIs we use in production do not handle it well. Instead, we recommend using a library such as react-helmet to inject a typical <link> meta tag to the stylesheet, or simply embedding it manually in your index.html <head> section for a simpler app.

import구문 쓰지마라. 우리가 쓰는 프로덕션 과정에서 이거 핸들링하기 어렵다. 이 문구를 보고도 쓰고 싶거든 리액트 헬맷과 같은 라이브러리로 <link>태그 주입해라 아니면 그냥 html에서 link써라...

그러고 싶지 않은 이유는 단 하나, 고작 폰트 적용시키는데 라이브러리를 또 쓰기는 싫었다

export시키는 createGlobalStyle 코드 상단에서 import

너무 어지러운 찰나에 vite 공식문서를 읽던 중 반가운 부분이 보였다

페이지 내 CSS 주입 비활성화하기

import './foo.css' // 페이지에 스타일이 추가됨
import otherStyles from './bar.css?inline' // 스타일이 추가되지 않음

그렇단 얘기는 css파일은 불러오기만 해도 페이지(혹은 컴포넌트)에 스타일이 주입 된다는 얘긴가?

그러면 폰트css를 createGlobalStyle코드 상단에서 불러와 글로벌 컴포넌트에 주입시키면 되지 않을까?

결과적으로는 되더라..

// lib/foundation/index.ts
import { createGlobalStyle } from 'styled-components';
import './Typography/FontFamily/font.css';

/** Foundation 글로벌 스타일 */
export const FoundationStyles = createGlobalStyle`
  ${ColorStyles}
`;
// App.tsx
import { FoundationStyles, LayoutStyles, TypographyStyles } from '@lib/foundation';
import './App.css';

function App() {
  return (
    <>
      <FoundationStyles />
      <LayoutStyles size='tablet' system='android'>
        <TypographyStyles.Body1 as={'h2'}>Hello World</TypographyStyles.Body1>
      </LayoutStyles>
    </>
  );
}

export default App;

무사히 한글은 프리텐다드 폰트가, 그외에는 로보토가 적용이 된걸 확인했다

git은 항상 복잡하다

1. git remote update 모든 원격 브랜치를 업데이트하여 최신 상태로 갱신한다. 하지만, 로컬에서 변동 사항을 병합하지는 않는다.
2. git fetch 현재 위치하고 있는 원격 브랜치만 업데이트한다. 하지만, 로컬에서 변동 사항을 병합하지는 않는다. all 옵션을 주면 모든 원격 브랜치를 업데이트할 수 있다.
3. git pull 현재 위치하고 있는 원격 브랜치를 업데이트하고 로컬에서 변동 사항을 병합한다. 로컬 브랜치를 업데이트할 때 사용한다.

기본적으로 텍스트 콘텐츠 태그와 스타일을 지정하고, 개발자가 원하는 태그를 동적으로 렌더한다

왜 이런 고민을 하게 된거지?

분명 나는 픽셀과 줄높이, 폰트두께를 디자인 시스템에서 정의된 스타일을 지정하고 싶은데 태그가 하나로 고정이 되어있다면 의미있는 html구조가 아니게된다

그렇다고 생성할 때 마다 태그를 입력 받는것은 개발자에게 너무 귀찮은 일이다

어느정도 의미를 고려한 태그를 기본 제공하되, 스타일만 가져다쓰고 태그는 다른 태그를 쓰고 싶을 때는 styled-components의 as라는 prop을 쓰면 된다

Styled-components의 기본 스펙

import styled from "styled-components";

const Component = styled.div`
  color: red;
`;

function App() {
  // ...codes...
  return (
      <>
        <Component as="button" onClick={() => alert('It works!')}>
            Hello World!
        </Component>        
    </>
  )
}

분명 스타일드 컴포넌트로 div태그를 생성했지만, 실제로는 as로 넘겨준 값인 button이 렌더링 된다

출처 - 스타일드 컴포넌트 공식 문서(API reference) styled-components as

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.

프로젝트를 진행 할 기업과 과제가 정해졌으니 이제부터는 팀 별로 개발을 시작하면 된다 무작정 개발에 돌입하는 것이 아니라, 형식을 맞추어 작업하면 일관되게 진행할 수 있어 여러가지 이점이 있다

팀 문화 정하기

팀원으로서 여러가지 행동양식등을 정했다 단체활동에 불이익을 주지 않는 범위내에서 지킬 양식들이라 어려운 점은 없었다

• 코어타임 정하기
• 공지사항에 대한 행동규칙 정하기(수시로 확인 및 확인을 알리는 방식)
• 회의는 짧게

컨벤션 정하기

여럿이서 공동의 프로젝트를 진행을 하다보면 작성자에 따라서 코드나 네이밍, 폴더 구조 등에서 불규칙한 부분을 찾기 쉽다 이러한 불규칙을 최대한 줄이고, 타인(팀원)이 보아도 이해가 될 수 있도록 컨벤션(일종의 규칙)을 정하는 것은 매우 중요하다

우리가 정한 컨벤션은 다음과 같다

• 코드 컨벤션
• 네이밍 컨벤션
• 디렉토리 구조

Git 협업 흐름 정하기

최상단 루트에 .github 디렉토리를 생성한다(깃허브 관련 시스템 파일을 넣을 폴더, 앞에 .이 붙었다는건 그런 의미) 해당 디렉토리에 ISSUE_TEMPLATE 디렉토리를 만들고 만드려는제목.md 파일을 만든다 해당 파일에 공동 문서 서식을 마크다운 문법에 맞추어 적는다

일련의 과정을 거치면 자동적으로 해당 레포에 이슈 템플릿이 자동적으로 만들어진다

이슈탭에서 New Issue를 생성한다 화면이 전환되고 만들어놓은 템플릿 리스트들이 보인다(이 화면단에서도 생성 가능) 마크다운 서식에 맞게 문서를 작성하고, 오른쪽에 할당자, 라벨, 진행상황, 마일스톤을 설정하고 이슈를 생성한다

초기 개발 환경

Vite + Typescript + React + styled-components로 초기 세팅을 하였고, 필요에 따라 라이브러리 추가 예정이다

Figma 분석 및 정리

주어진 Figma를 보고 만들어야 할 디자인 시스템이 어떤 것인지 파악하고, 분류를 나누어 구현해야 할 리스트를 작성했다

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.

요구사항

무비앱을 리덕스를 사용하여 데이터 흐름 관리해보기

구조

movie-app
├─ env
│  └─ .env
├─ src
│  ├─ index.css
│  ├─ main.jsx
│  ├─ App.css
│  ├─ App.jsx
│  ├─ routes.jsx
│  ├─ components
│  │  ├─ Gnb.jsx
│  │  ├─ Pagination.jsx
│  │  └─ movies
│  │     ├─ detail.jsx
│  │     └─ item.jsx
│  ├─ hooks
│  │  ├─ useFetchMovies.js
│  │  └─ usePagination.js
│  ├─ pages
│  │  ├─ index.jsx
│  │  ├─ cart
│  │  └─ movies
│  │     ├─ [id].jsx
│  │     └─ index.jsx
│  └─ store
│     ├─ index.js
│     └─ modules
│        └─ favoriteMovie.js
├─ index.html
├─ .eslintrc.cjs
├─ .gitignore
├─ .prettierrc.json
├─ package-lock.json
├─ package.json
└─ vite.config.js

리덕스와 관련해서 보아야 할 폴더구조는 store이다

당연히 하나의 앱에는 하나의 스토어만이 존재해야 하지만, 데이터의 특성에 따라 나누고 끌어다가 쓸 분리가 필요하다고 생각하여 modules폴더를 두었다 (사실 당장에는 즐겨찾기 하는 저장소만이 필요해서 이런 분리가 반드시 필요했냐고 묻는다면 대답은 No이다_그러나 미래를 위해서)

이 모듈들을 index.js에서 끌어다가 createStore를 해주면 된다

코드

// src/store/index.js
import { configureStore } from '@reduxjs/toolkit';
import favoriteMovieReducer from './modules/favoriteMovie';

const store = configureStore({
    reducer: {
        favoriteMovie: favoriteMovieReducer,
    },
});

export default store;

configureStore에는 reducer뿐만 아니라 middleware도 설정 가능하다

// src/store/modules/favoriteMovie.js
import { createSlice } from '@reduxjs/toolkit';

export const favoriteMovie = createSlice({
    // action.type에 아래의 name + '/addFavorite' 요런식으로 붙어서 실행 됨
    name: 'favoriteMovie',
    initialState: {
        list: [],
    },
    reducers: {
        addFavorite: (state, action) => {
            console.log(action);
            state.list.push(action.payload);
        },
        deleteFavorite: (state, action) => {
            state.list = state.list.filter(movie => movie.id !== action.payload);
        },
    },
});

export const { addFavorite, deleteFavorite } = favoriteMovie.actions;

// 여기서의 state.favoriteMovie의 favoriteMovie index에서 createStore에서 설정
export const selectFavoriteMovie = state => state.favoriteMovie.list;

export default favoriteMovie.reducer;

redux-toolkit의 미친점(?)은 createSlice의 내부 코드에 immer 라이브러리를 사용하여서 불변성을 지키면서 코드를 작성하지 않아도 된다

Remember: reducer functions must always create new state values immutably, by making copies! It's safe to call mutating functions like Array.push() or modify object fields like state.someField = someValue inside of createSlice(), because it converts those mutations into safe immutable updates internally using the Immer library, but don't try to mutate any data outside of createSlice! 출처 - 리덕스 공식문서

// src/pages/movies/[id].jsx
import { useParams } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import { addFavorite, deleteFavorite, selectFavoriteMovie } from '../../store/modules/favoriteMovie';
// Hook
import useFetchMovies from '../../hooks/useFetchMovies';
// Component
import MovieDetail from '../../components/movies/detail';

const MovieDetailPage = () => {
    // routes
    const { id } = useParams();
    // redux
    const favoriteList = useSelector(selectFavoriteMovie);
    const dispatch = useDispatch();
    // TODO: delete line when deploy
    console.log(favoriteList);

    const { data, isLoading, error } = useFetchMovies('/movie_details.json', `movie_id=${id}`);

    if (isLoading) return <p>Loading...</p>;
    if (error) console.error(error);

    return (
        <>
            {data ? (
                <>
                    <MovieDetail
                        item={data?.movie}
                        dispatch={dispatch}
                        addFavorite={addFavorite}
                        deleteFavorite={deleteFavorite}
                    />
                </>
            ) : null}
        </>
    );
};

export default MovieDetailPage;

selectFavoriteMovie를 모듈에서 가져와서 react-redux의 useSelector에 넣어준다 dispatch를 발생시키려면 react-redux의 useDispatch()를 통해 사용가능하다

// src/components/movies/detail.jsx
const MovieDetail = ({ item, dispatch, addFavorite, deleteFavorite }) => {
    return (
        <div>
            <img src={item.background_image_original} alt={`${item.background_image_original}의배경화면`} />
            <h3>{item.title}</h3>
            <p>{item.year}</p>
            <p>{item.description_full}</p>
            <p>{item.rating}</p>
            <p>{item.runtime}</p>
            <img src={item.large_cover_image} alt={`${item.large_cover_image}의커버이미지`} />
            <button
                onClick={() => {
                    dispatch(addFavorite(item));
                }}>
                Add favorite
            </button>
            <button
                onClick={() => {
                    dispatch(deleteFavorite(item.id));
                }}>
                Delete favorite
            </button>
        </div>
    );
};

export default MovieDetail;

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.

요구사항

다양한 커스텀 훅(Custom Hook)을 설계, 구현 및 문서화 할 것

1. useFetchMovies
   • 영화 API에 HTTP 요청을 보내고,응답을 받아와서 영화데이터를 처리
   • 반환값으로는 로딩상태,영화데이터,에러 정보등을 포함하는 객체를 반환
2. useFavoriteMovies
   • 사용자가 영화를 즐겨찾기에 추가하거나 제거할 수 있는 함수를 제공
   • 반환값 자유
3. useSearchMovies
   • 사용자가 입력한 검색어로 영화를 검색하고, 검색결과를 처리
   • 반환값 자유
4. usePagination
   • 사용자가 다른페이지로 이동할 수 있도록 페이지번호를 관리
   • 반환값 자유

커스텀 훅(Custom Hook)

커스텀 훅을 만들기전에 의미를 알아보자

커스텀: 관습이라는 사전적 의미이지만, 여기서는 본인의 상황에 맞는 개인 맞춤 정도로 보면 된다 훅: 함수라고 보면 된다(useXxxx)

즉, 개발하는데에 있어 여기저기서 공통적으로 쓰이는 코드를 맞춤으로 설계하여 반복작업을 줄이는 행위이다

코드

useFetchMovies

보통의 프론트 작업에서 데이터를 가져와야 하는 경우,

1. useEffect에서 빈배열을 두어, 초기렌더링 시 데이터를 요청
2. 응답이 올 때 까지 로딩화면 표시
3. 제대로 데이터를 가져올 경우, 데이터를 렌더링
4. 에러발생의 경우 후속처리

위의 작업을 반복적으로 하게 된다 이와 같은 반복을 줄이기 위해서는 커스텀 훅을 만드는 것이 좋다

// src/hook/useFetchMovies.js
import { useEffect, useState } from "react";

const BASE_URL = "https://yts.mx/api/v2";

const useFetchMovies = (path, params) => {
  const [isLoading, setIsLoading] = useState(false);
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    setIsLoading(true);
    let url = `${BASE_URL}${path}`;
    if (params) {
      const searchParams = new URLSearchParams(params);
      url += "?" + searchParams.toString();
    }
    fetch(url, { method: "GET" })
      .then((res) => res.json())
      .then((json) => {
        // console.log(json.data);
        setData(json.data);
      })
      .catch((err) => setError(err))
      .finally(() => {
        setIsLoading(false);
      });
  }, [path, params]);

  return { data, error, isLoading };
};

export default useFetchMovies;

path: 베이스 url에다가 요청을 보낼 경로(리스트면 리스트, 디테일이면 디테일) params: 요청 시, 물음표(?) 뒤에 오는 간단한 정보들을 담는다(보통 어떤 아이디, 갯수 등)

현재는 GET요청에 한해 돌아가는 코드를 구현해보았다 더욱 살을 붙여 다른 요청에도 방어가 가능한 코드로 발전시키면 좋을 것 같다

// App.js
const { data, isLoading, error } = useFetchMovies(
  "/list_movies.json",
  `minimum_rating=7.0&sort_by=year&page=${temp.current}`
);

usePagination

게시판등에서, 총게시물이 너무 많을 경우 infinite scroll방식을 채택할 수 있지만 전통적으로는 페이지네이션을 많이 쓴다

이 기능을 구현하려면, 얼마나 많은 데이터수를 가지고 있는지와 한 화면에 뿌려줄 데이터 갯수를 바탕으로 페이지네이션을 구현해야 한다

// src/hook/usePagination.js
import { useState } from "react";

const usePagination = (totalCount = 1, itemsPerPage = 1) => {
  const [currentPage, setCurrentPage] = useState(1);
  const maxPage = Math.ceil(totalCount / itemsPerPage);
  const next = () => {
    setCurrentPage((currentPage) => Math.min(currentPage + 1, maxPage));
  };
  const prev = () => {
    setCurrentPage((currentPage) => Math.max(currentPage - 1, 1));
  };

  const jump = (page) => {
    const pageNumber = Math.max(1, page);
    setCurrentPage(Math.min(pageNumber, maxPage));
  };
  return { next, prev, jump, currentPage, maxPage };
};
export default usePagination;

총 데이터 갯수를 페이지당 렌더링할 갯수로 나눈 값을 올림 하면 총 페이지의 개수가 된다 또한 페이지 이동의 경우, useState로 선언한 currentPage를 컨트롤 해주면 된다

// src/components/Pagination.js
const Pagination = ({ next, prev, jump, currentPage, maxPage }) => {
  const computedStyle = (page) => {
    if (page === currentPage) {
      return {
        color: "red",
      };
    }
  };
  const computedStartPages = () => {
    if (currentPage > 5) {
      return Math.floor((currentPage - 1) / 5) * 5;
    }
    return 0;
  };

  const computedEndPages = () => {
    if (currentPage > 5) {
      return (Math.floor((currentPage - 1) / 5) + 1) * 5;
    }
    return 5;
  };

  return (
    <PaginationWrapper>
      <button onClick={() => prev()}>prev</button>
      {Array(maxPage)
        .fill()
        .map((_, idx) => idx + 1)
        .slice(computedStartPages(), computedEndPages())
        .map((v) => (
          <button style={computedStyle(v)} key={v} onClick={() => jump(v)}>
            {v}
          </button>
        ))}
      <button onClick={() => next()}>next</button>
    </PaginationWrapper>
  );
};
export default Pagination;

회고(라기 보다는 반성)

현재 익숙하지 않은 리액트의 개발을 하려다 보니 과제에 미흡한 점이 많이 있다 추후에 보강하여 개발을 해두어야겠다

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.

요구사항

React를 이용하여 배경이미지 랜덤 변경, 인사, 시계 만들기

기존의 Javascript를 이용해서 만들었던 프로젝트를, React로 포팅하는 과제이다 아마도 이를 수행하면 리액트의 장점과 왜 쓰는지에 대한 아이디어가 생길 것 같다

코드

구조

루트 디렉토리(최상단)에는 index.html이나 환경 설정에 관한 파일들이 몰려있고, 하위에 /env, /src폴더가 위치한다 /env에는 숨기고 싶은 변수들을 담는다(API_KEY와 같은) /src에는 리액트 파일들(진입점인 main.jsx, 앱의 전체를 담당하는 App.jsx)과 /assets(이미지)들이 들어있다

react
├─ env
│  └─ .env
├─ src
│  ├─ App.jsx
│  ├─ Clock.jsx
│  ├─ Greeting.jsx
│  ├─ TodoList.jsx
│  ├─ Weather.jsx
│  ├─ assets
│  │  ├─ bg-bicycle.jpeg
│  │  ├─ bg-bunny.jpeg
│  │  ├─ bg-forest.jpeg
│  │  ├─ bg-japan.jpeg
│  │  ├─ bg-ocean.jpg
│  │  └─ bg-wall.jpeg
│  ├─ index.css
│  ├─ main.jsx
│  └─ reset.css
├─ index.html
├─ package-lock.json
├─ package.json
├─ .eslintrc.cjs
├─ .gitignore
├─ README.md
└─ vite.config.js

배경이미지

imgPath들을 담은 배열을 정적인 변수로 선언하고, 앱에 접근할 때 index를 랜덤으로 뽑아주면 배경이미지가 새로고침(혹은 접속)할 때마다 바뀌게 된다

useState를 사용하지 않은 이유는, 앱의 구동중에 해당 상태를 변경할 일이 없을 것 같아서 useRef를 사용했다

// App.jsx
import { useRef } from "react";
import Weather from "./Weather";
import Clock from "./Clock";
import Greeting from "./Greeting";
import TodoList from "./TodoList";

const IMG_PATHS = [
  "src/assets/bg-bicycle.jpeg",
  "src/assets/bg-bunny.jpeg",
  "src/assets/bg-forest.jpeg",
  "src/assets/bg-japan.jpeg",
  "src/assets/bg-ocean.jpg",
  "src/assets/bg-wall.jpeg",
];

function App() {
  const imgPathIdx = useRef(Math.floor(Math.random() * IMG_PATHS.length));

  return (
    <div
      style={{
        backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url(${
          IMG_PATHS[imgPathIdx.current]
        })`,
      }}
    >
      <Weather />
      <Clock />
      <Greeting />
      <TodoList />
    </div>
  );
}

export default App;

인사

• 렌더링 되어지는 userName이라는 변수를 useState로 선언하고 초기값을 로컬스토리지로부터 가져온다
• 만약 그 값이 없다면 form을 보여주고 값을 입력받는다
  • 동적으로 className을 붙여주어서 디스플레이 여부를 제어한다
• userName이 갱신되면 인사말이 보여진다

input에서 onChange로 상태를 키보드를 입력할 때마다 갱신해주지 않은 이유는 useState의 상태가 변경되면 그 때마다 리렌더링이 발생하기 때문에 form을 입력하고 전송할때에만 리렌더링을 주고싶어서 input을 useRef로 접근해보았다(순수 Javascript로 DOM에 접근하듯이)

// Greeting.jsx
import { useRef, useState } from "react";

const Greeting = () => {
  const [userName, setUserName] = useState(localStorage.getItem("userName"));
  const userNameInp = useRef("");

  const onSubmitUserName = (e) => {
    e.preventDefault();
    const enteredUserName = userNameInp.current.value.trim();
    console.log(enteredUserName.length);
    if (enteredUserName.length > 1) {
      localStorage.setItem("userName", userNameInp.current.value);
      setUserName(enteredUserName);
      userNameInp.current.value = "";
    } else {
      alert("두 글자 이상의 성함을 입력해주세요(공백제외)");
    }
  };

  return (
    <section id="greeting">
      <form
        className={"login-box" + (userName ? " hide" : " ")}
        onSubmit={onSubmitUserName}
      >
        <div className="input-box">
          <input type="text" id="userName" ref={userNameInp} />
          <label htmlFor="userName">이름을 입력해주세요</label>
        </div>
      </form>
      {userName ? <h1>{userName}님 안녕하세요!</h1> : null}
    </section>
  );
};
export default Greeting;

시계

now라는 현재 시간을 담을 변수를 useState로 선언하고 1초마다 갱신 해준다 useEffect에서 dep array에 now를 담아서 변할때마다 내부 함수를 실행시킨다 useEffect내부에서는 setInterval로 now를 변동시킨다

useEffect 내부에서의 return이 없다면? 리렌더링 될 때, setInterval 작동을 클리어 시키지 않으므로, setInterval이 n번식 호출된다

// Clock.jsx
import { useEffect, useRef, useState } from "react";

const Clock = () => {
  const [now, setNow] = useState(new Date());
  const interval = useRef(null);
  useEffect(() => {
    // console.log(now);
    interval.current = setInterval(() => {
      setNow(new Date());
    }, 1000);
    return () => {
      clearInterval(interval.current);
    };
  }, [now]);
  return (
    <section id="clock">
      <h2>{now.toLocaleTimeString()}</h2>
    </section>
  );
};

export default Clock;

결과

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.

요구사항

vanilla js로 할 일 목록 만들기 vanilla js로 내 위치의 날씨 만들기

코드

전체 HTML

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello World?</title>
    <link rel="stylesheet" href="./style/reset.css" />
    <link rel="stylesheet" href="./js-assignment-css.css" />
    <script defer src="./js-assignment-js.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- weather -->
      <section id="weather"></section>
      <!-- clock -->
      <section id="clock"></section>
      <!-- greeting -->
      <section id="greeting" class="hide">
        <form class="login-box">
          <div class="input-box">
            <input type="text" id="userName" />
            <label for="userName">이름을 입력해주세요</label>
          </div>
        </form>
      </section>
      <!-- todo -->
      <section id="todo">
        <form class="todo-box">
          <div class="input-box">
            <input type="text" id="todoInp" />
            <label for="todoInp">할 일을 입력해주세요</label>
          </div>
        </form>
        <ul id="todoList"></ul>
      </section>
    </div>
  </body>
</html>

script에 defer속성을 주어, 스크립트의 다운로드와 함께 html렌더 중지를 하지 않고 렌더가 완료되고 스크립트의 실행을 시켜주었다

날씨

위치 기반의 날씨를 렌더링 하려면 두 가지의 문제가 있었다

• 내 위치를 알아내야 한다(가져와야한다)
• 해당 위치의 날씨 정보를 알아내야 한다(가져와야한다)

첫번째 문제는 Web api의 navigator(의 geolocation)를 활용하면 된다

Web api란 자바스크립트에 내장된 모델은 아니지만, 우리가 현재 자바스크립트를 실행시키는 웹에서 제공되는 api이다

Navigator 인터페이스는 사용자 에이전트의 상태와 신원 정보를 나타내며, 스크립트로 해당 정보를 질의할 때와 애플리케이션을 특정 활동에 등록할 때 사용합니다. Navigator 객체는 window.navigator 읽기 전용 속성으로 접근할 수 있습니다. Navigator.geolocation 읽기 전용 속성은 웹에서 장치의 위치를 알아낼 때 사용할 수 있는 Geolocation 객체를 반환합니다. 웹 사이트나 웹 앱은 위치정보를 사용해 결과 화면을 맞춤 설정할 수 있습니다. [출처] MDN(Navigator-Web API)

코드에서 우선 해당브라우저에서 API를 사용할 수 있는지 분기처리하고, 사용할 수 있다면 open api를 활용해서 기능을 구현해주도록 한다

또한 open api 데이터를 가져올 때 생길 에러상황도 구현해준다

// weather
const KEY = "cd9fca71fbee843c7a38d104afaf8bf8";
const $sectionWeather = document.getElementById("weather");

const getWeather = async ({ latitude, longitude }) => {
  try {
    const res = await fetch(
      `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${KEY}&units=metric`
    );
    const json = await res.json();
    const { weather, main } = json;

    const $div = document.createElement("div");
    $div.classList.add("wrap-weather");
    const $span = document.createElement("span");
    const $img = document.createElement("img");
    $span.textContent = main.temp + "°C";
    $img.src = `http://openweathermap.org/img/wn/${weather[0].icon}@2x.png`;

    $div.appendChild($img);
    $div.appendChild($span);

    $sectionWeather.appendChild($div);
  } catch (error) {
    const $div = document.createElement("div");
    $div.classList.add("wrap-weather");
    const $span = document.createElement("span");
    $span.textContent = "fail to load weahter";
    $div.appendChild($span);
    $sectionWeather.appendChild($div);
  }
};
if ("geolocation" in navigator) {
  console.log("위치정보 사용 가능");

  navigator.geolocation.getCurrentPosition((position) => {
    const { latitude, longitude } = position.coords;
    getWeather({ latitude, longitude });
  });
} else {
  console.log("위치정보 사용 불가능");
}

openweathermap API KEY는 현재 inactivate해놓았습니다

할 일 목록

투두리스트의 경우엔, form으로 사용자의 입력값을 받아서 todos라는 배열에 투두를 푸쉬하고, 해당 배열을 렌더링해주는 방식으로 구현했다

입력을 마치고 배열에 투두가 잘 들어갔다면, 입력창을 초기화하고 포커싱을 떼주는 기능까지 구현했다

삭제의 경우, 투두에다가 id를 삽입해두었다가 해당 id를 기준으로 배열에서 filter해주는 방식을 사용했다

삭제가 된 todos라는 배열을 다시 렌더링 해주면 삭제기능은 끝이다

form의 경우 default로 행동하는 새로고침을 막기위해 이벤트의preventDefault를 활용했다

// todo
const $todoList = document.getElementById("todoList");
const $todoForm = document.querySelector(".todo-box");

let todos = [];

$todoForm.addEventListener("submit", (e) => {
  e.preventDefault();
  const todo = e.target[0].value;
  if (!todo) return;

  todos.push({
    id: todos.length,
    desc: todo,
  });

  renderTodos();

  e.target[0].value = "";
  document.getElementById("todoInp").blur();
});

function renderTodos() {
  $todoList.innerHTML = "";
  todos.forEach((todo) => {
    const $li = document.createElement("li");
    const $inp = document.createElement("input");
    const $span = document.createElement("span");
    const $btn = document.createElement("button");

    $li.id = todo.id;
    $li.classList.add("todo");

    $inp.name = todo.id;
    $inp.id = todo.id;
    $inp.type = "checkbox";

    $span.textContent = todo.desc;
    $span.htmlFor = todo.id;

    $btn.classList.add("delete");
    $btn.textContent = "삭제";

    $li.appendChild($inp);
    $li.appendChild($span);
    $li.appendChild($btn);

    $btn.addEventListener("click", (e) => {
      deleteTodo(e.target.parentNode.id);
    });

    $todoList.appendChild($li);
  });
}
function deleteTodo(id) {
  todos = todos.filter((todo) => todo.id != id);
  renderTodos();
}

결과

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.

요구사항

과제의 요구사항은 총 3개로, 하나의 페이지에 구현하는 것이다 추가 요구사항은 목요일 과제로 진행될 예정이다

• vanilla js로 배경이미지 랜덤 변경
• vanilla js로 인사 만들기
• vanilla js로 시계 만들기

코드

HTML

앱 전체를 div id=app으로 감싸준 뒤, 구현해야할 기능별로 section을 나눠주었다 사용자의 이름을 입력받을 섹션에는 기본적으로 hide라는 class를 주어 숨김처리하고 있다(추후에 js로 컨트롤하여 이 클래스를 제거해준다)

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello World?</title>
    <link rel="stylesheet" href="./style/reset.css" />
    <link rel="stylesheet" href="./js-assignment-css.css" />
    <script defer src="./js-assignment-js.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- weather -->
      <section id="weather"></section>
      <!-- clock -->
      <section id="clock"></section>
      <!-- greeting -->
      <section id="greeting" class="hide">
        <form class="login-box">
          <div class="user-box">
            <input type="text" id="userName" />
            <label for="userName">이름을 입력해주세요</label>
          </div>
        </form>
      </section>
      <!-- todo -->
      <section id="todo">
        <form>
          <!-- <input type="text" name="" id="" /> -->
        </form>
      </section>
    </div>
  </body>
</html>

CSS

전에는 background-image를 쓰지않고 이미지태그 하나, 백그라운드 어두운처리용 div를 썼었는데 그러지 않아도 어둡게 처리할 수 있다

background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url("IMG_PATH")

Javascript

스크립트는 IIFE로 즉시실행을 해준다(없어도 실행은 되지만 전역변수의 사용을 피하기위해 사용하였다)

(() => {
  console.log("IIFE");
  ...
})()

랜덤 배경화면은 준비된 이미지들의 PATH들을 담은 배열과 Math.random()을 활용하여 background스타일의 url을 갈아끼워주는 방식으로 구현했다

// random background
const DEFAULT_PATH = "./assets/";
const imgPaths = [
    "bg-bicycle.jpeg",
    "bg-bunny.jpeg",
    "bg-forest.jpeg",
    "bg-japan.jpeg",
    "bg-ocean.jpg",
    "bg-wall.jpeg",
];
const App = document.getElementById("app");
App.style.backgroundImage = `linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url(${DEFAULT_PATH + imgPaths[Math.floor(Math.random() * imgPaths.length)]
})`;

인사의 경우, 로컬스토리지를 활용해 값이 있는 경우와 없는 경우에 렌더링되어야 하는 요소가 다르다 이를 구현하기위해 렌더링을 해주는 함수는 밖으로 빼주었다

분리된 함수를 통해, 값을 가져왔을 때(로컬스토리지로부터) 있다면 인사를 렌더링하고 없다면 form의 hide클래스를 제거하여 유저로부터 이름을 받는다

// greeting
let userName = localStorage.getItem("userName");
const $loginForm = document.querySelector(".login-box");

const showGreeting = () => {
  $loginForm.remove();
  userName = localStorage.getItem("userName");
  const $sectionGreeting = document.getElementById("greeting");
  const $h1 = document.createElement("h1");
  $h1.textContent = userName + "님 안녕하세요";
  $sectionGreeting.appendChild($h1);
};

if (userName) showGreeting();
else {
  document.getElementById("greeting").classList.remove("hide");
  $loginForm.addEventListener("submit", (e) => {
    e.preventDefault();
    const userName = document.getElementById("userName").value.trim();
    if (userName) {
      document.getElementById("userName").value = "";
      // blur(): Remove focus from a text input
      document.getElementById("userName").blur();
      localStorage.setItem("userName", userName);
      showGreeting();
    }
  });
}

시계의 경우 핵심은 1초마다 현재시간을 렌더링해야 하는것이 필수였다 이를 위해 시간을 지정하면 콜백함수를 실행시키는 setInterval를 활용했다 약간의 문제점은 setInterval은 지정한 시간 이후부터 실행이 되기에 약간의 딜레이가 생긴다 이를 해결하기 위해 시간을 출력하는 함수를 분리하고, setInterval이전에 showTime을 한번만 실행해주면 조금 더 부드럽게 출력이 된다

// clock
const $sectionClock = document.getElementById("clock");
const $h2 = document.createElement("h2");
const showTime = () => {
  const now = new Date();

  const hours = now.getHours();
  const minutes = now.getMinutes();
  const seconds = now.getSeconds();
  const AMPM = hours > 12 ? "PM" : "AM";

  const addZero = (num) => {
    let result = String(num);
    return result.length === 1 ? "0" + result : result;
  };

  $h2.textContent = `${AMPM} ${addZero(hours)} : ${addZero(
    minutes
  )} : ${addZero(seconds)}`;

  $sectionClock.appendChild($h2);
};
showTime();
setInterval(showTime, 1000);

결과

• 새로고침을 할 때마다 무작위 배경화면이 렌더링 된다
• setInterval을 활용해 1000ms의 시간마다 현재시간을 보여준다
• localStoarge에 userName이라는 key를 가진 value가 없다면, form의 hide라는 class를 제거하여 폼을 보여준 뒤 입력받을 수 있도록 해주고, 해당 value가 있다면 인사말을 남긴다

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.

(구)세이프홈즈 랜딩페이지 반응형 퍼블리싱 - css, js 작성

이번 과제는 Figma를 보고 랜딩페이지를 반응형으로 만들라는 요구사항이었다 한 페이지를 만드는데 하루를 꼬박 다 썼다 하루에 두개 세개 그 이상의 페이지를 매끄럽게 만들기 위해서는 내가 지금 어렵거나 시간을 많이 들였던 부분을 정리하면 좋을것 같다

사안과 코드

screen reader only

페이지를 각 섹션별로 나누고, h2태그로 해당 구역의 의미를 가지는 태그를 삽입했다 그러기 위해서는 스크린에서는 보이지 않는 요소가 반드시 생기고, 웹 접근성을 고려해서 해당 태그를 숨기는 기법을 사용했다

.sr-only {
  position: absolute;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
}

위의 클래스를 태그에 지정해주면 화면에서는 보이지않고, 스크린 리더는 읽을 수 있도록 코드작성이 가능하다

이상한 가로 스크롤 생김(여백 생김)

라이브 서버를 구동하면서 화면을 체크하다보니 가로여백이 생겼다 바디의 마진이나 패딩은 리셋을 통해 아니라는걸 알았고 원인을 알 수 없지만, 바디의 너비를 100%로 고정하고 x축으로 넘치는 걸 막으면 임시방편으로 해결할 수 있다고 생각해서 적용해 보았다

body {
  width: 100%;
  overflow-x: hidden;
}

어느정도 문제는 해결했지만, 가끔씩 여백이 생기는 경우가 발생했는데 새로고침 연타를 통해 해결아닌 해결을 할 수 있었다

디자인시안 분석하기

"무작정 키보드에 손 올리지 마시고 작성 해보세요"

강사님의 당부가 떠올라, 랜딩 페이지의 디자인을 분석해서 나름대로 정리해보고 css작성을 해보고자 했다

처음에는 웹 페이지 기준 각 섹션별로 통일된 스타일이 있는지 분석했다 분석해보니, 크게 4가지 구성이 보였다

레이아웃(flex, container), 폰트(사이즈, 굵기, 줄간격, 자간격), 버튼 정도는 스타일을 지정해두고, 해당 선택자를 html에서 클래스만 지정해주면 되겠다고 생각했다(마치 부트스트랩처럼)

그 다음으로는 스크린의 너비에 따른 통일된 변경사항이 있는지 분석했다 예를 들어 .txt-lg는 웹에서는 어떤 스타일, 태블릿에서는 어떤 스타일, 모바일에서는 어떤 스타일 이런 식으로 분석했다

위의 흐름대로 분석을 했더니, 통일된 스타일을 찾을 수 있었고 가끔씩 생기는 특이사항은 선택자로 잡아와서 수정해주면 되었다

container

.container {
  width: 976px;
  margin-inline: auto;
}
.container-lg {
  width: 1084px;
  margin-inline: auto;
}
@media (max-width: 1024px) {
  .container {
    width: 634px;
  }
  .container-lg {
    width: 712px;
  }
  ...
}

컨테이너의 너비를 지정해주고 margin-inline: auto;로 중앙정렬을 해준 뒤, break-point별로 크기를 조정해주면 반응형으로 대응이 가능하다

font(weight, color, size, line-height, letter-spacing)

/* text size */
.txt-4xl {
  font-size: 48px;
  line-height: 57.6px;
  letter-spacing: -1.8px;
}
@media (max-width: 1024px) {
  .txt-4xl {
    font-size: 32px;
    line-height: 1.2em;
    letter-spacing: -0.9;
  }
  ...
}

픽셀별로 분석해보면, 16, 18, 21, 24, 32, 48, 60픽셀을 가진 폰트들이 있었고 많다라고 느꼈지만 처음 세팅시간이 오래걸리지만 페이지가 많았다면 효율적일것이라고 생각했다(그런데 만약, 다른페이지에서는 통일되게 변화를 하지 않는다면 그건 끔찍하다)

break-point별로 변동되는 스타일을 분석해서 위와 같이 코드로 작성하면 반응형으로 대응할 수 있었다

btn

버튼은 크게 두가지 관점으로 봤다 크기와 버튼 색상

/* 버튼 */
.btn-sm {
  padding: 8px 24px;
  border-radius: 4px;
}
.btn-lg {
  padding: 23px 27px;
  border-radius: 8px;
}
.btn-mid {
  padding: 21px 25px;
  border-radius: 8px;
}
.btn-blue {
  background-color: var(--blue-color);
  color: #fff;
}
.btn-white {
  background-color: #fff;
  color: var(--blue-color);
}

flex

레이아웃 흐름잡기에서 빠질 수 없는 flex를 미리 지정해주었다

* flex */
.flex {
  display: flex;
  flex-wrap: wrap;
}
.flex-reverse {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}
.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-col-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

img의 너비 높이에 관하여

이미지는 너비와 높이의 비율이 중요한 요소이다 하지만 사진이 필요한 곳들은 천차만별이고, '카드'라고 예를 들었을 때 비율이 다른 사진이더라도 같은 사이즈의 공간에 끼워넣어야 할 순간이 생긴다

이럴 땐, 사이즈를 지정하고 object-fit속성을 이용하여 컨트롤해준다 cover로 해주면 비율을 맞춰서 확대?자르기?를 통해 맞춰준다

.card .img-card {
  width: 100%;
  height: 233px;
  object-fit: cover;
  border-radius: 8px;
}

클래스의 지정에 관한 고찰

이제껏 텍스트, 버튼, 레이아웃(flex, container)를 분석해서 일반화를 시켰다 그러나 모든 구역에서 어느정도의 통일성만 있지 완벽히 동일할 수 없다 가령, 어떤 구역에서는 xl의 사이즈를 가지지만 line-height만 다를 수 있다 이럴 때는 불가피하게 해당 태그를 선택자로 잡아와서 조정해야만 한다 그런데 이때 .불어와야할컨테이너 .불러와야할태그 .txt-xl 이런 식으로 잡아오는 것은 의미적으로 맞지 않다고 생각했다 그래서 해당 태그가 가지는 의미로 가져오고 싶었고, 아래처럼 바꾸어 보았다 .불어와야할컨테이너 .불러와야할태그 .태그가가지는의미적특성 여기서 보통 특성을 가져올 때, tit, desc 정도로 잡았는데 이게 맞는지 의문이 들었다

그러나뎊스를 타고 들어오면서 잡아야 한다는 암묵적인 룰이 있다면 이는 문제가 없을것으로 보였다

풀어서 설명하자면,

섹션첫번째의 카드의 사이즈가라지인 태그의 line-height를 바꾸겠다

가 아니라,

섹션첫번째의 카드의 타이틀의 line-height를 바꾸겠다

로 바꾸면 의미도 들어맞고, 모듈(야매모듈)로 작성한 스타일도 쓸 수 있다고 생각해서 적용해 보았다

결과

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.

자신만의 스타일로 프로필화면 구현하기 특이사항: 반응형을 고려해서 만들 것

내가 만들어본 시안

크게 세구획이 있고, break point에서 아래에 있던 구획이 레이아웃이 바뀌도록 반응형 디자인을 고안했다

코드

간만에 간단한 디자인 구상부터 제로부터 CSS 작성을 하려니 시간이 오래 걸렸다

구현을 하면서 시간을 많이 썼던 부분을 정리해본다

웹 폰트

구글폰트에서 원하는 폰트를 CSS파일에서 직접 import해서 쓸 수 있다

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,900&display=swap");

적용하고싶은요소선택 {
  font-family: "Montserrat", sans-serif;
}

변수처리

CSS에서도 변수를 쓸 수 있다는 것은 알고있었지만, 적용을 해본적이 없었다

:root {
  --main-black-color: #2a272a;
  --main-theme-color: #0859fa;
  --main-sub-color: #22a4be;
}
적용하고싶은요소선택 {
  color: var(--main-theme-color);
}  

root에서 관리할 변수를 작성하고, 하단의 코드부분에서 끌어다 쓸 수 있다

responsive한 스타일

화면의 viewport를 고려한 반응형 스타일을 작성하는 요소를 몇 개 정리해본다

• 흐린배경처리 요즘 웹에서 많이 보이는 흐린배경처리를 도입해보고자 했다

  nav {
  backdrop-filter: blur(10px);
  }

  실제로 프로필 상단과 하단에 블러처리한 내비게이션과 서머리텍스트를 넣었다

구현자체는 CSS의 backdrop-filter를 이용하면 된다

• flex direction 이제는 flex속성을 여러 브라우저에서 사용할 수 있다(+IE의 몰락😀) 구획을 수평 방향으로 나누는 스타일에서 아래로 떨어뜨리고 싶을 때, flex-direction을 row(default)에서 column으로 변경하면 쉽게 바뀐다

  .wrap-content section {
  display: flex;
  }
  @media (max-width: 800px) {
  .wrap-content section {
    flex-direction: column;
  }
  }

• vw를 활용한 크기지정 하단에 눈길을 끄는 텍스트를 고정시키고, 해당 font-size를 vw로 지정하면 화면크기에 따라서 크기를 가지게 되어 더욱 반응형스러운 디자인을 가지게 된다

  .banner-summary {
  position: fixed;
  bottom: 0;
  right: 0;
  
  font-family: "Montserrat", sans-serif;
  font-size: 7vw;
  line-height: 0.9em;
  letter-spacing: -9px;
  
  backdrop-filter: blur(10px);
  width: 100%;
  text-align: end;
  }

• 단어에 따라서 떨어뜨리고 싶다 화면을 줄이다보면 글자별로 떨어지는 모습을 볼 수 있다 하지만 사용자가 "벨(다음줄)로그를 읽다보면..."과 "벨로그를(다음줄)읽다보면..." 둘 중 하나를 택한다면 당연히 후자일 것이다 이를 코드로 구현하려면 word-break를 쓰면 된다 ```css

• { word-break: keep-all; }

결과

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.

4일차에는 HTML 수업을 진행했다. 기존에 알고있던 내용이 있어서 내가 찾아본 내용위주로 정리하고자 한다.

HTML 학습

<meta> 태그

meta는 어떤데이터가 있으며, 그 데이터를 설명하는 데이터를 메타데이터라고 한다 태그도 어찌보면 메타데이터라고도 할 수 있다

<head>
  <meta charset="utf-8" />
  <meta name="description" content="생활코딩의 소개자료">
  <meta name="kewwords" content="코딩,coding,프로그래밍,html,css,js">
  <meta name="author" content="egoing">
  <meta http-equiv="refresh" content="30">
</head>

• 코드는 결국 문자열이다 이 문자열을 어떤 방식으로 저장하고 읽어올지 charset 속성으로 작성
• 페이지가 어떤 내용을 담고있는지 description 속성으로 작성
• 페이지가 담고있는 내용을 단어로 나누어서 kewords 속성에서 콤마로 구분지어 작성
• 페이지의 저자를 author 속성으로 작성
• http-equiv=refresh로 몇 초마다 새로고침 할 지 작성

<a> vs <button> (버튼 UI)

디자인 시안을 보고 버튼처럼 생겼다고 해서 습관적으로 button태그를 사용하는 것은 위험하다

<a>

앵커태그는 '페이지의 이동'을 의미한다 페이지 내부에서 어떤 구획으로의 이동을 의미할 수도 있고, 아예 다른 사이트로의 이동을 의미할 수 있다 그러니 '이동'이 이루어지는 요소라면 앵커태그를 사용해야 한다

<button>

버튼태그는 '사용자의 액션'을 의미한다 전송이나 혹은 알림받기 등, 해당 버튼을 클릭하면 어떠한 액션이 발생한다면 버튼태그를 사용해야 한다

Open Graph Protocol (:og)

간혹 우리가 어떤 링크를 카카오톡 등에서 공유할 때, 미리보기 사진이나 제목들을 볼 수 있다 이러한 미리보기 영역까지 고려한다면 훨씬 좋은 사이트가 될 수 있다 이를 나타내기 위해서는 오픈그래프 프로토콜을 이용한다 메타 태그로 작성해야한다

<meta property="og:title" content="미리보기-제목">
<meta property="og:description" content="미리보기-짧은요약">
<meta property="og:image" content="미리보기-이미지경로">

위와 같이 메타태그로 property="og:종류" content="..."로 작성해주면 우리의 사이트의 미리보기가 완성된다

과제

깃허브링크

요구사항

(구)세이프홈즈 랜딩페이지의 Figma 시안을 보고 클론코딩 실시 특이사항: HTML만을 사용해서 구조만 잡기

코드

• h1태그는 한 페이지에 하나만 담아야 한다

• 의미별로 구획을 나누어 마크업한다

  서비스의 전체 내용을 말해주는 h1 태그는 나중에 숨김 텍스트 처리하여서 스크린 리더만 읽게 해준다 의미를 파악하여 구획을 나눈후, 해당 구회마다 주석을 달아준다

• 구획별로 제목을 나타내는 heading태그가 있어야 한다(숨김텍스트처리)

  <section>
  <h2>내 집 보증금, 경매로 날아가면 어떻게 하지?</h2>
  ...
  </section>

  구획별로 heading 태그를 반드시 두고, 리스트의 내용에도 h3를 활용하여 heading 태그를 사용해준다

• 대체 텍스트를 고려해야 한다

  <img src="./assets/logo.svg" alt="세이프홈즈로고이미지" />

  이미지를 삽입하는 경우 어떠한 이미지를 넣었는지 대체텍스트를 반드시 작성한다

• 서비스의 내용과 연관없는 의미를 가진 이미지를 pseudo element로 처리한다

• 수정보완이 필요한 부분에는 주석을 달자

<!-- TODO: 화살표모양(>)는 pseudo el로 처리하기 -->
<a href="#"><span>지금 걱정 해결하기</span></a>

위의 예시는 단순히 꺽쇠로도 표현이 가능하지만, 간단하 다른 이미지라고 상상(?)을 하고 굳이 의미가 있는 이미지가 아니므로 슈도 엘리먼트를 활용해보자 또한, 아직 완전한 구현이 되지 않았으므로 코드를 유지 보수하기 쉽게 TODO라는 문구를 붙여서 주석을 작성한다

• 버튼 UI의 의미를 고려하여 태그를 선택한다 위에서 기술한것처럼, 버튼모양을 관습적으로 버튼태그를 쓰지 않도록 유의한다

결과

참고자료

생활코딩-meta 드림코딩-HTML 태그들, 헷갈리는거 정리해 보았다 🥳 The Open Graph Protocol

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.

지금까지 기획한 흐름들을 실제로 옮기는 '아이디어 스케치'를 알아보자 과제: 여러분의 플랫폼을 아이디어 스케치로 그려보세요

수업

지금까지의 흐름

• 내가 불편함을 느끼는 현상 발견
• 현상을 해결하는 아이디어를 마인드 맵으로 형상화
• 현상을 겪는 사람과 해결해주는 사람의 액션 정의
• 유저가 서비스를 이용하는 흐름 정의

  아이디어 스케치?

• 흩뿌려져 있던 아이디어들, 도표들을 현실의 서비스처럼 실체화해서 현실처럼 그려놓은 것

  왜?

• 도표보다도 확실하게 서비스의 구조를 실제처럼 파악할 수 있다
• 전체 스토리를 중요도에 따라 알 수 있다
• 진행과정의 스토리 흐름을 알 수 있다

효과적인 스케치

• 1장에 1개의 주제만을 담아라
• 그리는데 3분이상 소요하지마라(흐름을 잡는것이다)
• 스토리를 그려라
• 알고있는 개념은 생략하라(내가 알고 있으니 괜찮다)

스케치가 완료되었을 때 가장 중요한 것은 그림이 아니라 머리속의 이미지다

스케치의 흐름

• 상품에 들어갈 요소 정의
• 카피 확장
• 상품의 스토리 구성 스케치
• 구성 레벨화

이렇게 완성된 스케치는 스토리보드, 제안서, 시놉시스, 회의, 다이어리 등에 쓰일 수 있다

과제

여러분의 과제를 아이디어 스케치로 그려보세요

어떻게?

• 메인페이지(검색) → 결과 리스트 렌더 → 상세페이지 렌더 → 참여하기
• 메인페이지(멘토클릭) → 멘토 상세페이지 렌더 → 멘토링신청

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.

목적: 서비스 기획 단계에 있어 UML이란 무엇인지 이해하고, 직접 가상의 모델링을 실습해보자 TODO: Activity Diagram을 만들어보세요

수업

왜 UML?

텍스트가 주는 파워는 강하지만 직관적이지 못하다. 하나의 서비스는 덩어리가 너무 크지만, 이런 서비스를 알리는데에 순수 텍스트로만 접근을 한다면 접근성이 매우 떨어질 것이다. 직관적으로 서비스를 잘 이해하려면 UML이 필수적이다.

복잡한 설명서를 1쪽부터 100쪽까지 읽을 것인가, 시스템의 흐름을 적절한 글과 그림으로 풀어낸 한장짜리 설계도를 볼 것인가?

그래서 UML이 무엇?

• Unified Modeling Language
• 복잡한 사람들의 사고와 생각을 표현하는 도구 혹은 방법론이라고 이해할 수 있다.

어떻게 개발할 것인지를 나열하는 것이 아닌, 이 시스템의 산출물의 역할을 시각화하여 규정하는 것이다.(말 그대로 시스템을 이해하는 것이지, 시스템을 어떻게 만들지에 대한 설명서가 아니다)

이런 과정을 통해 꼭 필요한 행위를 기반으로 한 객체 지향 모델링이 가능해진다

💡 모델링을 할 때 단순화, 일반화, 추상화를 통해 모델링을 해야한다. 예를 들어, 유저의 구구절절한 유입 시나리오나 300포인트를 쓰냐 안쓰냐등의 코어하지 않은 부분은 고려하지 않는다.

무턱대고 모델링을 하지 않고 정제를 통한 모델링을 하므로 내부 구조나 동작의 표현의 자유가 있고, 시스템의 요소들간에 관계를 보기 쉬우며, 설계와 구현간의 일관성을 유지할 수 있다. 무엇이 더 코어한 흐름인지를 나타내는 레벨화도 가능하다.

Usecase Diagram

• 우리 서비스는 ‘무엇’을 제공할 것이고, 그 ‘무엇’을 정의하는 다이어그램이다.

인문학적인 소양이 떨어지다보니 이해하기에는 어렵지만, 행동을 하는 Actor들을 기준으로 그들이 하는 행동(단순, 일반, 추상)들과 Actor들간에 관계를 알 수 있다.(오히려 말보다는 그림이 이해하기 쉽다)

Activity Diagram

• 서비스 흐름에서 가장 코어한 부분만 처음부터 끝까지 일종의 시나리오를 만드는 것

  개발자와 UML에 대한 고찰

  그래서 UML을 학습해서 우리는 어떤 개발자가 되어야 하냐고 묻는다면,
• (유저 혹은 관리자)액션, 관계에 대한 설계도를 도식화해서 이런구조로 형성이 되어있다라고 설명할 수 있는
• 혹은 그런 서비스를 이해한채로 개발하는 개발자가 되어야한다고 생각한다

그리고 기획, UML 설계를 무조건적인 수용을 할 것인가? 위험하다. 설계도를 바탕으로 우리도 물음표를 던질 수 있어야한다. 공동의 책임이 있다

더 나아가서는?!

상세한 기획에 있어서는 앞선 도표를 바탕으로 스토리보드를 제작하게 된다. 이 때 우리 서비스의 유저의 상당수가 이러할 것이다라는 기준을 잡은 가상인물인 페르소나가 등장한다. 그들의 공통적인 니즈를 설계해두고, 이를 바탕으로 스토리보드를 제작하게 된다.

과제

어떻게?

여러가지 행동 흐름(액터별, 상황별)이 나올 수 있겠지만, 프로젝트나 스터디의 멘토링을 받는다는 가장 거대한 스토리 흐름을 다이어그램에 담아보려고 한다.

결과는?

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.

플랫폼 설계의 시작은, 어떠한 주제(내가 서비스하고 싶은 주제)를 두고 이런 서비스가 있다면 이런이런 기능들이 있겠구나 상상하며 키워드들을 나열하고 이러한 키워드들의 집합이 곧 플랫폼의 시작점이 된다.

플랫폼의 차별성?!

쿠팡과 옥션은 이커머스 사이트라는 범주에서는 동일하지만, 우리는 확실히 다르다고 느낀다. 이처럼 플랫폼이 굉장히 새로울 필요는 없지만, 차별화 포인트 하나만 있다면 그것만으로도 훌륭한 플랫폼이 될 것이다.

My Ideation

현재 내가 개발공부를 하고있기도 하고, 어려움을 겪는 부분들이 많다보니 이러한 문제를 해결하고 싶었다. 스터디나 프로젝트를 통해 성장할 수 있으면서 초심자들이 길을 잃지 않도록 멘토링 서비스를 하게되는 플랫폼을 생각해보았다. 이전에 이미 고민했었던 주제이다 보니 쉽게 할 수 있었다.

잊지말아야 한다

기획을 알고모르고, 그 기획을 자세히 아는자와 대충 아는자의 차이는 구현 단계에서 차이가 난다. 그러니 계획단계의 내용들을 잊지말자.

결과

맥용 프리마인드 설치에 어려움이 있어, 기존에 있던 Figma툴을 활용하여 마인드맵을 작성해보았다.

후기

본격적인 '개발'을 공부하고 프로젝트를 하기전에, 웹 기획이라는 거대한 뼈대를 바라볼 줄 아는 사람이 되어야 하는 것이 중요하다고 느꼈다. 이전에 '개발자의 품격'을 진행할 때에도, 멘토님은 기획의 중요성을 강조하셨고 이번 유데미 캠프에서도 마찬가지이다.

개발자가 개발을 잘하는 것은 당연한 얘기이다. 그러나 개발자가 기획을 고려하는 것은 차별점임과 동시에 무기가 될 수 있다.

첫 주에 편성된 기획 강의를 개발자가 되더라도 잊지말자!

수업내용

끊임 없이 질문해라

1. 누가 이용해?
2. 어떤걸 제공해?
3. 제공해서 어떤걸 얻어?
4. 그 싸이클은 자동화(일정의 흐름정도로 보임)야?

위의 질문을 계속해서 생각하고 던져보면서 플랫폼의 아이덴티티를 잊지말고, 잃지말고, 단단히해라.

플랫폼이란?

정류장과도 같다. 고객은 원하는걸 얻고, 기업은 고객이 원하는 것을 제공하고 이득을 본다

플랫폼의 진화

플랫폼의 진화는 그 시대의 디바이스와 연관되어 있다.

고객의 “행동”으로 이뤄지는 플랫폼 생태계

그래서, 플랫폼의 핵심은?

플랫폼은 시장의 흐름을 보는 것부터 시작되고, 세상의 행동이 인터넷 서비스로 전환되고 있으며, 우리가 중점적으로 관찰해야 하는 것은 “관계”이다.

고객들간의 관계 혹은 고객과 플랫폼과의 관계, 관계를 유지하기 위한 수단으로 우리의 플랫폼을 쓰게끔 하자!

설계의 시작점

상상의 키워드들을 나열하고, 그들의 조합이 곧 플랫폼 설계의 시작이다.(마인드맵)

성공한 플랫폼의 특징

문화를 리드하고 사용자의 생활/이용 환경에 변화를 준 플랫폼

How to success?!

첫 번째 : 기업의 신뢰가 없다면 사람과 사람의 신뢰를 공략하자! 두 번째 : 이용을 하지 않으면 손실을 보는 가치를 부여하자! 세 번째 : 처음부터 비용을 선뜻 지불하는 고객은 없다! 무료와 병행하라!

idea...

"아이디어라는 것은 원래 완성 상태로 떠오르지 않습니다. 오직 실행하는 과정에서만 명료해질 뿐입니다. 그래서 지금 바로 시작하면 되는 겁니다." -마크저커버그-

일단 서비스의 핵심만을 메이킹하고 배포하자. 그러고 살을 붙여야지 굴러간다.

기억나는점

AI와 인간

빠르게 발전하는 AI시대에서, AI가 이야기하는 것의 “진위여부 판단”만큼은 아직 인간의 역할(혹은 숙제정도)로 남아있다는 점이 인상깊었다. 이 말은 즉, 아직은 AI가 완성형이 아니라는 점에서 인간으로서 한시름 놓을 수 있는(?) 부분이 아닐까 싶지만 역으로 그 부분을 제외하고는 AI가 모든 걸 메이킹 할 수 있다는 점에서 소름이 돋는다.

왜 이렇게 적극적인 거야!

왜 이렇게 적극적으로 유저가 서비스를 잘 이용할까라는 질문이 인상깊었다. 우리는 무언가 새로운게 나오면 미친듯이 이용하고 나름의 전문가가 된다.(그런데 왜 그런지는 똑 부러지게 말씀 해주시진 않았다) 강사님의 맥락을 정리해보면, 이러한 트렌드와 변화의 흐름에 빠르게 탑승해서, 그걸 활용할 줄 알아야 한다는 것이다. 미래에는 더욱 명확하게 변화에 적응한자는 살아남고 그렇지 않으면 도태되거나, 이득을 훨씬 적게보는 흐름으로 갈 것이다.

지식을 습득하는 마음가짐

깊은 지식은 기술이 대체할 수 있으니 얕고 넓게 알아라 지금의 트렌디한 기술들을 ‘내 것이 아니다’ 라고 생각하지 마세요 ⇒ 너무나도 내 이야기이다

지금은 무슨 시대?

이제는 “소비자의 ‘질문’을 이해하는 시대” ⇒ AI가 정교하게 이 사람이 원하는 것이 무엇인지, 어떻게 해결할 것이며 연관있는 정보마저도 정교하게 제공되어야 한다.

흐르지 않는 물은?

플랫폼은 자전거와 같아서, 멈추면 쓰러진다 ⇒ 그렇다고해서 갑자기 기획을 틀어버린다? 클래스101처럼됨

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.

2부터 타겟 숫자까지 모든 숫자를 나열한다.(10이라면 2, ... , 10) 순회를 시작하면서, 숫자가 소수라면 그의 배수들을 모두 지운다. 단, 지울 때 소수인 숫자는 내버려둔다. 그렇게되면 최초 2를 시작으로, 3, 5, 7 등의 배수들이 지워진다.

코드

// 타겟 숫자 n을 받으면
// n 까지 소수 갯수를 반환하는 함수
function isPrime(n) {
  // index는 0부터 시작하니 n + 1 까지 생성
  // arr는 해당숫자(인덱스)가 소수면 true, 아니면 false
  const arr = new Array(n + 1).fill(true);
  // 0, 1은 소수가 아니니 false 처리
  arr.splice(0, 2, false, false);

  // 2부터 순회를 시작하나, 제곱수부터는 순회를 하지 않음
  // 어떤수의 제곱이다 === 이미 소수가 아니다
  for(let i = 2; i ** 2 <= n; i += 1) {
      // 만약 해당숫자가 소수라면, 그 숫자의 배수들을 제거할것임
      if (arr[i]) {
          // 제곱수부터 해당숫자만큼 더해줄것임
          for(let j = i ** 2; j <= n; j += i) {
              arr[j] = false;
          }
      }
  }

  // console.table(arr);
  return arr.filter(el => el).length;
}

plugin

플러그인은 일반적으로 Vue에 앱 레벨 기능을 추가하는 자체 코드입니다. 플러그인을 설치하는 방법은 다음과 같습니다.

앱 레벨이란 최상위를 의미한다. 하나의 웹 서비스가 여러가지 컴포넌트들로 이루어져있을 때, 최상단의 컴포넌트를 의미한다. 이 최상단에 기능을 추가한다면 하위의 컴포넌트에서도 사용가능하다를 의미하므로, 재사용성과 밀접한 관련이 있다. 여러강의를 기웃해본 개발자라면 아무렇지 않게도 우리는 이러한 기능을 쓰고있다.(대표적으로 vue-router)

import { createApp } from 'vue';
import App from './App.vue';
import router from '@/router';

const app = createApp(App);

app.use(router);
app.mount('#app');

app.use() : use라는 메소드를 통해 플러그인을 사용하고 있는 코드이다. 이는 곧 '최상단의 앱에서, 라우터라는 무언가를 계속 끌어다 쓰겠다'와 동일한 의미로 보여진다.

이처럼 라이브러리를 끌어다 쓰는것 말고도, 직접 만든 플러그인을 사용할 수 있다. 그렇다면, 어떻게 커스텀 플러그인을 사용하는지 알아보자.

플러그인은 install() 메서드를 노출하는 객체 또는 단순히 install 함수 자체로 작동하는 함수로 정의됩니다. install 함수는 app.use()에 전달된 추가 옵션과 함께 앱 인스턴스를 받습니다(있는 경우)

공식문서에서는 이러한 커스텀 플러그인을 install() 메소드를 가진 객체로 만들거나, 단순히 함수로 만들 수 있다고 말한다. (가능하면 객체나 함수 중 하나로 통일해서 쓰라고 vue에서는 경고로 알려준다)

언제나 그렇듯 플러그인을 몰아줄 디렉토리를 만들고 스크립트 파일들을 만들어 주면 된다. 아래는 스크립트 파일의 예제이다.

// object example
const objPlugins = {
  // install이라는 메소드를 가진 객체 생성
  // 최상단의 app과 options를 인자로 받아올 수 있다
  install(app, options) {
    const objTest = {
      foo: 'bar',
    };
    app.config.globalProperties.$objTest = objTest;
    console.log('objPlugins app: ', app);
    console.log('objPlugins options: ', options);
    // app.component() 전역 컴포넌트
    // app.config.globalProperties 전역 애플리케이션 인스턴스에 속성 추가
    // app.directive 커스텀 디렉티브
    // app.provide() 리소스
    app.provide('objTest', objTest);
  },
};
// function example
function funcPlugins(app, options) {
  console.log('funcPlugins', app, options);
}
export default funcPlugins;

// 플러그인 몰아져있는 디렉토리에서 끌어와서,
import funcPlugins from './plugins/func';
import objPlugins from './plugins/obj';

const app = createApp(App);
// use메소드를 사용해서 쓴다
app.use(funcPlugins(app, { name: 'func jayss' }));
app.use(objPlugins, { name: 'obj jayss' });

option api에서는 created 사이클 이후부터 라이플 사이클 훅 내부에서 사용(접근) 가능하다.

scrip setup 내에서 쓰려면 플러그인에서 provide를 사용하여 주입하고, 컴포넌트에서 inject를 사용해서 써야한다

<script setup>
    const objTest = inject('objTest');
    console.log('objTest.foo: ', objTest.foo);
</script>

// global-component
import AppAlert from '@/components/app/AppAlert.vue';
import AppCard from '@/components/app/AppCard.vue';
import AppGrid from '@/components/app/AppGrid.vue';
import AppModal from '@/components/app/AppModal.vue';
import AppPagination from '@/components/app/AppPagination.vue';

export default {
  install(app) {
    app.component('AppAlert', AppAlert);
    app.component('AppCard', AppCard);
    app.component('AppGrid', AppGrid);
    app.component('AppModal', AppModal);
    app.component('AppPagination', AppPagination);
  },
};

// main.js
import globalComponents from '@/plugins/global-components';
app.use(globalComponents);

전역 컴포넌트로 등록을 해두면, 기존에 import로 컴포넌트를 등록해서 사용하지 않고 바로 컴포넌트로 사용해도 된다.

custom directive

코어에 포함된 기본 디렉티브 세트(예: v-model 또는 v-show) 외에도 Vue를 사용하면 커스텀 디렉티브를 정의할 수 있습니다.

공식문서에 의하면, 우리가 template부분에서 사용하던 뷰의 디렉티브 기능을 커스텀하게 제작해서도 쓸 수 있다고 한다.

그렇다면 언제 사용해야할까?

우리는 Vue에서 컴포넌트 기초와 컴포저블이라는 두 가지 형태의 코드 재사용을 도입했습니다. 컴포넌트는 주요 빌딩 블럭(building-block)이고, 컴포저블은 상태 저장 로직을 재사용하는 데 중점을 둡니다. 반면에 커스텀 디렉티브는 주로 일반 엘리먼트에 대한 저수준(low-level) DOM 접근과 관련된 로직을 재사용하기 위한 것입니다.

DOM접근과 관련된 기능을 재사용하고 싶다면 커스텀 디렉티브를 이용하면 되는 것으로 보인다.

// src/directives/focus.js
const focus = {
  mounted(el) {
    el.focus();
  },
};

export default focus;

// src/directives/color.js
function color(el, binding) {
  el.style.color = binding.value;
}

export default color;

// src/plugins/global-directives.js
import focus from '@/directives/focus';
import color from '@/directives/color';
export default {
  install(app) {
    app.directive('focus', focus);
    app.directive('color', color);
  },
};

// main.js
import globalDirectives from './plugins/global-directives';
app.use(globalDirectives);

커스텀 디렉티브에서 el(첫번째 인자 값)은 DOM요소를 의미한다.

마무리

결국은 전역적으로 상태, UI(component), 로직 등을 저장해두고 어떤 컴포넌트에서든 접근하고 사용할 수 있도록 등록을 해주는 행위이다. 반드시 재사용이 필요한 부분에서만 이를 활용하는 것이 바람직해 보인다.

reference

vue-재사용성