본문 바로가기

Web6

[jQuery] 카드번호 마스킹하기 보통 카드번호를 입력할 때, 16자리 중 가운데 8자리는 마스킹처리를 하게된다. 때문에 보통은 4자리씩 4개의 입력창을 만들어 가운데 8자리를 입력할 때는 키보드 보안까지 적용해서 처리하는 경우들이 많은데, 회사에서 1개의 Input에 12자리를 입력하면서 가운데 8자리는 마스킹이 되도록 구현하는데, 머리를 뜯고 계시는 분이 있어 내가 한 번 만들어 보았다. 개인적으로 jQuery를 극혐하지만... 도저희 쌩 js로는 구현이 어려워보여서... (어차피 우리회사는 jQuery를 다들 사랑하시니...괜춘...) Card Number: submit을 누르면 tmp라는 div 에 origin value가 출력되도록 했다. 그런데 하나 문제가 되는게, 드래그 후 삭제를해도 한개의 글자만 지워진다... 그건 이제 .. 2023. 6. 9.
렌더링 방식에 대한 짧은 정리 웹을 공부하다보면 렌더링에 대해 들어본 적이 있을겁니다. 웹에서 렌더링(Rendering)은 웹 페이지의 내용을 브라우저 화면에 표시하는 과정을 말하는데, 우리가 javascript나 css로 구현한 함수를 실제 브라우저에 보여질 수 있도록 하는 과정으로 이해하면 되겠습니다. 그래서 우리는 사용자에게 좋은 사용자 경험을 제공하기 위해 어떻게 하면 렌더링을 효율적으로 처리할지 고민이 필요합니다. 특히 데이터 양이 많은 페이지(ex. 고화질의 이미지 또는 영상이 다수 포함된 페이지)의 경우 더 깊은 고민이 필요할 겁니다. 웹 개발에서 사용되는 주요한 렌더링 방식은 서버 사이드 렌더링 (Server-Side Rendering, SSR)과 클라이언트 사이드 렌더링 (Client-Side Rendering, CS.. 2023. 5. 31.
Maven? Gradle? 빌드도구에 대해 알아보자 빌드도구란? 우리가 웹 프로그래밍을 공부하다보면, Spring Framework에 대해 공부하게 되고, Dependency들을 추가한다면서 갑자기 Maven이나 Gradle이라는 용어가 등장하게 됩니다. 그러나 이들에 대해선 크게 강조하며 설명해주지 않는 경우가 많은 것 같아 한 번 정리해보려 합니다. 빌드도구(Gradle, Maven 등)를 활용하는 이유 빌드도구를 활용하게 되면 다음과 같은 장점들이 있습니다. 의존성 관리 프로젝트에서 필요한 외부 라이브러리나 모듈의 의존성을 관리할 수 있습니다. 이를 통해 라이브러리의 버전 관리, 충돌 해결, 중복 제거 등을 자동으로 처리할 수 있습니다. 빌드 자동화 빌드 도구는 프로젝트의 빌드, 테스트, 배포 등의 작업을 자동화하여 개발자가 반복적이고 지루한 작업을.. 2023. 5. 15.
우리가 Spring Framework을 사용하는 이유 Spring Framework을 사용하는 이유? Spring 프레임워크는 자바 기반의 애플리케이션을 개발하기 위한 경량화된 솔루션으로 많은 개발자들에게 사랑받고 있습니다. Srping 프레임워크는 다양한 장점을 가지고 있는데, 그 중 대표적인 것들을 소개해 보겠습니다. 1. 제어의 역전 (Inversion of Control, IoC) 제어의 역전 (Inversion of Control, IoC)은 프로그램의 제어 흐름이 개발자가 아닌 프레임워크나 컨테이너에 의해 결정되는 것을 의미합니다. 기존의 절차 지향적인 방식에서는 개발자가 프로그램의 흐름을 직접 제어하고 객체들을 생성하고 관리하는 반면, IoC에서는 개발자가 객체의 생성과 생명주기 관리를 프레임워크에 위임합니다. 객체의 생성과 관리를 위한 책임을.. 2023. 5. 15.