React14 NEXT.JS 기초편: 명령형 VS 선언적 프로그래밍 위의 코드는 사용자 인터페이스를 업데이트 하는 방법에 대한 단계를 작성한 명령형 프로그래밍의 좋은 예이다. 그러나 사용자 인터페이스를 구축할 때 개발 프로세스의 속도를 높일 수 있기 때문에 선언적 접근 방식이 선호되는 경우가 많다. DOM 메서드를 작성하는 대신 개발자가 표시하려는 내용을 선언할 수 있게하면 더 좋을 것이다. (어떻게?) 야 컴퓨터. 나 뭐 해줘! 즉, 명령형 프로그래밍은 요리사에게 피자를 만드는 방법에 대한 단계별 지침을 제공하는 것과 같다. 선언적 프로그래밍은 피자를 만드는 필요한 단계를 고려하지 않고 피자를 주문하는 것과 같다. 개발자가 사용자 인터페이스를 빌드하는데 도움이 되는 널리 사용되는 선언적 라이브러리는 리액트다. React: 선언적 UI 라이브러리 개발자는 사용자 인터페이.. 2022. 5. 22. BrowserRoute, Switch, Route의 역할 (react-route-dom) 들어가기 `react-route-dom`의 주요 컴포넌트를 자세히 알아보자! 리액트 라우터에는 3개 주요 컴포넌트가 있습니다.: 라우터 컴포넌트 라우트 일치 컴포넌트 네비게이션 컴포넌트 그리고 리액트 라우터를 시작하려면, 이 순서를 지켜주어야 합니다.: 라우트 컴포넌트(루트) > 라우트 일치 > 네비게이션 라우트 컴포넌트 라우트의 핵심구성 요소로 이랑 가 있는데, 차이점은 URL 방식과 서버를 통신하느냐의 차이입니다. BrowserRouter: 일반 URL 경로를 사용하며 해당 경로마다 서버를 올바르게 구성해줘야합니다. HashRouter: URL의 해시 부분에 현재위치를 저장합니다. 서버로 전송되지 않아서 서버 구성이 필요하지 않습니다. 라우터를 이용하려면 최상위 레벨(=루트)에서 최상위 요소를 래핑해.. 2021. 10. 17. SWR로 로그인 처리해보기 들어가기 로그인이 성공되었다. 그럼 백엔드 서버에서 로그인한 유저의 정보를 프론트로 보내주는데, 프론트 입장에서는 이 정보를 담아야 하는데 전역적으로 어떻게 담을 것인가? 1. 리덕스 2. Context API 3. SWR (v) 4. 그래프큐엘 makeVar 등등... 오늘은 3번째 방법으로 로그인 처리를 간단하게 구현해보고, 컴포넌트를 넘나들며 전역적으로 상태관리를 해보는 방법을 알아보자. SWR? HTTP RFC 5861에 의해 알려진 HTTP 캐시 무효 전략인 stale-while-revaslidate에서 유래된 것으로 먼저 캐시로 부터 데이터를 반환한 후에 fetch 요청을 하고 최정적으로 최신화된 데이터를 가져오는 전략인 즉, 데이터를 가져오기 위한 react hooks. 그리고 다른 탭에서 .. 2021. 10. 7. 리액트에 핫 리로딩 수동 설치해보기 create-react-app 하면 설치되는 핫 리로딩! 어떤식으로 설치되고 동작하는지 궁금해서 수동으로 설치해보면서 삽질해보는 시간을 가졌다 🤪 1. 핫 리로딩 관련 패키지 설치 $npm i webpack-dev-server webpack-cli @types/webpack-dev-server fork-ts-checker-webpack-plugin -D $npm i @pmmmwh/react-refresh-webpack-plugin react-refresh webpack-dev-server: CORS 문제를 해결해주는 녀석 fork-ts-checker-webpack-plugin: 타입스크립트 검사는 원래 블로킹 형태로 검사되는데 이 녀석으로 타입스크립트와 웹팩을 동시에 검사할 수 있다 (동시에 가능하니까 .. 2021. 10. 7. 이전 1 2 3 4 다음
