본문 바로가기
반응형

프로젝트 기록32

7. Bootstrap 폼 디자인, flutter dart 에러 해결 _Flutter, Bootstrap을 활용한 크로스 플랫폼 웹 개발 Bootstrap을 사용한 폼 디자인1. Bootstrap 폼Bootstrap은 웹에서 폼을 디자인할 때 유용한 CSS 클래스를 제공한다간결한 반응형 폼을 쉽게 만들 수 있고 다양한 입력 필드, 버튼, 레이아웃 옵션 등을 제공함  Bootstrap 구성요소 ▷ form-group : 폼 필드를 그룹화하는 클래스▷ form-control : 텍스트 입력 필드, 선택 상자 등의 스타일링을 위한 클래스 ▷ form-check : 체크박스와 라디오 버튼을 위한 클래스▷ btn : 버튼 스타일링을 위한 클래스 2. Flutter와의 연동방법 Bootstrap을 활용해 폼을 디자인한 후 사용자 입력을 처리할 수 있다 Bootstrap 폼을 HtmlElementView를 통해 Flutter UI에 삽입하고 JavaS.. 2024. 11. 8.
1. React와 Node.js를 사용한 게시판 웹 애플리케이션 만들기 - 게시판 만들기, 게시글 목록 자동 갱신, 글 추가, Router 설정, CORS 설정, MySQL Todo구현할 기능 : CRUD(게시글 작성, 조회, 수정, 삭제) RESTful API 이해하기https://tiny-immj.tistory.com/88 REST, REST API, RESTful의 기본 개념과 간단한 api 만드는 방법 진행=> RESTful API는 데이터를 표준화된 방식으로 주고 받을 수 있게 해주고, " data-og-host="tiny-immj.tistory.com" data-og-source-url="https://tiny-immj.tistory.com/88" data-og-url="https://tiny-immj.tistory.com/88" data-og-image="https://scrap.kakaocdn.net/dn/bICe3y/hyXsQys4qa/0opy8CRGgvfm.. 2024. 11. 6.
RESTful API 간단한 API 만들기, Postman 사용법 ~ 포스팅 진행 순서  ~REST, REST APIRESTful설계원칙API 구현하기=> REST, REST API, RESTful의 기본 개념과 간단한 api 만드는 방법 진행=> RESTful API는 데이터를 표준화된 방식으로 주고 받을 수 있게 해주고, 클라이언트와 서버 간의 명확한 데이터 교환을 가능하게 한다 API 테스트 - POSTMAN 사용법 1. REST(Representational State Transfer) 1-1. REST 개념1) HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)를 명시하2) HTTP Method(POST, GET, PUT, DELETE, PATCH)를 통해3) 해당 자원(URI)에 대한 CRUD Operation을.. 2024. 10. 31.
React Context API로 전역 상태 관리 구현 이전 글 React Router로 SPA(Single Page Application) 구현하기https://tiny-immj.tistory.com/86 React Router로 SPA(Single Page Application) 구현하기, SPA를 사용하는 이유React RouterReact Router는 여러 페이지로 구성된 웹 애플리케이션에서 페이지 간의 이동을 쉽게 관리해주는 라이브러리이다해당 라이브러리를 사용하여 url 경로에 따라 다른 컴포넌트를 렌더링 할tiny-immj.tistory.com Context API로 전역 상태 관리Context API는 컴포넌트 트리 내 props 전달 없이 데이터를 공유할 수 있도록 도와주는 기능으로상태 관리를 쉽게 할 수 있다 1. 개념과 사용하는 목적 Co.. 2024. 10. 30.
React Router로 SPA(Single Page Application) 구현하기, SPA를 사용하는 이유 React RouterReact Router는 여러 페이지로 구성된 웹 애플리케이션에서 페이지 간의 이동을 쉽게 관리해주는 라이브러리이다해당 라이브러리를 사용하여 url 경로에 따라 다른 컴포넌트를 렌더링 할 수 있다  1. 프로젝트 폴더 생성npx create-react-app react-router-app  2. react 개발 서버 실행npm run start=> 개발 서버 실행되는지 확인 완료http://localhost:3000  3.React Router 설치npm install react-router-dom => 설치 확인React 프로젝트 폴더\package.json 내에서 찾아볼 수 있다 package-lock.json에서 react-router-dom의 버전과 정보 확인 가능  4. R.. 2024. 10. 30.
useState, useEffect 이해, Counter 만들기 - React, Node.js 프로젝트 React의 상태 관리 useState와 useEffect useState와 사이드 이펙트 처리를 위한 useEffect는 React에서 상태 변화를 관리하고컴포넌트가 렌더링될 때 특정 동작을 처리하는 중요한 역할을 한다=> 간단한 Counter를 구현해보자  1. useState1-1. 개념useState : 상태 관리 기초를 위해 사용되는 훅.컴포넌트 내에서 상태 값을 설정하고, 해당 값을 변경할 수 있도록 해준다. 상태가 변경될 때마다 컴포넌트가 다시 렌더링됨. 1-2. 사용법> Counter.js 생성 이전에 state, props를 이용해 Couter.js를 만들어보았었다  https://tiny-immj.tistory.com/84 React 컴포넌트 재사용하기, props와 state - Re.. 2024. 10. 24.
반응형

티스토리툴바