분류 전체보기89 [Python] 날짜 시간대 변경하기 1. 문제프론트엔드에서 날짜를 선택하고 (단일, 범위 날짜 선택 가능)백엔드에서 날짜에 맞는 데이터를 찾아서 보내주려고 하는데, 둘이 날짜가 맞지 않았다.프론트엔드에서 보내는 날짜를 확인 해 보니, 로컬 시간대와 일치했지만백엔드에서는 UTC로 변환하여 처리하고 있던게 문제인 것으로 확인했다. 2. 시간대 변환 코드from datetime import datetimeimport pytz# 한국 표준시 설정kst = pytz.timezone('Asia/Seoul')# ISO 8601 형식의 UTC 데이터utc_date = "2024-12-07T00:00:00Z"# UTC 데이터를 KST로 변환dt = datetime.fromisoformat(utc_date.replace("Z", "+00:00")).asti.. 2024. 12. 9. [React Native] SQLite 사용하기 앱 종료 후 재시작에도 저장된 데이터가 유지 될 수 있도록 데이터를 DB에 넣어 관리하자외부 DB를 사용 할 수도 있지만, 메모 & 버킷 리스트 데이터는 아무리 많이 생성해도상대적으로 데이터가 적을 것이라고 생각되서 관리는 SQLite 를 사용해도 충분해 보인다. 1. 패키지 설치네이티브 환경에서 운영할 수도 있지만, expo 에서도 어느 정도 SQLite 기능을 지원하며지원하는 기능들은 구현하고자 하는 모든 범위를 커버할 수 있어서 아래 패키지를 설치했다.npm install expo-sqlite 2. 테이블 생성 함수 작성먼저 데이터 베이스 입출력을 담당할 클래스를 생성하고 db가 될 파일 이름을 지정한다.class DbManager { constructor() { this.db = SQLit.. 2024. 11. 20. [Vscode] 저장 시 Prettier 적용하기 1. Prettier 확장 설치VS Code의 Extensions 탭(좌측 사이드바에서 네모 아이콘)에서 Prettier를 검색합니다.Prettier - Code formatter 확장을 설치합니다. 2. Prettier를 기본 포매터로 설정VS Code 메뉴에서 File > Preferences > Settings를 클릭합니다. (Mac에서는 Code > Preferences > Settings)우측 상단의 **파일 아이콘(열린 JSON 모양)**을 클릭해 settings.json을 열어 아래 내용을 추가합니다{ "editor.defaultFormatter": "esbenp.prettier-vscode"} 3. 저장 시 포멧 적용settings.json에 아래 설정을 추가하여 저장 시 자동 포맷팅.. 2024. 11. 19. [React Native] 원 그래프 그리기 특정 메모의 완료 개수 / 전체 개수 를 시각적으로 표현하기 위해원 그래프를 사용한다. 이를 위해 다양한 라이브러리가 존재하지만, 비교적 간단한 그래프를 구할 예정이므로 react-native-circular-progress를 사용한다. 1. 패키지 설치컴포넌트 사용을 위해 아래 패키지를 설치한다.npm install react-native-circular-progress react-native-svg 2. 코드 구현 {(fil) => ( 버킷 리스트 - 할일 // 원 그래프 내부 텍스트 )}코드를 구현한 후 화면을 확인하면, 아래와 같이 구현된 것을 확인 할 수 있다.그래프으 시작 지점은 3시 방향인 것으로 확인된다.일반적으로 원형 그래프를 구현할 때, 진행률 시작 지점은 12시로 인식하고.. 2024. 11. 18. [React Native] 데이터 그래프처럼 꾸미기 데이터를 그래프로 표현해야 하는 작업이 생겼는데막상 그래프 관련 라이브러리를 가져와서 표현해보면 여러 제약 사항 때문에 마음에 들게 표현이 되지 않았다.표형해야 하는 그래프는 단순히 바 형태의 차트이므로 그래프 라이브러리 없이 직접 구현해보려고 했다. 1. 최초 코드const data = { '일': 6 , '월': 10, '화': 13, '수': 8, '목': 19, '금': 22, '토': 7};const maxHeight = Math.max(...Object.values(data)); { Object.keys(data).map((item) => ( {data[item]} {item} )) }그래프로 표현할 View 영역 .. 2024. 11. 16. [Ract Native] 네비게이션 바 설정하기 1. 패키지 설치 및 폴더 구조네비게이션 바를 사용하기 위해 아래 두 패키지를 설치한다.npm install @react-navigation/native @react-navigation/bottom-tabs 아래와 같이 폴더 구조를 설정한 후 기존에 작업하던 파일을 Screens 폴더 아래 MemoScreen.js로 옮겼다./src ├── /assets # 이미지, 폰트 등 에셋 파일 ├── /components # 재사용 가능한 UI 컴포넌트들 ├── /navigation │ ├── TabNavigator.js # 탭 네비게이션 ├── /screens │ ├── Me.. 2024. 11. 14. 이전 1 2 3 4 ··· 15 다음
