프론트엔드/React
-
[작성중] 6-1. Custom Form Input 컴포넌트 만들기프론트엔드/React 2024. 3. 3. 02:53
# What? 이게 뭔데? - select, input text, textarea, checkbox, file(첨부파일), image(이미지 업로드)를 만들필요 없이 커스텀 컴포넌트로 만들어놓고 재활용하는법 # Why? 왜 쓰는데? - 매번 위 input들을 만들어서 쓰려면 비효율적임. 미리 입력세트를 만들어놓고 간편하게 쓰기 # How? 어떻게 쓰는데? 1. 커스텀 입력 컴포넌트 만들기 @ compoents/form/InputSelect.js -> props로 옵션 목록을 받고, 그 옵션을 클릭했을 때 해당 데이터를 전달하는 메소드 짜기 function InputSelect({value, options, onChange}){ return ( {options.map(option => {option.lab..
-
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를 통해서 하나..
-
05. Event프론트엔드/React 2020. 1. 23. 22:32
# What? 이게 뭔데? - 마우스 클릭, 키보드 입력 등의 사용자 인터랙션 # Why? 이걸 왜 쓰는데? 사용자가 삭제 버튼을 눌렀을 때, 회원가입 내용을 입력한다던지 등 사용자의 행동에 반응해야할 때 사용. # How? 어떻게 쓰는데? - on이벤트명={실행할 함수} const increase = () => { alert("인간적으로 증가했다 치자"); }; 증가 * 자주 사용되는 이벤트 종류 1. onClick - 마우스 클릭 2. onSubmit - 입력폼(form) 제출 3. onChange - input, select의 입력값 변화 # Practice 연습 1. +, - 버튼을 눌러 age값 변경해보기 @ Example.js import React, {Component, useState, u..