본문 바로가기

[CSS] Flexbox 1. flexbox 축 (1) Main Axis (flex-direction으로 정의) - row, row-reverse : 인라인 방향으로 행을 따른다(가로축). - column, column-rverse : 상단에서 하단으로 블록 방향을 따른다(세로축). (2) Cross Axis - 주축(flex-direction)에 대한 수직 축을 말한다. - 주축이 row, row-reverse 면 열 방향이다(세로축). - 주축이 column, column-reverse 면 행 방향이다(가로축) (3) 예시 : flex-direction : row의 주축과 교차축 2. 시작선과 끝선 - flexbox는 글씨를 쓰듯 오른쪽에서 왼쪽으로 요소가 배치되는 것을 가정하지 않는다. - 요소는 start에서 시작해 en..
setState 비동기 다루기 1. 원인 setState가 이루어진 후, 모달창을 열게 하고 싶었는데 비동기로 처리되다 보니 모달창이 먼저 열리는 문제가 있었다. 2. 해결책 setState의 두번째 인자가 callback임을 이용해 해결했다. 첫 번째 setState에서 모달창의 내용을 세팅한 후, 콜백으로 모달창을 open하게 해 주었다. 코드는 다음과 같다. onOpenModal = (projectId) => { let data = this.projectDataSet.find(item=>item["id"]===projectId) this.setState({ modalContent: data },()=>{console.log("state change1",this.state) this.setState({open:true},()=>{..
REST API URI설계 프로젝트를 진행하며 RESTful API를 설계하게 되었다. 2008년 Leonard Richardson은 Web API에 대한 성숙도 모델을 다음과 같이 제시했다. 수준 0: 한 URI를 정의합니다. 모든 작업은 이 URI에 대한 POST 요청입니다. 수준 1: 개별 리소스에 대한 별도의 URI를 만듭니다. 수준 2: HTTP 메서드를 사용하여 리소스에 대한 작업을 정의합니다. 수준 3: 하이퍼미디어(HATEOAS, 아래에 설명)를 사용합니다. Fielding의 정의에 따르면 수준 3에 이르는 Web API가 진정한 RESTful API에 해당한다. 현재는 아직 공부가 부족해 HATEOAS는 적용하지 못할 것 같다. 수준2 까지 모델을 설계해 본 후, 차후 REST에 대한 이해가 깊어지면 HATEOAS..
링크 모음 1. spring boot에서 mock사용 : https://jojoldu.tistory.com/226- mock bean을 사용해야 하는 이유부터, @MockBean 사용 방법까지 자세하게 나와있다!
mock을 활용한 테스트 프로젝트에 사용되는 service, repository가 늘어나니 테스트도 복잡해졌다.예를 들어 MembershipService를 테스트하고 싶은데, 그러려면 MembershipService가 의존성을 지니는 User, Study 관련 내용을 설정해 주어야 했다. 실제 테스트 코드보다 given에 쓰는 코드가 더 길어지니 테스트 수행에 어려움이 많았다. 문제를 해결하려 검색을 하다 가려운 곳을 정확히 긁어주는 글을 찾았다.https://jojoldu.tistory.com/226 mock을 사용하면 아주 쉽게 문제를 해결할 수 있었다.상세한 내용은 위 블로그에 아주 잘 정리되어 있다. 블로그 글을 따라 mock를 사용했더니 코드가 아래처럼 정리됐다.원래 코드는 db에 user 생성해서 넣고, study 생..
Mock vs Stub Test Double 유닛 테스의 테스트 케이스는 테스트 대상이 의존하는 것에 독립적이어야 한다.즉, 테스트 대상을 격리시키는 것이 필요하다. 이를 가능하게 하는 방법은 실제 대상을 모방한 가짜를 사용하면 된다.이렇게 사용되는 대역을 stub/Mock/Fake라고 부른다. 그리고 이들을 묶어 Test Double(테스트 대역)이라고 부른다. Mock vs StubMock Object : 행위 검증(behavior verification)에 사용Stub : 상태 검증(state verification)에 사용Mock Object의 위키피디아의 정의는 다음과 같다.In object-oriented programming, mock objects are simulated objects that mimic the..
spring data jpa 사용자 정의 repository 프로젝트를 하며 spring data jpa를 사용하는데, 직접 메소드를 구현하고 싶었다.DB에 데이터를 입력하기 전에 처리하고 싶은 작업이 있었는데, 쿼리가 복잡할 것 같기 때문이었다.검색해 보니 이 경우 커스텀 레포지토리를 정의하여 사용하면 된다고 한다. 물론 JpaRepository 인터페이스를 통째로 구현하는 방법도 있지만..간단히 JpaRepository가 제공하는 기능을 사용하되, 커스텀 기능을 추가하는 방법을 조사했다. 1. 커스텀 레포지토리 인터페이스를 작성한다.public interface CustomEmpRepository {public List customMethod();} 2. 1에서 작성한 인터페이스를 구현하는 클래스를 작성한다.- 이 클래스의 이름은 default spring d..
Spring boot에서 JPA 테스트하기 @DataJpaTest를 이용해 쉽게 JPA 테스트 환경을 구축할 수 있다. @DataJpaTest는 다음 기능을 제공한다.in-memory db 생성(real db를 사용하고자 할 경우 @AutoConfigureTestDatabase(replace = Replace.NONE))@Entity 클래스 스캔(일반적인 다른 컴포넌트는 스캔하지 않음)@Transactional 어노테이션을 포함 (이 옵션을 끄려면 @Transactional(propagation = Propagation.NOT_SUPPORTED) )TestEntityManager 빈 생성 Spring Boot Test 에 상세한 내용이 있다.한글에다가 잘 정리되어 있어 spring test 관련 내용을 학습하기에 좋다.