전체 글

tailwindcss 중복 클래스 줄이기 (@layer, @apply)

tailwindcss의 가장 큰 문제점은 스타일이 많이 들어가면, 태그에 클래스 이름이 너무나도 길어진다는 점이다. 이를 해소하기 위해서 여러 방법을 사용할 수 있겠지만, 여기서는 @layer와 @apply를 사용하여 중복 클래스를 글로벌하게 사용하는 법에 대해서 다룬다. tailwindcss를 설정하고 나서 기본적인 globals.css의 내용은 다음과 같을 것이다. @tailwind base; @tailwind components; @tailwind utilities; /* reset css https://meyerweb.com/eric/tools/css/reset/ */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p..

HTML 화면 스크린샷 찍기 (html2canvas)

사용자의 브라우저에 보이는 HTML을 스크린샷 찍을 수 있는 방법을 기록하기로 하였다. html2canvas 라는 라이브러리를 사용하여 이를 간단히 구현할 수 있다. npm install html2canvas 함수를 작성하여 기능을 구현해보자면 다음과 같이 작성할 수 있다. import html2canvas from 'html2canvas' ... const copyElement = () => { const root = document.querySelector('#copy-image-div') as HTMLElement if (root) { html2canvas(root, { allowTaint: true }).then((canvas) => { document.querySelector('#copy-roo..

Modal 화면 구현 (Modal 외부 클릭 시 Modal 꺼짐)

모달창을 구현하는데 있어서 뒤에 화면을 뿌옇게 하고, 모달창의 바깥을 클릭 시 모달창이 꺼지는 기능을 구현하였다. 기본적인 구현 아이디어는, 기존의 화면을 전부 덮어버리는 투명한 요소를 만들고, 이 요소 위에 Modal을 구현하는 것이다. 바깥의 투명한 화면을 클릭하면, 모달창이 꺼지게 만들며 Modal 내부에 닫기 버튼을 만들 수도 있다. Tailwindcss를 사용한 구현 import React from 'react'; export default function Modal({ setIsShow }: { setIsShow: () => void }) { return ( Modal Context close ) } Css를 이용한 기본 구현 가장 기본적인 css를 사용해서도 구현하였다. 역시 미래에 참고하기..

프로그래머스 코딩테스트 연습 - 추억 점수 JavaScript

이번에 푼 연습문제는 전에 풀었던 것 같은 유형의 문제로, 배열의 데이터를 가공하여 다른 주어진 데이터와 연관짓는 문제였다. 이번에 문제를 풀 때는 최대한 고차함수를 이용해보기로 하였다. function solution(name, yearning, photo) { const answer = []; const scoreObj = {}; for(let i = 0; i arr.length === 1 ? (scoreObj[arr[0]] || 0) : arr.reduce((acc, cur) => { let accTmp = acc; let curTmp = scoreObj[..

React 정리

개발을 하다보면, 사용중인 라이브러리나 프레임워크의 장점을 이해하고 그에 맞게 코드를 작성하는 게 중요하다고 느껴질 때가 있었다. 라이브러리를 사용한 이유가 명확하지 않으면 오히려 프로젝트의 최적화를 망칠 수 있다는 생각이 들었기 때문이다. 따라서 초심으로 돌아가 가장 기본적인 React에 대해서 다시 공부하고 정리하였다. React는 메타(구 페이스북)에서 개발한 오픈소스 자바스크립트 라이브러리로, 프론트엔트 개발에서 현재 지배적인 위치를 가지고 있다. 사용자 인터페이스 개발을 컴포넌트 단위로 하여 생산성을 높일 수 있다. 독립적으로 개발된 컴포넌트들이 합쳐져 하나의 페이지를 구성할 수 있도록 리액트는 설계되었다. 🍓 리액트의 세 가지 특징 1. 선언형 프로그래밍 (Declarative) 리액트는 한 ..

React Native 생체인증 사용하기 (react-native-biometrics)

React Native의 생체인증을 사용하기 위해서 라이브러리를 설치하였다. 사용한 라이브러리는 react-native-biometrics다. Face Id 인증 구현 예시 import ReactNativeBiometrics, {BiometryTypes} from 'react-native-biometrics'; const onClickAuth = useCallback(async () => { const rnBiometrics = new ReactNativeBiometrics({ allowDeviceCredentials: true, }); const {biometryType} = await rnBiometrics.isSensorAvailable(); console.log('biometryType', bio..

이벤트 버블링(Event Bubbling) 및 이벤트 캡처링(Event Capture)에 대해서

이벤트 버블링 이벤트 버블링은 한 요소에서 이벤트가 발생하였을 때, 해당 요소와 그 요소는 물론이고 그 요소의 모든 조상들에 연결된 이벤트가 모두 실행되는 것을 의미한다. 다음과 같은 예가 있다고 생각해보자. Hello 🫐 World 위의 HTML은 div 내부에 span이 들어있는 구조이다. #container { background: blue; color: white; } .emoji { background: red; } 구분하기 쉽게 div요소는 파랑, 내부의 span은 빨간색의 배경을 가지게 한다. const divContainer = document.querySelector('#container'); divContainer.addEventListener('click', () => { window..

REST API 란?

웹 app에서는 HTTP 매소드를 사용하여 서버와 통신한다. 이때, requests와 responses를 어떻게 하는 것이 좋을까? 이에 대한 해답으로 가장 대표적인 API 아키텍쳐인 REST API가 있다. 🍅 REST: Representational State Transfer REST API는 웹에서 사용되는 데이터/자원을 HTTP URI로 표현하여 HTTP를 통해 요청(requests)과 응답(responses)을 정의하는 방식이다. 즉, 서버와 클라이언트의 효율적인 통신을 위해서 REST API를 따라서 문서를 작성하는 것이다. REST 원리를 따르는 시스템을 RESTful 이라고 표현하기도 한다. 좋은 REST API를 작성하기 위해서 리차드슨의 REST 성숙도 모델을 참조할 수 있다. 🎁 2단..