FrontEnd/React
연차 관리 캘린더 프로젝트 With ChatGpt #1
1. 프로젝트 초기 설정 npx create-react-app leave-managementcd leave-managementnpm install react-router-dom tailwindcss postcss autoprefixer 상태관리를 위한 react-router-dom과 디자인에 크게 신경쓰지 않기에 tailwindcss를 사용할 예정 (bootstrap 에 익숙하기도 하다) npm audit fix --force 프로젝트의 패키지 종속성에서 발견된 보안 취약점을 자동으로 수정하는 명령어이다. 보안 강화, 자동화, 최신 버전의 패키지 사용 등의 이점이 있지만호환성 문제 및 불안정성으로 인한 버그, 예상치 못한 변경으로 앱 동작 변경이 야기될 수 있다. 본인은 위 명령어를 사용하지 않을 예정..
연차 관리 캘린더 프로젝트 With ChatGpt #0
개인적으로 근태 관리 프로그램이 필요하여 리액트로 간단하게 만들어 보려 한다. 하지만 퇴근 후 만사가 귀찮으니 ChatGpt로 기획안부터 최대한 가이드를 받아 제작해보자. 우선적 목표는 본인이 사용하고자 함이니 사용자와 관리자의 역할을 통합시킨 프로그램을 작성할 예정대규모 보다는 소규모 팀에 적합할 것이다. 하기 문서는 chatgpt로 작성하였으며 일부 수정하여 작성하였다. 연차관리 프로그램 기획안(사용자와 관리자의 역할 통합) 1. 개요연차관리 프로그램은 직원들이 연차를 신청하고, 자신의 연차를 관리할 수 있는 시스템입니다. 모든 사용자는 자신뿐만 아니라 다른 직원들의 연차도 관리할 수 있는 권한을 가집니다. 이를 통해 작은 팀에서 효율적으로 연차를 관리하고 투명하게 정보를 공유할 수 있습니다.2. 주..
리액트 18 버전 정리
Automatic Batching기존 방식Automatic Batching 적용 // 기존 버전setTimeout(() => { setCount((count) => count + 1); setIsFull((isFull) => !isFull); // 각 state의 업데이트 마다 재렌더링이 발생}, 1000)// 현재 버전setTimeout(() => { setCount((count) => count + 1); setIsFull((isFull) => !isFull); // 재렌더링이 마지막에 한 번만 발생 (Automatic Batching)}, 1000);Transitions긴급한 업데이트와 긴급하지 않은 업데이트를 구분해서 처리하기 위한 개념 업데이트의 종류긴급한 업데이..
Mini Project
미니 블로그 만들기 요구사항글 목록 보기 기능 (리스트 형태)글 보기 기능댓글 보기 기능글 작성 기능댓글 작성 기능 화면 디자인 프로젝트 생성하기npx create-react-app mini-blog 프로젝트 디렉터리에 들어가서 앱 실행하기cd mini-blognpm start 필요한 패키지 설치react-router-dom v6리액트 앱에서 페이지 전환을 위해 사용거의 모든 리액트 앱에 필수styled-components v5스타일링 라이브러리npm install --save react-router-dom styled-components 주요 컴포넌트 및 폴더 구성하기글 목록 보기 기능 (리스트 형태)PostList, PostListItem글 보기 기능Post댓글 보기 기능CommentList, Co..
Styling
CSS와 selectorCascading Style Sheets웹페이지의 디자인, 레이아웃 및 스타일을 정의하기 위한 언어 h1 { color: green; font-size: 16px; }h1 : Selector(선택자)color, font-size : property(속성)green, 16px : Value(값)color: green; / font-size: 16px; => Declaration(선언) Selector의 유형유형ElementIDClassUniversalGrouping h1 { color: green; }... ... ...* {font-size: 20px;color: blue;} h1, h2, p {color:black;text-align: center;} #section {back..
Context
Context란? 기존에는 컴포넌트의 props를 통하여 단 방향 데이터 전달되었다.여러 컴포넌트를 거쳐 자주 사용되는 데이터의 경우 코드의 복잡성과 불편함을 야기한다.이를 개선하고자 Context를 사용한다.Component Tree를 통해 직접적으로 전달하여 위 문제점을 해결 언제 Context를 사용해야 할까?여러 개의 Component들이 접근해야 하는 데이터 ex) 로그인 여부, 로그인 정보, UI테마, 현재 언어 등... Context 적용 전function App(props) { return ;}function Toolbar(props) { // 이 Toolbar 컴포넌트는 ThemedButton에 theme를 넘겨주기 위해서 'theme' prop을 가져야만 합니다. //..