🍮 🍮

Connect at dos shell운영체제(OS)응용프로그램(APP)을 실행시켜주고 그것이 실행하는데 필요한 자원을 제공함으로써 실행을 도와주는 실행 환경으로써의 역할 담당쉘어떤 프로그램이 실행되려면 그것의 실행을 요청하는 사용자가 있어야 함, 사용자가 원하는 프로그램을 선택하도록 입력 받는 도구로써의 역할 담당DOS Shell명령어 기반 인터페이스(CLI)와 달리, 사용자가 마우스나 키보드로 파일을 탐색하고 실행할 수 있도록 설계됨파일 탐색 : 디렉터리 구조를 트리 형식으로 보여줌파일 관리 : 복사, 삭제, 이동, 이름 변경 등의 기능 제공프로그램 실행 : 실행 파일을 직접 선택하여 실행 가능디스크 관리 : 포맷, 디스크 검사 등의 기능 수행멀티태스킹 지원 : 일부 DOS 기반 프로그램을 동시에 실행..

객체키로 구분된 데이터 집합 / 복잡한 개체 저장 가능객체 리터럴 - 중괄호 안에 키(문자형) : 값(모든 자료형) 쌍으로 구성된 프로퍼티 여러 개 넣음리터럴과 프로퍼티let user = { // 객체 name: "John", // 키: "name", 값: "John" age: 30 // 키: "age", 값: 30};대괄호 표기법여러 단어를 조합해 프로퍼티 키 만든 경우, 점 표기법 사용해 프로퍼티 값 읽기 X-> 대괄호 표기법 사용let user = {}; // 빈 객체 생성// set 속성 추가user["likes birds"] = true;// get 속성 가져오기alert(user["likes birds"]); // true// delete 속성 삭제delete use..

변수와 상수let - 모던한 변수 선언 키워드var - 오래된 변수 선언 키워드const - 변수의 값을 변경할 수 없음자료형'null' 값다른 언어 - 존재하지 않는 객체에 대한 참조자바스크립트 - 존재하지 않는 값, 비어 있는 값, 알 수 없는 값'undefined' 값값이 할당되지 않은 상태typeof 연산자인수의 자료형을 나타내는 문자열을 반환연산자 - typeof x 함수 - typeof(x)alert, prompt, confirm을 이용한 상호작용alert메시지가 있는 작은 창인 모달 창을 띄움(모달 - 페이지의 나머지 부분과 상호 작용이 불가능하다는 의미 내포)promptprompt(title, [default])title - 사용자에게 보여줄 문자열default - 입력 필드의 초깃값(선택..

src/assets/폴더import로 불러와야 함public/assets/는 URL(/assets/파일명)으로 접근src/components/폴더여러 페이지에서 공통으로 사용하는 UI 컴포넌트 보관컴포넌트들은 페이지와 독립적으로 동작해야 함src/pages/폴더각 Route에 해당하는 페이지 저장보통 pages/ 안의 컴포넌트는 components/의 재사용 컴포넌트를 조합해서 만듦src/routes/폴더React Router 설정을 따로 분리해서 관리import { Routes, Route } from "react-router-dom";import HomePage from "../pages/HomePage";import ProfilePage from "../pages/ProfilePage";export..

노마드코더의 실전형 REACT Hooka 10가지 강의를 보면서 정리하였다. useState항상 2개의 value 가진 Array를 return한다.class component, did mount, render 역할을 한다.// 함수형 컴포넌트const App = () => { const [item, setItem] = useState(1); const incrementItem = () => setItem(item + 1); const decrementItem = () => setItem(item - 1);}// 클래스형 컴포넌트class App extends React.Component { state = { item: 1 } render() { const {item}..

마지막으로 Study 페이지를 만들었다.Study 페이지는 Study 컴포넌트와 바늘의 회전을 담당하는 ChimStudy 컴포넌트로 구현하였다.ChimStudy 컴포넌트// ChimStudy.jsimport { useEffect, useState } from "react";import Chim from "../chim/Chim";import "../BackGround/Background.css";export default function ChimStudy({ isStart, setIsStart, degree }) { const savedDegree = parseInt(localStorage.getItem("degree") || degree); const [currentDegree, setCur..

Pomodoro 페이지에는 0.5초에 1도씩 돌아가는 시계가 들어간다.이를 구현하기 위해서는 바늘 컴포넌트와 Pomodoro에 직접적으로 들어갈 바늘 컴포넌트를 이용한 컴포넌트가 필요하다.Chim 컴포넌트// Chim.jsimport pic5 from "../Pic/Chim.png";export default function Chim(props) { return ( )}props.degree 값을 받아 이미지를 해당 각도로 회전시킨다. transition: "transform 1s linear"을 통해 transform 속성이 변경될 때 등속도로 회전하는 애니메이션 효과를 적용했다.ClockPomo 컴포넌트// ClockPomo.jsimport Chim from "../chim/..

다음으로 Setting 컴포넌트를 만들었다. Setting 페이지에는 각각 Study와 break 시간을 수정하는 작은 토마토 모양 2개가 있다.이를 구현하기 위해 TomatoTime이라는 컴포넌트가 필요했다.TomatoTime 컴포넌트// TomatoTime.jsimport pic3 from "../Pic/TomatoTime.png";import "./TomatoTime.css";export default function TomatoTime(props) { return ( {props.title} 00HOUR ..