본문 바로가기

프로젝트/OpenEDC6

[OpenEDC] 중간 회고회고 OpenEDC 커스텀 중간 발표도 한 김에 중간 회고를 작성해보자. OpenEDC 관련해서 최초로 한 일은 5월 10일에 OpenEDC 레포지토리를 클론하는 것이였다. 생긴 게 리액트로 만든 것 같이 생겨서 그런 줄로만 알았는데 코드를 보니 완전 쌩 바닐라 제예스였다;; 각 잡고 바닐라 프로젝트를 만들어 본 적도 별로 없고 본 것도 많이 없어서 처음 폴더 구조와 코드들을 보고 당황했다. app.js가 850줄이고 막.. bulma라는 처음 들어보는 css 프레임워크도 사용하고... 물론 나만 몰랐던 것 같이 유명한 프레임워크였다! 일단 코드를 좀 둘러보고 읽어보라고 주신 책이 있어서 일주일동안은 잠시 OpenEDC 관련 코딩은 접어두고 독서를 했다. 리얼월드 데이터 활용의 정석이라는 책을 주셔서 읽었는데.. 2022. 6. 20.
[OpenEDC] 스킨 커스텀하기 - 2 저번 초기 화면 스타일링 : 2022.06.10 - [OpenEDC] 스킨 커스텀하기 - 1 [OpenEDC] 스킨 커스텀하기 - 1 OpenEDC 스킨을 마음대로 바꿔보자! 🥫 새로운 CSS 파일 생성 및 폰트 세팅 폰트가 맘에 안 드니 깔끔하게 Open Sans로 바꾸자. 새롭게 추가할 css 파일을 만들어 폰트 패밀리를 지정해준다. 나머지도 danbom425.tistory.com 이번엔 예제 프로젝트의 Data Collection 화면을 만들어보자! 왼쪽처럼 생긴 데이터 수집 화면을 오른쪽처럼 만들어줄 것이다. 스타일링할 부분을 정리해보면, 전체 화면 색상 네비게이션 바 메인 화면 이렇게 크게 세 가지로 나눌 수 있는데 먼저 전체 화면 색상을 변경하고 헤더를 스타일링해주자. 🍖 화면 색상 변경 및 .. 2022. 6. 13.
[OpenEDC] 스킨 커스텀하기 - 1 OpenEDC 스킨을 마음대로 바꿔보자! 🥫 새로운 CSS 파일 생성 및 폰트 세팅 폰트가 맘에 안 드니 깔끔하게 Open Sans로 바꾸자. 새롭게 추가할 css 파일을 만들어 폰트 패밀리를 지정해준다. 나머지도 맘대로 수정한다. /* css/skin.css */ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"); * { font-family: "Open Sans", BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Ox.. 2022. 6. 10.
[OpenEDC] 다크모드 지원 저번엔 한국어를 추가했었고, 이번엔 다크 모드를 추가해보도록 하자! 야매긴 하지만.. 한국어 추가했던 포스트 🧀 팔레트 만들기 css 폴더에 palette 폴더를 만들어 기본으로 사용할 색상들을 담을 baisc.css 파일과 다크 모드로 변경 시 사용할 색상들을 담을 dark.css 파일을 만든다. 주 사용 css인 lib/bulma.css 파일을 보고 다크 모드로 토글 했을 때 바뀔 색상들을 뽑아 basic.css를 만들어 보자! /* css/basic.css */ :root { --background: #ffffff; /* 전체 배경 */ --font: #363636; /* 기본 폰트 */ --warn-back: #feecf0; /* 경고 컨테이너 배경 */ --button-back: #eef3fc;.. 2022. 5. 31.
[OpenEDC] 한국어 추가하기 OpenEDC 레포를 포크 해와 한국어 추가 작업을 하고 풀 리퀘를 보내볼 예정이다. 🥖 한국어 스크립트 추가하기 internationalization 폴더에 kr.json을 추가해 en.json을 참고해 한국어 번역을 한다. 뭔가 번역이 애매한 것도 많긴 한데.. 동기 분과 상사분의 도움을 받아 작업했다! 데이터 형식의 경우 그냥 영어로 표기하기로 하고 애매한 경우 "한글(영어)" 형식으로 작성했다. 🥖 영어, 독일어 스크립트에 한국어 추가하기 이미 완성되어 있는 영어, 독일어 스크립트의 언어 선택 부분에 한국어를 추가한다. 영어 스크립트(en.json)엔 "kr": "Korean"를, 독일어 스크립트(de.json)엔 "kr": "Koreanisch"를 추가하면 된다. 🥖 언어 선택 목록에 한국어 추.. 2022. 5. 27.
[OpenEDC] 페이지 분석 🍿 Starting Page OpenEDC의 시작 페이지는 흰 배경 위의 모달로 시작한다. 굳이..? 스러운 화면 구성이라 왜 이렇게 했는지 찾아보고 큰 문제가 없다면 전체 화면을 사용하면 좋을 것 같다! 모달 안의 내용을 번역해보자면, "이 EDC(Open-Source Electronic Data Capture) 시스템을 사용하면 CDISC ODM-XML 표준에 기반한 안전한 의료 연구 스터디를 설계하고 수행할 수 있습니다. 모든 데이터는 로컬 장치에만 처리되고 저장됩니다. 선택적으로 사용자 자신의 OpenEDC 서버에 연결하여 여러 사용자 및 사이트로 리서치 스터디를 만들 수 있습니다. 빈 프로젝트의 경우 새 프로젝트를 선택합니다. 컴퓨터에 CDISC ODM-XML 파일이 있는 경우 열기를 누르십시오.. 2022. 5. 25.

티스토리툴바