반응형 분류 전체보기117 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. React 컴포넌트 재사용하기, props와 state - React, Node.js 프로젝트 React component의 구조와 재사용, props와 state 1. React component React는 컴포넌트 기반 아키텍처. 컴포넌트는 UI의 독립적인 재사용이 가능한 조각으로 이를 조합해 복잡한 UI를 구성할 수 있다 1-1. Button 컴포넌트 만들기> Button.js 생성import React from 'react';function Button({ label, onClick, type }) { return ( {label} );}export default Button;이 컴포넌트는 세 가지 props(label, onClick, type)을 받아서 버튼을 렌더링한다(props에 대한 내용은 밑에서 다시 정리할 예정)이렇게 생성한 버튼을 다른 컴포넌트에서.. 2024. 10. 23. 6. Bootstrap으로 UI 구성하기_Flutter, Bootstrap을 활용한 크로스 플랫폼 웹 개발 Bootstrap으로 UI 기본 구성하기1. Bootstrap과 Flutter Bootstrap : 프론트엔드 프레임워크 중 하나로 반응형 웹 디자인을 쉽게 구현할 수 있는 다양한 CSS, JavaScript 컴포넌트를 제공한다. 기본적으로 미리 스타일링된 컴포넌트들이 포함되어 빠르고 일관된 UI를 구축하는데 매우 유용하다. Bootstrap과 Flutter를 조합하면 웹 어플리케이션의 사용자 인터페이스를 유연하게 구성할 수 있는데 주요 컴포넌트에는 그리드 시스템, 버튼, 카드, 폼 등이 있다. 예를 들어 그리드 시스템을 사용하면 반응형 레이아웃을 쉽게 구성할 수 있고, 카드를 사용하면 콘텐츠를 정돈된 형태로 표시할 수 있다 2. Flutter 프로젝트에 Bootstrap 연동하기2-1. Bootstra.. 2024. 10. 21. 이전 1 ··· 4 5 6 7 8 9 10 ··· 20 다음 반응형
