개발 노트

★  1
npm create vite@latest . -- --template react

★ 2
npm install -D tailwindcss@3 postcss autoprefixer

★ 3 - postcss.config.cjs
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

★ 4
npm i antd

★ 5
npx tailwind init <--- 3.x에서 필요

★ 6 - index.css
@layer tailwind-base, antd;
@layer tailwind-base {
  @tailwind base;
}
@tailwind components;
@tailwind utilities;

★ 7 - tailwind.config.js
export default { 
  content: ["./src/**/*.{html,js,jsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

★ 8 - vite.config.js ,  절대경로
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { resolve } from 'path';

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react(),
  ],
  resolve: {
    alias: [
      { find: "@", replacement: "/src" },
      { find: "@components", replacement: "/src/components" },
      { find: "@headers", replacement: "/src/components/headers" },
      { find: "@pages", replacement: "/src/pages" },


      { find: '@', replacement: resolve(__dirname, 'src') },
      { find: '@pages', replacement: resolve(__dirname, 'src/pages') },
     
    ],
  },
  server: {
    port: 3000
  },
  preview: {
    port: 8080
  }
})

★ 9 - index.css
@layer tailwind-base, antd;
@layer tailwind-base {
  @tailwind base;
}
@tailwind components;
@tailwind utilities;

★ 10 - App.css -삭제

format설정을 걸어놓고 props로 전달받은 데이터를 바로 사용하게 x를 눌렀을 시에 빈칸으로 들어오는데 그 값을 포맷이 인식을 하지 못하기에 invalid data가 떠서 수정이 되지 않는다.

 const onChange = (nextTargetKeys, direction, moveKeys) => {
    setTargetKeys(nextTargetKeys);
    if (moveKeys.length > 0) {
      let showColumns = [];
      for (let i = 0; i < moveKeys.length; i++) {
        showColumns = tableColumn.map((item, idx) => {
          tableColumn.filter((item) =>
            nextTargetKeys.includes(item.key) === true
              ? (item.show = false)
              : (item.show = true)
          );
          return item;
        });
      }
      setTableShowColumns(showColumns);
    }
  };
  const onSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
    setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);
  };
  const onScroll = (direction, e) => {};
  //로컬스토리지에 있는 수정된 필드값들을 parse해서 가져오는 함수
  //props로 전달된 column의 값들에게 key,numkey,show키,값을 부여해준다.
  //table 초기값 || filtered
  useEffect(() => {
    let localStorageColumn = [];
    try {
      localStorageColumn = JSON.parse(localStorage.getItem('feedStatus'));
    } catch (e) {
      localStorageColumn = props?.columns;
    }
    //props 컬럼에게 필요한 키,값을 할당해준다.
    let viewColumn = props.columns.map((item, idx) => {
      if (item.show === undefined) {
        item.key = item.dataIndex;
        item.numkey = idx;
        item.show = true;
      }
      let filteredShow = localStorageColumn.filter(
        (word) => word.numkey === idx
      );
      item.show = filteredShow[0]?.show ?? true;
      return item;
    });
    //좌측 수정된 부분과 우측으로 전달된 부분을 나눠서 할당해준다.
    let editColumn = viewColumn.filter((item) => item.show === true);
    let falseColumn = viewColumn.filter((item) => item.show === false);
    setTargetKeys(falseColumn.map((item) => item.key));
    setIstarget(falseColumn.map((item) => item.key));
    setTableShowColumn(editColumn);
    setTableColumn(viewColumn);
    localStorage.setItem('feedStatus', JSON.stringify(viewColumn));
  }, [props.columns]);
 
 <Transfer
          dataSource={tableColumn}
          titles={['선택된 필드', '제외 필드']}
          targetKeys={targetKeys}
          selectedKeys={selectedKeys}
          onChange={onChange}
          onSelectChange={onSelectChange}
          onScroll={onScroll}
          render={(item) => (
            <span>
              {item.title}
              {/* <button>Up</button> <button>down</button>> */}
            </span>
          )}
        />

column에는 전체 값이 들어가고
targetkey를 기준으로 좌측 우측을 판단한다.