React/리액트를 다루는 기술 검색 결과

해당 글 22건

23. JWT를 통한 회원 인증 시스템 구현하기

JWT의 이해 JWT는 JSON Web Token의 약자로 데이터가 JSON으로 이루어져 있는 토큰을 의미한다 두 개체가 서로 안전하게 정보를 주고 받을 수 있도록 웹 표준으로 정의된 기술 세션 기반 인증 서버쪽에서 사용자가 로그인 중임을 기억하는 방법 사용자가 로그인→ 서버에 있는 세션 저장소에 사용자의 정보를 조회 → 세션 id 발급 → 사용자가 요청을 보낼 때마다 서버는 세션 저장소에서 세션이 유효한지 확인 후 요청에 응답 토큰 기반 인증 사용자가 로그인 → 서버에서 사용자의 정보가 담긴 토큰을 지급 → 사용자가 요청을 토큰과 함께 보냄 → 서버는 해당 토큰이 유효한지만 검사하고 응답함 User 스키마 / 모델 만들기 Post 스키마와 모델을 만든 것과 동일하게 만들어 주면된다 import mong..
React/리액트를 다루는 기술 2021. 2. 24. 19:45

22. mongoose를 이용한 MongoDB 연동

환경변수 파일 생성 환경변수는 전역변수 보다 한 단계 위에 있는 변수라고 생각하면 쉬운데 프로그램이 실행되는 환경(시스템)에 저장되어 있는 변수로 해당 환경에 있는 모든 프로그램이 사용할 수 있다 웹 프로그래밍에서 쓰이는 환경 변수는 환경별로 달라질 수 있는 값이나, 보안 상의 이유로 코드에서 숨겨야할 때 환경 변수에 설정해놓고 쓰게된다 dotenv는 이런 환경 변수들을 파일에 넣고 사용할 수 있게 하는 라이브러리인데 .env로 만들고 그 안에 내용을 집어 넣으면 된다 예제 코드를 보기에 앞서 esm 라이브러리를 이용해서 모든 exports와 require는 export 와 import로 대체했다 require('dotenv').config(); import Koa from 'koa..
React/리액트를 다루는 기술 2021. 2. 23. 03:03

19. 코드 스플리팅

프로젝트를 빌드할 때 별도의 설정을 하지 않는다면 프로젝트 내에 작성한 모든 파일들이 하나의 파일에 합쳐지게된다 그렇게 하나로 합쳐진 파일이 유저에게 제공되며 프로젝트의 크기가 커질수록 파일을 받아오는데 시간이 오래걸리며 당연하게 사용자 경험적 측면에서 좋지 못하다 이러한 문제를 해결해 줄 수 있는 방법이 코드 스플리팅인데 하나에 파일에 다 합쳐놓는 것이 아니라 어느정도 분할한 뒤 필요한 코드가 있는 파일들만 필요할 때 불러오는 것이다 cra로 작성한 프로젝트를 빌드했을 때의 파일 구조 main으로 시작하는 파일들은 하나의 큰 덩어리로 우리가 자주 사용하는 코드들을 합쳐놓은 곳이다 우리가 코드를 수정하고 다시 빌드하면 보통은 main에 합쳐진다 2나 3으로 시작하는 파일들은 코드들이 잘 수정되지 않는 파..
React/리액트를 다루는 기술 2021. 2. 22. 21:27

21. 백엔드 프로그래밍 : Node.js-Koa

Koa Koa는 Node.js의 Express를 개발한 팀이 만든 프레임워크 미들웨어 기능만 갖추고 있다 Express보다 훨씬 가볍다 async/await 문법을 정식으로 지원한다 서버 띄우기 const Koa = require('koa'); const app = new Koa(); app.use(ctx=>{ ctx.body= 'hello world'; }); app.listen(4000,()=>{ console.log('Listening to port 4000'); }); app.use app.use 함수는 미들웨어 함수를 애플리케이션에 등록하게 해준다 미들웨어 함수는 다음과 같은 구조로 이루어져있다 (ctx, next)=>{ } 보면 알 수 있듯이 Koa의..
React/리액트를 다루는 기술 2021. 2. 21. 02:07

18. 리덕스 미들웨어를 통한 비동기 작업 관리

18-1. 미들웨어란? 리덕스 미들웨어는 액션을 디스패치했을 때 리듀서가 액션을 처리하기 전에 미리 정해둔 작업들을 실행한다 여기에서 작업은 액션 값에 따라서 여러가지 행동을 할 수 있는데 발생하는 액션을 취소하거나, 다른 액션을 발생시키거나 하는 작업들이 가능하다 (대충 액션 → 미들웨어 → 리듀서 → 스토어)그림 18-1-1. 미들웨어 만들기 const loggerMiddleware = store => next => action =>{}; 또는 const loggerMiddleware = function loggerMiddleware(store){ return function(next) { return function(action){ // }; }; }; 이처럼 함수 3개가 중첩되어있는 모양이 미들웨..
React/리액트를 다루는 기술 2021. 2. 19. 00:08

17. 리덕스를 사용하여 리액트 애플리케이션 상태 관리하기

17-1. 프레젠테이셔널 컴포넌트 프레젠테이셔널 컨포넌트가 될 UI 컴포넌트 두 개를 준비한다 +,-버튼으로 동작하는 Counter 컴포넌트 등록, 삭제, 체크가 가능한 Todos 컴포넌트 Presentatinal 코드들 import React from 'react'; import TodoItem from "./TodoItem"; const Todos = ({ input, todos, onChangeInput, onInsert, onToggle, onRemove, }) => { function onSubmit(e) { e.preventDefault(); } return ( 등록 ); }; export default Todos; import React from "react"; const To..
React/리액트를 다루는 기술 2021. 2. 12. 18:50

16. 리덕스 라이브러리 이해하기

리덕스는 리액트의 상태 관리 라이브러리이다 16-1. 개념 정리 16-1-1. 액션 상태에 어떤 변화가 필요하면 액션이 발생한다 이 액션은 객체로 표현되고 액션 객체는 다음과 같은 형식으로 이루어져 있다 { type: 'TOGGLE_VALUE' } 액션 객체는 위 처럼 type 필드를 반드시 가지고 있어야한다 이 type이 액션 객체의 이름이된다 16-1-2. 액션 생성 함수 말 그대로 액션 객체를 만들어주는 함수이다 function addTodo(data) { return { type: 'ADD_TODO', data }; } 액션 객체를 매번 직접 작성하게되면 실수할 가능성이 있기 때문에 함수로 틀을 만들어 둔 뒤 생성을 관리한다 16-1-3. 리듀서 리듀서는 변화를 일으키..
React/리액트를 다루는 기술 2021. 2. 11. 15:17

15. Context API

컴포넌트간의 데이터를 넘겨줄 때는 상위에서 하위 컴포넌트로 props값을 설정해서 넘겨주는게 일반적이다 지금까지 책의 내용을 따라가면서 작은 프로젝트나 예시들을 해보면서 느낀 것이지만 컴포넌트의 깊이가 깊어질 수록 이렇게 전달하는게 맞나..? 싶은 의문이 들 때가 있었는데 to-do 앱만 봐도 그렇다 내가 클릭하는 항목에 접근하려면 많은 컴포넌트를 거쳐서 클릭 이벤트 함수를 전달해주어야 했고 거기서 실행된 클릭 이벤트에 의해서 변경된 state는 또 다시 렌더링하기위해 많은 컴포넌트를 거쳐서 제자리를 찾아가야했다 이러한 문제들을 해결하기 위해 나온것이 context인데 그림과 같이 필요한 데이터들을 context에 넣어두면 여러 컴포넌트를 거칠 필요없이 한번에 접근해서 가져올 수 있다 15-1. Cont..
React/리액트를 다루는 기술 2021. 2. 10. 16:41

14. 외부 API를 연동하여 뉴스 뷰어 만들기

14-1. axios axios는 자바스크립트 HTTP 클라이언트이며 HTTP 요청을 promise기반으로 처리한다 14-1-1. promise const App = () => { const [data,setData] = useState(null); const onClick = () => { axios.get('https://jsonplaceholder.typicode.com/todos/1').then(res=>{ setData(res.data); }) }; return( load {data&& } ); } 이 상태로 load를 누르면 data에 응답을 받아 컴포넌트에 출력한다 14-1-2. async/await async/await를 사용할 경우에는 아래와 같다 // in App.js const onC..
React/리액트를 다루는 기술 2021. 2. 8. 16:37

13. 리액트 라우터로 SPA 개발하기

라우팅? 다른 주소에 다른 화면을 보여 주는 것을 라우팅이라고 한다 리액트 라우팅 라이브러리는 리액트 라우터, 리치 라우터, Next.js 등 여러가지가 있지만 리액트 라우터를 살펴보자 13-1-1. 프로젝트에 라우터 적용 BrowserRouter라는 컴포넌트를 이용하면되는데 이 컴포넌트는 HTML5의 History API를 사용해서 페이지의 새로고침을 하지 않고도 주소를 변경, 정보를 담아둘 수 있게 해준다 ReactDOM.render( , document.getElementById('root') ); 이런식으로 감싸주면된다 13-1-2. 페이지 만들기 라우트로 사용할 페이지를 만들어보자 // Home.js const Home = ()=>{ return ( Home Welcome ); }..
React/리액트를 다루는 기술 2021. 2. 6. 01:09