Luhn algorithm(룬 알고리즘)으로 유효한 카드 번호인지 확인하기
2022. 5. 10. 23:57
dev-log/Front-End
룬 알고리즘이란? 참고: 위키백과 Luhn algorithm IBM 과학자인 Hans Peter Luhn이 만든 알고리즘으로, 그의 이름을 따서 룬 알고리즘이라 이름 지어졌다. mod(modulus) 10 알고리즘이라고도 한다. 신용카드 번호 등 다양한 식별 번호를 검증하는 데 사용되는 공식이다. *** 2022.07.20 업데이트 *** 삼성카드 법인카드의 카드 번호는 룬 알고리즘을 따르지 않고 있어 룬 알고리즘으로 유효성을 판별할 수 없습니다!! 프론트엔드에서 어떤 경우에 사용하는지? 결제 수단을 등록하거나 결제를 하기 위해 신용카드 정보를 입력하는 폼을 만들 때, 사용자가 입력한 카드 번호가 (1차적으로) 유효한 카드 번호인지 확인하고 싶을 때 사용할 수 있다. 유효한 카드 번호인지 확인할 수 있는..
[React] 리액트 면접 질문 (기초 개념)
2022. 3. 8. 21:29
dev-log/Front-End
질문 출처: https://intellipaat.com/blog/interview-question/react-interview-questions/ 1. DOM과 가상 DOM(Virtual DOM)의 차이 (답변 참고: https://velopert.com/3236) 가상 DOM을 이용하면 실제 DOM에 변화를 바로 적용하는 것보다 전체적인 프로세스를 효율적으로 수행할 수 있다. "효율적이다" = 전체적인 프로세스에 드는 비용이 비교적 적다. 속도 차원의 문제라기 보다는, 연산 횟수 차원의 문제라고 할 수 있다. 우선 각각의 DOM 조작은 레이아웃 변화, 트리 변화 및 렌더링을 일으킨다. 가상 DOM을 이용하지 않으면 변화가 있을 때마다 DOM 조작이 일어나고 이에 대한 연산이 수행되며 렌더링되기 때문에 ..
Safari에만 적용되는 코드를 짜고 싶다면?
2021. 10. 6. 23:00
dev-log/Front-End
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..
[Next.js] Next.js에서 CSS 사용하기
2021. 10. 3. 11:38
dev-log/Front-End
📟 Next.js 문서의 "Built-In CSS Support" 부분을 번역한 것으로 오역이 있을 수 있습니다. (원문: https://nextjs.org/docs/basic-features/built-in-css-support) Next.js에선 자바스크립트 파일에서 CSS를 import 해올 수 있습니다. 이는 Next.js가 import의 개념을 자바스크립트의 것 이상으로 확장하기 때문입니다. [전역 스타일시트(global stylesheet) 추가하기] 애플리케이션에 스타일시트를 전역으로 추가하려면, pages/_app.js 파일에 CSS를 import 해오세요. 예를 들어, 아래와 같은 style.css라는 이름의 스타일시트가 있다고 합시다. /* styles.css */ body { font..
[React] 리액트 상태 관리의 과거, 현재, 그리고 미래
2021. 9. 29. 00:27
dev-log/Front-End
본 글은 Lee Robinson의 포스팅 「Past, Present, and Future of React State Management」을 읽고 요약한 것으로, 오역이 있을 수 있습니다. (원문 바로가기) 2013년 5월 등장한 리액트는, 컴포넌트의 상태를 바탕으로 컴포넌트의 모양을 결정합니다. 이처럼 리액트는 "상태"라는 개념에 기초하는데요, 상태는 리액트 애플리케이션을 개발할 때 가장 어려운 부분 중 하나로 손꼽혀왔습니다. 용어 정리 본격적으로 글을 시작하기 전, 자주 쓰이는 용어들에 대한 정리부터 해볼까요? 이 용어들은 어떤 경우에는 다르게 불리기도 하지만 근본적인 의미는 동일합니다. UI 상태(UI State) : 애플리케이션에서 인터랙티브한 부분을 제어하기 위해 사용하는 상태 ex - 다크모드 ..
[Redux] 리덕스 모듈 만들기 - 덕스 패턴(Ducks pattern)
2021. 9. 23. 16:05
dev-log/Front-End
리덕스 모듈 리덕스 모듈이란? 액션 타입(Actions), 액션 생성 함수(Action Creators), 리듀서(Reducer)가 모두 들어있는 자바스크립트 파일을 의미함. 이렇게 하나의 파일에 작성하는 것을 덕스(Ducks) 패턴이라고 함. 리덕스 모듈에서 리듀서는 default export하고, 액션 생성 함수는 그냥 export함. "덕스 패턴"이 뭐고 이걸 쓰면 뭐가 좋은걸까? 덕스 패턴은 Erik Rasmussen님이 리덕스 사용 방법과 관련하여 제안한 패턴이다. (참고) 액션 타입, 액션 생성 함수, 리듀서를 각각 별도의 파일(심지어는 별도의 폴더)에 분리하여 작성하기 보다는, 그 셋을 하나의 모듈처럼 한 파일 안에 작성하자는 제안이다. 사실 나는 학원에서 리덕스를 처음 배울 때부터 덕스 패..
[라이브러리] Chart.js 시작하기
2021. 8. 21. 14:54
dev-log/Front-End
본 글은 저희 회사 기술블로그에도 동일한 내용으로 작성해놓았는데요, 저희 회사 개발자분들과 디자이너분들이 작성하신 좋은 내용들이 많으니 한번 구경해보셔도 나쁘지 않을 것 같슴니다..🎀 안녕하세요, 똑똑한개발자에서 프론트엔드 개발을 하고 있는 Anne입니다. 이번에 프로젝트를 하면서 차트를 그리기 위한 용도로 Chart.js를 사용하게 되었습니다. 워낙에 기능도 많고 괜히 복잡해보여서(구현하려는 기능에 따라 뒤에 복잡한 부분이 분명 있기도 합니다만…😌) 선뜻 시작하기가 어려웠습니다. 뭐든 시작이 제일 어려운 법인데, 이번 시간에는 저처럼 차트를 “구현해야만“ 하는 상황에서 Chart.js를 “덜 어렵게” 시작할 수 있도록 Chart.js의 기본 사용 방법 및 커스텀을 위해 제공되는 옵션들에 대해 간단히 소..
React Query
2021. 5. 28. 01:29
dev-log/Front-End
[NPM] https://www.npmjs.com/package/react-query [공식 문서] https://react-query.tanstack.com/overview [참고 포스팅] React Query - 왜, 그리고 어떻게 사용할 수 있을까? 들어가기 전.. Query(쿼리)란? Query란 '데이터베이스에 있는 정보에 대한 요청'을 의미합니다. (참고: What is a Query? Database Query Explained) React Query(쿼리)란? React Query의 공식 문서에 따르면 React Query는 리액트용 데이터 fetching 라이브러리로서, 구체적으로는 데이터 fetch, 캐싱, 동기화, 리액트 애플리케이션의 서버 상태 업데이트 등 데이터 요청과 관련된 주요..