끄적끄적

Next는 React 전용 프레임워크입니다. React에서 Sever Side Rendering을 쉽게 하기 위해 만들어진 프레임워크입니다. CSR(Clinet Side Rendering) 과 SSR(Server Side Rendering)은 이전의 블로그를 참고해주시면 되겠습니다. ! Next의 특징 ● React에서 SSR을 가능하게 해준다. SPA의 큰 단점 중 하나는 첫 페이지에 빈화면을 먼저 받고 JS파일을 해석하며 화면을 구성하기 때문에 SEO에 가장 큰 문제를 갖고 있습니다. React만으로도 SSR을 구현할 수 는 있지만 매우 복잡하고 까다롭다고 합니다. 이를 Next를 통해 해결할 수 있습니다. 완성된 HTML파일을 처음에 받아오게 하여 맨 처음 화면의 로딩 속도 또한 빠르게 해줍니다. ..

오늘은 React에서 만든 상태관리 라이브러리인 Recoil에 대해서 간단히 알아보고 이 Recoil을 이용해 Redux로 만들었던 Todolist처럼 간단한 Todolist를 만들어보겠습니다. ! Recoil이란? Recoil은 페이스북에서 만든 상태 관리 라이브러리입니다. Redux와 Mobx와 같은 전역 상태 관리 라이브러리로 프로그램의 뎁스와 복잡도가 증가함에 따라 편리하게 상태를 관리할 수 있게 해주는 것이죠. 아직 Redux나 Mobx와 같이 많은 인기를 받고 있지는 않지만 페이스북에서 React에 가장 알맞는 상태 관리 라이브러리로 만들어 나간다는 것을 믿다보면 인기를 많이 얻게 될지도 모르겠습니다... 또한, Recoil로 작성을 하게되면 기존의 Redux를 이용하기 위해 필요로 했던 여러..

오늘은 React 프로젝트에서 react-naver-maps 라이브러리를 이용하여 지도를 띄우는 법을 포스팅하겠습니다. NCP(Naver Cloud Platform)에서 AI-Naver-API 중 Web Dynamic Map 과 Mobile Dynamic Map을 신청합니다. 인증키 발급 및 등록 과정은 생략하겠습니다! 참고로 가격은 무료이며 길찾기Api를 이용해보고 싶지만 그 기능은 유료라서 못사용해봤네요 ...:( ①. 일단 필요한 패키지를 다운받습니다. npm install react-naver-maps ②. 코드 작성 ...// import { NaverMap, Marker } from 'react-naver-maps'; import { RenderAfterNavermapsLoaded } from..

이제 컴포넌트들을 작성할 시간입니다! 4. App.js 루트 컴포넌트로 MakeTodo와 Todo 컴포넌트를 return 해줍니다. // App.js import React from 'react'; import MakeTodo from './MakeTodo'; import Todo from './Todo'; function App(props){ return( // 할일을 적을 수 있는 컴포넌트 // 할일을 보여주는 컴포넌트 ) } export default App; 5. MakeTodo.js // MakeTodo.js import React, {useState} from 'react'; import { connect } from 'react-redux'; function MakeTodo(props){ c..

오늘은 Redux를 이용한 아주 간단한 TodoList를 만들어보려고합니다. ! Redux가 무엇인지 잘 모르시는 분은 pyolog.tistory.com/7 을 참고하시면 좋을 것 같습니다. 1. 우선 cra(create-react-app)로 리액트 프로젝트를 생성하겠습니다. npx crate-react-app redux_test 2. 먼저 src 폴더 밑에 store를 작성하겠습니다. import { createStore } from "redux"; // 초기 state , 배열에 저장하겠습니다. export const INITAIL_STATE = {todos : []}; //■■■■■■■■■■■■■■■■■■■■■■■ action 정의 ■■■■■■■■■■■■■■■■■■■■■■■■■■■ export fu..

Redux 란? 애플리케이션 상태를 관리하기위한 오픈 소스 JavaScript 라이브러리이다. 따라서, 꼭 React가 아니어도 사용할 수 있다는 것이다. React에서 컴포넌트별로 데이터를 주고 받으려면 어떻게 하는가?? 바로 속성값을 이용해서 주고 받는다. 부모 ↔ 자식 사이에서 데이터 교환이 일어날 수 있다. 하지만 프로그램이 복잡해지고 깊이가 깊어지면 최상위 컴포넌트에서 최하위 컴포넌트까지 데이터를 주려면 .. 타고 타고 타고... 내려가야한다. 이럴때 리덕스를 사용하면 편하다. 리덕스는 상태를 관리하기 위한 상태저장 컴포넌트라고 생각하면 편하다. 어디서든 데이터를 가져오고 수정할 수 있게 하는 것이다. ①액션(Action) 액션은 type속성을 가진 Javascript 객체다. store.dis..