분류 전체보기
-
React에서 눈속임을 이용한 커스텀 비밀번호 만들기 (카드 번호 절반만 숨기기)Frontend/React·React Native 2023. 4. 27. 16:17
웹 환경에서 사용자가 어떤 값을 입력하게 할 때 input 태그를 쓰는 것은 매우 당연합니다. 그렇다면 이 input 의 값을 숨기는 방법으로는 무엇이 있을까요? 대표적으로는 password 타입이 있는데요, 사용자가 어떤 값을 입력하더라도 *로 치환하여 화면 상에서 보이지 않도록 숨기는 역할을 합니다. 하지만 이 input 입력 폼에 특정한 값만 숨기고, 특정한 값은 노출시키고 싶다면 어떻게 할 수 있을까요? 예를 들면 사용자가 카드 번호 16자리를 입력할 때, 뒤 8자리만 가려지게 할 수는 없을까요? 그러면서 하이픈까지 넣어주는 센스를 발휘할 수 있을까요? 1111222233334444 를 차례로 입력하면 1111 - 2222 - **** - **** 으로 변환되어 input태그에 출력할 수 있을까요..
-
React에서 Context API로 상태 관리하기 (with Typescript)Frontend/React·React Native 2023. 4. 17. 17:27
React에서 프로젝트를 진행하다보면 컴포넌트 간에 상태를 공유하기 위해서 그 상태를 부모에게 끌어올리는 일은 자연스러운 현상입니다. 이 과정을 다시 생각해보면, 상태를 부모가 관리하게 하여 prop으로 자식들에게 전달하는 방식으로 쉽게 구현할 수 있겠죠. 하지만 React 애플리케이션이 점점 커지고 복잡해질 수록 상태 관리를 하는 것은 어려운 작업이 될 것입니다. 특히 여러 구성 요소(ex.컴포넌트)간에 상태를 공유해야한다면 상태 값을 공유(동기화)하는 것은 주요 문제 중 하나입니다. 이런 문제를 해결하기 위해 Redux, MobX, Recoil 등 상태 관리 라이브러리를 사용하는 것이 굉장히 일반적이지만, 라이브러리 없이 context api로 구현하는 방법에 대해서 알아보려고 합니다. 특히 타입스크..
-
우아한테크코스 5기 FE 레벨 1을 마치며...Study/일상·회고 2023. 4. 15. 02:50
원래의 계획은 레벨 1이 끝날 때 회고를 하나 작성하려고 하였으나.. 중간에 글쓰기 미션 때문에 한 달 생활기를 이미 적어버리고 말았습니다...🥲🥲 사실 그때는 분량 제한도 있고, 미처 하지 못했던 말들이 많습니다. 이 글에서는 활동 시작 이후의 감정과 회고에 대해서 작성을 하려고 하고, 혹시 선발 과정에 대해서 궁금하신 분만 아래의 링크에 들어와서 먼저 읽으시면 될 것 같습니다. [회고] 우아한테크코스 5기 프리코스 (FE) 우아한테크코스 5기 프리코스 (FE) 1차 합격! 우아한테크코스 5기 (FE) 최종 코딩테스트 후기 2022년을 보내며, 그리고 새해 다짐 우아한테크코스에서 진행하는 커리큘럼은 우아한테크코스 공식 홈페이지나 배민다움에서 확인할 수 있기도 하고, 제가 전에 작성했던 글인 우아한테크코..
-
JavaScript의 cloneNode와 이벤트 버블링을 활용한 HTML template tag 활용법Frontend/JavaScript 2023. 4. 11. 03:16
HTML의 template 태그는 웹 개발에서 재사용성을 높이는 방법 중 하나입니다. template 태그를 사용하면 웹 페이지에서 일부분을 독립적으로 만들어 놓고, 필요할 때마다 JavaScript를 통해 동적으로 삽입할 수 있습니다. 이를 통해 코드의 가독성과 유지보수성을 높일 수 있습니다. 예를 들면, 어떤 컴포넌트에 필요한 HTML 코드를 문자열로만 관리하는 것은 굉장히 불편합니다. ES6에 와서 백틱으로 템플릿 리터럴을 관리하는 기능이 추가되었지만, IDE 차원에서 코드가 인식이 잘 되지 않는 등 여러 문제가 있습니다. template 태그의 공식문서를 확인해보면 템플릿 태그는 렌더링 되지 않습니다. DOM 상에 존재하지 않지만, 해당 코드를 JavaScript가 동적으로 읽어들여 복제(.clo..
-
JavaScript의 모듈 시스템과 Singleton 패턴을 통한 객체 공유Frontend/JavaScript 2023. 4. 11. 02:21
MVC패턴은 기존의 응용 프로그램 개발을 위해 사용되던 디자인 패턴으로, 서버나 애플리케이션 구축에 사용되던 오래된 방법 중 하나입니다. 하지만 프론트엔드에서도 MVC패턴이 필수일까요? 프론트엔드 개발에서 MVC 패턴을 사용한다면 가장 큰 이유로는 객체나 변수의 공유일 것입니다. 특히 컨트롤러가 중앙에서 데이터의 흐름을 통제하는 일을 하고 있을 가능성이 큽니다. (웹 개발에서 중앙 통제라...) 컨트롤러 없이 데이터를 어떻게 공유할 수 있을까요? 전역 키워드인 globalThis를 비롯한 여러 방법이 존재하겠지만, 사용이 권장되지는 않습니다. 객체를 공유하기 위해 다음과 같은 방법들이 존재합니다. 모듈시스템 이용하기 JavaScript의 모듈 시스템은 코드의 재사용성을 증가시키고 유지 보수를 쉽게 할 수..
-
HTMLElement와 JavaScript 간의 상호작용을 개선하는 dataset (데이터 속성)Frontend/JavaScript 2023. 4. 8. 17:54
HTML의 엘리먼트는 다음과 같이 태스 내부에 속성(Attribute) 값을 가질 수 있습니다. 일반적인 개발 상황에서는 엘리먼트의 속성이 큰 이슈가 아닐 수 있지만, 커스텀 엘리먼트를 비롯해서 특정 엘리먼트의 속성이 컴포넌트의 형태를 결정하는 상황에서는 해당 태그가 자주 사용될 수 있습니다. 예를 들어 다음과 같은 문법은 어떤 엘리먼트의 속성 값을 읽는 것을 돕습니다. const el = document.getElementById('foo'); // 위에 있는 예제의 엘리먼트 입니다. console.log(el.getAttribute('bar')); // baz 하지만 다른 사람이 읽었을 때 HTML 표준에는 bar라는 속성이 있는지 확신할 수 없습니다. 예를 들면, 정말 그럴싸한 이름의 속성을 짓는다..
-
IntersectionObserver를 활용한 element 감지 및 응용 (무한스크롤, 중간광고 예제 포함)Frontend/JavaScript 2023. 4. 8. 14:46
과거에는 데이터를 Pagination으로 데이터를 소분해서 보여주던 시절이 있었습니다. 하지만 점점 데이터가 무한정하게 늘어나면서 기존 방식으로는 데이터를 효율적으로 보여줄 수 없게 됐습니다. 따라서 무한스크롤(infinite scroll)이라는 개념이 등장하기 시작했고, 모던 웹과 앱에서 모두 필수적인 기능으로 자리 잡았습니다. 어떤 데이터를 보여줄지만 서버에서 잘 추천해 준다면 무한스크롤은 더 동적인 웹으로 만드는데 일조하게 됩니다. 웹에서 무한스크롤을 구현하려면 어떤 방법이 있을까요? 단순하게 구현 아이디어를 생각해 봤을 때, 데이터를 페이지 단위로 서버에 요청하는 것은 Pagination과 동일할 것입니다. 다만 무한 스크롤은 기존 결과를 날리지 않고, 비동기적으로 수신받은 추가 데이터를 이어 붙..
-
CustomEvent를 활용하여 customElements에 객체를 전달하는 방법Frontend/JavaScript 2023. 3. 27. 18:12
이전에 작성한 글들을 잘 참고해보면 커스텀 엘리먼트는 외부에서 어트리뷰트 값을 직접 넘길 수는 있지만, 직접 객체를 넘기는 방법은 지원하지 않습니다. 많은 사람들이 이를 해결하기 위해 다양한 방법을 활용했을 것으로 예상됩니다. 가장 쉬운 방법으로는, 특정 엘리먼트를 불러와서 어떤 메서드를 통해 객체를 전달하는 방법이 가장 일반적일 것입니다. 예를 들면 다음과 같은 방법이 있을 것입니다. import MyElement from "./MyElement.js"; customElements.define('my-element', MyElement); class MyElement extends HTMLElement { state = { value: 'init value' }; constructor() { super..