Bible, Lee, Data
Faith, software, data, and everyday life.
CategoriesAll posts
[Streamlit] Elements를 활용한 웹 애플리케이션 만들기
💡웹 애플리케이션 구축Streamlit에서 Python 파일을 생성하고, Elements를 활용하여 웹 애플리케이션을 만들어 보도록 하자. Python 파일 생성하기VS Code에서 py 확장자로 'streamlit_app.py' 파일을 생성한다.파일이 생성되었으므로 기본 스크립트를 입력하고, run 명령어를 통해 프로젝트를 배포할 수 있다. 웹 페이지 실행하기streamlit run streamlit_app.py터미널에 streamlit run과 실행할 Python 파일명을 명령어로 입력하면 웹 페이지가 실행된다.현재 소스 코드를 작성하지 않은 상태이기 때문에 빈 화면이 표시된다.Scripts\activate.bat만약 실행되지 않는다면 가상 환경에 접속되지 않은 상태이므로 Scripts 명령어를 실..
[Streamlit] 개발자 환경 구축: VS Code의 가상 환경에 Streamlit 설치하기
💡StreamlitStreamlit은 데이터 기반 웹 애플리케이션을 만드는 오픈 소스 Python 라이브러리이다.데이터 분석과 시각화를 위한 웹 애플리케이션 개발 과정을 단순화하여 웹 개발 경험이 없는 사용자들도 쉽게 웹 애플리케이션을 구축할 수 있다. Streamlit 공식 홈페이지https://docs.streamlit.io/ Streamlit DocsJoin the community Streamlit is more than just a way to make data apps, it's also a community of creators that share their apps and ideas and help each other make their work better. Please come joi..
[React] 프로젝트 구조, 프로젝트 파일 수정 및 배포
💡프로젝트 구조React 프로젝트를 구성할 때 효율적이고 유지보수가 용이한 폴더 구조를 만드는 것은 매우 중요하다.이를 위해서는 기능적으로 연관된 파일들을 그룹화하고, 각 파일이 어디에 속하는지 명확하게 파악할 수 있도록 구조를 설계해야 한다.프로젝트 구조를 적용할 때는 팀원들과의 커뮤니케이션을 통해 일관된 방식으로 파일을 구성하도록 한다. 1. src/ 디렉터리index.js 살펴보기프로젝트의 구조에서 가장 중요한 것은 src 폴더이다. src는 source의 약자로, 프로젝트의 모든 소스 코드가 포함된 최상위 디렉터리이다.src 폴더에는 입구 파일이라고 할 수 있는 index.js 파일이 있다. npm start 명령어로 create-react-app을 구동시키면 index.js를 찾아서 적혀 있는..
[React] 개발자 환경 구축: Node.js, Create React App
💡ReactReact는 사용자 인터페이스(UI) 개발에 초점을 맞춘 JavaScript 프론트엔드 라이브러리로, 복잡하고 동적인 웹 페이지를 개발하는 데에 용이하다.간단하게 말하면 React는 사용자 정의 태그를 만드는 기술이라고 할 수 있다.실시간 대시보드, 소셜 미디어 애플리케이션, 전자상거래 플랫폼 등 다양한 분야에서 널리 사용된다. React의 특징 및 장점React는 Facebook(현 Meta)에서 개발한 JavaScript UI 라이브러리이다.Facebook은 매우 다양한 컴포넌트와 복잡한 사용자 인터페이스를 가지고 있는데, 이러한 복잡성에 대응하기 위해 개발된 것이 React이다.가상 DOM(Virtual DOM): React는 가상 DOM을 사용하여 UI 업데이트를 처리한다. 이를 통해..
[Spring] Spring MVC Framework: MVC 패턴의 구조, 동작 과정
Spring MVC Framework는 웹 개발에서 널리 사용되는 아키텍처 중 하나로, MVC(Model-View-Controller) 패턴을 기반으로 한다. 💡MVC 패턴의 구조Model정의: 애플리케이션의 데이터를 책임지며, 비즈니스 로직을 처리한다.역할: 사용자에게 표시되는 데이터를 가공하고 저장하며, 데이터의 변경이 일어날 경우 적절한 처리 방법을 구현한다.구현: Java 객체로 표현되며, 특정 도메인의 데이터를 담는 역할을 한다. View정의: 시각적인 UI를 담당하며, 사용자에게 정보를 표현한다.역할: Model에서 받은 데이터를 화면에 표시하고, 사용자의 입력을 Controller에 전달한다.구현: 주로 HTML, JSP, Thymeleaf 등의 템플릿 엔진을 사용하여 구현한다. Contr..
Games 연구/창업 동아리 게임 CD 판매 활동
한국디지털미디어 고등학교 게임즈의 연구/창업동아리장으로 활동하며 게임즈 동아리의 게임 CD를 판매하는 교내 활동을 진행하였습니다.게임은 CD에 담아 학교에 사전에 양해를 구하여 학생들을 대상으로 판매하였습니다. 직접 판매 광고 포스터, CD 앞 자켓, 뒷 자켓, 표면 디자인을 하였고, 업체와 소통하며 CD를 주문 제작하였습니다. 이후 캘라그라피 디자인을 추가하여 판매를 진행하였고, 2일간 46장의 CD를 판매하여 23만원의 수익이 발생하였습니다. 수익을 창출하는 게 아닌 기부를 목적으로 한 활동이었기 때문에 발생한 수익금은 전액 사회에 환원하였습니다.CD 디자인은 인쇄를 목적으로 CMYK로 디자인했기 때문에 웹/모바일 화면에서는 색상에 차이가 발생할 수 있습니다.
[Spring] REST, REST API, RESTful API 정리⭐
💡RESTREST(REpresentational State Transfer)는 소프트웨어 아키텍처 스타일 중 하나로, 자원을 이름으로 구분하고 해당 자원의 상태(정보)를 주고받는 통신 방식을 나타낸다. State는 웹 애플리케이션의 상태를, Transfer는 해당 상태의 전송 방식을 의미한다.네트워크 상에서 Client와 Server 사이의 통신 방식 중 하나이며, HTTP 프로토콜을 기반으로 하여 웹의 장점을 최대한 활용할 수 있다는 장점이 있다.REST는 반드시 Spring에서만 사용되는 건 아니며, 다양한 플랫폼 및 언어에서 활용될 수 있다. 📌REST의 구성 요소자원 (Resource)자원은 소프트웨어가 관리하는 모든 것을 나타내며, 각 자원은 고유한 식별자(ID)를 가진다. 이 식별자는 서버..
[Figma] Auto layout: 반응형 UI 디자인
💡Auto layoutFigma에서는 Auto layout 기능을 통해 반응형 UI 디자인을 할 수 있다.Auto layout은 화면 크기가 바뀔 때 바뀌는 화면마다 UI 레이아웃을 조정할 필요가 없도록 자동 조정 옵션을 설정하도록 고안된 기능이다. 따라서 Auto layout 기능을 이용하면 UI/UX 디자인의 영역에서 다양한 화면 크기 및 콘텐츠 변경에 레이아웃이 대응하면서 디자인을 할 수 있다.콘텍스트 메뉴에서 Auto layout을 선택하거나 Shift + A 단축키를 입력하여 사용할 수 있다. 오토 레이아웃으로 설정하는 옵션1. 개체 크기적용할 개체를 선택하고 크기를 조정하면 Auto layout은 동적으로 개체의 크기를 조절하여 내부 콘텐츠에 자동으로 대응한다. 2. 정렬 및 방향가로 또는..
