본문 바로가기
728x90
반응형

SPA147

[Next] Next13의 새로운 기능 알아보기 (3) - Font 안녕하세요. J4J입니다. 이번 포스팅은 Next13의 새로운 기능 알아보기 세 번째인 Font에 대해 적어보는 시간을 가져보려고 합니다. Google Font next를 이용하여 웹 페이지를 개발할 때 원하는 형태의 font를 적용시키기 위해 가장 많이 사용하는 방법으로 google font를 생각할 수 있습니다. next13 이전에 google font를 적용시키기 위해서는 Google Fonts에 접속하여 원하는 스타일의 폰트를 선택한 뒤 다음과 같이 google에서 하라는 대로 적용시켜 주면 됩니다. import Head from 'next/head'; const FontGoogle = () => { return ( Font Google Page ); }; export default FontGoo.. 2023. 6. 7.
[Next] Next13의 새로운 기능 알아보기 (2) - Data Fetching 안녕하세요. J4J입니다. 이번 포스팅은 Next13의 새로운 기능 알아보기 두 번째인 Data Fetching에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 next의 data fetching이 무엇인지에 대해 궁금하신 분들은 다음 글들을 참고하시면 됩니다. [Next] Data Fetching에 대해 알아보기 (1) - CSR / SSR [Next] Data Fetching에 대해 알아보기 (2) - SSG / Dynamic Routing [Next] Data Fetching에 대해 알아보기 (3) - ISR SSR (Server Side Rendering) next13으로 넘어오면서 SSR을 포함한 여러 fetching 방법이 간소해지며 비슷한 유형으로 처리될 수 있도록 변경되었습니다... 2023. 6. 4.
[Next] Next13의 새로운 기능 알아보기 (1) - Routing과 RSC 안녕하세요. J4J입니다. 이번 포스팅은 Next13의 새로운 기능 알아보기 첫 번째인 Routing과 RSC에 대해 적어보는 시간을 가져보려고 합니다. Routing 기본 방법 next13 이전에는 routing 처리를 위해 pages폴더의 하위 경로에 원하는 경로를 구성하는 방법을 사용했습니다. next13에서도 해당 방식을 지속적으로 지원을 하고 있기에 동일하게 사용해도 문제없지만 pages대신 app을 이용한 새로운 routing 처리 방식이 등장했습니다. pages를 이용하여 routing 경로를 구성했던 것과 유사하게 app 하위 경로에 입력한 폴더 명을 기준으로 routing 경로가 구성되기 때문에 pages를 이용하여 환경을 구성했던 것과 비슷한 개발 경험을 제공해주고 있습니다. Page와.. 2023. 5. 29.
[React] Tailwind 사용하기 (3) - 커스텀(Custom) 하기 안녕하세요. J4J입니다. 이번 포스팅은 tailwind 사용하기 마지막인 커스텀하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [React] Tailwind 사용하기 (1) - 개념 및 설정 [React] Tailwind 사용하기 (2) - StyledComponents와 CSS 적용 비교하기 Theme 커스텀 theme 커스텀은 기본적으로 tailwind에서 제공해 주는 theme을 사용자의 스타일에 맞게 재 정의하는 것으로 tailwind.config.js에서 적용할 수 있습니다. 색상, 글자 크기, 너비 등 tailwind를 이용하여 적용하고 싶은 css 들을 원하는 데로 추가해 줄 수 있으며 다음과 같이 설정하여 적용해 볼 수 있습니다. // tailwind.config.js /*.. 2023. 5. 24.
[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.
[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.
[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.
[Next] Data Fetching에 대해 알아보기 (4) - useQuery 안녕하세요. J4J입니다. 이번 포스팅은 Data Fetching의 마지막인 useQuery에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [Next] Data Fetching에 대해 알아보기 (1) - CSR / SSR [Next] Data Fetching에 대해 알아보기 (2) - SSG / Dynamic Routing [Next] Data Fetching에 대해 알아보기 (3) - ISR 들어가기에 앞서 Next 공식문서에 따르면 Next의 Data Fetching의 종류는 다음과 같이 있습니다. SSR SSG CSR Dynamic Routes ISR 공식문서에서 소개하고 있는 위의 Data Fetching들은 이전 글들에서 모두 다룬 상태입니다. 그리고 이번 글은 useQuery와 관련되어서.. 2023. 3. 5.
[Next] Data Fetching에 대해 알아보기 (3) - ISR 안녕하세요. J4J입니다. 이번 포스팅은 Data Fetching의 세 번째인 ISR에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [Next] Data Fetching에 대해 알아보기 (1) - CSR / SSR [Next] Data Fetching에 대해 알아보기 (2) - SSG / Dynamic Routing 들어가기에 앞서 Next 공식문서에 따르면 Next의 Data Fetching의 종류에는 다음과 같이 있습니다. SSR SSG CSR Dynamic Routing ISR 그리고 이번 글에서는 ISR에 대해 알아보도록 하겠습니다. ISR - 기본 ISR은 Incremental Static Regeneration의 약자로 Dynamic Routing의 이점을 가져가며 단점을 보완하기 위해 .. 2023. 2. 20.
[Next] Data Fetching에 대해 알아보기 (2) - SSG / Dynamic Routing 안녕하세요. J4J입니다. 이번 포스팅은 Data Fetching의 두 번째인 SSG와 Dynamic Routing에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [Next] Data Fetching에 대해 알아보기 (1) - CSR / SSR 들어가기에 앞서 Next 공식문서에 따르면 Next의 Data Fetching의 종류에는 다음과 같이 있습니다. SSR SSG CSR Dynamic Routing ISR 그리고 이번 글에서는 SSG와 Dynamic Routing에 대해 알아보도록 하겠습니다. SSG SSG는 Static-site generation의 약자로 특정 페이지에서 fetching이 이루어져야 할 데이터들을 build 단계 때 prerendering 하여 props로 사용함으로 써 페.. 2023. 2. 17.
[Next] Data Fetching에 대해 알아보기 (1) - CSR / SSR 안녕하세요. J4J입니다. 이번 포스팅은 Data Fetching의 첫 번째인 CSR과 SSR에 대해 적어보는 시간을 가져보려고 합니다. Data Fetching에 대해 알아야 하는 이유 최근 Next에 대해 하나, 둘 배워가면서 Next를 제대로 활용하지 못하고 있었다는 것을 깨닫게 되었습니다. 그중 하나가 Data Fetching에 관련된 것입니다. React대신 Next를 사용하는 개발자분들의 95% 이상은 SSR 때문일 것이라고 생각합니다. 그리고 저 또한 어떤 사람이 "React대신 Next를 왜 사용하냐?"라고 묻는다면 당연히 "SSR 때문에 사용합니다."라고 말할 것입니다. 그런데 만약, 다음 질문으로 "API를 통해 서버로부터 가져온 데이터들은 어떻게 SSR에 활용될 수 있냐?" 라고 묻는.. 2023. 2. 12.
[Next] next-sitemap 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 next-sitemap 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. sitemap이란? sitemap은 구글, 네이버와 같은 검색 사이트들의 크롤링 봇들에게 우리 서비스에서 사용할 수 있는 사이트 주소를 알려주기 위해 활용합니다. 그러면 검색 사이트들의 크롤링 봇들에게 사이트 주소를 알려주는 이유에 대해 궁금증이 생길 수 있습니다. 이 질문에 대한 이유는 우리가 운영하는 서비스가 사용자들의 검색어에 많이 노출되어 더 많은 사용자가 유입될 수 있도록 도와주기 때문입니다. 하지만 상황에 따라서 우리 서비스의 특정 사이트 주소는 외부에 노출되면 안 되는 것이 존재할 수 있습니다. 즉, 검색 사이트의 크롤링 봇들이 특정 사이트에 대한 정보를 크롤링하는것을 막.. 2023. 2. 8.
728x90
반응형

티스토리툴바