Drag And Drop : DND 앱CRA > `react-beautiful-dnd`드래그앤드랍을 위한 라이브러리 GitHub - atlassian/react-beautiful-dnd: Beautiful and accessible drag and drop for lists with ReactBeautiful and accessible drag and drop for lists with React - atlassian/react-beautiful-dndgithub.com : 사용하고 싶은 부분 전체를 감싸는 wrap : 드래그 떨굴 수 있는 부분 : 드래그 할 아이템+ provied + {...provided.droppableProps} + ref={provide.innerRef} > 스타일 및 조회를 ..
웹 풀 사이클 데브코스
EditModal.tsx 할일 누르면 > 상세정보 열고 닫힘닫힘 아이콘 FiX 를 누르면 > handleCloseButton 함수 호출dispatch로 상태관리한 setModalActive를 false로 만들면modalActive가 false가 되어서 App.js에서 호출한 거에서 null 이 된다.import React, { useState } from "react";import { FiX } from "react-icons/fi";import { useTypedDispatch, useTypedSelector } from "../../hooks/redux";import { setModalActive } from "../../store/slices/boardsSlice";const EditModal =..
BoardList.tsx 게시판 목록 생성, boardId 이동`npm i react-icons`app.tsx 에서 props 로 activeboardId 상태값을 전달한다. 어떤 게시판이 선택되었는지! const [activeBoardId, setActiveBoardId] = useState("board-0"); BoardList.tsx게시판을 선택했을때, 어떤 boardId가 클릭이 활성화 되어있는지 확인하고, 해당 게시판 정보가 열리게 하기!- 전역으로 상태값을 전달하면 타입 에러가 발생하기 때문에, 사용할 BoardList 컴포넌트에 props의 타입을 지정한다type TBoardListProps = { activeBoardId: string; setActiveBoardId: React...
Trello와 비슷한 형식의 Task 웹 만들기- 게시물 마다 할일 생성- 할일 list 여러개- 할일 상세정보 확인- 활동기록 로그 확인- 할일 자유롭게 이동 가능 환경세팅 vite, 폴더구조npm npx registry 패키지 안에 node 관련 패키지들이 가져온다npx : 패키지 가져오는건 동일, nodemodules 에는 저장하지 않고, 사용할 수 있게 한다. > 한번만 사용할때 유용`npm init vite` React, TypeScript 선택 > `npm i` 로 package 에 있는 필요한 라이브러리 저장하기`npm run dev` id root 안에 src 값이 들어가있다. SPA(index.html) > MPA(about.html) 폴더구조`useSelector`, `useDispa..
props메인 App 파일이 아닌, 특정 데이터를 컴포넌트끼리 정보를 공유해야 할때, 매개변수를 통해 전달하는 형태를 props 라고 한다.React.FC : 함수에 전달되는 인자 props의 타입을 선언하는 명령어. children Props의 타입 체킹이 명확히 되지 않는다는 단점이 있다. (기본적으로 children Props가 옵셔널 형태로 들어가 있으니 확실히 children이 있어야 하는지 없어야 하는지 명확히 타입 체킹이 되지 않는다는 점)import React from "react";interface MyProps { weather: string; children: React.ReactNode;}const MyWeather: React.FC = (props) => { return ( ..
클래스형 컴포넌트, 함수형 컴포넌트클래스 : 리액트 초기버전함수형 : 리액트 16 이후 사용 권장 (이전에는 상태전달이 안되었었다.) 리액트에서 클래스형 사용할때 > `extends Component` 필수이다.import { Component } from "react";class ClassCom extends Component { render() { return 클래스형 컴포넌트; }}export default ClassCom;반드시 export 추출해야 한다. 클래스로 분리한 컴포넌트를 사용할 때 꼭 import 해주기 함수형import React from "react";const FuncCom = () => { return 함수형 컴포넌트;};export default FuncCom; ..
React 웹 프레임워크자바스크립트 라이브러리의 하나이다. 싱글 페이지 어플리케이션 SPA 및 모바일 어플리케이션 개발에 사용할 수 있다.컴포넌트 안에서 렌더링하는 방식을 사용한다. 동작원리상속구조로 만들어진 컴포넌트를 렌더링을 순차적으로 실행한다.초기 렌더링가상 DOM 변경 : 렌더링 > HTML 렌더링 > DOM 에 주입 > 브라우저재조정실제 DOM 업데이트DOM : Document Object Model : HTML의 구조가상 DOM tree : 컴포넌트가 업데이트가 되면, 최소한으로 연산해서 변화된 부분만 업데이트를 하는 방식이다.> 실제 DOM에 적용해서 업데이트를 한다 : 화면 깜빡임 발생 CRA - 타입스크립트Create React App : `npx create-react-app 폴더명` ..
객체 리터럴객체 안의 모든 프로퍼티들의 타입을 지정해 주는 방법enum 등 객체 선언에 사용할 수 있는 형식`gender?: "male" | "female";`특정 값을 나타내는 타입, 해당값이 정확히 일치해야 한다. 작성된 변수들 제외한(없는) 값 작성시 에러 발생한다. 문자열 리터럴 타입 : `let status : 'success' | 'error';` 숫자 리터럴 타입 : `let speed: 50 | 100 | 200;`불리언 리터럴 타입 : `let isTrue : true;`객체 리터럴 타입 : `let person : {name : 'dah', age : 30};`타입 별칭 : type CardinalDirection = 'North' | 'East' | 'South' | 'West';` ..
타입스크립트 = JS + 타입 체크JS 의 복잡하고 코드관리의 단점을 해결 > 버그를 줄이고, 쉬운 유지봇, 좋은 퀄리티의 코드 생산TS에서 JS 작성하면 동작하지만, JS에서 TS를 작성하면 동작하지 않는다.function pluss(a:number,b:number){ return a + b;}console.log(pluss(3,5));만일 3,5가 문자열로 감싸졌다면 > JS : 35 / TS : Error 데이터 타입을 표기하면 좋은 점? TS > JS로 컴파일 > 웹 환경설정cmd > `npm i -g typescript``tsc 파일명.ts` 타입스크립트 컴파일러 명령어 터미널에 치면, app.js 파일로 컴파일해서 생성한다.ㄴ 자동 동기화 `tsc -w 파일명.ts` tsconfig.js..