학습 내용/Front-End17 [Next.js] Next.js 13 - Data Fetching, Server Components Data Fetching 13 이전까지 사용되었던 getServerSideProps와 getStaticProps는 이제 잊어라!!..는 아니고.. 13부터 도입된 방법이 앞으로 활발하게 사용되더라도, 레거시 코드에는 이 둘이 남아있을테니 아예 잊어버리는 건 안될 것 같다. (참고: [Next.js] Next.js의 프리 렌더링(pre-rendering) 옵션 3가지 / SSG, SSR, ISR) 이 둘은 이름도 뭔가 장황한 느낌이고, 개인적으로는 어떤 상황에 어떤 걸 써야할지 딱 떠오르지가 않았다. 13부터는 data fetching을 할 때 이 둘 대신 fetch API를 사용하면 된다! getServerSideProps와 getStaticProps와 비슷하게 구현하려면 fetch 메서드의 두 번째 인.. 2023. 1. 20. intermock을 사용하여 mock data 만들기 intermock 사용 방법이 아직 잘 나와있지 않아서 소스코드 보면서 츄라이츄라이 해본 결과입니다. 엉성하더라도 참고할 것이 아예 없는 것보다는 낫...낫지 않을까..? 싶어서 정리해보았습니다. ㅎㅎ intermock 사용 방법을 찾고 계신 분께 부디 제 코드가 조금이라도 도움이 되길 바라며.. 설치 필요 모듈 intermock : TS interface를 이용하여 mock data를 생성할 수 있게 도와주는 모듈 swagger-typescript : intermock을 위한 TS interface를 생성하고 이를 단일 파일에 모아두기 위해 사용 인터페이스를 생성해주는 라이브러리라면 어떤 것이든 무관하나, 인터페이스들을 단일 파일이 아니라 모델별로 생성해주는 경우에는 intermock 사용 전에 각각의.. 2022. 7. 10. [Next.js] Next.js의 프리 렌더링(pre-rendering) 옵션 3가지 / SSG, SSR, ISR Next.js의 프리 렌더링 옵션으로는 잘 알려진 SSG와 SSR 두 가지 외에도 ISR라고 불리는 한 가지 방식이 더 존재한다. 이 세 가지 프리 렌더링 방식의 특징과 차이점에 대해 알아보자. 참고로 하나의 애플리케이션에서 하나의 방식만 사용해야 하는 것은 아니며, 필요에 따라 어떤 페이지에선 SSG 방식을 사용하고 나머지 페이지에선 SSR 방식을 사용하는 것도 가능하다. 또한 이 방식들과 클라이언트 사이드 렌더링 방식을 혼합하여 사용하는 것도 가능하다. (즉 어떤 페이지의 특정 부분은 전적으로 클라이언트 사이드에서 렌더링 되도록 하는 방식) ❓Pre-rendering이란? Next.js에선 기본적으로 모든 페이지를 프리 렌더링한다. 즉 HTML이 클라이언트 사이드에서 자바스크립트를 통해 생성이 되는 .. 2022. 6. 1. Luhn algorithm(룬 알고리즘)으로 유효한 카드 번호인지 확인하기 룬 알고리즘이란? 참고: 위키백과 Luhn algorithm IBM 과학자인 Hans Peter Luhn이 만든 알고리즘으로, 그의 이름을 따서 룬 알고리즘이라 이름 지어졌다. mod(modulus) 10 알고리즘이라고도 한다. 신용카드 번호 등 다양한 식별 번호를 검증하는 데 사용되는 공식이다. *** 2022.07.20 업데이트 *** 삼성카드 법인카드의 카드 번호는 룬 알고리즘을 따르지 않고 있어 룬 알고리즘으로 유효성을 판별할 수 없습니다!! 프론트엔드에서 어떤 경우에 사용하는지? 결제 수단을 등록하거나 결제를 하기 위해 신용카드 정보를 입력하는 폼을 만들 때, 사용자가 입력한 카드 번호가 (1차적으로) 유효한 카드 번호인지 확인하고 싶을 때 사용할 수 있다. 유효한 카드 번호인지 확인할 수 있는.. 2022. 5. 10. [React] 리액트 면접 질문 (기초 개념) 질문 출처: https://intellipaat.com/blog/interview-question/react-interview-questions/ 1. DOM과 가상 DOM(Virtual DOM)의 차이 (답변 참고: https://velopert.com/3236) 가상 DOM을 이용하면 실제 DOM에 변화를 바로 적용하는 것보다 전체적인 프로세스를 효율적으로 수행할 수 있다. "효율적이다" = 전체적인 프로세스에 드는 비용이 비교적 적다. 속도 차원의 문제라기 보다는, 연산 횟수 차원의 문제라고 할 수 있다. 우선 각각의 DOM 조작은 레이아웃 변화, 트리 변화 및 렌더링을 일으킨다. 가상 DOM을 이용하지 않으면 변화가 있을 때마다 DOM 조작이 일어나고 이에 대한 연산이 수행되며 렌더링되기 때문에 .. 2022. 3. 8. Safari에만 적용되는 코드를 짜고 싶다면? Safari에만 적용되는 코드를 짜고 싶다면? 브라우저를 감지해서, 현재 브라우저가 Safari인지 아닌지를 판별해야 한다. 브라우저를 감지하고 그에 따른 처리를 하는 방법은 상황에 따라 크게 두 가지로 갈린다. (어느 경우든 주요한 목적은 호환성 때문일 것이다.) 1. Safari에서만 CSS 스타일링을 다르게 적용해야 하는 경우 CSS @규칙을 활용한다. /* Safari 10.1+ */ @media not all and (min-resolution:.001dpcm) { @supports (-webkit-appearance:none) { /* 이 안에 Safari(10.1 이상)에서만 적용할 스타일 작성 */ }} 위 코드 외에도, 이 페이지의 첫 번째 답변에 다양한 버전의 Safari에 따른 CSS.. 2021. 10. 6. 이전 1 2 3 다음