ENN

Single Page Application(SPA) 싱글 페이지 애플리케이션은 서버로부터 새로운 페이지를 매번 불러오지 않고, 현재의 페이지를 동적으로 작동하게 함으로써 사용자에게 웹사이트를 제공하는 것을 말한다. Multi Page Application(MPA) 웹사이트의 인터렉션이 발생할 때마다 서버로부터 새로운 페이지를 불러와 해당 링크로 이동하여 페이지 전체를 새로 렌더링하는 전통적인 웹사이트 제공 방식을 말한다. - 전통적인 MPA는 새로운 페이지 요청 시마다 리소스를 다운로드하고, 전체 페이지를 다시 렌더링하기 때문에 비효율적이다. 그렇기 때문에 최근에는 리렌더링이 필요하지 않고 효율적인 SPA를 많이 사용한다. SPA는 웹사이트에 필요한 모든 정적 요소를 처음 불러올때 한번만 다운로드한다. ..

useSelector는 useEffect내에서 사용할 수 없다. 다음과 같은 오류가 발생할 것이다. "useSelector" cannot be called inside a callback. 그러나 useSelector로 택한 값으로 초기 설정을 하고 싶은 경우가 발생한다. 이럴 때는 어떻게 해야 할까? const selectorData = useSelector(...); const [data, setData] = useState(selectorData); useEffect(() => { setData(selectorData) }, [selectorData]) 위와 같이 useState를 사용하면 간단히 해결된다. 하지만 이렇게 해도 해결되지 않는 경우가 생긴다. 'selectorData'가 'data'의..

1. Props - props는 부모(상위) 컴포넌트에서 자식(하위) 컴포넌트로 전달되는 데이터 - 부모(상위) 컴포넌트에서 받는 데이터이기 때문에 변경이 불가능함. - 부모 요소에서 값을 설정하며, 초기값과 자료형에 대한 유효성 검사가 가능함. -프로퍼티에 문자열을 전달할 때에는 큰따옴표를, 문자열 외에는 중괄호({})를 사용한다. function App(){ return( ); } function Main(props){ return( {props.main} ); } 2. State - state는 한 컴포넌트 안에서 유동적인 데이터를 다룰 때 사용되며, 데이터 변경이 가능함. - 컴포넌트 내부에서 선언되기 때문에 외부에 공개되지 않음. - 주로 상태에 따라 변화하는것, 함수를 통해 값을 변경해야할 때..

#SWR은? = Stale While Revalidate 백그라운드에서 캐시를 재검증(revalidate)하는 동안에 기존의 캐시 데이터(stale)를 사용하여 화면을 그려wnsek. data fetching 라이브러리이다. #리덕스와 다른점 다음과 같은 세가지의 state가 있다. Local State: 리액트 컴포넌트 안에서만 사용되는 state Global State: Global Store에 정의되어 프로젝트 어디에서나 접근할 수 있는 state Server State: 서버로부터 받아오는 state 리덕스는 모든 state를 한번에 관리하는 형태이지만, SWR과 같은 data fetching 라이브러리를 사용하면 Global state와 Server state의 관심사를 분리시킨다. 리덕스는 자..

TypeScript에서는 타입 변환을 더 쉽게 만들어주는 유틸리티 타입을 제공한다. 유틸리티 타입의 종류 자세한 내용 및 사용예시는 공식 문서 참고 (공식문서) #Partial interface의 일부만 만족하는 객체를 구현할 수 있다. #Readonly 객체 내 모든 변수를 readonly로 지정한 것과 같은 효과를 준다. #Pick interface의 특정한 부분만 뽑아서 type으로 만든다. #Omit pick과 반대로, 특정한 부분만 제외해서 type으로 만든다. #ReturnType 해당 함수의 return type을 가져온다. #Required partial과 반대로, interface의 전부를 만족해야만 에러없이 생성된다. #ThisParameterType 해당 함수의 this의 type을 ..

Ajax 비동기 http 통신 기술이다. promise 기반이 아니다. Jquery와 호환이 잘 된다. xhr 객체를 이용해서 필요한 데이터를 불러온다. (xhr은 다루기가 불편하다.) Fetch es6부터 생긴 js 내장 라이브러리이다. axios에 비해 기능이 부족하다. promise 객체로 return 되어 response 데이터를 다루기 쉽다. Axios npm install axios로 설치되는 라이브러리 promise 객체로 return 되어 response 데이터를 다루기 쉽다. fetch에는 없는기능이 존재한다. 비교 간단한 통신의 경우, fetch를 사용해도 좋다. 또한 react-native의 경우, 안정성을 위해 fetch를 사용하는 것이 좋다. 그러나 웬만한 경우는 axios를 사용..

#styled-components는? 컴포넌트를 만드는 기술이다. 컴포넌트를 만들면서 css를 깔끔하게 사용할 수 있도록 한다. jsx가 아닌 익숙한 문법의 css를 작성할 수 있다는 장점이 있다. #사용법 styled.button → 상위 태그가 button인 컴포넌트가 생성된다. div를 넣으면 상위 태그가 div인 컴포넌트가 된다. import styled from 'styled-components'; cosnt SimpleButton=styled.button` css~~~ `; styled(SimpleButton) : 이렇게 어떤 컴포넌트를 인자로 받아서 생성하면, 해당 컴포넌트를 감싸는 컴포넌트가 만들어진다. prop을 사용해서 다른 css를 적용할 수 있다. (${}를 사용하여 함수를 넣을 수..

#Next.js는? React Express..js React-router-dom Server Side Rendering → 이 모두를 내재하고 있다. #사용법 개발환경 실행 : npm run dev 배포 파일 생성 : npm run build 서비스 시작 : npm run start 개발환경이 아닌 실서버를 실행한다. next.js는 서버까지 내장하고 있다. #Route a 태그를 사용해 href에 파일경로를 적어주면 해당 파일 위치로 이동한다. 파일 경로 안에 파라미터를 넣을 수도 있다. ex) /pages/sub/[id].js useRouter라는 훅을 이용해서 파라미터 값을 가져올 수 있다. import {useRouter} from 'next/router'; const id=Number(rout..