본문 바로가기

분류 전체보기93

[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.
리덕스로 모달 상태 제어하기 [번역] 🐱‍👤 원문 : https://betterprogramming.pub/react-use-redux-to-control-modal-visibility-states-8953e44b71fd React: Use Redux To Control Modal Visibility States Easily manage dialog opening and closing state betterprogramming.pub 부제 : 모달 열기 및 닫기 상태를 쉽게 관리하는 법 모달은 응용 프로그램의 기본 창 위에 위치하며 현재 상호 작용 흐름을 방해하지 않으면서 사용자가 의사 결정을 내리는 데 도움이 되는 UI 요소이다. 또한 사용자의 작업에 대한 피드백을 제공하기도 하고 앱의 현재 경로나 페이지를 변경하지 않은 채 일부 콘텐츠를.. 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.
리액트로 채팅 프론트엔드 구축하기 [번역] 🐱‍👤 원문 : https://bhavaniravi.medium.com/learn-reactjs-by-building-a-chat-frontend-2d8fe664276e Learn ReactJs by Building a Chat FrontEnd Building a Chat application from scratch using ReactJs bhavaniravi.medium.com 리액트를 사용하여 채팅 응용프로그램을 처음부터 작성해보자. 🥗 리액트란 무엇인가? React는 사용자 인터페이스를 빌드하기 위한 자바스크립트 라이브러리이다. 페이스북과 개인 개발자 및 기업 커뮤니티에 의해 유지 보수된다. — Wikipedia 간단히 말하면 HTML + JS + CSS = React이다. 🥗 왜 리액트를 사용하.. 2022. 5. 31.
[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.
2022-05-30 오늘(토요일부터 한거.......................)의 업쩍 이건 진짜 오늘 한 거 OpenEDC 한국어 지원 추가한 거 이슈 보냈다 덜더러덜덜달달달달달 회신 언제 오려낭 AISM은 소개 페이지 반응형 작업도 해야되는데 언제하지 ;ㅅ; 지방 선거날을 갈아넣어야겠구만 HTML 삽입 미리보기할 수 없는 소스 2022. 5. 30.
[OpenEDC] 한국어 추가하기 OpenEDC 레포를 포크 해와 한국어 추가 작업을 하고 풀 리퀘를 보내볼 예정이다. 🥖 한국어 스크립트 추가하기 internationalization 폴더에 kr.json을 추가해 en.json을 참고해 한국어 번역을 한다. 뭔가 번역이 애매한 것도 많긴 한데.. 동기 분과 상사분의 도움을 받아 작업했다! 데이터 형식의 경우 그냥 영어로 표기하기로 하고 애매한 경우 "한글(영어)" 형식으로 작성했다. 🥖 영어, 독일어 스크립트에 한국어 추가하기 이미 완성되어 있는 영어, 독일어 스크립트의 언어 선택 부분에 한국어를 추가한다. 영어 스크립트(en.json)엔 "kr": "Korean"를, 독일어 스크립트(de.json)엔 "kr": "Koreanisch"를 추가하면 된다. 🥖 언어 선택 목록에 한국어 추.. 2022. 5. 27.
2022-05-26 어제 디자인한 데이터 수집 페이지 수정................... 수정앤수정앤수정앤수정앤ㅅ저앤숮엊랜 일단 전체적으로 딱딱한 느낌을 없애려고 기본 폰트를 Open Sans로 바꾸고 border-radius 더 줬따 추가적으로 거의 모든? 예를 들어 버튼이나 모달이나 인풋, 텍스트에어리아 같은 요소엔 그림자를 야무지게 넣어조따. 패딩을 더 넣거나 폰트 크기를 줄이는 등 원래 페이지보다 페이지를 더 넓게 쓰는 느낌이 들게 했는데 실제 사용자가 그렇게 느낄 지는 머르겟따 팔레트는 imtrial 메인 컬러 따서 사용했고 색상이 있는 버튼은 그라데이션을 넣어 몬가... 몬가 더 고급져보이게 했다 모달은 모달 안의 내용에 더 집중될 수 있게 모달 뒷배경을 블러 처리해줬다 하위 요소가 완성되지 않은 카테고리는 .. 2022. 5. 26.

티스토리툴바