본문 바로가기

전체 글

(28)
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)라는 테마로 구성되어 있다. 사..
자바스크립트 배열 다루기(sort, join) 1.Sort() Number 정렬하기 const data = [3, 1, 33, 6, 12, 1152, 92] const sort = data.sort() console.log(sort) // 1, 1152, 12, 3, 33, 6, 92 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따르기 때문에 위와 같이 결과가 나온다. 오름차순 정렬하기 const sortAscending = data.sort(function (a, b) { return a - b }) console.log(sortAscending) //1,3,6,12,33,92,1152 내림차순 정렬하기 const sortDescending = data.sort(function (a, b) { return b - a }) console.log..