💡Streamlit Streamlit은 데이터 기반 웹 애플리케이션을 만드는 오픈 소스 Python 라이브러리이다. 데이터 분석과 시각화를 위한 웹 애플리케이션 개발 과정을 단순화하여 웹 개발 경험이 없는 사용자들도 쉽게 웹 애플리케이션을 구축할 수 있다. Streamlit 공식 홈페이지 https://docs.streamlit.io/ Streamlit Docs Join 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 ..
💡프로젝트 구조 React 프로젝트를 구성할 때 효율적이고 유지보수가 용이한 폴더 구조를 만드는 것은 매우 중요하다. 이를 위해서는 기능적으로 연관된 파일들을 그룹화하고, 각 파일이 어디에 속하는지 명확하게 파악할 수 있도록 구조를 설계해야 한다. 프로젝트 구조를 적용할 때는 팀원들과의 커뮤니케이션을 통해 일관된 방식으로 파일을 구성하도록 한다. 1. src/ 디렉터리 index.js 살펴보기 프로젝트의 구조에서 가장 중요한 것은 src 폴더이다. src는 source의 약자로, 프로젝트의 모든 소스 코드가 포함된 최상위 디렉터리이다. src 폴더에는 입구 파일이라고 할 수 있는 index.js 파일이 있다. npm start 명령어로 create-react-app을 구동시키면 index.js를 찾아서 ..
💡React React는 사용자 인터페이스(UI) 개발에 초점을 맞춘 JavaScript 프론트엔드 라이브러리로, 복잡하고 동적인 웹 페이지를 개발하는 데에 용이하다. 간단하게 말하면 React는 사용자 정의 태그를 만드는 기술이라고 할 수 있다. 실시간 대시보드, 소셜 미디어 애플리케이션, 전자상거래 플랫폼 등 다양한 분야에서 널리 사용된다. React의 특징 및 장점 React는 Facebook(현 Meta)에서 개발한 JavaScript UI 라이브러리이다. Facebook은 매우 다양한 컴포넌트와 복잡한 사용자 인터페이스를 가지고 있는데, 이러한 복잡성에 대응하기 위해 개발된 것이 React이다. 가상 DOM(Virtual DOM): React는 가상 DOM을 사용하여 UI 업데이트를 처리한다. ..
Spring MVC Framework는 웹 개발에서 널리 사용되는 아키텍처 중 하나로, MVC(Model-View-Controller) 패턴을 기반으로 한다. 💡MVC 패턴의 구조 Model 정의: 애플리케이션의 데이터를 책임지며, 비즈니스 로직을 처리한다. 역할: 사용자에게 표시되는 데이터를 가공하고 저장하며, 데이터의 변경이 일어날 경우 적절한 처리 방법을 구현한다. 구현: Java 객체로 표현되며, 특정 도메인의 데이터를 담는 역할을 한다. View 정의: 시각적인 UI를 담당하며, 사용자에게 정보를 표현한다. 역할: Model에서 받은 데이터를 화면에 표시하고, 사용자의 입력을 Controller에 전달한다. 구현: 주로 HTML, JSP, Thymeleaf 등의 템플릿 엔진을 사용하여 구현한다...
💡REST REST(REpresentational State Transfer)는 소프트웨어 아키텍처 스타일 중 하나로, 자원을 이름으로 구분하고 해당 자원의 상태(정보)를 주고받는 통신 방식을 나타낸다. State는 웹 애플리케이션의 상태를, Transfer는 해당 상태의 전송 방식을 의미한다. 네트워크 상에서 Client와 Server 사이의 통신 방식 중 하나이며, HTTP 프로토콜을 기반으로 하여 웹의 장점을 최대한 활용할 수 있다는 장점이 있다. REST는 반드시 Spring에서만 사용되는 건 아니며, 다양한 플랫폼 및 언어에서 활용될 수 있다. 📌REST의 구성 요소 자원 (Resource) 자원은 소프트웨어가 관리하는 모든 것을 나타내며, 각 자원은 고유한 식별자(ID)를 가진다. 이 식별자는..
💡Auto layout Figma에서는 Auto layout 기능을 통해 반응형 UI 디자인을 할 수 있다. Auto layout은 화면 크기가 바뀔 때 바뀌는 화면마다 UI 레이아웃을 조정할 필요가 없도록 자동 조정 옵션을 설정하도록 고안된 기능이다. 따라서 Auto layout 기능을 이용하면 UI/UX 디자인의 영역에서 다양한 화면 크기 및 콘텐츠 변경에 레이아웃이 대응하면서 디자인을 할 수 있다. 콘텍스트 메뉴에서 Auto layout을 선택하거나 Shift + A 단축키를 입력하여 사용할 수 있다. 오토 레이아웃으로 설정하는 옵션 1. 개체 크기 적용할 개체를 선택하고 크기를 조정하면 Auto layout은 동적으로 개체의 크기를 조절하여 내부 콘텐츠에 자동으로 대응한다. 2. 정렬 및 방향 가..
💡Prototype Figma의 프로토타이핑 메뉴는 디자인을 화면상에서 실제 동작하는 프로토타입으로 변환하는 기능을 제공한다. 이를 통해 사용자 상호작용을 미리 시뮬레이션하고, 피드백을 할 수 있다. Device 항목 설정 시 주의사항 프로토타입을 진행할 때 Device 항목을 선택하지 않으면 기본적으로 PC 기준으로 설정된다. 따라서 모바일 환경에서의 사용을 고려한다면, 프로토타입 시작 전에 디바이스를 선택하는 것이 좋다. 💡Prototype 기능 설명 Interaction details Option 터치 후 발생하는 이동 및 애니메이션 효과를 설정할 때 사용되는 기능이다. 사용자와의 상호작용에 따라 화면 전환 및 효과를 정의하여 프로토타입을 더욱 동적으로 만들 수 있다. None: 어떤 액션도 선택하..
🔎Figma 커뮤니티 플러그인과 위젯을 사용하면 Figma에서의 작업을 효율적으로 할 수 있으며, 다양한 도움을 받을 수 있다. Figma Explore, install, use, and remix thousands of templates, plugins, and widgets published to the Figma Community by designers and developers. www.figma.com 💡Annotation Sticky Note https://www.figma.com/community/widget/1125842729650935566 Annotation Sticky Notes | Figma Community This widget is one of the sticky note wid..
