HOME
리액트 타자기(TypeWriter) 효과 구현하기 feat.제너레이터
리액트 타자기(TypeWriter) 효과 구현하기 feat.제너레이터
2024.05.03기본 로직타자기로 한 글자씩 입력하는 효과(Typewriter Effect)는 이미 수 많은 라이브러리가 있지만, setInterval 타이머 API를 이용해서 직접 구현할 수 있다. 원래 문장(텍스트)을 한 글자씩 자른 후 가장 앞에 글자부터 하나씩 이어 붙이는 방식이다. // JSconst $content = document.querySelector('.content');function typewriter(target, sentence, speed = 200) { const split = sentence.split(''); let text = ''; let i = 0; const timer = setInterval(() => { if (i 깜빡이는 커서 효과는 | 콘텐츠를 갖는 ..
아이폰 사파리 100vh 이슈 해결
아이폰 사파리 100vh 이슈 해결
2024.05.03iOS의 사파리에선 100vh 속성 값이 다소 다르게 작동한다. 데스크탑 크롬에서 100vh는 현재 화면에 보여지는 뷰포트를 기준으로 하지만, iOS의 사파리에선 하단 주소창 영역까지 포함한다. 뷰포트를 기준으로 아래 비율로 화면을 나눴다면 아이폰 사파리에선 footer 일부분은 하단 주소창 때문에 가려진다.header : 15%main : 70%footer : 15% 해결 방법다행히 이 문제는 순수 CSS만으로 해결할 수 있다. -webkit-fill-available 속성을 이용하는 방법이다. 기능 쿼리(@supports) 인자에 명시한 -webkit-touch-callout은 iOS에서만 지원하는 속성이다. 따라서 아이폰 사파리에서 접속할 땐 -webkit-fill-available 스타일 값이 적..
HTML 아이폰 사파리 테마 컬러 변경 방법
HTML 아이폰 사파리 테마 컬러 변경 방법
2024.05.03아이폰 iOS 15 부터 사파리 브라우저 탭 막대에 테마 색상을 추가할 수 있다. 탭 막대 색상은 콘텐츠를 기반으로 자동 선택되지만 태그를 이용해서 원하는 색상으로 변경할 수 있다. 참고로 content 속성 값엔 컬러코드 대신 CSS 변수를 사용할 수도 있다. e.g. content="var(--bg-black)" 테마 색상 변경 전 ▼ 테마 색상 변경 후 ▼ Light/Dark 모드 컬러라이트/다크 모드에서 각각 다른 색을 보이고 싶으면 미디어 쿼리를 사용하면 된다. 아래 예시에서 라이트 모드일 때 탭 막대 색상은 #ffffff(하얀색), 다크 모드일 땐 #28231c 색으로 표시된다. 레퍼런스Safari 15 Theme ColorMeta Theme Color and Trickery | CSS-Tr..
유용한 HTML 태그 모음
유용한 HTML 태그 모음
2024.05.03— 진행 상태 막대 태그는 작업의 완료 정도를 나타낸다. progress 태그에서 최소값은 항상 0이며, 다른 값으로 지정할 수 없다. 따라서 굳이 min 속성을 명시하지 않아도 된다(반면 meta 태그에선 min속성을 지정해야 한다). See the Pen <progress> element by ColorFilter (@colorfilter) on CodePen." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 속성File progress min 속성 : 최소값 / 기본값 0 / 사용자 지정 불가max 속성 : 최대값(0보다 커야함) / 기본값 1value 속성 : 현재값 / 0 이상 max 이하 커스텀 스타일progress 태그는 각 브라우저마다 기본 ..
리액트 useRef 활용 케이스 모음
리액트 useRef 활용 케이스 모음
2024.05.03useRef 함수는 current 속성을 가진 ref 객체를 반환한다. ref.current 값을 HTMLElement에 할당해서 해당 요소에 focus하거나, 엘리먼트 크기 등을 확인할 수 있다. ref 객체는 아래 특징을 갖는다. 컴포넌트가 다시 렌더링 돼도 ref.current 값은 그대로 유지한다.ref.current 값이 변경돼도 컴포넌트는 다시 렌더링하지 않는다HTMLElement 뿐만 아니라 숫자 / 문자열 / 배열 등 값을 할당할 수 있다. Case 1 — 리렌더링이 필요 없는 값을 관리할 때 ⭐️useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다. — ..
CSS 인접하는 엘리먼트들의 border 겹침 문제 해결
CSS 인접하는 엘리먼트들의 border 겹침 문제 해결
2024.05.03위 UI에서 상단/하단 박스의 토글이 활성화 되면 border 색상이 파란색으로 변경된다. 하지만 ➊상단 박스 아래 border와 ➋하단 박스 윗쪽 border가 겹쳐서 1px border가 2px 처럼 보이게 된다(주황색 화살표 부분). 토글이 활성화된 상태에선 상단 박스의 margin-bottom 하단 여백 값을 -1px 주는 방식으로 해결할 수 있지만, 다른 박스의 모든 토글 상황에 일일이 적용하는건 번거롭다. 게다가 토글이 3개 혹은 4개가 활성화 되는 상황도 고려해야되므로 복잡하다. 이땐 display: table;을 활용해서 해결할 수 있다. 테이블 구조 변경 작업구조 변경💡 border-collapse: collapse 속성은 table 태그를 사용했을 때만 유효하다. 테이블 태그에 관한 ..
HTML 이메일 템플릿 작성법 (feat. 테이블 코딩)
HTML 이메일 템플릿 작성법 (feat. 테이블 코딩)
2024.05.03이메일 포맷은 표준이 없다. 다양한 이메일 클라이언트에서 정상적으로 보이기 위해선 태그를 사용하지 않고 , , 만 이용해서 작성하는게 좋다. 일명 테이블 코딩이라고 불린다. 여백을 지정할 때 보통 margin을 사용하는데, 이 또한 padding 등으로 대체한다. 스타일은 인라인 방식을 사용한다. DOCTYPE이메일 클라이언트에게 HTML 유형을 알려준다. XHTML 1.0 Transitional doctype 을 사용하면 이메일 클라이언트가 유효성을 검사하고 이메일을 렌더링하는데 도움이 된다. Head텍스트와 특수 문자를 올바르게 표시할 수 있도록 문자 인코딩 방식을 UTF-8로 설정한다. DOCTYPE을 XHTML로 설정했기 때문에 Content-Type 선언도 포함해야 한다. Style ..
리액트 이미지 미리보기(업로드) 구현 / File API
리액트 이미지 미리보기(업로드) 구현 / File API
2024.05.02file 타입의 태그와 File API를 이용해 컴퓨터에 저장된 이미지를 업로드할 수 있다. 이미지 태그 자체를 “파일선택” 버튼으로 기능하도록 할 수 있고, 라벨의 스타일을 수정하는 방식으로 “파일 선택”(파일 필드) 스타일을 변경할 수도 있다. 기본 구조업로드한 이미지는 컴포넌트 내부 상태(image)로 관리하고, 업로드 하기 전엔 기본 프로필 사진(fallbackUrl)을 표시하도록 한다. 태그의 type을 file로 명시하면 “파일 선택” 버튼이 표시된다. accept 속성엔 허용할 파일 유형을 .확장자 형태로 입력한다. 확장자는 대소문자를 구분하지 않는다. 여러 값을 입력할 땐 콤마 , 로 구분한다. 특정 타입(MIME 유형)의 모든 확장자를 허용하고 싶으면 타입/* 을 입력한다. 허용하지..
TypeScript 타입스크립트 - 느낌표 연산자
TypeScript 타입스크립트 - 느낌표 연산자
2024.05.02자바스크립트에서 NOT ! 연산자는 false를 의미한다. 반면 타입스크립트에선 이 느낌표 ! 연산자가 변수 뒤에 올 수 있다. if문 등을 사용하지 않고 항상 유효한 값이 있다고 단언 할 때 사용한다. Non-null assertion operator (느낌표)💡 ESLint 규칙에선 느낌표 연산자를 사용하면 null-checking mode의 혜택을 받지 못하기 때문에 권장하지 않는다. 대신 foo.bar && foo.bar... AND 연산자 혹은 옵셔널 체이닝 사용을 권장한다. 느낌표 연산자를 꼭 사용해야 한다면 항상 유효한 값을 보장하는 변수에만 사용한다. 변수 내부 값에 접근할 때 TS 컴파일러는 항상 null undefined 인지 체크한다. 이때 if 문으로 타입 단언을(변수에 원하는 타..
자바스크립트 쌍(pairs)을 포함하는 배열에서 유니크 넘버 찾기
자바스크립트 쌍(pairs)을 포함하는 배열에서 유니크 넘버 찾기
2024.05.02아래 배열에서 단 한번만 나열되는 유니크 숫자는 17이다. 1과 3은 쌍을 이루고 있기 때문에 두번씩 나열되고 있다. 이런 배열에서 유니크 넘버(17)만 찾아내려면 어떻게 해야할까?[1, 3, 17, 3, 1] Naive Solution — O(n*n)2중 for문을 사용한 예시. 모든 숫자를 한번씩 돌아가면서 검사해야 되기 때문에 O(n*n)의 시간복잡도를 갖는다. 배열 길이가 5라면 정답을 찾을 때까지 최대 25번의 순회가 이뤄질 수도 있다.function singleNumber(nums) { for (let i = 0; i Linear Solution — O(n)💡 O(n)은 알고리즘 실행 시간이 선형이 되는 것을 뜻한다. 선형 시간(Linear time; 线性时间)이란 배열 길이(n)와 비례..
git revert, git reset 차이점 및 HEAD 분리
git revert, git reset 차이점 및 HEAD 분리
2024.05.01TL;DRreset : 현재 브랜치를 지정한 커밋으로 이동. 그 이후의 커밋 히스토리는 삭제revert : 커밋 변경사항을 취소하는 새로운 커밋 생성. 기존 커밋 히스토리는 유지 HEAD 배경지식Git Branch 학습/연습하기 좋은 사이트 ▼ Learn Git BranchingAn interactive Git visualization tool to educate and challenge!learngitbranching.js.org HEAD는 현재 브랜치 작업 트리의 가장 최근 커밋을 가리킨다(현재 작업중인 커밋).HEAD를 브랜치 대신 커밋에 붙이는 것을 HEAD 분리라고 부른다.^(캐럿) 연산자는 상대참조 기능으로, 한 단계 위(부모) 커밋으로 이동할 때 사용한다.git checkout bugFix^..
줄바꿈 제어 속성 word-break / word-wrap(overflow-wrap)
줄바꿈 제어 속성 word-break / word-wrap(overflow-wrap)
2024.05.01TL;DR박스 영역을 벗어나거나, 불필요한 공백이 생기는 등 대부분의 줄바꿈 문제는 아래 두 속성으로 해결할 수 있다.word-break: break-all; /* 음절(글자)를 기준으로 줄바꿈 */word-wrap: break-word; /* 영역을 넘친 단어 분리(줄바꿈) */ word-break💡 줄바꿈할 중단점의 기준을 바꿀 수 있는 속성 word-break 속성은 글자를 어떻게 분리해서 줄바꿈할지 결정하는 속성이다. CJK는 음절(글자), non-CJK는 공백과 - 하이픈이 기본 중단점이다. word-break 속성으로 줄바꿈할 중단점의 기준을 바꿀 수 있다. 아래는 언어별 속성 값에 따라 달라지는 중단점을 정리한 표 — WIT 블로그 참고 normal (기본값)break-allkeep-a..