Miracle Morning, LHWN

# 최근에는 클래스형 컴포넌트를 잘 사용하지 않는 추세이지만, 예전에 만들어진 리액트 관련 라이브러리는 Hooks 지원이 안되는 경우도 있고 react-native 관련 라우터 라이브러리 react-native-navigation 의 경우에도 클래스형 컴포넌트를 써야하는 경우가 있다. 따라서 클래스형 컴포넌트도 알고 있으면 도움은 된다. ​ 우선, 함수형 컴포넌트 예시를 보자. import React from 'react'; function Hello({ color, name, isSpecial }) { return ( {isSpecial && *} 안녕하세요 {name} ); } Hello.defaultProps = { name: '이름없음' }; export default Hello; 이를 클래스형 ..

MSA (Micro Service Architecture) 단일 프로그램을 각 컴포넌트 별로 나누어 작은 서비스의 조합으로 구축하는 방법이다. MSA 를 온라인 쇼핑몰에 적용한 예시는 아래와 같다. 각 컴포넌트는 서비스 형태로 구현되고 API 를 이용하여 타 서비스와 통신하게 된다. 각 서비스는 독립된 서버로 타 컴포넌트와 의존성이 없기 때문에 독립된 배포를 하게된다. 또한 각 컴포넌트가 독립된 서비스로 개발되어있기 때문에 부분적인 확장이 가능하다. 온라인 쇼핑몰에서 주문 서비스에 트래픽이 증가한다면 해당 서버만 확장을 해주면 된다. 다만, Monolithic Architecture 가 서비스 간의 호출이 하나의 프로세스 내에서 이루어지기 때문에 속도가 빠르지만 MSA 의 경우 서비스 간 호출을 API ..

# 앞서 만들어주었던 API 에 대한 테스트 코드를 작성한다. 아래와 같이 /api/user/{id} 요청에 대한 응답 명세를 작성해주고, 실행하면 generated-snippets 하위 폴더에 각 요청/응답에 대한 snippet 들이 생성된다. // test/java/com/spring/SpringRESTDocsPractice/UserApiDocumentation.java @RunWith(SpringRunner.class) @SpringBootTest public class UserApiDocumentation { @Rule public final JUnitRestDocumentation restDocumentation = new JUnitRestDocumentation(); @Autowired pr..

사전 세팅 및 개념 정리 # 먼저 Spring initializr 에서 기본 세팅을 한 후 프로젝트를 생성한다. Spring Web : API 를 만들기 위해 설정 Spring Data JPA : 데이터베이스에서 CRUD 를 하기 위한 설정 (ORM 도구) Validation : Bean 의 유효성 검사를 위한 설정 Spring REST Docs Lombok : 로그를 좀 더 편하게 보기 위한 설정 MySQL Driver : MySQL 를 연동하기 위한 설정 # 문서화를 위한 API 생성 : POST /api/user 조회 : GET /api/user/{id} 수정 : PUT /api/user 삭제 : DELETE /api/user/{id} # 실습 순서 프로젝트 생성 실습에 필요한 테스트 API 코..

# 파일명을 정의할 때 역시 Flyway 가 인식할 수 있도록 명명규칙을 따라주어야 하며, 여기선 'V3__bulk_update_books.java' 로 지정하였다. 이때 경로는 src/java 하위에 바로 db/migration 경로를 생성해주었고 그 안에 java 파일을 위치한다. BaseJavaMigration 을 상속받아 migrate 함수를 Override 하여 사용해주면 된다. createStatement 를 통해 쿼리를 생성할 수 있는 객체를 만들고, SELECT 를 통해 가져온 rows 를 하나하나 while 문으로 돌려가며 UPDATE 쿼리를 날려주었다. package db.migration; import org.flywaydb.core.api.migration.BaseJavaMigrat..

API (Application Programming Interface) : 대부분 Server-Side (Back-end) 에서 제공되며, 데이터의 조작 (CRUD) 를 하기 위한 기술이다. # API 문서를 왜 만들어야 할까? '제공자' ↔ '사용자' 사용방법 공유/협의 API 버전 및 변경사항 관리 # 현업에서 운영하는 API 문서화 File (Word, Excel...) Wiki (Web) 그 외 # 기존 방식의 단점 버전 변경 등 수정에 취약 API 와 문서 상태가 다를 수 있음 (버전, 오류 등) 검증되지 못한 문서 Spring REST(Representational State Transfer) Docs RESTful 서비스에 대한 정확하고 읽기 쉬운 문서를 생성하도록 돕는 것이 목적이다. 테스..

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..