본문 바로가기

React18

[Spring 김영한] SpringBoot 공부를 위한 세팅 1. frontend / backend 디렉터리를 구분해서 세팅 - Spring Initializr 로 SpringBoot 프로젝트 생성! - CRA로 React-TS 프로젝트 생성! 2. 기술Stack을 정리한다. 3. 프론트와 백엔드 첫통신 - 첫 컨트롤러 - 첫 apiClient - 첫 fetch - CORS 허용해주기 : Spring Security 를 안쓰는 공부프로젝트니까 그냥 전역허용 - data 받아서 렌더링해보기 - 성공! 2024. 2. 11.
[TS] TS연습하기11 : React와 타입스크립트(TSX) 1. React-TypeScript 프로젝트 생성 npx create-react-app 프로젝트명 --template typescript 2. React에서 TS를 사용할 때 주의할 점 - 프로젝트의 사이즈가 큰가 - 협업 시 다른 사람이 짠 코드를 참조할 일이 많은가 - 장기적으로 유지보수에 도움이 되는가 - 나중에 팀원이 더 필요해도 인력수급이 쉽게 가능한가 - 팀원들 학습에 필요한 시간과 비용이 적게 드는가 - 취업/이직하려면 그냥 쓰셈 어차피 배워야함 3. 문법 - 일반 TSX에서의 타입 지정 (HTML요소) - 컴포넌트의 타입 지정 - useState 타입 지정 : 대부분 알아서 해주니 큰 걱정말고 마우스 올려보자. - Redux에서의 타입 지정 Store 사용하기 - 이런식으로 사용하면 된다... 2023. 4. 13.
추가) React redux-toolkit 리덕스 쉽게 쓰는 비법 리덕스툴킷을 실제 사이드프로젝트에 세팅하는 방법을 재구성해서 개념화 한 포스팅이다. 아래는 실제 진행하고 있는 사이드프로젝트에서 쓰고있는 redux-toolkit 세팅방법 https://victormeredith.tistory.com/93 [앱삼] 4. (frontend) Redux-toolkit 구조 세팅 1. 리덕스 툴킷 쓰는 이유 - 스승님께서 그러셨다. 취업하려면 새로운 라이브러리 신기술 이런거 적당히 배우고 리덕스나 하라고.. - 근데 오리지날 리덕스는 문법이 매우 더럽고 리듀서/액션 패 victormeredith.tistory.com 1. 조건 리덕스 특유의 더러운 문법을 쉽게 바꾼 redux/toolkit은 react18 버전 이상이어야만 사용 가능하다. 2. 왜쓰는가? 리덕스 공식문서에는 .. 2023. 3. 7.
React - 18장 : 리덕스 미들웨어를 통한 비동기 작업 관리 React - 1장 : React 이해 React - 2장 : JSX React - 3장 : 컴포넌트 React - 4장 : 이벤트 핸들링 React - 5장 : ref. DOM에 이름 달기 React - 6장 : 컴포넌트 반복 React - 7장 : 컴포넌트의 LifeCycle React - 8장 : React Hooks 총정리 React - 9장 : 컴포넌트의 스타일링 React - 10장 : 빠르게 TODO앱 실습 React - 11장 : 컴포넌트 성능 최적화 React - 12장 : immer를 사용하여 더 쉽게 불변성 유지하기 React - 13장 : 리액트 라우터로 SPA 개발하기 React - 14장 : 뉴스 뷰어 예제프로젝트 React - 15장 : ContextAPI React - 16장.. 2023. 3. 1.
React - 16장 : 리덕스(Redux) 라이브러리의 이해 React - 1장 : React 이해 React - 2장 : JSX React - 3장 : 컴포넌트 React - 4장 : 이벤트 핸들링 React - 5장 : ref. DOM에 이름 달기 React - 6장 : 컴포넌트 반복 React - 7장 : 컴포넌트의 LifeCycle React - 8장 : React Hooks 총정리 React - 9장 : 컴포넌트의 스타일링 React - 10장 : 빠르게 TODO앱 실습 React - 11장 : 컴포넌트 성능 최적화 React - 12장 : immer를 사용하여 더 쉽게 불변성 유지하기 React - 13장 : 리액트 라우터로 SPA 개발하기 React - 14장 : 뉴스 뷰어 예제프로젝트 React - 15장 : ContextAPI React - 16장.. 2023. 2. 28.
1장-디자인 패턴) MVC 패턴 1. MVC 패턴이란 ? - Model, View, Controller 로 이루어진 디자인패턴이다. - 앱의 구성요소를 세가지로 구분하여 개발 프로세스에서 각각의 구성요소에만 집중해서 개발할 수 있다. - 재사용성과 확장성이 용이하지만, 복잡할 수록 모델과 뷰의 관계가 복잡해지는 단점이 있다. 2. 모델 - model은 앱의 데이터인 DB, 상수, 변수 등을 뜻한다. - 박스모델에서 박스의 위치, 글자, 포맷, 모양 등에 관한 정보들을 가지고 있어야 한다. - 뷰에서 데이터를 생성하거나 수정하면 컨트롤러를 통해 모델을 생성하거나 갱신한다. 3. 뷰 - inputbox, checkbox, textarea 등 사용자인터페이스(UI)를 나타낸다. - 모델을 기반으로 사용자가 볼 수 있는 요소 및 화면을 뜻한다.. 2023. 2. 27.
추가) React State 관리 성능개선과 Hooks React - 1장 : React 이해 React - 2장 : JSX React - 3장 : 컴포넌트 React - 4장 : 이벤트 핸들링 React - 5장 : ref. DOM에 이름 달기 React - 6장 : 컴포넌트 반복 React - 7장 : 컴포넌트의 LifeCycle React - 8장 : React Hooks 총정리 React - 9장 : 컴포넌트의 스타일링 React - 10장 : 빠르게 TODO앱 실습 React - 11장 : 컴포넌트 성능 최적화 React - 12장 : immer를 사용하여 더 쉽게 불변성 유지하기 React - 13장 : 리액트 라우터로 SPA 개발하기 React - 14장 : 뉴스 뷰어 예제프로젝트 React - 15장 : ContextAPI 1. Automati.. 2023. 2. 24.
React - 14장 : 비동기작업 처리와 Axios 패턴을 이용한 예제 프로젝트 React - 1장 : React 이해 React - 2장 : JSX React - 3장 : 컴포넌트 React - 4장 : 이벤트 핸들링 React - 5장 : ref. DOM에 이름 달기 React - 6장 : 컴포넌트 반복 React - 7장 : 컴포넌트의 LifeCycle React - 8장 : React Hooks 총정리 React - 9장 : 컴포넌트의 스타일링 React - 10장 : 빠르게 TODO앱 실습 React - 11장 : 컴포넌트 성능 최적화 React - 12장 : immer를 사용하여 더 쉽게 불변성 유지하기 React - 13장 : 리액트 라우터로 SPA 개발하기 React - 14장 : 뉴스 뷰어 예제프로젝트(현재) 오늘의 예제 실습 순서 비동기작업의 이해 -> axios로.. 2023. 2. 22.