CSS
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
영화 상세페이지 구현에서 className으로 modal_poster-img를 주니까 다른 곳에 있던 css가 적용되는데 위에 import하지 않아도 가능한건가요??
- react
- redux
- tdd
- typescript
- next.js
- 소프트웨어-테스트
173만명의 커뮤니티!! 함께 토론해봐요.
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
영화 상세페이지 구현에서 className으로 modal_poster-img를 주니까 다른 곳에 있던 css가 적용되는데 위에 import하지 않아도 가능한건가요??
미해결
실전! 스프링부트 상품-주문 API 개발로 알아보는 TDD
강의 잘 듣고 있습니다! 강의 들으면서 문득 궁금한 점이 생겼는데요. POJO로 개발했는데, 도메인 클래스 내의 비즈니스 로직을 로깅을 해야하는 경우가 실무에서 많을까요? 만약, 그런 경우가 있다면, 어떻게 해야 할지 궁금합니다. 공통된 패턴이 있다면, AOP를 사용해볼 수 있을 것 같은데, 그렇지 않은 경우, 어쩔 수 없이 도메인 모델이 로깅 프레임워크에 의존하지 않나 라는 생각이 들어서요. 로깅하고 싶은게 클래스의 메서드의 매개변수와 리턴값이 아닌 내부 로직 함수일 경우가 특히 궁금합니다. 혹시, 이런 경우는 실무에서 잘 발생하지 않아 알 필요가 없을까요?
미해결
쉬운 모바일 테스트 자동화 시작하기 : Appium Studio
iOS 단말 연결하는 방법도 Android 와 동일한 방법으로 설정해보면 되는 걸까요? 만약 iOS 연결 방식이 다르다면, 어떻게 설정을 하면 될까요??
미해결
2시간으로 끝내는 프론트엔드 테스트 기본기
위 화면처럼 connect ECONNREFUSED::1:54382등 locahost에 접근할 수 없다고 나오면 cypress.config.ts에서 baseurl 설정해야합니다. ( https://parkparkpark.tistory.com/186) import { defineConfig } from "cypress"; export default defineConfig({ e2e: { baseUrl: "http://localhost:3000", setupNodeEvents(on, config) { // implement node event listeners here }, }, });
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
저장할 때 밑에 코드를 쓰면 에러가 뜹니다ㅠㅠ어떻게 해결해야하나요? const initalTodoData = localStorage.getItem("todoData") ? JSON.parse(localStorage.getItem("todoData")) : []; function App() { const [todoData, setTodoData] = useState([initalTodoData]);
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
List 컴포넌트 생성하기에서 props로 key={ data.id }를 넘겨주는데 저기서는 사용하지 않는데 넘겨주어야 하나요? 빼도 상관 없나요??
미해결
실전! 스프링부트 상품-주문 API 개발로 알아보는 TDD
generate -> add Dependency 이 메뉴가 안보이던데, 어떻게 보이게할까요?
미해결
Practical Testing: 실용적인 테스트 가이드
안녕하세요 강사님, 궁금한게있습니다. 인스타그램, 페이스북을 사용할 때 제가 쓴 게시글에 다른 사람이 댓글을 달면 알림이 생성되는데, 제가 작성한 로직에서는 CommentService에서 댓글을 작성하고 alarmService를 호출하여 알림까지 생성하는 로직입니다. 이렇게 로직을 짰을 때 제가 생각한 문제점에 대한 해답을 찾고 싶습니다. 1. CommentService에서 다른 Service를 의존하게 되는 것 2. 댓글 작성이라는 테스트를 짤 때 댓글 작성에 초첨을 맞출 수 없고 알림까지 테스트를 작성해야 되기 떄문에 핵심 기능 외에 다른 부가적인 기능 때문에 테스트의 집중도가 떨어집니다. 3. 한 트랙잭션에 묶여서 알림을 생성하는데 문제가 발생하면 댓글도 생성되지 않습니다. 이러한 경우 어떤 학습을 통해 개선할 수 있는지 가르쳐주실 수 있나요?
해결됨
부트캠프에서 알려주지 않는 것들 (리액트) 1편
코드 샌드박스들어가면 이런식으로 뜨는데 어떻게 해결하나요?
미해결
Practical Testing: 실용적인 테스트 가이드
@SpringBootTest class OrderRepositoryTest { @Autowired private OrderRepository orderRepository; @Autowired private ProductRepository productRepository; @DisplayName("해당 날짜의 모든 결제 내역을 조회한다.") @Test void findAllByDate() { // given LocalDateTime time1 = LocalDateTime.of(2024, 5, 11, 10, 0); LocalDateTime time2 = LocalDateTime.of(2024, 5, 10, 10, 0); Product product1 = createProduct("001"); Product product2 = createProduct("002"); Product product3 = createProduct("003"); Product product4 = createProduct("004"); productRepository.saveAll(List.of(product1, product2, product3, product4)); Order order1 = Order.builder() .products(List.of(product1, product2)) .now(time1) .build(); Order order2 = Order.builder() .products(List.of(product3, product4)) .now(time2) .build(); orderRepository.saveAll(List.of(order1, order2)); // when LocalDate findDate = LocalDate.of(2024, 5, 11); List<Order> findOrders = orderRepository.findAllByDate( findDate.atStartOfDay(), findDate.plusDays(1).atStartOfDay(), OrderStatus.INIT ); // then Assertions.assertThat(findOrders).hasSize(1); } private static Product createProduct(String number){ return Product.builder() .productNumber(number) .productType(ProductType.HAND_MADE) .sellingType(ProductSellingType.SELLING) .name("test") .price(1000) .build(); } } OrderRepositoryTest에서 매서드 테스트를 할 때, Order와 Product는 1대다 다대1로 연관관계 매핑되어 있는 상태인데, 그러면 위와 같이 작성할 경우, productRepository와 관련된 코드가 들어가니, 단위테스트가 깨지는거 아닌가요? 이럴때 어떻게 해야하나요?
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
안녕하세요. 강의 수강 중에 추가적으로 구현하고 싶은 기능이 있는데 어떻게 해야할지 모르겠어서.. 질문 남깁니다. 검색창에 검색어를 입력하면 SearchPage에 관련 영화 포스터들이 나오고 그 중에 하나를 클릭해서 영화 상세 페이지(DetailPage)로 이동했을 때 검색창을 초기화하고 싶은데 어떻게 해야 하는지 궁금합니다.
해결됨
실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
안녕하세요. 2.1강에서 storybook, vitest 명령어를 사용했을 때, 에러가 나타나서 질문 드립니다 Setting branch: unit-test-example vitest 플러그인: v0.3.0 (현재 이하로는 변경이 안되는 것 같습니다) node: 19.9.0 eslint.json - `"prettier:prettier": "off"` 추가 prettierrc - `"endOfLine": "auto"` 추가 storybook 사용 시(npm run storybook) Web의 경우 새로고침을 하면 정상 페이지로 동작하지만 에러 로그는 그대로 입니다 vitest import { screen } from '@testing-library/react'; import React from 'react'; import TextField from '@/components/TextField'; import render from '@/utils/test/render'; it('className Prop으로 설정한 css class가 적용된다.', async () => { // Arrange - 테스트를 위한 환경 만들기 // -> className을 지닌 컴포넌트 렌더링 await render(<TextField className="my-class" />); // Act - 테스트할 동작 발생 // -> 렌더링에 대한 검증이기 때문에 이 단계는 생략 // -> 클릭이나 메서드 호출, prop 변경 등등에 대한 작업이 여기에 해당 합니다. // Assert - 올바른 동작이 실행되었는지 검증 // -> 렌덩링 이후 DOM에 해당 class가 존재하는지 검증 // TextField는 placeholder 요소가 있습니다. // vitest의 expect 함수를 사용하여 기대 결과를 검증 expect( screen .getByPlaceholderText('텍스트를 입력해 주세요.') .toHaveClass('my-class'), ); });
미해결
Practical Testing: 실용적인 테스트 가이드
강사님은 classicist를 지향한다고 했는데, classicist의 단위 테스트는 데이터베이스와 같은 공유 의존성을 테스트 대역(mock)으로 대체해야 한다는 것으로 알고 있는데 유연한 사고(?)로 classist를 지향하지만 통합 테스트로 단위를 확인하는 것을 좋아한다 정도로 정리하면 좋을까요? 아니면 H2를 사용했으니 테스트 대역을 운영환경보단 빠른 환경으로 교체했으니 여전히 단위 테스트라고 생각을 하시는 걸까요? service 레이어를 통합 테스트로 안 짜는 팀에서 classicist를 지향한다면 DB에 대한 의존성을 어떻게 대체하는지 간단한 예제라도 보여주실 수 있을까요? ㅠ
미해결
Practical Testing: 실용적인 테스트 가이드
개인적으로 Mock은 상태를 (내가 작성한 값을) 반환하는 것 , Stub은 상태가 (내가 작성한 구현대로) 반환되는 것 이라고 정의를 내리고 있습니다. 이와 같은 표현으로 차이를 이해하고 있어도 괜찮을까요? 아니면 좀 더 명확한 표현이 있을까요? Mock 객체에 우리가 원하는 행위를 정의(Stubbing)하면, 그 객체는 이제 Mock 객체라고 해야하나요 아니면 Stub 객체라고 해야하나요? 아래 코드를 보고 Mock 객체인 mailSendClient의 send 메서드에 대한 Stubbing이 이루어졌다. 라고 하면 맞는 표현인가요? @ExtendWith(MockitoExtension.class) class MailServiceTest { @Mock private MailSendClient mailSendClient; @Mock private MailSendHistoryRepository mailSendHistoryRepository; @InjectMocks private MailService mailService; @DisplayName("메일 전송 테스트") @Test void sendMail() { // given when(mailSendClient.send(anyString(), anyString(), anyString(), anyString())) .thenReturn(true); // when boolean result = mailService.sendMail("", "", "", ""); // then assertThat(result).isTrue(); // verify(mailSendHistoryRepository, times(1)) // .save(any(MailSendHistory.class)); } } mailSendClient는 Mocking하더라도 상태검증을 할 수도 있고, Stubbing하더라도 행위검증을 할 수도 있지 않나요? 이 둘의 차이는 Mockist와 Classicist의 차이이지, Mock과 Stub의 차이라고 할 수 없지 않을까요?
해결됨
실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
실무에 적용하려고 하니 msw 에서 많이 막히네요 ㅠ 그래서 올려주신 깃헙 프로젝트를 샅샅히 훑어보고 있는데 mockServiceWorker.js 이 파일과 package.json에 "msw": { "workerDirectory": "public" } 요런 부분이 있더라고요. 요것들의 역할이 뭔지 알수 있을까요? msw 사이트에 가서 Getting started 를 가봐도 안나와 있는것 같아서 궁금합니다!
미해결
Practical Testing: 실용적인 테스트 가이드
안녕하세요. 프로젝트 내에서 통합 테스트를 위해서 @SpringBootTest를 사용한 여러 테스트 코드를 작성하였습니다. 예를 들어 아래와 같이 별개의 2개 테스트 코드에는 각각 school table의 값을 생성 및 조회하는 코드가 들어있습니다. @SpringBootTest @Transactional class aTest { // JPA 사용해서 school Table의 data 생성/조회 } --------------------- @SpringBootTest @Transactional class bTest { // JPA 사용해서 school Table의 data 생성/조회 } 위와 같이 테스트 코드를 작성하고 aTest.java 에서 school table에 3개의 데이터를 넣은 경우, bTest.java 에서 school 테이블의 값을 읽었을 때, aTest.java에서 넣은 값은 지워지는 것인지요? 아니면 그대로 남아 bTest.java 에서 조회가 가능한 것인지요? @Transactional이 들어가 있는 경우 데이터가 rollback 되는 것으로 알고 있어서, bTest.java 에서 읽었을 때는 빈 테이블이 있을 것으로 예상했는데, 테스트를 해보면 School table의 id 값(자동 증가하는 값)이 bTest.java에서 처음 읽었을 때 4로 보이는 현상이 있어서 질문을 드립니다.
미해결
스프링부트 JUnit 테스트 - 시큐리티를 활용한 Bank 애플리케이션
안녕하세요 강사님 강의 듣고 많이 배우고 있습니다. 다름이 아니라 테스트 방식에 질문이 있어서 문의 드립니다. 현재 테스트는 서비스 코드를 먼저 짜고 테스트를 진행하는데 테스트 방식에는 테스트 코드를 먼저 짜고 서비스 코드를 만들어가는 형식도 있더라구요.. 둘 차이점이 혹시 있을까요..
해결됨
2시간으로 끝내는 프론트엔드 테스트 기본기
cypress를 적용해보고 러닝 커브가 훨씬 낮은거 같고 좋았습니다 jest는 많이 목킹을 하고 여러가지 더 설정이 많아서 힘들긴 했는데 여기서 타입을 제외하고 더 같이 쓰지 말아야할 이유가 있나요?
해결됨
2시간으로 끝내는 프론트엔드 테스트 기본기
테스트 모음 폴더명을 " test " 아닌 " __test __"로 정의하신이유가있을까요??
미해결
따라하며 배우는 리액트 테스트 [2023.11 업데이트]
App.js파일을 refresh 하면 이렇게 error가 뜨네요 ㅜㅜ 해결책을 아무리 찾아봐도 나오질 않습니다 . .