7 / 10약 30분입문

실습 4 · 데이터 붙이기 (표·검색·그래프)

CSV를 화면에 불러오고, 찾고, 그려 봅니다

이 장을 끝내면

CSV 파일을 브라우저에서 표로 불러오기
전 열 대상 즉시 검색 붙이기
열을 골라 막대그래프로 집계하기 (빈 칸 = 미입력)

카드 D · CSV 불러오기

6장에서 만든 파일이 열려 있는 상태에서 이어갑니다. 서버에 올리지 않고 브라우저 안에서만 읽는다는 제약이 중요합니다.

지금 하기

실습용 CSV를 불러와 전체 행이 표로 나타나는지 확인한다
빈 칸이 지워지지 않고 빈 칸 그대로 보이는지 확인한다

에이전트에게 복붙

지금 열려 있는 파일에 CSV 파일을 불러와서 표로 보여주는 기능을 추가해 주세요.
- 무엇을: 내 컴퓨터에 있는 CSV 파일을 선택하면 그 내용을 화면에 표로 보여주는 기능
- 누구를 위해: 검사 장비에서 뽑은 CSV 파일을 눈으로 확인하고 싶은 현장 담당자
- 어떤 데이터로: 검사일자, 라인, 공정, 제품코드, 검사항목, 측정값, 규격하한,
  규격상한, 판정 열로 이루어진 품질검사결과 CSV 파일
- 어떤 화면으로: 파일 선택 버튼을 하나 두고, 파일을 고르면 그 아래에 지금까지의
  상담기록 표와는 별도로 새로운 표를 만들어 CSV 내용을 그대로 보여주세요.
  표는 높이를 400픽셀로 제한하고 그 안에서 스크롤되게 해 주세요
- 제약: 서버에 파일을 올리지 말고 브라우저 안에서만 파일을 읽어야 합니다.
  첫 줄은 열 이름으로 쓰고, 파일 인코딩은 한글이 깨지지 않게 처리해 주세요.

카드 E · 검색·필터

지금 하기

검사항목 이름 일부만 입력해도 걸러지는지 확인한다
검색어를 지웠을 때 전체가 되돌아오는지 확인한다

에이전트에게 복붙

지금 열려 있는 파일의 CSV 표 위에 검색 상자를 추가해 주세요.
- 무엇을: 검색어를 입력하면 CSV 표의 모든 열을 대상으로 걸러서 보여주는 기능
- 누구를 위해: 수백 건의 검사 결과 중 특정 제품코드나 판정만 찾아보고 싶은 담당자
- 어떤 데이터로: 방금 불러온 CSV의 모든 열
- 어떤 화면으로: CSV 표 바로 위에 검색 입력 상자를 하나 두고, 글자를 입력하는
  즉시 표가 걸러진 결과로 다시 그려지게 해 주세요
- 제약: 대문자와 소문자, 띄어쓰기를 너무 엄격하게 구분하지 마세요.
  검색은 화면에 보이는 표에만 적용하고, 원래 불러온 데이터 자체는 지우지 마세요.
  검색어를 지우면 전체 목록이 다시 보여야 합니다.

카드 F · 막대그래프 — 빈 칸도 데이터

빈 칸을 오류 없이 '미입력'으로 묶어 세는 것과, 값 종류가 20개 넘는 열은 그래프 대신 안내 문구를 보여주는 것이 이 카드의 핵심입니다.

지금 하기

판정 열을 골라 합격/불합격/미입력 막대를 확인한다
제품코드처럼 값이 거의 다 다른 열을 골라 안내 문구가 뜨는지 확인한다

에이전트에게 복붙

지금 열려 있는 파일에 CSV 표의 값을 막대그래프로 보여주는 기능을 추가해 주세요.

- 무엇을: 표의 열 하나를 고르면 그 열에 어떤 값이 몇 번씩 나오는지 막대그래프로 세어서 보여주는 기능
- 누구를 위해: 공정별, 판정별로 검사 결과가 얼마나 몰려 있는지 한눈에 보고 싶은 담당자
- 어떤 데이터로: 라인, 공정, 제품코드, 검사항목, 측정값, 판정 등 어떤 열을 골라도
  동작해야 합니다. 이 데이터의 측정값과 판정 열에는 값이 비어 있는 행이 몇 개 섞여 있습니다
- 어떤 화면으로: 그래프로 볼 열을 고르는 선택 상자를 하나 두고, 그 아래에 막대그래프를 그려 주세요
- 제약: 값이 비어 있는 칸은 오류를 내지 말고 미입력이라는 하나의 항목으로
  묶어서 세어 주세요. 값의 종류가 20개를 넘는 열을 고르면 막대를 억지로
  욱여넣지 말고 그래프 대신 값이 너무 많다는 안내 문구를 보여주세요.
  차트 라이브러리를 새로 설치하지 말고 직접 그려 주세요.

막히면

한글 열 이름이 깨지면: 인코딩 문제 — 파일을 엑셀에서 'CSV UTF-8'로 다시 저장
표가 화면 아래로 한없이 길어지면: 높이 제한(400px)이 빠진 것 — 카드 D 제약을 다시 요청

체크포인트

파일 선택 → 표에 나타남
검색하면 그 자리에서 줄어듦
열 선택 → 막대그래프
빈 칸 섞인 열 → '미입력' 막대

지금 열려 있는 파일에 CSV 파일을 불러와서 표로 보여주는 기능을 추가해 주세요. - 무엇을: 내 컴퓨터에 있는 CSV 파일을 선택하면 그 내용을 화면에 표로 보여주는 기능 - 누구를 위해: 검사 장비에서 뽑은 CSV 파일을 눈으로 확인하고 싶은 현장 담당자 - 어떤 데이터로: 검사일자, 라인, 공정, 제품코드, 검사항목, 측정값, 규격하한, 규격상한, 판정 열로 이루어진 품질검사결과 CSV 파일 - 어떤 화면으로: 파일 선택 버튼을 하나 두고, 파일을 고르면 그 아래에 지금까지의 상담기록 표와는 별도로 새로운 표를 만들어 CSV 내용을 그대로 보여주세요. 표는 높이를 400픽셀로 제한하고 그 안에서 스크롤되게 해 주세요 - 제약: 서버에 파일을 올리지 말고 브라우저 안에서만 파일을 읽어야 합니다. 첫 줄은 열 이름으로 쓰고, 파일 인코딩은 한글이 깨지지 않게 처리해 주세요.

지금 열려 있는 파일의 CSV 표 위에 검색 상자를 추가해 주세요. - 무엇을: 검색어를 입력하면 CSV 표의 모든 열을 대상으로 걸러서 보여주는 기능 - 누구를 위해: 수백 건의 검사 결과 중 특정 제품코드나 판정만 찾아보고 싶은 담당자 - 어떤 데이터로: 방금 불러온 CSV의 모든 열 - 어떤 화면으로: CSV 표 바로 위에 검색 입력 상자를 하나 두고, 글자를 입력하는 즉시 표가 걸러진 결과로 다시 그려지게 해 주세요 - 제약: 대문자와 소문자, 띄어쓰기를 너무 엄격하게 구분하지 마세요. 검색은 화면에 보이는 표에만 적용하고, 원래 불러온 데이터 자체는 지우지 마세요. 검색어를 지우면 전체 목록이 다시 보여야 합니다.

지금 열려 있는 파일에 CSV 표의 값을 막대그래프로 보여주는 기능을 추가해 주세요. - 무엇을: 표의 열 하나를 고르면 그 열에 어떤 값이 몇 번씩 나오는지 막대그래프로 세어서 보여주는 기능 - 누구를 위해: 공정별, 판정별로 검사 결과가 얼마나 몰려 있는지 한눈에 보고 싶은 담당자 - 어떤 데이터로: 라인, 공정, 제품코드, 검사항목, 측정값, 판정 등 어떤 열을 골라도 동작해야 합니다. 이 데이터의 측정값과 판정 열에는 값이 비어 있는 행이 몇 개 섞여 있습니다 - 어떤 화면으로: 그래프로 볼 열을 고르는 선택 상자를 하나 두고, 그 아래에 막대그래프를 그려 주세요 - 제약: 값이 비어 있는 칸은 오류를 내지 말고 미입력이라는 하나의 항목으로 묶어서 세어 주세요. 값의 종류가 20개를 넘는 열을 고르면 막대를 억지로 욱여넣지 말고 그래프 대신 값이 너무 많다는 안내 문구를 보여주세요. 차트 라이브러리를 새로 설치하지 말고 직접 그려 주세요.