HOME
아이폰 사파리에서 입력창 자동확대 방지
아이폰 사파리에서 입력창 자동확대 방지
2024.04.25글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요 태그를 모바일에서 터치하면(포커스하면) 화면이 자동으로 확대될 때가 있다. 입력창의 폰트 크기가 16px보다 작으면 자동으로 확대되기 때문에 발생하는 현상. 대표적으로 아래 3가지 해결 방법이 있다. 확대 금지 — 모바일용으로 적절하게 디자인된 경우폰트 크기를 16px 이상으로 변경 — 추천폰트 크기를 16px로 변경하고 `transform: scale()`을 이용해 원하는 만큼 줄이는 방법 — 복잡함 방법1 — 확대 금지html 파일 메타 태그의 content 속성에 최대 확대 배율을 1배수만 허용하고, 단말기 확대 기능을 사용하지 못하도록 명시하면 방법. 작은 글씨를 잘 보지 못하는 사람들은 확대할 ..
CSS 줄바꿈(개행문자) 표시 / 넘치는 텍스트 생략 기호 표시 방법
CSS 줄바꿈(개행문자) 표시 / 넘치는 텍스트 생략 기호 표시 방법
2024.04.25글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요 💡 미립자 팁 : textarea 태그에 readonly 속성을 추가하면 읽기만 가능하고 쓰기는 불가능하다. 로그인하지 않은 유저는 댓글을 쓰지 못하게할 때 유용하다. `` 줄바꿈 적용하기 textarea 태그에 엔터키(개행문자)를 눌러 줄바꿈을 적용해도, 입력한 value를 p 태그 등에 출력해보면 줄바꿈이 하나도 적용되지 않는다. 가장 간단한 해결 방법은 텍스트를 표시할 태그의 스타일에 white-space 속성을 추가하는 것. white-space는 공백 문자를 어떻게 처리할지 결정하는 속성이다. white-space: normal — 기본값 여러 공백 : X (1개로 표시)改行문자 \n 표현 :..
자바스크립트 경과 시간 표시 / UTC / ISO 8601
자바스크립트 경과 시간 표시 / UTC / ISO 8601
2024.04.25글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요 Date 객체 톺아보기유닉스 타임스탬프자바스크립트에서 Date 객체는 유닉스 타임스탬프를 사용한다. SNS을 보면 “1분 전 게시", “방금 전 게시" 같은 경과일로 포스팅 날짜를 표시하는 것을 자주볼 수 있다. 경과일은 Date 객체의 getTime() 메서드를 이용해 변환한 밀리초와 현재 시간의 밀리초 차이를 계산하는 방법으로 구현할 수 있다. getTime() 메서드는 1970년 1월 1일 0시 0 분 0초(UTC)부터 현재까지의 시간을 밀리초 단위로 환산한 값을 반환한다. 이를 유닉스 시간(유닉스 타임스탬프)으로 부른다. 1000밀리초(millisecond)는 1초(second)다.const date ..
자바스크립트 랜덤 숫자, 데이터 생성 예시
자바스크립트 랜덤 숫자, 데이터 생성 예시
2024.04.25글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요 랜덤 게시글(혹은 댓글)을 구현한다고 가정, 기본적으로 여러개의 유저 이름, 메시지 텍스트가 필요하다. 유저 이름이나 랜덤 텍스트는 영문 Lorem처럼 자동 생성해주는 사이트를 활용하면 된다. 10개 정도 더미 데이터를 생성한 후 자바스크립트의 Math.random을 활용하면 유저별로 다른 메시지 텍스트를 생성할 수 있다. 필요한 데이터 리스트유저 이름 : 한글 랜덤 이름 생성기 이용const randomUser = ['예세희', '허선숙', '제갈지훈', '심성태', ...]메시지 텍스트 : 한글 Lorem 사이트인 간세네 혹은 한글입숨 이용const randomMessage = ['광야에서 무엇을 보내는.....
캔버스 Canvas 도형 확대 축소 후 원점 조정하기
캔버스 Canvas 도형 확대 축소 후 원점 조정하기
2024.04.24글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요 도형 사이즈 조정 메서드ctx.scale(x, y) : 도형 크기 확대/축소. 캔버스에서 1 단위는 1픽셀. scale(2, 2)는 하나의 단위를 2픽셀로 확대(좌표 사이의 간격 증가) ctx.translate(x, y) : 캔버스의 원점 이동. 기본값은 왼쪽 좌상단 (0, 0) ctx.rotate(angle) : 도형을 라디안(angle) 단위 만큼 시계 방향으로 회전. 항상 캔버스 원점이 회전의 중심 ctx.transform(scaleX, skewX, skewY, scaleY, translateX, translateY)scale(), rotate(), translate() 일괄 적용하는 메서드이전 변형 ..
Canvas API 기본 내용 정리 / React에서 사용법
Canvas API 기본 내용 정리 / React에서 사용법
2024.04.24글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요 캔버스 기본 세팅 for React💡 캔버스는 HTML 요소 중 하나로 스크립트 언어로 그림을 그리는데 사용한다. canvas를 사용하기 위해선 캔버스 context에 DOM으로 접근해야 한다. React에선 useRef()를 사용해서 Ref 객체를 만들고 접근하고 싶은 DOM의 ref 값으로 설정해주면 된다. 그럼 Ref 객체의 .current 값은 해당 DOM을 가리킨다. 캔버스 엘리먼트 생성 및 useRef 설정import React, { useRef, useEffect, useState } from 'react';import styled from 'styled-components';const Canv..
TypeScript 타입스크립트 - 타입 추론 / 단언 / 가드
TypeScript 타입스크립트 - 타입 추론 / 단언 / 가드
2024.04.24글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요 타입 추론기본💡 타입추론이란 타입스크립트가 코드를 해석해 나가는 동작을 의미한다. 아래처럼 x 에 대한 타입을 따로 지정하지 않더라도 변수 x에 숫자 3을 할당했으므로 number 타입으로 간주한다. 이처럼 변수를 선언하거나 초기화할 때 타입이 추론된다. 변수, 속성, 함수 인자의 기본 값, 함수 반환 값 등을 설정할 때도 타입 추론이 일어난다.let x = 3; // 변수를 선언하고 할당함으로서 x는 number 타입이라는 추론이 일어났다. 아래 코드에서 DetailedDropdown 인터페이스는 extends 키워드를 이용했으므로 Dropdown 인터페이스의 속성도 가진다. DetailedDropdow..
TypeScript 타입스크립트 - 제네릭, 프로미스
TypeScript 타입스크립트 - 제네릭, 프로미스
2024.04.24글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요 제네릭 소개제네릭은 타입을 함수의 파라미터처럼 사용하는 것을 의미한다. 제네릭은 재사용성이 높은 컴포넌트를 만들 때 자주 사용한다. 한 가지 타입보다 여러가지 타입에서 동작하는 컴포넌트를 생성할 때 유용하다. 제네릭 기본 문법💡 `T`는 Type parameter의 약자로 관용적으로 사용한다. 꼭 `T`를 사용해야하는건 아니다. 아래 함수의 text파라미터엔 hi 10 true 등 어떤 타입의 값이 들어가더라도 그대로 반환한다. 이렇게 모든 타입을 받을 수 있는 이유는 타입을 따로 지정하지 않았기 때문에 암묵적으로 any 타입이 돼서 그런 것이다.function getText(text) { retur..
TypeScript 타입스크립트 - 기초 내용 정리
TypeScript 타입스크립트 - 기초 내용 정리
2024.04.24글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요 타입스크립트란?타입스크립트는 자바스크립트에 타입을 부여한 언어다. 자바스크립트의 확장된 언어라고 볼 수 있다. 타입스크립트를 브라우저에서 실행하려면 파일을 한 번 변환해줘야 한다. 이 변환 과정을 컴파일(정확히는 트랜스파일링)이라고 부른다.참고로 Babel은 자바스크립트의 최신 문법을 최대한 많은 브라우저에서 호환할 수 있도록 변환해주는 도구다. 왜 써야 할까?아래 2가지 관점에서 JS 코드 품질과 개발 생산성을 높일 수 있다.에러 사전 방지코드 가이드 및 자동 완성(생산성 향상) 에러 사전 방지아래 두 코드 모두 두 숫자의 합을 구하는 함수다. 위는 자바스크립트, 아래는 타입스크립트로 작성했다. 함수..
location 객체의 href/assign, replace 차이점
location 객체의 href/assign, replace 차이점
2024.04.24글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요 차이점 요약 window.location.assign(및 href) : 정보를 전송하지 않고 페이지만 이동 / 뒤로 가기 가능 window.location.replace : 정보를 전송하지 않고 페이지만 교체 / 뒤로 가기 불가 window.location.reload : 현재 페이지의 문서 다시 로드 window.location.assign (href) 뒤로 가기 버튼을 눌러 이전 페이지로 이동할 수 있다 주소 히스토리에 기록된다 뒤로 가기 : location.assign 메서드를 호출한 페이지로 이동 용도 : URL을 이동하는 대부분의 경우에 사용 location.href``location.assign 이 둘은 사용법만 다를 ..
[Mac OS] 맥 메뉴바에서 미세먼지 상태 확인하기 - Pollution Monitor
[Mac OS] 맥 메뉴바에서 미세먼지 상태 확인하기 - Pollution Monitor
2020.08.16Mac OS는 메뉴바 상단에서 배터리 잔량이나 시간 등을 확인할 수 있다. Windows로 따지면 우측 하단 작업표시줄에 위젯이 추가된 개념이다. 맥 메뉴바에서 개인적으로 가장 많이 보는 항목 중 하나가 날씨, 미세먼지다. 오른쪽 알림 센터에 위젯을 추가하여 확인할 수도 있지만 아무래도 직관적인 메뉴바가 더 편하다. 메뉴바에 미세먼지를 표시해주는 미세몬, 미세먼지 코리아 같은 앱이 있지만 모두 대기질 상태를 숫자로 보여주지 않은 점이 아쉬웠다. 오늘 소개할 Pollution Monitor는 한국은 물론 세계 주요 도시의 대기질 스코어를 숫자로 표시해준다. 또 대기질 상태에 따라 메뉴바 배경색이 변하기 때문에 훨씬 직관적이다. 다운로드 다운로드: Pollution Monitor (무료) 개발사: Seagu..
홍보 포스터에 사용하면 좋은 유료/무료 중국어 폰트(서체) 모음
홍보 포스터에 사용하면 좋은 유료/무료 중국어 폰트(서체) 모음
2020.08.16홍보 포스터, SNS 이미지 등을 제작할 때 어떤 폰트를 사용하냐에 따라 분위기가 확 달라진다. 전달하려는 메시지와 톤앤매너에 잘 맞는 폰트를 선정하는 건 그만큼 중요하다. 한글 폰트는 조금만 검색해보면 다양한 정보를 얻을 수 있지만 의외로 중국어 폰트 관련 정보는 별로 없다. 오늘은 중국 마케팅 등에 유용하게 쓸 수 있는 유료/무료 중국어 폰트를 소개하고자 한다. 1. 무게감 있는 중국어 폰트 📺 优设标题黑 (UISDC - 표제흑체) 폰트 이름: 优设标题黑 폰트 제작사: UISDC 폰트 키워드: 속도감, 무게감 라이선스: 무료, 상업적으로 사용 가능 글리프 개수: 7194 다운로드 : 링크 优设标题黑는 에너지를 발산하는 듯한 스타일의 폰트다. 중문 Simhei(黑体) 서체를 바탕으로 획에 굵기를 주고 ..