Tag: Web

2020
0
TILReact-Preview

배열 렌더링하기

React with Velopert - 09 - 배열 렌더링하기 기본 배열 렌더링 UserList.js map 함수를 이용한 배열 렌더링 UserList.js key 추가하기 key의 존재유무에 따른 업데이트 방식 key가 없을 시 key가 존재할 시 Chap 9. 배열 렌더링하기배열 렌더링하기 다음과 같은 배열이 있다고 가정해보

0
TILReact-Preview

useRef

React with Velopert - 08 - useRef 예제 : 초기화 버튼을 클릭했을 때 이름 input 에 포커스가 잡히도록 useRef 를 사용하여 기능을 구현 InputSample.js Chap 8. useRef 로 특정 DOM 선택하기useRef JavaScript 를 이용하여 특정 DOM을 선택하는 상황에서 우리는 ge

0
TILReact-Preview

여러개 input 상태 관리하기

React with Velopert - 07 - 여러개 input 상태 관리하기 예제 : 여러 input 박스 입력 및 초기화 버튼 만들기 (상태 관리하기) App.js InputSample.js 주의점-불변성 Chap 7. 여러개의 input 상태 관리하기여러개 input 상태 관리하기 input 상태가 다수 일 경우 관리를 하는 방법을

0
TILReact

React 스터디 13

React Study 13 JWT 기밀성, 무결성 이란? JWT 사용하기 JWT 생성 JWT 검증 (토큰 내부의 값을 확인할 수 잇다.) key 설정하기 JWT 디코드 그 외 추가 기술 : nonce 로그인 구현하기 user 커포넘트 만들기 api 추가하기 api 전체코드 쿠키 Set 설정 및 API 설정 쿠키 Get 설정 - 커스텀

0
TILReact-Preview

input 상태 관리하기

React with Velopert - 06 - input 상태 관리하기 예제 : input 박스 입력 및 초기화 버튼 만들기 App.js InputSample.js Chap 6. input 상태 관리하기input 상태 관리하기 이번에는 리액트에서 사용자가 입력 할 수 있는 input 태그의 상태를 관리하는 방법을 알아보자. 예제 :

0
TILReact-Preview

조건부 렌더링

React with Velopert - 04 - 조건부 렌더링 예제 App.js Hello.js React에서 연산자의 쓰임처 Hello.js props 값 설정을 생략하면 ={true} App.js Chap 4. 조건부 렌더링조건부 렌더링 조건을 이용하여 렌더링 결과를 결정할 수 있다. 예제App.js / Hello.js 2가지

0
DevelopReact

React로 사고하기

React Official Document주요개념 : React로 사고하기 목업으로 시작하기 1단계 : UI를 컴포넌트 계층 구조로 분할하기 2단계 : React로 정적인 버전 만들기 3단계 : UI state에 대한 최소한의 (하지만 완전한) 표현 찾아내기 4단계: State가 어디에 있어야 할 지 찾기 5단계: 역방향 데이터 흐름 추가하기

0
DevelopReact

합성(Composition) vs 상속(Inheritance)

React Official Document주요개념 : 합성(Composition) vs 상속(Inheritance) 컴포넌트에서 다른 컴포넌트를 담기 특수화 React에서 상속은? React Official Document주요개념#10. 합성(Composition) vs 상속(Inheritance) React는 상속 대신 합성을 사용하여 컴포넌트

2019
0
TILReact

React 스터디 12

React Study 12 예제 : 로그인 기능 만들기 새로운 프로젝트 생성 백엔드 추가 lib폴더 생성하고 Axios API 작성 해주기 SignUp 코드 작성 - input 유효성 검사하기 SignIn 코드 작성 - 쿠키 이용하기 쿠키 로컬스토리지 쿠키 vs 로컬스토리지 세션 토큰 기반 인증 방식 (JWT) 용어 - ( 러버덕 ) 쿠키