728x90 반응형 전체 글407 [React] Tailwind 사용하기 (2) - StyledComponents와 CSS 적용 비교하기 안녕하세요. J4J입니다. 이번 포스팅은 tailwind 사용하기 두 번째인 styledComponents와 CSS 적용 비교하기에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [React] Tailwind 사용하기 (1) - 개념 및 설정 들어가기에 앞서 이전 글에서도 간단하게 확인해 볼 수 있는 것처럼 tailwind에 css를 적용할 땐 tailwind에서 기본적으로 정의해 둔 class 명을 이용해야 합니다. 색상, 크기, 여백 등의 모든 css들이 기본적인 css 구조에서 스타일을 적용하기 위해 사용하던 방식과 모두 상이하기에 처음 tailwind를 사용하시는 분들이라면 tailwind 공식 문서를 당분간 필수적으로 참고하시는 것을 추천드립니다. 그리고 이번 글에서는 일반적으로 자주 사용되.. 2023. 5. 22. [React] Tailwind 사용하기 (1) - 개념 및 설정 안녕하세요. J4J입니다. 이번 포스팅은 tailwind 사용하기 중 첫 번째인 개념 및 설정에 대해 적어보는 시간을 가져보려고 합니다. Tailwind란? tailwind는 유틸리티 우선(Utility-First) css 프레임워크로 불립니다. 여기서 말하는 유틸리티 클래스는 버튼, 모달 등과 같이 주변을 구성하기 위한 css가 아닌 빨간색 글자 색상, xl 사이즈의 글자 크기 등과 같이 하나의 css에 정의된 속성과 값을 가지는 걸 의미합니다. 즉, 유틸리티 우선이라고 하는 것은 bootstrap처럼 기존에 정의된 값을 가져와 사용하는 것이 아닌 사용자가 원하는 데로 각각의 속성값을 적용하는 방식이라고 말할 수 있습니다. // css .container { border: 2px solid black;.. 2023. 5. 17. [React] Cypress Custom Command 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 Cypress Custom Command 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Custom Command란? Custom Command는 테스트 코드를 작성할 때 Cypress에서 제공해 주는 명령어가 아닌 사용자가 원하는 의도대로 동작될 수 있는 명령어를 자체적으로 구현한 것을 의미합니다. Custom Command를 사용하는 대표적인 이유는 재사용성을 높이기 위함이라고 생각합니다. 테스트 코드를 작성하다 보면 중복되는 코드들이 수 없이 발생될 수 있습니다. 그럴 때마다 각 파일들에 중복 코드들을 매번 작성해주는 것은 비효율적이며 유지보수하기 어렵게 만들기 때문에 Custom Command를 생성한 뒤 단순 호출하는 방식을 선택하여 코드 개선.. 2023. 5. 14. [SpringBoot] AWS Lambda와 API Gateway로 Serverless 구성하기 (4) - GitLab으로 Lambda 자동배포하기 안녕하세요. J4J입니다. 이번 포스팅은 AWS Lambda와 API Gateway로 Serverless 구성하기 마지막인 GitLab으로 Lambda 자동배포하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [SpringBoot] AWS Lambda와 API Gateway로 Serverless 구성하기 (1) - Spring 세팅 및 로컬 테스트 [SpringBoot] AWS Lambda와 API Gateway로 Serverless 구성하기 (2) - Lambda 생성해서 배포하기 [SpringBoot] AWS Lambda와 API Gateway로 Serverless 구성하기 (3) - API Gateway에 Lambda 연결하기 IAM 설정 [ 1. IAM 접속 ] [ 2. 사용자 추가 .. 2023. 5. 10. [SpringBoot] AWS Lambda와 API Gateway로 Serverless 구성하기 (3) - API Gateway에 Lambda 연결하기 안녕하세요. J4J입니다. 이번 포스팅은 AWS Lambda와 API Gateway로 Serverless 구성하기 세 번째인 API Gateway에 Lambda 연결하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [SpringBoot] AWS Lambda와 API Gateway로 Serverless 구성하기 (1) - Spring 세팅 및 로컬 테스트 [SpringBoot] AWS Lambda와 API Gateway로 Serverless 구성하기 (2) - Lambda 생성해서 배포하기 API Gateway 세팅 [ 1. API Gateway 접속 ] [ 2. REST API 구축 ] [ 3. API Gateway 상세 설정 ] 상세 설정은 다음과 같이 해주시면 됩니다. 그리고 여기서 설정.. 2023. 5. 5. [SpringBoot] AWS Lambda와 API Gateway로 Serverless 구성하기 (2) - Lambda 생성해서 배포하기 안녕하세요. J4J입니다. 이번 포스팅은 AWS Lambda와 API Gateway로 Serverless 구성하기 두 번째인 Lambda 생성해서 배포하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [SpringBoot] AWS Lambda와 API Gateway로 Serverless 구성하기 (1) - Spring 세팅 및 로컬 테스트 Spring 세팅 이전 글을 확인해보시면 로컬에서 Lambda에 배포할 Spring 코드를 작성하여 테스트한 것을 확인해 볼 수 있습니다. 해당 설정을 기반으로 Lambda에 배포하기 위한 추가 설정을 다음과 같이 진행해보겠습니다. [ 1. 의존성 추가 ] // Lambda Deploy import com.github.jengelman.gradle.plug.. 2023. 4. 30. [SpringBoot] AWS Lambda와 API Gateway로 Serverless 구성하기 (1) - Spring 세팅 및 로컬 테스트 안녕하세요. J4J입니다. 이번 포스팅은 AWS Lambda와 API Gateway로 Serverless 구성하기의 첫 번째인 Spring 세팅 및 로컬 테스트에 대해 적어보는 시간을 가져보려고 합니다. Serverless 란? Serverless는 개발자가 서버를 직접 관리하지 않아도 애플리케이션을 배포하여 사용자에게 서비스를 제공해 주는 개발 모델을 의미합니다. Serverless의 특징들은 다음과 같이 있습니다. 개발자는 배포를 위한 부분만 신경쓰도록 도와줌 배포를 제외한 유지 관리 및 스케일링 등을 자체적으로 관리해 줌 사용자가 없으면 활성화되어 있지 않음 사용자가 생기면 활성화되었다가 모든 요청이 처리되면 대기 상태로 전환 서버가 동작되는 시간이 아니라 활성화되어 있는 시간에 비례하여 비용을 계.. 2023. 4. 28. [AWS] ALB에 CloudFront 적용하기 안녕하세요. J4J입니다. 이번 포스팅은 ALB에 CloudFront 적용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 다음 글들을 통해 ALB 설정 방법과 Route53에 도메인을 등록하는 방법을 참고하시면 글을 읽는데 이해를 도울 수 있습니다. [AWS] ALB(Application Load Balancer) 사용하기 (Feat, SSL 설정) [AWS] Cafe24 도메인 AWS EC2에 연결하기 (Feat. Route53) CloudFront란? CloudFront는 AWS에서 제공해주는 CDN (Content Delivery Network) 서비스로 이미지 파일, 정적 및 동적 콘텐츠를 사용자들에게 더 빨리 제공하도록 도와줍니다. CDN이 사용자들에게 콘텐츠를 더 빨리 제.. 2023. 4. 25. [React] Cypress API 요청 기다리기 안녕하세요. J4J입니다. 이번 포스팅은 cypress에서 api 요청 기다리는 방법에 대해 적어보는 시간을 가져보려고 합니다. API 요청을 기다려야 하는 경우 cypress를 사용하면서 api 요청을 기다려야 하는 경우는 정말 단순하게 api 요청 처리가 오래 걸리는 작업들이라고 얘기할 수 있습니다. 대부분의 api를 처리할 때 시간이 오래걸리지 않겠지만 시간이 오래 걸리는 일부 api들에 대해서 cypress 테스트를 진행하려고 하면 api가 응답되는 시간을 모두 기다리지 않고 이후 처리를 진행하기 때문에 생각하던 것과 다른 결과를 얻게 됩니다. 이와 같은 상황을 테스트를 위해 다음과 같은 api를 이용하여 데이터를 호출한 뒤 화면에 그려주는 코드를 작성해 볼 수 있습니다. import axios .. 2023. 4. 23. [React] Cypress로 내부 DOM 테스트하기 안녕하세요. J4J입니다. 이번 포스팅은 cypress로 내부 dom 테스트하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Cypress로 내부 DOM 테스트할 때 발생되는 문제 예를 들어 다음과 같은 코드를 테스트한다고 가정해 보겠습니다. import React from 'react'; const App = () => { return ( 첫번째 타이틀 첫번째 아이템1 첫번째 아이템2 두번째 타이틀 두번째 아이템1 두번째 아이템2 ); }; export default App; 테스트하고자 하는 것은 두 번째 wrapper의 내부에 있는 [data-cy=item]의 첫 번째 요소를 확인했을 때 요소가 가지고 있는 텍스트 값이 "두번째 아이템1" 인지 검증하는 것입니다. 해당 요소를 검증하는 것은 cy.. 2023. 4. 16. [React] Cypress로 E2E테스트하기 안녕하세요. J4J입니다. 이번 포스팅은 cypress를 이용하여 e2e 테스트하는 방법에 대해 적어보는 시간을 가져보려고 합니다. E2E 테스트란? E2E는 End to End의 약자로 사용자의 관점에서 테스트를 진행하는 것을 의미합니다. 말 그대로 사용자가 서비스에 접속했을 때 하는 행동들과 그 행동들에 의해 동작되는 여러 액션들을 테스트할 수 있기 때문에 사용자가 사용하는 관점에서 발생될 수 있는 문제들을 파악하는데 도움을 줍니다. E2E 테스트를 포함하여 React에서 진행되는 테스트들은 다음과 같이 있습니다. 단위 테스트 통합 테스트 E2E 테스트 E2E 테스트는 브라우저를 통해 실제 사용자가 서비스를 사용하는 부분을 테스트하기 때문에 위의 테스트들 중 가장 큰 리소스를 필요로 합니다. 즉, 테.. 2023. 4. 12. [SpringBoot] MockMVC를 이용하여 API 테스트하기 안녕하세요. J4J입니다. 이번 포스팅은 mock mvc를 이용하여 api 테스트하는 방법에 대해 적어보는 시간을 가져보려고 합니다. MockMVC란? mock mvc는 스프링을 이용하여 api 테스트를 할 수 있게 도와주는 것 중 하나로 다음과 같은 특징들을 가집니다. 서버를 구동시키지 않아도 테스트 가능 api 테스트를 하는 것이기 때문에 controller에 구성된 코드들을 테스트 client가 api를 요청하는 것처럼 api 경로를 입력하여 테스트하는 방식 스프링 api를 테스트 하는 방법으로 MockMVC를 제외하고도 WebTestClient, TestRestTemplate 등이 있습니다. 모두 api를 테스트한다는 공통점을 가지지만 MockMVC는 가상 서버를 동작시키고 WebTestClien.. 2023. 4. 9. [Next] Naver 로그인 Spring을 활용하여 구현하기 안녕하세요. J4J입니다. 이번 포스팅은 naver 로그인 spring을 활용하여 구현하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 동일한 방식의 다른 서비스 로그인을 활용하는 방법에 대해 궁금하신 분들은 다음을 참고해 주시면 됩니다. [Next] Kakao 로그인 Spring을 활용하여 구현하기 [Next] Apple 로그인 Spring을 활용하여 구현하기 Next만을 이용하여 naver 로그인을 구현하는 방법에 대해 궁금하신 분들은 다음을 참고해 주시면 됩니다. [Next] 네이버 로그인 구현하기 애플리케이션 등록 naver를 이용하여 로그인을 구현하기 위해서는 먼저 사용하려는 서비스 애플리케이션 정보를 등록해줘야 합니다. 다음 절차들을 통해 애플리케이션을 등록해보겠습니다. [.. 2023. 4. 2. [Next] Kakao 로그인 Spring을 활용하여 구현하기 안녕하세요. J4J입니다. 이번 포스팅은 kakao 로그인 spring을 활용하여 구현하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 동일한 방식의 다른 서비스 로그인을 활용하는 방법에 대해 궁금하신 분들은 다음을 참고해 주시면 됩니다. [Next] Naver 로그인 Spring을 활용하여 구현하기 [Next] Apple 로그인 Spring을 활용하여 구현하기 Next만을 이용하여 kakao 로그인을 구현하는 방법에 대해 궁금하신 분들은 다음을 참고해주시면 됩니다. [Next] 카카오 로그인 구현하기 애플리케이션 등록 kakao를 이용하여 로그인을 구현하기 위해서는 먼저 사용하려는 서비스 애플리케이션 정보를 등록해줘야 합니다. 다음 절차들을 통해 설정해보도록 하겠습니다. [ 1. k.. 2023. 3. 26. [Next] Apple 로그인 Spring을 활용하여 구현하기 안녕하세요. J4J입니다. 이번 포스팅은 apple 로그인 spring 활용하여 구현하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 동일한 방식의 다른 서비스 로그인을 활용하는 방법에 대해 궁금하신 분들은 다음을 참고해 주시면 됩니다. [Next] Kakao 로그인 Spring을 활용하여 구현하기 [Next] Naver 로그인 Spring을 활용하여 구현하기 Apple Developer 등록 [ 1. App Identifiers 추가하기 ] Apple 로그인을 구현하기 위해서는 먼저 서비스로 사용될 App을 등록해줘야 합니다. Apple Developer Identifiers에 접속한 뒤 + 버튼을 클릭해 줍니다. [ 2. Identifiers 유형 선택 ] 어떤 유형을 등록할지 다.. 2023. 3. 20. [SpringBoot] WebClient를 이용하여 외부 API 호출하기 안녕하세요. J4J입니다. 이번 포스팅은 webClient를 이용하여 외부 api 호출하는 방법에 대해 적어보는 시간을 가져보려고 합니다. WebClient란? webClient는 spring 5에서 부터 등장한 HTTP 클라이언트 라이브러리입니다. 여기서 말하는 HTTP 클라이언트라고 하는 것은 HTTP 프로토콜을 이용하여 서버와 통신하는 것을 의미하며 다른 말로는 서버에 API 요청을 보내는 주체라고도 말할 수 있습니다. webClient가 등장하기 이전까지는 spring에서 자주 사용되던 HTTP 클라이언트로 restTemplate이 존재했었습니다. 그래서 spring에서 다른 서버와 통신을 하기 위해서는 restTemplate를 사용하고는 했는데 webClient가 등장한 이후로는 webClien.. 2023. 3. 15. [CSS] Carousel 정리하기 (2) - Overlap 안녕하세요. J4J입니다. 이번 포스팅은 Carousel 정리하기 마지막인 Overlap에 대해 적어보는 시간을 가져보려고 합니다. Overlap Carousel 원리 overlap carousel의 원리는 일반적인 carousel의 원리에서 조금 더 생각해봐야 할 부분이 있습니다. 기본적인 부분은 일반 carousel과 동일하지만 주목해야 할 차이점은 carousel에 보일 아이템들의 위치가 항상 사용자에게 보이는 화면에 위치한다는 것입니다. 그림으로 예를들면 다음과 같습니다. 위의 그림을 보면 사용자가 처음 화면에 접속했을 때나 오른쪽으로 리스트를 넘겼을 때나 동일하게 아이템들의 위치는 항상 사용자에게 보이는 화면에 위치하고 있습니다. 하지만 그와 달리 아이템을 덮고 있는 컨테이너들은 좌우 이동되는 .. 2023. 3. 12. [CSS] Carousel 정리하기 (1) - Drag 안녕하세요. J4J입니다. 이번 포스팅은 Carousel 정리하기 첫 번째인 Drag에 대해 적어보는 시간을 가져보려고 합니다. Carousel 원리 제가 생각하는 Carousel의 원리를 그림으로 표현하면 다음과 같습니다. 그림에 대해 설명을 해보면 기본적으로 carousel에는 보이고 싶은 아이템들을 일렬로 나열해 둡니다. 사용자가 페이지에 접근했을 때 carousel에 있는 여러 아이템들 중 하나만 보이도록 하고 나머지 아이템들은 화면에 보이지 않도록 해줍니다. 그리고 아이템을 선택하여 좌우로 드래그를 하게 되면 아이템을 담고 있는 목록의 X좌표를 움직이게 하여 옆에 있는 아이템들을 확인할 수 있는 애니메이션을 제공해 줄 수 있습니다. carousel을 구현하는 방법으로는 정말 다양하게 있습니다. .. 2023. 3. 8. 이전 1 ··· 3 4 5 6 7 8 9 ··· 23 다음 728x90 반응형
