Web Front-end/react (5) 썸네일형 리스트형 Zustand로 전역상태관리 해보기#1 말로만 듣던 쉽고 편하다는 zustand를 프로젝트에 적용하기 위해 사용 해 보았다. # 이하 예제에서 할것 state를 true로 만들기 state를 토글로 관리 count +1 및 초기화 1 . 먼저 create-react-app으로 만든 프로젝트에 아래 경로처럼 store를 관리할 파일을 만듬. => src\store\store.js를 만들어 줌 //store.js // zustand의 create를 사용하여 store를 생성. import {create} from 'zustand' //create 안에는 기본값을 갖는 state를 설정 , 함수명 형식으로 변경할 state에 대해 작성. //set()은 상태를 변경하는 메서드 // state를 false => true로 바꿔주고자 할때 export.. 서버 사이드 렌더링이란? (SSR / Server Side Rendering) 들어가며 .. MPA와 SPA 먼저 , 클라이언트와 서버 간의 통신에서 웹 서버가 HTML을 반환하는 프로세스는 다음과 같이 요약할 수 있다. 기본적인 정적 페이지는 단순하게 HTML,CSS,JavaScript로 구성되어 있지만, 동적 페이지는 사용자의 비동기 요청을 실시간으로 처리하는 상호작용을 포함한다. 따라서 일반적인 웹 사이트의 경우 사용자가 클릭하거나 서버로 요청을 보내면 짧은 시간동안 빈 페이지를 표시하고 서버는 요청에 대한 응답으로 새로운 정적 페이지를 반환한다. 이러한 종류의 응용 프로그램을 MPA(Multiple Page Application) 라고 한다. 반면에 React나 Vue에서 사용하는 웹 페이지는 SPA(Single Page Application)라는 테마로 구성되어 있다. 사.. React로 로그인, 로그아웃 기능 구현하기(짱 쉽게) React Framework인 Next를 사용하여 로그인, 로그아웃 기능 구현 하는 방법 실제로 로그인/로그아웃을 처리해줄 서버가 없기때문에 더미데이터가 들어오면 state로 화면을 구현하는 방식입니다. 추가로 next와 ant Design이 사용되었습니다. 1. 프로젝트 구성 부가적인 작업파일들이 있는데 여기서 실제로 사용하는 파일은 components에 있는 AppLayout.js //메인 화면 LoginForm.js // 로그인할 화면 UserProfile.js // 로그아웃할 화면 세 파일을 사용합니다. 1-1. package.json package.json은 아래와 같이 설정 되어있습니다. 콘솔에서 npm i 로 설치합니다. 중요한 dependency는 next, react, react-dom,.. 리액트에서 자주 쓰이는 자바스크립트 문법 3가지 1. object shorhand 문법 객체 리터럴 선언시에 key로 선언된 값이 존재한다면, value 를 생략해도 자동으로 매칭시켜준다. 일반적으로 쓰는 JS문법 let name = "홍길동"; let age = 20; const person = { name:name, age:age } object shorhand 사용 예시 let name = "홍길동"; let age = 20; //key:value 형식이 아닌 key값만 선언한 형태 const person = { name, age } console.log(person) //result : {name: '홍길동', age: 20} 2.Destructuring (구조분해, 비구조화 할당) Destructuring은 구조화된 배열 또는 객체를 Dest.. 리액트 메모 모음 리액트 - 페이스북에서 만든 UI를 만들기 위한 자바스크립트 라이브러리 - View 레이어를 담당(MVC) - React(웹 어플리케이션), React Native(모바일 어플리케이션), React Electron(데스크랍 어플리케이션) - 그외 : Angular(프레임워크) : Vue(프레임워크와 라이브러리의 중간) 리액트 특징 - Component로 이루어진 UI라이브러리 - Component는 한 가지 기능을 수행하는 UI단위 - 리액트 어블리케이션은 꼭 하나 이상의 Component로 이루어져 있음 - 최상위 컴포터넌트는 Root - 컴포넌트 내부의 State가 존재함 - 메모리에 Virtual DOM Tree를 가지고 있음 -> 트리에있는 자식컴포넌트의 render함수가 호출이 됬을때, 이전의 .. 이전 1 다음
