본문 바로가기

전체 글91

[Flutter] 메모 앱 만들기 - 입력 상자 만들기 이전 글 - 달력 만들기 [Flutter] 메모 앱 만들기 - 달력전에 React 로 메모를 작성하고, 완료한 메모를 인증할 수 있도록 하는 기능완료한 수에 따라 경험치를 부여하여 메모 작성과 완료에 대한 동기를 부여하는 웹 앱을 만들어 본 경험이 있다.해당chunws13.tistory.com이전 글에서는 달력을 만들어 보고, 선택한 날짜를 하이라이트 하는 기능을 간단하게 구현해 보았다.이번 글에서는1 .달력 화면에서 버튼을 클릭하면 2. 메모를 작성하는 화면이 나오고3. 메모를 작성하고 저장하면 메모 내용을 이전 화면으로 돌려주는 기능을 만들어 본다. 1. 달력 화면에 버튼 추가하기메모를 입력하는 방법은 다양한 방법이 있겠으나,메모 입력 시 반복 설정 등 다양한 옵션을 추가할 예정이므로 새로운 화면에서.. 2024. 9. 3.
[Flutter] 메모 앱 만들기 - 달력 전에 React 로 메모를 작성하고, 완료한 메모를 인증할 수 있도록 하는 기능완료한 수에 따라 경험치를 부여하여 메모 작성과 완료에 대한 동기를 부여하는 웹 앱을 만들어 본 경험이 있다.해당 프로젝트는 Front: AWS S3 / Back: AWS EC2 를 사용해서 배포했지만,많은 사이트들이 그렇듯, 홍보를 하지 않으니 사람들이 이용하지 않았고, 이용 해 본 사람들도 자주 이용하지 않게 되었다.나조차도 별로 이용하지 않았았고, AWS 프리 티어 기간이 지나 유지하는 비용만 발생하니 해당 프로젝트는 내리고앱으로 만들어보면 어떨까 해서 앱으로 재탄생 시켜보려고 한다. 이전에 구현했던 모든 기능들을 다 구현하지 않고 간단한 기능들만 남겨서 구현할 예정이다.1. 일자 별로 메모를 작성하고, 완료할 수 있는 .. 2024. 8. 30.
[Dart] 함수 활용 방법 프로그래밍을 하다 보면 필수적으로 사용자 요구에 맞는 함수를 구성해야 할 필요가 있다.물론 Dart 또한 함수를 만들고 활용이 가능하다. 이번 글에서는 함수를 만드는 방법에 관련해서 알아보기로 한다.  1. 기본 활용 방법함수 이름 앞에 return 될 데이터 타입을 명시한 후 함수 이름을 입력한다. (return 값이 없는 경우: void)그 후, 소괄호 안에 입력 받을 파라미터를 입력한다.이  때, 입력 받을 매개 변수의 데이터 타입을 명시해도 되고, 명시하지 않아도 된다.하지만, 명시하는 쪽이 프로그래밍 중 오류를 찾아내기 더 쉬워 보인다.그 다음, 중괄호 내 표현식을 만들어 준다.String test(String name) => "Hello, $name";void main() { var resu.. 2024. 8. 28.
[Dart] 자료형과 자료구조 알아보기 Dart 언어 또한 다른 프로그래밍 언어와 마찬가지로 다양한 종류의 자료형(Type)과 자료 구조를 가지고 있다.이번 글에서는 Dart 가 지원하는 자료형과 자료 구조에 대해서 정리해 보도록 하자. 1. 자료형 정리void main() { String myName = 'chunws'; int year = 10; double power = 11.11; num items = 1234; items = 1234.1; bool canFly = false;}가장 흔하게 사용되는 자료형은 문자열, 숫자, 부울일 것이며문자열은 String, 부울은 bool로 선언하여 사용할 수 있다.숫자형의 경우, 소수점을 사용지 않는 경우 int 자료형을 사용하고, 소수점이 존재하는.. 2024. 8. 27.
[Dart] 변수 타입 알아보기 기존에 웹으로 만들던 기능을 앱으로 바꿔서 출시를 하고 싶다는 생각을 했다.하나의 코드로 안드로이드, 아이폰 모두 적용 가능하게 만들고 싶었고, Flutter 와 React Native 중 어떤 것을 사용할까 고민한 결과다양한 언어를 경험해 보자는 차원에서 Flutter 로 결정하게 되었다.Flutter 는 Dart 기반으로 만들 수 있어서, Dart 를 먼저 조금이라도 공부한 후에 Flutter 작업을 하기로 했고이번 글에서는 Dart 언어의 변수 선언 방법에 대해서 알아보고자 한다. 1. 공통 적용 사항Dart 언어는 항상 main 이라는 이름을 가진 함수를 가장 최상위 레벨에서 동작시켜야 한다.또한, 코드가 끝나는 부분에는 항상 세미 콜론(;) 이 있어야 한다.void main() { print(.. 2024. 8. 26.
[React] Drag & Drop으로 파일 첨부하기 React 로 파일 업로드 기능을 구현하기 위해 기존에는 Bootstrap Form Control 에서 type='file'로 구현했었는데,위와 같이 구현하면 파일을 드래그 앤 드랍 방식으로 업로드를 할 수 없었다.드래그 앤 드롭 방식의 파일을 업로드를 지원하는 다른 사이트들 처럼 구현해 보고 싶어서 연습을 했다. 1. 패키지 설치React 에서 구현하는 것이 목표이므로 React용 패키지, 그리고 스타일링을 위해 Bootstrap 를 설치했다.npm install react-dropzone bootstrap 2. 기본 구현파일을 업로드할 화면을 먼저 구현했다.import { Container, Card } from "react-bootstrap";const FileUploadFiekd = () => {.. 2024. 8. 21.

티스토리툴바