본문 바로가기

분류 전체보기

(147)
02. 04 파이썬 기초 04 - 자료구조 02 비시퀀스 데이터 구조(세트, 딕셔너리) 비시퀀스 데이터 구조1. 세트세트 메서드s.add(x) : 세트에 x를 추가한다. 이미 x가 있다면 변화가 없다.sample = {'a', 'b', 'c', 1, 2, 3}sample.add(4)print(sample) # {'c', 2, 3, 1, 'b', 'a', 4}sample.add('a')print(sample) # {'c', 2, 3, 1, 'b', 'a', 4}s.clear() : 세트의 모든 항목을 제거한다.sample = {'a', 'b', 'c', 1, 2, 3}sample.clear()print(sample) # set()s.remove(x) : 세트에서 항목 x를 제거한다.x가 없으면 오류를 발생한다.sample = {'a', 'b', 'c', 1, 2, 3}sample...
02. 03 파이썬 기초 03 - 자료구조 01 시퀀스 데이터 구조(문자열, 리스트) 시퀀스 데이터 구조1. 문자열문자열 조회, 탐색 메서드s.find(x, i) : 문자열의 i번째 인덱스 부터 시작해서 x가 처음으로 나오는 위치를 반환한다.없으면, -1을 반환한다.i는 입력하지 않아도 되고 0 이 기본값으로 설정된다.sample = 'alphabet'find_a = sample.find('a')print(find_a) # 0find_next_a = sample.find('a', 3)print(find_next_a) # 4find_k = sample.find('k')print(find_k) # -1s.index(x, i) : 문자열의 i번째 인덱스 부터 시작해서 x가 처음으로 나오는 위치를 반환한다.없으면, 오류가 발생한다.i는 입력하지 않아도 되고 0 이 기본값으로 설정된다.sam..
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...