Tiny Commit

1. 반응형 웹이란?PC, 태블릿, 모바일 등 다양한 화면 크기에서 보기 좋게 보이도록 다양한 디바이스로 접근이 가능사용자 편의성이 높은 UI 2. REACT 시작1. 패키지 설치npm install react-responsive # npmyarn add react-responsive # yarn 2. 기본 사용법react-responsive는 Media Query를 컴포넌트로 사용할 수록 도와주는 라이브러리입니다. 모바일 화면에서는 특정 컴포넌트를 숨기고, 데스트답에서 다른 컴포넌트를 보여주고 싶을 때 유용하게 쓰인다.import React from "react";import { useMediaQuery } from "react-responsive";const ResponsiveExample ..

1. Aglie1. Aglie 방법론이란? 📌 에자일은 '기민한, 민첩한'이라는 뜻으로 일정한 주기를 가지고 빠르게 제품을 출시하고 요구에 맞게 탄력적으로 수정해나가는 방법론이다. 📌 변화에 수동적으로 대처하기보다 변화를 하나의 고정값으로 전제하여 1~4주 작은 스프린트 단위로 디자인 → 개발 → 테스트를 진행 2. 장점초반에 모든 요구사항을 계획하고 분석하지 않기 때문에, 디자인, 개발, 배포까지 신속하게 완수할 수 있다.전체적인 계획에 의존하지 않고 일정한 주기마다 그때그때 요구사항을 반영하고 수정하여 고객의 변화에 즉각적으로 대응할 수 있다.빠른 속도와 유연함을 자랑한다. 2. Scrum1. Scrum 이란? 📌 에자일 방법론의 구체적인 구현방법으로 "스프린트"라고 불리는 반복적..

1. 리액트 네이티브란? 페이스북에서 만든 오픈소스 모바일 애플리케이션 프레임워트입니다. IOS와 안드로이드 모바일 앱을 동시에 개발할 수 있는 크로스 플랫폼입니다. 📱 특징 요약✅ 크로스 플랫폼iOS, Android 앱을 한 번에 개발 가능⚛️ React 기반React의 컴포넌트 구조와 상태 관리 사용📦 네이티브 컴포넌트 사용HTML이 아닌 네이티브 UI 요소(ex. Text, View, Button) 사용🔄 실시간 반영코드 수정 후 빠르게 반영되는 Fast Refresh 지원💬 커뮤니티 활발많은 오픈소스와 라이브러리 지원 리액트 네이티브를 선택한 이유는 사전에 react를 다뤄본 경험이 있어서, 접근성이 좋다고 판단되었습니다. 장점다른 언어를 학습하지 않앋 된다. JavaScript를 기반..

1. 프로젝트 준비하기1. 요구사항 분석하기감정일기장: 그날의 자기 감정을 표현하는 서비스입니다. 총 4페이지로 구성되어 있습니다. Home페이지: 사용자가 앱에 접속하면 처음으로 만나는 페이지 (인덱스 페이지) ('/')new페이지: 새로운 일기를 추가하는 페이지 ('/new')Diary 페이지: 작성한 일기를 상세히 조회하는 페이지 ('/diary/(일기)id'Edit페이지: 작성한 일기를 수정하는 페이지 ('/edit/(일기)id') 2. 리액트 앱 만들기작업을 할 폴더 만들기npx create-react-app .scr에서 폴터 삭제 (App.test.js, logo.svg, reportWebVitals.js, setupTest.js)//2025-01-08// App.jsimport './App...

1. Context Context: 컨포넌트 트리 전체를 대상을 데이터를 공급하는 기능 1. Context를 사용하는 이유Props Drilling문제를 해결하기 위해리액트 컴포넌트 계층 구조에서 컴포넌트 간에 값을 전달할 때 발생합니다.컨포넌트 간에 데이터를 전달할때 Props를 사용합니다. (부모 -> 자식: 단방향)컨포넌트 사이의 데이터 교환구조를 파악하기 어렵게 만듭니다. Props를 수정하면 여러 컨포넌트를 살펴봐야 하므로 코드 유지 보수를 어렵게 합니다. 2. Context란?Context: 같은 문맥 아래에 있는 컴포넌트 그룹에 데이터를 공급하는 기능A문장과 B문장이 동일한 문맥 아래에 있다 = A와 B가 동일한 목적(기능)을 가지고 있다.Props Drilling문제 해결가능 3...

1. 최적화와 메모이제이션최적화: 웹서비스의 성능을 개선하는 기술 + 렌더링의 성능을 높이는 방법-> 최적화가 잘된 웹서비스는 사용자를 불필요하게 기다리지 않게 하여 서비스의 긍정적인 경험을 만듭니다.최적화 방법으로는 코드, 폰트, 이미지 파일의 크기를 줄이는 등의 여러 방법이 있습니다. 리액트는 '메모이제이션'으로 연산 최적화를 합니다. 메모이제이션: 특정 입력에 대한 결과를 계산해 메모리 어딘가에 저장했다가, 동이랗 ㄴ요총이 들어오면 저장한 결괏값을 제공해 빠르게 응답하는 기술입니다. (불필요한 연산을 줄여 실행속도가 빨라집니다: 동적 계획법) ex) 식당에서 메뉴를 외웠다가 누가 물어보면 답해준다. 2. 함수의 불필요한 재호출 방지하기1. 할 일 분석 기능 추가하기TodoList: 할일 ..

1. useReducer 이해하기리액트 훅 useReducer를 이용하면 컴포넌트에서 상태 변화 코드를 쉽게 분히 할 수 있습니다. 1. 실습 준비하기 // 2025-01-06 7장 useReducer와 상태관리리// src/App.js// 1.1.1 useReducer이해하기기import "./App.css";import Header from "./component/Header";import TodoEditor from "./component/TodoEditor";import TodoList from "./component/TodoList";import { useState, useRef } from "react";import TestComp from "./component/TestComp";const..

1. 프로젝트 준비하기1. 요구사항 분석하기1. 오늘의 날짜를 요일, 월, 일, 연도순으로 표시합니다. 2. 할 일을 작성하는 입력 폼이 있고, 버튼을 클릭하면 할 일 아이템을 생성합니다.3. [할 일 관리] 앱은 생성한 아이템을 페이지 하단에 리스트로 표시하는데, 키워드 검색으로 원하는 할 일만 추출할 수 있습니다.4. 리스트로 표시하는 낱낱의 할 일 아이템은 일을 마쳤는지 여부를 표시하는 체크박스, 아이템 이름. 등록 날짜 그리고 버튼으로 이루어져 있습니다. 2. 리액트 앱 만들기 1. npx create-react-app.2. src/App.test.js, src/logo.svg, src/reportWebVitals.js, setupTest.js 삭제 3. 코드입략// src/App.js// ..

Hooks는 리액트에 새로 도입된 것으로 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 도와줍니다. 리액트 내장 Hooks사용 -> 커스텀 Hooks 만들기1. useStateuseState: 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해줍니다. (함수형 컴포넌트에서 상태를 관리)// Counter.jsimport React, { useState } from 'react'; const Counter = () => { const [value, setValue] = useState(0); return ( 현재 카운터 값은 {value}입니다. setValue(value + 1)}>+1 setValue(value - 1..

1. 리액트 컴포넌트와 라이프 사이클리액트 컴포넌트 = 라이프 사이 Mount: 컴포넌트를 페이지에 처음 렌더링 할 때Update: State나 Props의 값이 바뀌거나 부모 컴포넌트가 리렌더해 지신도 리렌더 될때Unmount: 더 이상 페이지에 컴포넌트를 렌더링하지 않을 때 라이프 사이클을 이용하면 컴포넌트가 처음 렌더링할 때 특정 동작을 하도록 만들거나, 업데이트힐 때 적정한지 검사하거나, 페이지에서 사라질 때 메모리를 정리하는 등 여러 유용한 작업을 할 수 있다. 이를 라이프 사이클 제어라고 하며, 리액트 훅의 하나인 uesEffect를 이용하여 제어할 수 있다. 2. useEffectuseEffect: 값이 변결할 때마다 특정 코드를 실행하는 리액트의 훅 ("특정 값을 검사한다.")use..