일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- openapi3
- AuthenticatoinProvide
- 리액트
- Spring REST Docs
- T-OTP
- tasklet
- Crawling
- OpenStack
- Flyway
- Spring Batch
- Filter
- Spring Security
- REACT
- cheerio
- stopPropogation
- Reduxpender
- SWAGGER
- axios
- cloud native
- JavaScript
- SpringBoot
- vuejs
- vue
- SpringRESTDocs
- UsernamePasswordAuthenticationFilter
- gradle
- MFA
- preventdefault
- MSA
- Pender
- Today
- Total
목록REACT (39)
Miracle Morning, LHWN
# 최근 웹 어플리케이션은 쿠키를 통해 직접 인증을 구현하지 않고, 쿠키는 사용자를 식별하는 용도로만 사용한다. 대신 실제 데이터는 session을 통해 서버 쪽에 안전하게 파일이나 데이터베이스의 형태로 저장한다. # 여기서는 인증 라이브러리인 express를 사용해본다. (※ plugin과 middleware는 비슷한 개념) (※ express 는 프론트인 React 를 이용해서 백엔드 서버를 만들 수 있도록 해주는 프레임워크이다.) npm install -s express session // 여기서 -s는 "이 프로젝트는 express session 모듈에 의존하고 있다"는 의미 # 예제 소스 (express session github에서 공식적으로 제공하고 있는 샘플 소스) // nodejs/e..
# bash와 zsh의 차이 : Linux는 기본적으로 bash를 사용하지만, 다른 쉘 환경으로도 전환을 할 수가 있는데 그것이 zsh이다. 다만, zsh은 최신 버전으로 bash와 호환되지만 더 많은 기능을 가지고 있다. (예를 들어 기본으로 제공되는 맞춤법 수정, 향상된 명령줄 완성, 셸의 플러그인 역할을 하는 로드 가능한 모듈, 명령 대신 파일 이름 또는 명령 줄의 다른 항목을 별칭으로 지정할 수 있는 전역 별명 및 더 많은 테마 지원) Oh My Zsh : 플러그인 및 zsh 용 테마와 같은 주요 확장 기능을 제공해준다. 이를 통해 사용자는 보다 개인화된 인터페이스를 사용하여 쉘에서 작업하고 다양한 도구, 편리한 기본 지원 시스템에 액세스할 수 있다 # vi 마지막 행 모드 (Last Li..
# 내 프로젝트 메인의 기본 UI는 Material UI를 이용하여 만들었다. npm install @material-ui/core yarn add @material-ui/core package.json 파일의 dependencies에 @material-ui/core 모듈이 추가되었는지 확인한다. # Git : 버전관리 시스템 # Node.js / NPM : Node.js 는 자바스크립트를 서버환경에서 실행하는 JavaScript Runtime인데, 이를 설치하면 NPM도 같이 설치된다. NPM은 Node.js로 만들어진 모듈들을 설치 및 버전관리를 할 수 있는 프로그램이다. # MongoDB : 인기있는 NoSQL (Not Only SQL : 관계형 DB보다 덜 제한적인 일관성 모델을 이용하는 ..
# 만일 React 앱에서 에러가 발생한다면 아래와 같은 에러 페이지가 노출된다. 다만, 이 화면은 개발 환경에서만 보여지는 화면이고 실제 사용자에게 보여지는 화면을 보려면 우측 상단의 X 버튼을 클릭하면 된다. 아래 화면처럼 실제 사용자들에게는 빈 페이지만 노출되어 더욱 당황스럽게 할 것이다. Null Checking props 로 전달되는 user 가 존재하지 않는 경우를 분리하여 null 을 렌더링해주는 것이다. function User({ user }) { if (!user) { return null; } return ( ID: {user.id} Username: {user.username} ); } 이렇게 Null Checking 을 해주면 빈 페이지가 노출되는 것은 동일하지만, 에러는 발생하지..
# LifeCycle Method : 컴포넌트가 브라우저에 나타나고, 업데이트되고, 사라질 때, 에러가 났을 때 호출되는 메서드들 → 클래스형 컴포넌트에서만 사용할 수 있다. (useEffect 랑 비슷) # 마운트 될 때의 생명주기 - constructor : 컴포넌트의 생성자 메서드. 컴포넌트가 만들어지면 가장 먼저 실행되는 메서드 - getDerivedStateFromProps : props 로 받아온 것을 state 에 넣어주고 싶을 때 사용 - render : 컴포넌트를 렌더링하는 메서드 - componentDidMount : 컴포넌트의 첫 번째 렌더링이 마치고 나면 호출되는 메서드. 호출되는 시점에는 컴포넌트가 이미 화면에 나타난 상태 # 업데이트 생명주기 - getDerivedStateF..
# 최근에는 클래스형 컴포넌트를 잘 사용하지 않는 추세이지만, 예전에 만들어진 리액트 관련 라이브러리는 Hooks 지원이 안되는 경우도 있고 react-native 관련 라우터 라이브러리 react-native-navigation 의 경우에도 클래스형 컴포넌트를 써야하는 경우가 있다. 따라서 클래스형 컴포넌트도 알고 있으면 도움은 된다. 우선, 함수형 컴포넌트 예시를 보자. import React from 'react'; function Hello({ color, name, isSpecial }) { return ( {isSpecial && *} 안녕하세요 {name} ); } Hello.defaultProps = { name: '이름없음' }; export default Hello; 이를 클래스형 ..
React 에서 배열/객체를 업데이트 할 때에는 직접 수정하면 안되고, 불변성을 지켜주면서 업데이트 해야한다. // 좋지 않은 방법 const object = { a: 1, b: 2 }; object.b = 3; // 좋은 방법 const object = { a: 1, b: 2 }; const nextObject = { ...object, b: 3, }; 경우 (O) 좋은 방법 (O) (X) 좋지 않은 방법 (X) 항목 추가 concat push () 항목 제거 filter splice () 항목 수정 map n 번째 항목 직접 수정 # posts 배열 안의 id 가 1인 post 객체를 찾아서 comments 에 새로운 댓글 객체를 추가해주는 경우 const nextState = { ...state, ..
# 리액트 프로젝트에서 발생할 수 있는 이런 상황을 상상해보자. 특정 함수들을 구현했는데 이를 사용하기 위해서 3-4개 이상의 컴포넌트를 거쳐 props 를 통해 전달되어야 한다면 매우 번거로울 것이다. (컴포넌트 1개 정도 거치는건 괜찮을 것 같다.) 이럴 때에 Context API + dispatch 를 함께 사용하면 프로젝트 안에서 전역적으로 사용할 수 있는 값을 관리할 수가 있다. ContextAPI 로 Context 만들기 : React.createContext() const UserDispatch = React.createContext(null); createContext 함수의 파라미터는 Context의 기본 값(Context 를 쓸 때 값을 아무것도 지정하지 않을 경우 사용)이다. ..
useState : 상태를 관리 컴포넌트에서 가변적인 상태를 지니고 있을 때, 상태를 관리하고 싶을 때 사용한다. const [value, setValue] = useState(0); 이 함수가 호출되고 나면 배열을 반환하는데, 첫 번째 원소는 상태 값이고, 두 번째 원소는 상태를 설정하는 함수이다. useEffect : 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정 # useEffect 는 기본적으로 렌더링되고 난 직후마다 실행되며, 두 번째 파라미터에 무엇을 넣느냐에 따라 실행 조건이 달라진다. (1) 마운트 될 때만 실행하고 싶으면, 두 번째 파라미터로 비어있는 배열을 넣어준다. (2) 특정 값이 변경될 때만 호출하고 싶으면, 두 번째 파라미터로 전달되는 배열 안에 검사하고 싶은 값을 넣..
# 컴포넌트를 만드는 과정에서 반복되는 로직이 발생하기 마련이다. 이럴 때에는 Custom Hook 을 만들어서 반복되는 로직을 쉽게 재사용한다. 구현하는 방법은 Hook 파일 안에서 useState/useEffect/useReducer/useCallback 등 Hooks 를 사용해서 원하는 기능을 구현하고 컴포넌트에서 사용하고 싶은 값들을 반환해주면 된다. (1) src/hooks 디렉터리를 만들어서 따로 분리해준다. (2) use 라는 키워드로 시작하는 파일을 만든다. ex) useInputs.js (3) useState/useEffect/useReducer/useCallback 등 Hooks 를 사용해서 원하는 기능을 구현한다. 예시로 useInputs.js 를 구현해보자 import { u..