<div id="readability-page-1" class="page"><article>
        <h2 id="목차">목차</h2>

<ol>
  <li>왜 필요한가?</li>
  <li>필요한 기능
    <ul>
      <li>복사 후 붙여넣기 (테이블과 같은 정형 데이터는 ,등으로 분류)</li>
      <li>하나의 셀 편집 기능</li>
    </ul>
  </li>
  <li>어떻게 구현했는지?
    <ul>
      <li>복사 후 붙여넣기
        <ul>
          <li>붙여넣기 한 text를 , 또는 \t 단위로 잘라냄 개행은 \n</li>
        </ul>
      </li>
      <li>편집기능
        <ul>
          <li>가지고 있는 Position에 TextInput 끼어넣기</li>
        </ul>
      </li>
      <li>원본데이터 업데이트 및 컴포넌트 사용하는 곳에 업데이트 알림
        <ul>
          <li>javascript의 깊은 복사와… 얇은 복사의 슬픔</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>이때와 지금과 다른점
    <ul>
      <li>map을 사용하면 어떨까?</li>
    </ul>
  </li>
</ol>

<h3 id="왜-필요한가">왜 필요한가?</h3>

<p>JDBC로 mariaDB 또는 mysql의 데이터베이스 연결 후 데이터를 추가하거나 업데이트하는 일이 필요해졌다. 그 데이터의 양이 1개 2개 라면 상관없지만 적게는 100개 많게는 10,000개 이상의 데이터를 데이터베이스에 직접 적재하는 과정이 필요했고 이 데이터를 클라이언트에서 추가해서 배열 형식으로 보내주면 서버는 이를받아 데이터베이스에 직접 추가하는 방식이었다.</p>

<h3 id="필요한-기능">필요한 기능</h3>

<p><strong>선행기능</strong></p>

<ul>
  <li>셀 선택 기능
    <ul>
      <li>붙여넣거나 편집할 위치를 알기 위해 선택하는 셀 자체의 위치를 알아야한다.</li>
    </ul>
  </li>
  <li>드래그 선택
    <ul>
      <li>드래그 한 영역의 범위를 알아야 선택된 영역의 범위를 덮을 수 있다.</li>
    </ul>
  </li>
</ul>

<p><strong>아무</strong> <strong>웹사이트 내의 있는 테이블 데이터를 복사 할 수 있어야 했다.</strong></p>

<p>테이블은 \t, \n, \, 등으로 개행 등을 구분한다.</p>

<ul>
  <li>\n은 하나의 배열 공간을 차지하고</li>
  <li>\t는 하나의 컬럼값의 해당하므로 객체안의 데이터이다</li>
  <li>\,은 오브젝트안의 값이다.</li>
</ul>

<p><strong>편집기능은 쉬워야 한다.</strong></p>

<ul>
  <li>사용자의 특정 키 입력에 따라 수정 모드로 진입, 나가기 할 수 있어야한다.
    <ul>
      <li>enter, esc 등</li>
      <li>알파벳의 키코드</li>
    </ul>
  </li>
</ul>

<p><strong>원본 데이터를 업데이트 및 컴포넌트 사용자가 알아야 한다.</strong></p>

<ul>
  <li>편집시 변경 점을 알려주어야 함</li>
</ul>

<h3 id="구현을-하며-문제점">구현을 하며 문제점</h3>

<ul>
  <li>javascript의 복사는 주소만 카피하므로 변경 데이터를 비교하는데 어려움이 있다.</li>
  <li>한글의 자모음이 끝나는 부분에서 enter키의 타이밍은 영문과 다르다.</li>
</ul>

<h3 id="이때의-코드를-변경하고-싶은것">이때의 코드를 변경하고 싶은것</h3>

<ul>
  <li>그냥 javascript의 map을 사용했다면 어떨까?</li>
</ul>

    </article></div>

MoongJong93

목차
왜 필요한가?
필요한 기능
    
복사 후 붙여넣기 (테이블과 같은 정형 데이터는 ,등으로 분류)
하나의 셀 편집 기능
어떻게 구현했는지?
    
복사 후 붙여넣기
        
붙여넣기 한 text를 , 또는 \t 단위로 잘라냄 개행은 \n
편집기능
        
가지고 있는 Position에 TextInput 끼어넣기
원본데이터 업데이트 및 컴포넌트 사용하는 곳에 업데이트 알림
        
javascript의 깊은 복사와… 얇은 복사의 슬픔
이때와 지금과 다른점
    
map을 사용하면 어떨까?
왜 필요한가?
JDBC로 mariaDB 또는 mysql의 데이터베이스 연결 후 데이터를 추가하거나 업데이트하는 일이 필요해졌다. 그 데이터의 양이 1개 2개 라면 상관없지만 적게는 100개 많게는 10,000개 이상의 데이터를 데이터베이스에 직접 적재하는 과정이 필요했고 이 데이터를 클라이언트에서 추가해서 배열 형식으로 보내주면 서버는 이를받아 데이터베이스에 직접 추가하는 방식이었다.
필요한 기능
선행기능
셀 선택 기능
    
붙여넣거나 편집할 위치를 알기 위해 선택하는 셀 자체의 위치를 알아야한다.
드래그 선택
    
드래그 한 영역의 범위를 알아야 선택된 영역의 범위를 덮을 수 있다.
아무 웹사이트 내의 있는 테이블 데이터를 복사 할 수 있어야 했다.
테이블은 \t, \n, \, 등으로 개행 등을 구분한다.
\n은 하나의 배열 공간을 차지하고
\t는 하나의 컬럼값의 해당하므로 객체안의 데이터이다
\,은 오브젝트안의 값이다.
편집기능은 쉬워야 한다.
사용자의 특정 키 입력에 따라 수정 모드로 진입, 나가기 할 수 있어야한다.
    
enter, esc 등
알파벳의 키코드
원본 데이터를 업데이트 및 컴포넌트 사용자가 알아야 한다.
편집시 변경 점을 알려주어야 함
구현을 하며 문제점
javascript의 복사는 주소만 카피하므로 변경 데이터를 비교하는데 어려움이 있다.
한글의 자모음이 끝나는 부분에서 enter키의 타이밍은 영문과 다르다.
이때의 코드를 변경하고 싶은것
그냥 javascript의 map을 사용했다면 어떨까?

그리드에 편집 기능 끼얹기

댓글