본문 바로가기

개발공부_Blog184

SPA = Single Page Application MPA = Multi Page application 전통적인 웹 애플리케이션 방식이다. 멀티페이지 애플리케이션 : 사용자가 다른 페이지로 이동할 때마다 새로운 HTML을 받아오고, 페이지를 로딩할 때마다 서버에서 리소스를 전달받아 화면에 보여준다. 새로운 페이지를 보여줄 때마다 서버 측에서 모든 준비를 하기 때문에 트래픽이 더 많이 발생한다 SPA = Single Page Application MAP의 단점을 개선하는 웹 애플리케이션 방식 싱글페이지 애플리케이션 : 하나의 페이지로 이루어진 애플리케이션 리액트 라이브러리를 사용해 뷰 렌더링은 사용자의 브라우저가 담당하게 한다. HTML을 처음 한번만 받아와서 웹애플리케이션을 실행한 후, 사용자의 요청에 따라 필요한 데이터만 서버에서 받아와 화면에 업데이트.. 2022. 8. 28.
React의 불변성이란 무엇인가? React의 불변성 "불변성의 의미는 메모리 영역에서 값을 변경할 수 없다는 의미입니다." 간단 설명 let string = 'data1'// 1. string: 'data1'가 메모리 1에 등록됩니다. string = 'data2'// 2. string: 'data2'가 메모리 2에 등록됩니다. 위 예시에서 메모리 영역을 총 2개 사용합니다. 변수 string은 'data1' 였고, 여기에 'data2'를 재할당하였는데 기존 메모리 영역 1에 있는 'data1'의 값은 그대로 두고, 메모리 영역2에 'data2'를 새로 할당했습니다. 즉, 메모리영역에서 'data2'는 'data1'을 대체하는 것이 아니라 새로운 영역에 할당됩니다. 이것이 불변성입니다. 왜 React에서 불변성을 지켜야 하나 리액트에서.. 2022. 8. 21.
immer_불변성 유지 immer란 무엇인가 react에서 불변성을 유지하는 코드를 작성하기 쉽게 해주는 라이브러리다. produce 함수를 사용하는데, 첫번째 파라미터에는 수정하고 싶은 상태, 두번째 파라미터에는 어떻게 업데이트하고 싶을지 정의하는 함수를 넣어준다. 보통 produce(state, draft) 형태로 사용한다 immer는 어떤 원리로 작동하는가 React는 기본적으로 부모로부터 내려받는 Props나 내부 상태인 State가 변경되었을 때 컴포넌트를 다시 렌더링 하는 리렌더링 과정이 일어난다. React는 이 Props와 State의 변경을 불변성을 이용해서 감지한다. '불변성을 지킨다'는 것은 기존의 값을 수정하지 않으면서 새로운 값을 만들어내는 것을 말한다. 이러한 불변성이 지켜지지 않으면 내부의 값이 새로.. 2022. 8. 21.
config.json jsconfig.json이 무엇인가요? 디렉토리에 jsconfig.json파일이 있으면 해당 디렉토리가 JavaScript 프로젝트의 루트 디렉토리임을 나타냅니다. 선택적으로 프로젝트에 속한 파일, 프로젝트에서 제외할 파일 및 컴파일러 옵션을 나열할 수 있습니다 jsconfig 옵션 option Description noLib Do not include the default library file (lib.d.ts) target Specifies which default library (lib.d.ts) to use. The values are "es3", "es5", "es6", "es2015", "es2016", "es2017", "es2018", "es2019", "es2020", "esnext"... 2022. 8. 15.
Prettier설정_코딩스타일 통일하기 Prettier는 코드스타일 자동정리도구이다. 공식문서 : https://prettier.io/docs/en/options.html Prettier · Opinionated Code Formatter Opinionated Code Formatter prettier.io 여러 개발자가 한 팀에서 일하게 되는 경우, 사소한 코딩 스타일 차이로 의견 충돌이 일어날 수 있다. Prettier를 사용하여 표준 코딩 스타일을 정해놓은 뒤 작업을 하는 것이 좋다. Prettire는 전체 코드베이스에서 일관된 코드 스타일을 적용하며 프로젝트의 최상위 디렉터리(root)에 파일을 생성하면 된다. { "singleQuote" : true, "semi" : true, "useTabs" : false, "useWidth" :.. 2022. 8. 15.
useMemo, React-hooks(4) 8-4 useMemo 함수 컴포넌트 내부에서 발생하는 연산을 최적화 시키는 Hook이다. 리액트에서 컴포넌트의 렌더링은 state업데이트, 부모컴포넌트 업데이트 등으로 인해 수시로 일어날 수 있다. 이러한 경우에 불필요한 중복 연산이 발생할 수 있으며 memoization을 활용한 useMemo로 연산을 최적화 시킬 수 있다. Memoizatioin 이란? 기존에 수행하던 연산의 결과물을 어딘가에 저장해두고 동일한 값이 들어오면 재활용하는 기법이다. 랜더링마다 호출되는 컴포넌트 함수 일반적으로 React의 함수형 컴포넌트는 다음과 같은 구조로 작성이 됩니다. function MyComponent(props) { // 어떤 로직 (JavaScript) return; /* 어떤 화면 (JSX) */ } fu.. 2022. 8. 10.
useReducer, React-hooks(3) 8-3 useReducer useState와 useReducer는 컴포넌트의 상태를 관리하는 hook이다. useReducer는 컴포넌트와 상태 업데이트 로직을 분리하여 컴포넌트 외부에서도 상태관리를 할 수 있다 useReducer를 사용하면 컴포넌트 바깥에서도 작성할 수 있고, 다른 파일에 작성하여 불러와서 사용할 수도 있다. 1. 컴포넌트 외부에 상태 업데이트 로직의 reducer함수 작성 기본형태 : function reducer(state, action) { ... } function reducer (state, action) { switch (action.type){ case 'INCREMENT' : return {value : state.value+1} case 'DECREMENT': retu.. 2022. 8. 10.
useEffect, React-Hooks(2) useState, useEffect, useReducer Hook은 함수 컴포넌트에서 React state와 생명주기 기능을 연동할 수 있게 해주는 함수다. useState : state의 상태를 관리하는 Hook useEffect : 렌더링 직후 작업 설정하는 Hook useReducer : useState처럼 state를 관리, 업데이트 할 수 있는 Hook 8-2 useEffect 기본형태 : useEffect( function, deps ) function : 수행하고자 하는 작업 deps(의존배열) : 배열 형태이며, 배열 안에는 검사하고자 하는 특정값 or 빈배열이 들어간다 1. 마운트 될 때만 실행하고 싶을 때 = 컴포넌트가 처음 나타날 때만 실행하고 싶을 때 함수의 두 번째 파라미터(dep.. 2022. 8. 10.
useState, 가장 기본적인 React-Hooks useState, useEffect, useReducer Hook은 함수 컴포넌트에서 React state와 생명주기 기능을 연동할 수 있게 해주는 함수다. useState : state의 상태를 관리하는 Hook useEffect : 렌더링 직후 작업 설정하는 Hook useReducer : useState처럼 state를 관리, 업데이트 할 수 있는 Hook 8-1 useState const Counter = ()=>{ const [value, setValue] = useState(0) useState 함수를 호출하면 배열을 반환 첫번째 원소 value = 현재 상태값 변수이고 두번째 원소 setValue = 상태값을 갱신해주는 setter함수다 useState 괄호 안의 값은 초기 상태값이다. //.. 2022. 8. 10.

티스토리툴바