전체 글 (135) 썸네일형 리스트형 02. 02 파이썬 기초 02 - 데이터 타입 (Data Types) Data Types개요변수의 종류그 변수에 사용하는 연산과 동작 등을 결정하는 속성데이터 타입 분류Numeric Data : int, float, complexText Sequence : strSequence : list, tuple, rangeNon-Sequence : set, dictBoolean, None, Function, .....데이터 타입을 공부해야 하는 이유변수에 저장된 데이터 타입을 어떻게 처리해야 하는지 구분할 수 있음데이터 타입을 통한 유효성 검사를 할 수 있음명확한 타입을 통한 가독성 및 유지보수성을 향상시킬 수 있음특정 연산에 최적화된 특정 데이터 타입들을 공부하고, 성능을 최적화 할 수 있음Numeric Data1. int : 정수 자료형숫자를 그냥 할당하면 정수형이 된다.dat.. [React] Zustand를 사용해서 State 관리하기 03 (1) Zustand 의 기본을 공부하고 싶다면???2024.07.26 - [React] - [React] Zustand를 사용해서 State 관리하기 01 [React] Zustand를 사용해서 State 관리하기 01REACT에서 Store관리하기Zustand 를 사용해서 Store 관리하기1. Zustand란??Zustand는 React 애플리케이션에서 상태 관리를 위한 라이브러리 중 하나로, 단순성과 성능을 중시하며, React 컴포넌트에서 전역 상developer-traxer.tistory.com (2) Zustand 의 기본 활용법2024.07.26 - [React] - [React] Zustand를 사용해서 State 관리하기 02 [React] Zustand를 사용해서 State 관리하기 .. [React] Zustand를 사용해서 State 관리하기 02 Zustand 를 사용해서 Store 관리하기 (1) Zustand 의 기본을 공부하고 싶다면??? 2024.07.26 - [React] - [React] Zustand를 사용해서 State 관리하기 01 [React] Zustand를 사용해서 State 관리하기 01REACT에서 Store관리하기Zustand 를 사용해서 Store 관리하기1. Zustand란??Zustand는 React 애플리케이션에서 상태 관리를 위한 라이브러리 중 하나로, 단순성과 성능을 중시하며, React 컴포넌트에서 전역 상developer-traxer.tistory.com소스 코드 (GitHub) (2) Zustand 활용하기Zustand를 활용해서 간단한 Todo App을 만들어보겠습니다.비동기작업을 위해 Axios라이.. [React] Zustand를 사용해서 State 관리하기 01 REACT에서 Store관리하기Zustand 를 사용해서 Store 관리하기1. Zustand란??Zustand는 React 애플리케이션에서 상태 관리를 위한 라이브러리 중 하나로, 단순성과 성능을 중시하며, React 컴포넌트에서 전역 상태를 쉽게 관리할 수 있도록 도와줍니다. React의 Context API와 함께 사용할 수 있으며, 다른 라이브러리보다 매우 가볍고 간단하다는 특징이 있습니다.특징단순한 API간단하고 직관적인 API를 가지고 있는 Zustand는 상태를 생성, 구독, 업데이트하는 방법이 매우 간단하여 다른 상태 관리 라이브러리에 비해 학습 곡선이 낮습니다.성능 최적화Zustand의 상태 변경은 최소한의 리렌더링을 통해 애플리케이션의 성능을 최적화합니다.사용 편의성Zustand는 Re.. [React] 리액트에서 부트스트랩 사용하기 Introduction1. 부트스트랩이란?부트스트랩(Bootstrap)은 웹 개발에서 자주 사용되는 프론트엔드 프레임워크입니다. 트위터에서 개발된 부트스트랩은 HTML, CSS, JavaScript를 기반으로 하여 반응형 웹 디자인을 쉽게 구현할 수 있도록 도와줍니다. 웹 사이트와 웹 애플리케이션의 UI(사용자 인터페이스)를 빠르고 일관성 있게 개발할 수 있는 도구와 컴포넌트를 제공합니다.2. 리액트에서의 부트스트랩리액트에서는 리액트환경에 맞춘 'react-bootstrap'을 사용합니다. 리액트의 컴포넌트 기반 아키텍처에 맞춰 bootstrap의 기능을 제공합니다.공식문서3. react-bootstrap의 특징모듈식 컴포넌트 : 필요한 컴포넌트만 개별적으로 가져와서 사용할 수 있습니다.커스터마이징 : .. [React] 캘린더 구현 with FullCalendar 라이브러리 캘린더fullCalendar 라이브러리를 이용한 일정 구현캘린더 라이브러리를 설치해줍니다.npm i @fullcalendar/corenpm i @fullcalendar/daygridnpm i @fullcalendar/interactionnpm i @fullcalendar/reactnpm i @fullcalendar/timegrid// 스타일적용을 위한 bootstrapnpm i react-bootstrap그룹 상세 페이지에 캘린더를 띄울 곳을 만들어줍니다.import Calendar from '../components/group/calendar.jsx'; 이제 본격적으로 calendar.jsx 파일을 만들어봅시다.우선 달력, 일정 을 위한 라이브러리와 css파일을 불러와줍니다... [React] Axios 를 이용한 Api 호출 Axios를 이용한 프론트엔드 서버와 백엔드서버 사이의 통신Introduction서버와 데이터를 주고받기 위해 Api통신을 사용하는 방법에 대해 알아봅니다. fetch라는 기본적인 api호출 방식이 있지만, Axios 라이브러리를 통한 api 호출을 하려고 합니다.그렇다면, 왜 Axios를 사용할까??json 형식의 데이터 처리서버 응답을 자동으로 json으로 변환해줍니다.fetch를 사용하면 .json() 메서드를 호출해야 하고, 이 과정에서 에러 처리가 필요합니다.프로미스 기반의 비동기 작업 처리intercepter를 통한 요청 전, 후 관여요청과 응답을 가로채어 처리할 수 있는 인터셉터 기능이 있습니다.이를 통해 공통된 작업처리, 요청과 응답의 전,후처리를 할 수 있습니다.이에 비해, fetch에서.. 실시간 협업 그림판 만들기 02 - 그림판 구현하기 02. 그림판 만들기(2) 그림판 구현 03 - 그림판 만들기2이미지 넣기이미지 파일을 넣을 수 있는 input 을 만들어줍니다.img input 에는 비디오도 넣을 수 있기 때문에, 파일 타입을 설정해줍니다.```html```이젠 자바스크립트에서 사진요소를 불러오고,```javascriptconst fileInput = document.getElementById("file");```불러온 파일을 다음 순서로 가공합니다.1. 발생된 이벤트의 그림데이터를 가져옵니다.2. 그림데이터의 url을 만듭니다.3. 새로운 이미지 변수를 만들어 url을 할당해줍니다.4. 이미지 요소의 값을 null로 만들어줍니다.```javascriptfunction onFileChange(event) { const file = event.target... 실시간 협업 그림판 만들기 02 - 그림판 구현하기 02. 그림판 만들기 그림판 구현 02 - 그림판 만들기선 긋기마우스 클릭 이벤트로 선 긋기 마우스의 클릭 이벤트를 감지해서 클릭한 점들을 선으로 연결해줍니다. onClick function 내부에서 event의 console.log를 확인해보면 클릭의 위치가 offsetX, offsetY로 표현되어 데이터가 보내진다는 것을 알 수 있습니다. 완성 코드 ctx.lineWidth = 2; ctx.moveTo(0, 0); function onClick (event) { ctx.lineTo(event.offsetX, event.offsetY); ctx.stroke(); } canvas.addEventListener( "click", onClick )마우스 무브 이벤트로 선 긋기 마우스가 움직일 때 마다.. 실시간 협업 그림판 만들기 01 - 그림판 구현하기 01. CANVAS 이해하기 그림판 구현 01 - CANVAS 라이브러리 기본 알아보기CANVAS Library참고자료 01 - CANVAS 라이브러리 공식문서참고자료 02 - 무료강의캔버스 라이브러리 공식문서와 무료강의의 내용을 통해 그림판 그현을 공부해보았습니다.Live Server, Live Preview자바스크립트의 실행화면 확인을 위한 익스텐션을 설치해주세요!html 파일에서 마우스 우클릭 -> Open with live Server를 이용하면 새로고침 없이 코드가 변할때마다 실시간으로 바뀌는 화면을 볼 수 있습니다.기본 구현우선 index.html, style.css, app.js 파일을 준비합니다.index.html!를 입력하면이렇게 나오는데 이때, !를 클릭하거나 enter 혹은 tab키를 눌러서 자동완성시킬 수 있습.. 이전 1 ··· 4 5 6 7 8 9 10 ··· 14 다음
