react
-
API 비동기로 파일 다운 구현하는법Laravel 2022. 3. 29. 21:43
# What? 비동기 통신으로 파일 다운로드 구현 # Why? api는 비동기 통신 기반이라 일반적인 방법으로 파일 다운 불가능, 그렇다고 web.php 따로 뚫으면 보안 취약 및 불편 # How? -> 파일 저장 -> 저장된 파일 url을 리턴 -> 프론트단에서 a태그에 해당 링크를 연결 후 클릭 이벤트 발생시키기 @ 백엔드 public function download(Request $request) { ... $download = Download::create(); $path = $download->id."/".$request->order.'주차 과제기록.xlsx'; Excel::store(new UsersExport($request->target_ids, $request->order, $reques..
-
PWA프론트엔드/React 2020. 8. 25. 01:41
# What? 이게 뭔데 - Progressive Web Application -> 웹에서도 앱처럼 static한 부분들을 설치 가능하게 해줌 -> 푸시알림 등 네이티브에서만 가능했던 부분들을 일부 웹에서도 가능하게 해줌 # Why? 이거 왜 써야 하는데? - 사용자에게 더 나은 사용환경을 제공해주기 위해서 # How? 어떻게 쓰는데? 1. manifest.json 생성 @ public/manifest.json { "name" : "매일점심", "short_name": "매일점심", "display": "standalone", "background_color": "#fff", "theme_color": "#ff9711", "orientation": "portrait-primary", "icons" : [..
-
SWR프론트엔드/React 2020. 8. 17. 00:00
# What? spa인거 좋으나 매번 페이지 접속때마다 api 요청을 새로 해주니, 오히려 mpa보다 사용감이 떨어져보일 때가 있음. mpa처럼 캐싱처리 알아서 잘 해주게 도와주는 라이브러리가 swr임. # How? 1) SWRConfig로 swr를 사용할 페이지 컴포넌트들을 감싸주기 axios(url).then(response => response.data) // 이렇게 해두면 useSWR에 url만 써줘도 response.data값이 return됨.(전역 fetcher 설정) }}> 2) useSWR로 초기 데이터 가져오기(useEffect안에 넣으면 안됨) let {data: items, mutate: mutateItems} = useSWR(`/api/stores?page=${params.page}..
-
9. Auth프론트엔드/React 2020. 2. 5. 23:29
# What? 이게 뭔데? - 인증 # Why? 이걸 왜 배우는데? - 화원가입, 로그인 등 회원인증 관련 작업에 필요함. - SPA(Single Page Application)에서는 주로 JWT(Json Web Token) 방식으로 구현. * 주로 쓰이는 로그인 정보 인증 방식 -> 클라이언트에서 사용자 로그인 -> 서버에서 사용자 정보를 토대로 확인 -> 서버에서 access_token(인증토큰)을 발급 -> 클라이언트에서 access_token을 local storage, store에 저장 -> API 요청을 보낼 때 header에 access_token을 담아 로그인 된 유저임을 증명 # How? 어떻게 쓰는데? 1. 가상서버 세팅 - json-server-auth라는 패키지를 사용하면 API로 ..
-
08. Redux(리덕스)프론트엔드/React 2020. 2. 4. 16:37
# What? 이게 뭔데? - 상태관리 라이브러리 * 용어 - Dispatch(디스패치): 액션을 발생 시킴 - Action(액션): 상태에 어떤 변화를 일으킴 - Reducer(리듀서): 현재의 상태와, 전달 받은 액션을 참고하여 새로운 상태를 만들어서 반환 - Store(스토어): 현재의 앱 상태와, 리듀서를 담고 있고, 추가적으로 상태관리를 돕는 내장 함수들이 내재되어있음 => 디스패치로 액션을 일으키면 리듀서가 전달 받은 후 새로운 상태를 만들어내어 스토어에 저장되어있는 상태값을 업데이트 # Why? 이걸 왜 쓰는데? - 어떤 컴포넌트에서든(전역적으로) 사용하고싶은 state가 있다면 Redux(리덕스)라는 state 관리 라이브러리를 사용. ex. 유저 정보 # How? 어떻게 쓰는데? * 초기..
-
07. 리액트 라우터(React Router)프론트엔드/React 2020. 2. 4. 15:16
# What? 이게 뭔데? - 리액트 라우팅 라이브러리 # Why? 이걸 왜 쓰는데? - 리액트로 만든 Single Page Application에서 새로고침 없이 페이지간 이동을 하려면 이게 필요함. # How? 어떻게 쓰는데? $ npm install react-router-dom 1. BrowserRouter - 페이지 전환을 할 영역 겉을 BrowserRouter로 감싸야함 (BrowserRouter로 감싸진 영역 내에서만 Link, Route 등을 쓸 수 있음) @ App.js import React from 'react'; import {BrowserRouter} from "react-router-dom"; function App() { return ( {/* 여기에 페이지들 들어갈 예정 */..
-
06. API 통신프론트엔드/React 2020. 1. 25. 01:00
# What? 이게 뭔데? - Application Programming Interface, 응용 프로그램 프로그래밍 인터페이스)는 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다. => 백엔드랑 소통하는 통신소라 생각하면 편함. 프론트 : 백엔드야 사용자가 할일 저장하고싶다고 나한테 이런 데이터를 입력해줬어 백엔드 : 어어 그래 데이터에 문제 있는지 살펴보고 문제 없으면 데이터베이스에 저장할게. 문제 없네? 저장했어 이게 저장한 데이터야 프론트 : 어 고마워 나도 사용자한테 저장 잘됐다고 알려주고, 할일 목록에 할일 추가해놓을게 이런 대화를 API를 통해서 함. # Why? 왜 쓰는데? - 왜 이런 소통을 API를 통해서 하나..
-
03. props프론트엔드/React 2020. 1. 17. 14:14
# What? props가 뭔데? - 부모 컴포넌트로부터 받은 데이터 # Why? 이걸 왜 써? - 부모 컴포넌트로부터 받은 데이터를 토대로 컴포넌트를 만들어야할 때가 있음. . # How? 어떻게 쓰는데? @ 부모컴포넌트 import React from 'react'; import 자식컴포넌트 from './자식컴포넌트'; function 부모컴포넌트() { let 전달해줄 변수 = "test"; return ( // 전달해줄 변수명이 pageName이라 해도, 전달받을때 쓸 변수명을 test라 지으면 // 자식컴포넌트에서는 해당 변수를 test라는 변수명으로 사용하게됨 // 보통 똑같이 지음 ); } export default 부모컴포넌트; @ 자식컴포넌트 import React, {Fragment}..