반응형 개발/React5 [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. 이전 1 다음 반응형
