Daramji

https://ko.vitejs.dev/guide/ Vite Vite, 차세대 프런트엔드 개발 툴 ko.vitejs.dev

사용자를 대상으로 하는 개발을 해야 하는 프론트엔드 개발자. 구글의 FireBase는 프론트엔드 개발자에게 백엔드의 화력을 지원한다. FireBase는 서버 없는(서버리스) 개발을 가능하게 하기 때문에 백엔드에 대한 지식이 없어도 웹 서비스를 출시할 수 있다. Firebase 플랫폼을 사용한다면 개발자는 실제로 아무것도(DB, 사용자 정보, 서버) 소유하고 있지 않는 것과 같다. 구글의 힘을 빌려쓰는 것이기 때문에 개인적으로만 사용하는 앱이나, 이윤를 추구하지 않는 간다한 수준의 앱을 테스트 할 때 사용하는 게 좋다. 이러한 점들로 인해 규모가 큰 회사에서 엔터프라이즈 급의 앱을 만든다면 파이어베이스는 사용하지 않는다. 🕵🏻‍♀️ Q. 이러한 서버리스(serverless) 개발은 어떻게 가능하게 되었을까..

[App 컴포넌트] import './App.css' import { useState, useRef } from 'react'; import Editor from './components/Editor' import Header from './components/Header' import List from './components/List' const mockData = [ { id: 0, isDone: false, content: "콩두부 산책하기", date: new Date().getTime(), }, { id: 1, isDone: false, content: "명상하기", date: new Date().getTime(), }, { id: 2, isDone: false, content: "코딩하기",..

border-block : 상하 border-inline : 좌우 margin-block margin-inline padding-block padding-inline https://youtube.com/shorts/ClGZXBkGmIs?si=Og3gdC79UwNrOmvq

🌏 기능 구현 준비 컴포넌트 별로 어떤 기능을 구현해야 하는지 살펴보기 기초 데이터 설정하기 데이터 모델링 하기 목 데이터 설정하기 1. 컴포넌트 별 기능 살피기 UI 완료하고 컴포넌트 기능을 구현한다. 컴포넌트별로 어떤 기능을 구현해야 하는지 살펴본다. App 컴포넌트: 할 일 데이터 관리 Header 컴포넌트: 오늘의 날짜 표시 TodoEditor 컴포넌트: 새로운 할 일 아이템 생성 TodoList 컴포넌트: 검색에 따라 필터링된 할 일 아이템 렌더링 TodoItem 컴포넌트: 할 일 아이템의 수정 및 삭제 ✅ CRUD 구현할 컴포넌트의 기능을 잘 살펴보면, 주로 데이터를 추가(생성)하고, 조회하고, 수정하고, 삭제하는 기능으로 이루어져 있다. 데이터를 다루는 4개의 기능, 즉 추가(Create),..

할 일 관리 앱 프로젝트 구현에 앞서 먼저 앱의 요구사항을 분석하고, 이를 토대로 필요한 기능을 하나씩 구현한다. 요구사항 분석 UI 역할에 따라 컴포넌트 분리 UI 구현 (CSS 스타일링) 🌏 1. 요구사항 분석 오늘의 날짜를 요일, 월, 일, 연도순으로 표시 할 일(Todo) 작성하는 입력 폼, 버튼 클릭하면 할 일 아이템 생성 생성한 아이템을 페이지 하단에 리스트로 표시, 키워드 검색으로 원하는 할 일만 추출 가능 리스트로 표시하는 낱낱의 할 일 아이템은 일을 마쳤는지 여부를 표시하는 체크박스, 아이템 이름, 등록 날짜, 그리고 버튼으로 이루어져 있다. 🌏 2. UI 요소를 역할에 따라 구분하여 컴포넌트 단위로 나누기 그리고 요구사항 분석에 맞게 페이지의 각 UI 요소를 역할에 따라 구분할 수 있도..

나이 출력 머쓱이는 선생님이 몇 년도에 태어났는지 궁금해졌습니다. 2022년 기준 선생님의 나이 age가 주어질 때, 선생님의 출생 연도를 return 하는 solution 함수를 완성해주세요 💡나이는 태어난 연도에 1살이며 1년마다 1씩 증가한다. function solution(age) { let answer = 2022 - age + 1; return answer; } function solution(age) { return 2022 - age + 1; } const solution = (age) => 2022 - age + 1 function solution(age) { return 2023 - age } 만약에 현재 연도 기준으로 나이를 출력하고 싶다면 .getFullYear 메서드 사용한다. ..

사칙 연산 [두 수의 합] 정수 num1과 num2가 주어질 때, num1과 num2의 합을 return하도록 soltuion 함수를 완성해주세요. const solution = (num1, num2) => num1 + num2; 화살표 함수는 return 값이 하나면 중괄호 return 생략 가능 function solution(num1, num2) { return num1 + num2; } function solution(num1, num2) { const answer = num1 + num2; return answer; } [두 수의 차] const solution = (num1, num2) => num1 - num2; [두 수의 곱] const solution = (num1, num2) => nu..