반응형 전체 글14 [React]뽀모도로 타이머 개발 3일차 - 타이틀 화면(2) 타이틀 화면 마무리 - 제목, 설정, 버튼 추가오늘은 뽀모도로 타이머 타이틀 화면 개발을 마무리 짓겠습니다.제목 영역 추가하기제목은 간단합니다. 전체 제목이므로 h1태그 안에 추가해 줍니다. 만약 여러가지 주제가 있어서 소제목이 있다면 h2, h3 등 으로 1단계당 숫자를 +1씩 올리시면 됩니다. Pomodoro TimerTailwindCSS를 이용해 클래스명을 추가하여 모양을 만들어 줍니다.text-center : 글자를 가운데로 정렬합니다text-5xl : 글자 크기를 정합니다. 5xl이면 기본값이 48px 입니다.lg:text-7xl : 앞의 'lg'는 화면 너비에 따라 반응형으로 우선 적용되는 css 입니다. lg의 경우 화면 너비가 1024px 이상일 경우 적용한다는 뜻으로, 화면 너비가 10.. 2024. 6. 20. [React]뽀모도로 타이머 개발 2일차 - 타이틀 화면 시작이 반 2. 타이틀 화면 개발하기 - 1 우선 타이틀 화면을 개발하겠습니다. 사실 타이머를 생성하기 위한 모든 사전 작업(시간 설정 등)을 여기서 진행해야 하므로 이 화면이 완료되면 80%는 끝났다고 봐도 무방합니다. 우선 완성 된 화면 부터 보여드리겠습니다. 나름 스마트폰으로도 이용할 수 있도록 반응형으로 제작하였습니다. 아래는 모바일 화면입니다 일단 제목을 크게 써서 보여주고, 가운데에는 셀렉트박스(selectbox)를 이용해서 집중 시간, 짧은 휴식시간, 긴 휴식시간을 설정할 수 있도록 화면을 구성하고, 아래 스타트버튼을 누르면 지정한 시간에 맞춰 타이머를 설정하고 실행하는 구조입니다. 배경화면 및 컨텐츠 영역 설정하기. const [bgColor, setBgColor] = useState("b.. 2024. 3. 16. [React]뽀모도로 타이머 개발 시작 1일차 - 준비하기 시작이 반. 리액트 프로젝트 생성하기 이번 프로젝트는 익숙하지만 복습한다는 마음으로 '리액트'를 이용해서 개발을 진행하려고 합니다. vscode 설치나 확장 프로그램은 취향차이도 있고 검색하면 금방 나오기 때문에 생략하겠습니다. 만약 기회가 된다면 제 설정 내용을 보여드리도록 하겠습니다. 일단 vscode를 실행하고 ctrl + `(1 옆에 있는키)를 누르면 아래쪽에 터미널이 열리게 되는데 여기서 아래 내용을 입력합니다 npx create-react-app pomodoro-timer pomodoro-timer는 이번에 생성할 프로젝트 이름이며, 자유롭게 지정이 가능하지만 대문자는 입력이 불가능합니다. 설치가 완료되면 vscode에서 ctrl을 누른 상태에서 K,O 키를 순서대로 누르면 폴더 열기 화면이 .. 2024. 3. 13. 뽀모도로 타이머 - 생애 첫 사이드프로젝트 뽀모도로 기법이란 뽀모도로 기법(Pomodoro Technique)은 1980년대 후반 이탈리아의 경영 컨설턴트 프란체스코 치릴로(Francesco Cirillo)가 제안한 시간 관리 방법론으로 인간의 뇌는 휴식 없이 한가지 작업에 완전히 몰두하기 어렵기 때문에 짧은시간 작업(업무 또는 공부)과 휴식을 반복하면 집중력을 유지할 수 있을 것이라는 생각으로 출발하였습니다. 뽀모도로(Pomodoro)란 이탈리아어로 토마토를 의미하며 치릴로가 대학시절 토마토 모양의 조리용 타이머를 활용해 공부했던 기억이 있어서 뽀모도로 기법이라는 이름으로 정해졌습니다. 이 기법의 기본적인 골자는 25분동안 집중해서 업무 또는 공부를 진행하고, 5분동안 휴식하는 것을 4번 반복하고, 그 후 30분간 쉬도록 시간을 배분하는 것입니.. 2024. 3. 12. [React/axios/DB] HTML 코드가 데이터베이스 입력이 안되는 이유 로컬에서는 잘 됐는데 서버에서는 안되는 이유 현재 우리 회사에는 프론트엔드(저) 한명 백엔드 한명으로 프로젝트를 진행하고 있습니다. 프론트서버와 백엔드서버를 분리해서 REST API 형식으로 이루어져 있지요. 프론트엔드에서는 UI를 보여주고, 사용자가 기능을 실행하면 axios를 이용해 원하는 기능을 백엔드 서버에 요청해서 json형태의 결과값으로 다시 화면에 출력하는 방식으로 서비스를 운영하고 있습니다. 오늘은 게시판 만들기를 진행했습니다. 방식은 간단합니다. 프론트엔드 서버에서는 게시글을 작성할 페이지를 개발합니다. 작성자 이름과 글 제목, 글 내용을 입력할 입력창을 만들고, 입력을 완료하면 저장을 진행할 버튼을 추가합니다. useState를 이용해서 작성자, 제목, 내용을 문자열 형태의 변수로 저장.. 2023. 12. 27. Flutter 기초다지기 - Dart 2. 자료형 오늘은 플러터 기초다지기를 위한 Dart 언어를 파헤쳐보도록 하겠습니다. 지난 시간에는 변수를 선언하는 방법을 알려드렸고, 이번에는 변수의 자료형태를 지정하는 방식에 대해 적어보겠습니다. 문자열을 담을 수 있는 String 문자열 담을 수 있는 String은 말 그대로 지금 작성하고 있는 단어, 문장 등을 의미합니다. 쓸 수 있는 모든 글자를 담을 수 있다고 보시면 됩니다. 문자열 지정은 따옴표(" 또는 ')를 이용해서 지정할 수 있습니다. String a = "작심삼일 개발일기" print(a) // 콘솔에 작심삼일 개발일기 출력 정수를 담을 수 있는 int int는 정수(1,2,3,-1,-2,-3 등 소수점 자리가 없는 숫자)를 담을 수 있습니다. 앞서 언급한 String도 숫자를 문자열 형태로 담을.. 2023. 12. 14. Flutter 기초다지기 - Dart 1. 플러터는 다트를 사용하고 있습니다. Dart(다트)는 구글이 멀티플랫폼에서 작동하느 앱을 위해 만든 프로그래밍 언어입니다 Flutter(플러터)는 이 언어를 기반으로 구성되어있기 때문에 플러터 개발을 위해 다트는 필수적으로 공부해야 하는데요, 다행히도 이 언어의 목적 중 하나가 프로그래머들에게 '자연스럽게 다가가는 것'이라서 난이도는 프로그래밍 언어 중에서 쉬운 편이라고 할 수 있습니다. 인터넷만 있다면 언제 어디서나 공부할 수 있는 DartPad VSCode나 안드로이드 스튜디오 같은 개발 툴이 없어도 다트로 코딩해보고 실행할 수 있습니다. 바로 DartPad라는 사이트인데요, 인터넷만 사용할 수 있으면 언제 어디서나, 심지어 스마트폰으로도 다트 언어 공부가 가능합니다. 왼쪽 화면에서 코딩을 하고 파란.. 2023. 11. 22. Flutter 개발환경 구축 번외편 - VSCode 설치하기 Android Studio가 너무 느리다면 VSCode를 추천 비주얼 스튜디오 코드(Visual Studio Code. 이하 VSC)는 마이크로소프트에서 개발한 텍스트 에디터로 통합 개발 환경(IDE)인 안드로이드 스튜디오에 비해 PC 요구스펙이 상당히 낮으면서도 다양한 확장 기능을 통해 IDE 수준으로 기능을 사용할 수 있는 장점이 있어서 많은 개발자들이 VSC를 사용하고 있습니다. 다만, IDE가 아니기 때문에 프로그램을 컴파일 하려면 확장 기능을 통해 컴파일 환경을 직접 구축해야 하는 번거로움이 있기 때문에 Android Studio 사용에 불편함(렉이 걸린다던지)이 없다면 Android Studio를 계속 사용하는 편이 좋을 수도 있습니다. 아래 링크를 통해 다운로드 페이지로 이동한 뒤 윈도우, .. 2023. 11. 22. Flutter 개발환경 구축 - 안드로이드 에뮬레이터 설정 PC에서 모바일 환경을 보기 위한 에뮬레이터 설정 이번 포스팅에서는 안드로이드 에뮬레이터를 설정하는 방법을 작성하겠습니다. 간단하게 말해서 PC에서 안드로이드 환경을 구축하여 앱 개발 상황을 테스트하기 위한 도구로서 만약 스마트폰으로 직접 개발 테스트를 진행하신다면 패스하셔도 됩니다. 에뮬레이터는 안드로이드 스튜디오에서 설치할 수 있습니다. 먼저 첫 화면에서 More Actions를 선택하신 후 'Virtual Device Manager' 를 클릭해 주세요 해당 메뉴를 선택하면 새로운 창이 열릴 텐데요, 여기에서 Create Device 버튼을 눌러주세요. Create Device 버튼을 누르면 기기를 선택하는 목록이 나오는데, 기기는 취향에 맞춰 선택하되, 플레이 스토어 아이콘이 표시된 기기를 선택해 .. 2023. 11. 20. Flutter 개발환경 구축 (feat. SDK) - 2 - 개발공부 기록 안드로이드 스튜디오에 플러터 플러그인 설치. 지난 포스팅에서 안드로이드 스튜디오 설치 및 초기세팅을 완료하였습니다. 이제 안드로이드 스튜디오에 플러터 플러그인을 설치하고, 자바를 설치하고 플러터 SDK를 설치하고 진짜로 플러터 개발환경 구축을 완료하도록 하겠습니다. 초기세팅을 완료하면 이 화면이 뜨게 됩니다. 여기서 좌측 메뉴 위에서 세번째인 'Plugins'를 선택해 주세요. 그리고 플러그인 화면 위쪽에 잘 보시면 돋보기 모양이 있는데 거기에 Flutter를 입력하시면 플러터 플러그인이 나옵니다. Flutter 플러그인을 선택한 뒤 Install 버튼을 눌러서 플러그인을 설치할 때 경고창이 뜨는데, 'Accept'를 누르시면 됩니다. 이때 Dart 플러그인이 설치되지 않았다면 설치할 거냐고 묻는 창이 .. 2023. 11. 15. Flutter 개발환경 구축 (feat. SDK) - 개발공부 기록 다시 처음부터 블로그를 기록하고 얼마 지나지 않아 노트북을 포맷해야 하는 상황이 와버렸습니다. 그래서 어제 기록한 내용들이 싹! 날아간 상태죠. 물론 지난 글을 보면서 다시 진행해도 되지만, 개발환경을 구축하면서 은근히 오류도 자주 발생했던 터라, 조금더 직관적으로 개발환경을 구축해 보기로 했습니다. 그리고 기존 글에서는 스크린샷을 찍지 않고 대부분 글로만 작성했는데, 이번에는 스크린샷을 포함하여 좀 더 상세히 알려드리도록 하겠습니다. 안드로이드 스튜디오 설치. https://developer.android.com/studio?hl=ko Android 스튜디오 및 앱 도구 다운로드 - Android 개발자 | Android Developers Android 스튜디오는 Android 앱에 최적화된 통합 개.. 2023. 11. 10. Flutter 개발환경 구축하기 (feat. fvm) - 2 - 개발공부 기록 지난번에 이어서 개발 환경 구축을 계속 진행해 보겠습니다. 환경변수 설정하기 지난 글에서 중간에 오류가 발생했고, 그 원인이 환경변수에 있다는 걸 알게 되었습니다. 그래서 환경 변수를 진행하도록 하겠습니다. 환경 변수는 지난번에 Windows Powershell을 실행할 때와 마찬가지로 시작버튼을 누른 뒤 한글로 '환경 변수'를 치시면 '시스템 환경 변수 편집' 또는 '계정의 환경 변수 편집'이라는 아이콘이 나옵니다. '시스템 환경 변수'는 해당 컴퓨터 전체에서 사용하는 환경 변수이고 '계정의 환경 변수 편집'은 PC를 여러 사람이 사용해서 사용자 계정을 여러개 사용할 경우 그 중 현재 로그인 중인 한개의 계정에서만 사용할 수 있는 환경 변수입니다. 사실 Windows 10, Windows 11 기준으로.. 2023. 11. 9. 이전 1 2 다음 반응형
