2019년의 내 학점 돌아보기

2019년 리틀 빅 데이터 송년회 발표 슬라이드입니다.

슬라이드 속 데모는 키노트에서만 재생이 가능합니다. 혹시 영상도 보고 싶으시다면 아래 파일을 키노트로 여시면 됩니다.
https://drive.google.com/file/d/10-Nbd8anvRIBOlLb1O_Yx4uXWO5U_-La/view?usp=sharing

Transcript

1. ֙੄
   ղ
   ೟੼
   جইࠁӝ ӣޖള 2019֙ 12ਘ 13ੌ ܻౣ ࠻ؘ੉ఠ ࣠֙ഥ 2019 뒤엉켜진 제주대학교 학적 데이터를 정리한 과정을 공유합니다.
2. iam@muhun.kim 제주대학교 MIS* 학부생, 프론트엔드 프로그래머 *컴퓨터와 비즈니스를 같이 전공하는 학부 aka. @x86chi
3. 좀 특이한 이야기 저희 학교 서비스(dreamy.jejunu.ac.kr)의 데이터를 풀어봅니다. 1. 뒤엉킨 정형(?) 데이터를 다시 정제합니다. 2. 이미 있는 클라이언트 & 서비스를 재설계 합니다. 위 두가지를 반복하여, 주변에 피드백을 구합니다.
4. 목차 1. 2019년에 우리 학교를 지탱하는 기술 2. 올바르지 못한 데이터 추상화 3. 꼭 필요한 데이터만 보여줄 수 없는가 4. 최소 기능 제품(MVP)을 구현하기
5. 2019년에 우리 학교를 지탱하는 FE 기술 - Namo webEditor v4.0(Trial) - EUC-KR & UTF-8 (혼합) - AJAX - <iframe/> based component <Ӓܿ 1, http://dreamy.jejunu.ac.kr:8080/sugang/index.html > <Ӓܿ 2, EUC-KR ੋ௏٬ ػ ъ੄_੗ܐ.txt>
6. 좋은 데이터 설계란? (주관) 사용자에게 불편을 강요하지 말아야 함 정보가 주는 의미가 명확해야 함 쓰는 도구를 제대로 활용해야 함 (AJAX + iframe ) <Ӓܿ 4, iframe दр ୡҗ>
7. 올바르지 못한 추상화 • 서버로부터 받는 데이터 스키마의 뜻이 명확하지 않음 • 불분명한 키 이름, 값의 숫자와 문자 타입의 구분 X • 그런 정보를 바로 테이블 뷰로 보여줌 => 사용자가 서버의 상황을 신경쓰게 만듬 메서드 URL Body (Form Data) 쿠키 POST https:// dreamy.jejunu.ac .kr/susj/com/ com_su.jejunu {"mode":"doSchd","job_id":" SEONGJEOG_TOT"}} JSESSIONID , WMONID ಴1, ੹୓ ࢿ੸ ਃ୒ ಕ੉૑ীࢲ ࢎਊೞח AJAX ਃ୒ ઺ ೞա. ௏٘1, ੹୓ ࢿ੸ ઑഥ ਃ୒੄ AJAX ਽׹ ؘ੉ఠ
8. 올바르지 못한 추상화 그림 3, 전체성적조회 표 우리 학교는 4.3 or 4.5 중 어느 학점제인가? ”내 평점보다 4.5 평균값이 더 높네? 전교생 표준 평균인 건가?” 아.. 4.3 만점을 4.5 로 치환해서 보여준거구나 (정규화 하면서 암) 신청/평점, 취득 학점의 차이점?
9. 꼭 필요한 데이터만 보여줄 수 없을까? React 컴포넌트로 대체하는 확장 기능 • 로그인/로그아웃 • 메인 페이지 / 세션 유효 시 메인 페 이지로 리다이렉션 • 학번 또는 비밀번호 N회 틀림 알림 • 세션 만료 알림 https://github.com/reflation/prototype <৔࢚ 1. ೐۽షఋੑ, https://youtu.be/Ney5-npznkM>
10. 최소 기능 제품(MVP) 만들기 “기존 UI를 React 컴포넌트로 전부 대체하기가 힘드네요.. 멘토: 독립적인 개발 환경을 만들어 작업해보면 어떨까요? 나중에 컴포넌트를 덮어 씌우면 괜찮을 테니 말이죠. 그리고 모든 학적 데이터를 처리하기에는 양 이 많은데, 대학생이 가장 관심 있어할 정보가 뭘까요? 졸업이죠. 멘토: 그럼 학점 시각화 하나만 목표를 잡아 일주일 안에 만들어보고, 검증해보세요. 그게 MVP 입니다.”
11. <৔࢚ 2. ୐ߣ૩ MVP, https://youtu.be/iVa9e1w9UMM> 주변에서 받은 피드백 • 최대로 취득 가능한 평점 • 졸업 가능한 최소한의 점수 제시 • 남은 필수 이수 교양 강의 목록 일주일 뒤의 첫 MVP https://youtu.be/iVa9e1w9UMM
12. 클라이언트에게 데이터 정제를 맡기지 말아야 함 우리 학교의 환경은 정반대의 상황에 처함 (60여 줄의 데이터 요청 & 후처리 코드*) 풀리지 않았던 문제 *https://github.com/reflation/frontend/blob/legacy/src/components/Main.tsx#L109-L166 const fetchData = async () =>= { /// ࢤۚ const fetched = await Promise.all(ListProp.map(i =>= FetchPoint(i))) const counted = countBy(toUpper)( flatten( fetched.map(i =>= i.GRID_DATA!.filter(({ dg_gb }) =>= dg_gb !=!== 'S').map(g =>= g.dg_gb) ) ) ) setGradeCount( Object.entries(counted).map(([k, v]) =>= ({ title: k as grade_item, value: v, color: PiePalette[k] })) ) } useEffect(() =>= { fetchData() }, [])
13. 그나마 응답 데이터의 타입을 명시해둬서 빨리 끝냄 export type PostprocessedItem = { GRID_DATA: GradeSet[] BOTTOM_DATA: CurrentSearchedGradeSummary } 응답 JSON 리터럴 타입 정의 (160여 줄) 그로 인해 얻은 타입 힌트
14. 제3자 전적 서비스(solved.ac, jubeat.tools 등)의 비즈니스 로직 참고 별도의 서버에서 데이터 정제 및 서빙하고 프런트엔드는 받은 데이터를 바로 보여줌 미러 서비스 만들기
15. fetchList, fetchSemester, postSemesters 한 함수(function)당 한 기능(function)을 수행하는 요청/정제 내부 모듈을 만듬 데이터를 다시 정제하기: Clean Code *https://github.com/reflation/frontend/blob/legacy/src/components/Main.tsx#L109-L166 export const fetchAndParse = async (account: UserNoPw) =>= { const { data: { semestersReqParams, .....user }, cookie, } = await fetchList(account) const rawSemester = await Promise.all( semestersReqParams.map(params =>= fetchSemester({ cookie, params })) ) return { .....user, semesters: postSemesters(rawSemester) } }
16. 데이터를 타입 안전하게 다루기 feat. TypeScript & Prisma • Prisma: 새로운 개념의 ORM 클라이언트 • TypeScript, Golang 지원 • 데이터 모델에 대한 타입 셋 생성
17. enum SemesterType { FIRST SUMMER SECOND WINTER } type Subject { id: ID! @id title: String! code: String! grade: String! course: String! } /// Code generated by Prisma (prisma@1.34.10). DO NOT EDIT. export type SemesterType = "FIRST" | "SUMMER" | "SECOND" | “WINTER"; export type SubjectOrderByInput = | "id_ASC" | "id_DESC" | "title_ASC" | "title_DESC" | "code_ASC" | "code_DESC" | "grade_ASC" | "grade_DESC" | "course_ASC" | "course_DESC"; datamodel.prisma models/prisma/index.ts $ prisma generate 데이터 모델에 대한 타입 셋 생성 데이터를 타입 안전하게 다루기 feat. TypeScript & Prisma
18. enum SemesterType { FIRST SUMMER SECOND WINTER } type Subject { id: ID! @id title: String! code: String! grade: String! course: String! } datamodel.prisma $ prisma deploy https://us1.prisma.sh/.../dev 데이터를 타입 안전하게 다루기 feat. TypeScript & Prisma ੿೧ك DBMS ূ٘ ನੋ౟۽ زӝച
19. 메일 기반 로그인 > 데이터 받아오기 > 메인 페이지
20. 메일 기반 로그인 > 데이터 받아오기 > 메인 페이지
21. 마치며 • worst pratice으로 웹의 역사를 속성으로 체감함 (5년차 스택 완성?) • Waterfall -> Agile (MVP, TDD, 짝 프로그래밍) • 다만 품질을 신경쓰니 기간 편차가 심했음 • 1차 구현: 4일 • 2차 구현 : 4주 (React Native > 미러 서비스)
22. 앞으로 해야 할 일 • 서비스 런칭 • 데이터 확장하기 (강의 데이터와 성적 연동)