본문 바로가기

프로젝트10

기술 스택 JavaScript React Next.js Redux-toolkit MUI System JavaScript 선정 이유 개발 생산성: TypeScript는 정적 타입 체계를 도입하여 개발 시간을 늘리는 경우가 있습니다. 반면 JavaScript는 타입 시스템의 추가 부담 없이 빠르게 개발을 진행할 수 있습니다. 팀 구성원의 경험 및 선호도: 팀원들이 TypeScript보다 JavaScript에 대한 많은 경험을 가지고 있고 이에 더 익숙합니다. TypeScript에 대해서는 학습 시간이 필요하지만, 이를 위한 시간을 보장받을 수 없었고 이에 따라 프로젝트 초기 단계에서의 생산성이 감소될 것을 우려했습니다. 생태계 지원 및 라이브러리 사용: JavaScript는 방대한 생태계와 다양한 라이브러리를 보유하고.. 2024. 4. 2.
[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.
[react-chatbot-kit] 챗봇 구현하기 - 3 이전 글 : 2022.06.09 - [react-chatbot-kit] 챗봇 구현하기 - 2 챗봇 스타일링하기 🌮 기본 구조 파악하기 초기 상태의 챗봇은 요렇게 생겼다. 스타일해줄 부분을 정리해보면 다음과 같다. 챗봇 화면 자체 위치 헤더 챗봇 프로필 아이콘 챗봇 메세지 사용자 프로필 아이콘 사용자 메세지 메세지 입력 창 보내기 버튼 처음부터 뜯어보면서 차근차근 스타일링해보자! 🌮 챗봇 화면 자체 위치 조정 챗봇 화면 위치의 경우 거의 화면 오른쪽 하단에 고정된 것을 많이 볼 수 있다. 나도 그렇게 해 줄 예정이다! 공식문서의 Customizing CSS 파트를 참고하면 스타일링할 클래스들의 이름을 쉽게 찾을 수 있다. styles 폴더에 chatbot.css 파일을 추가해 복사 붙여 넣기 해주자. /*.. 2022. 6. 9.
[react-chatbot-kit] 챗봇 구현하기 - 2 이전 글 : 2022.06.07 - [react-chatbot-kit] 챗봇 구현하기 - 1 챗봇 테스트해보기 🥪 react-chatbot-kit 라이브러리 설치하기 npm install react-chatbot-kit 🥪 필요한 파일들 생성하기 챗봇을 사용하기 위해 필요한 파일 세 개를 만들어보자! 먼저 루트 디렉토리에 bot 폴더를 만들어 하위에 필요한 파일들을 만들어줄 것이다. 왼쪽과 같이 ActionProvider.js, config.js, MessageParser.js 파일을 생성해준다. 공식 문서를 참고해 파일들의 기본적인 내용을 채워준다.(MessageParser.js 파일의 경우 공식 문서에서 export default 부분이 누락되어있다.) // bot/ActionProvider.js c.. 2022. 6. 9.
[react-chatbot-kit] 챗봇 구현하기 - 1 프로젝트 세팅하기 🥙 사용할 스택 확인 Next.js Typescript styled-components 🥙 프로젝트 생성 먼저 원하는 위치에 Next.js + Typescript 프로젝트를 만든다. npx create-next-app chat-bot --typescript 🥙 styled-components, eslint 설치 만든 프로젝트로 경로를 옮기고 styled-components 관련 라이브러리와 eslint를 설치해준다. cd chat-bot yarn add styled-components @types/styled-components babel-plugin-styled-components eslint 🥙 .babelrc 파일 추가 루트 경로에 .babelrc 파일을 만든다. { "preset.. 2022. 6. 7.
[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.

티스토리툴바