본문 바로가기

천천히 배움,/Front-End

 (8)
[Javascript] 모바일 safari, 삼성 브라우저 100vh 이슈 해결 PC에서는 문제없던 레이아웃이 ios safari나 안드로이드 삼성 브라우저로 열어봤더니 쓸데없는 스크롤이 생기거나 하단에 배치한 버튼이 브라우저 네비게이션 바 또는 url 창에 가리는 문제가 발생했다. 이는 url 바와 브라우저 네비게이션 영역도 포함하여 화면의 뷰포트를 계산하기 때문에 발생하는 현상이다. 더구나 url 바는 보여지기도 하고 사라지는 경우도 있는데 100vh는 이를 고려하지 못한다. 그럼, 어떻게 해결하면 될까? 실제 우리가 생각하는 화면의 높이의 1vh를 구해 전체 높이를 100vh로 선언해주면 된다! 물론 화면 크기가 변할 때마다 다시 1vh를 계산해야하는 것도 잊어서는 안된다. 제일 먼저 vh를 계산하고 document 스타일에 --vh라는 프로퍼티에 할당하는 함수를 만들어준다. ..
[JavaScript] iOS, input type="number"일 때 숫자 키패드 띄우기 모바일 대응을 하다보면 만나는 문제, 안드로이드와 iOS... 안드로이드는 input 태그의 type 속성에 number 지정을 해주면 숫자 키패드가 자동으로 잘 나타난다. 반면에, iOS는... ^^ type="number" 임에도 불구하고 일반적인 한/영 키보드가 나와 한글, 영문은 물론 특수문자까지 입력이 가능하다. 그렇다면, 어떻게 숫자 키패드가 나오게 할 수 있을까? 방법은 매우 간단했다! input 태그의 inputmode 속성을 지정해주면 끝 - decimal은 '.'도 입력할 수 있는 숫자 키패드를 제공하고, numeric은 정말 순수한 숫자 키패드를 제공하니 용도에 맞게 선택하면 된다! 다만, 이는 최신 iOS에서만 동작이 되는 듯하니, 최신 버전 외에도 지원을 한다면 pattern 속성..
[JavaScript] input type="number" 숫자만 입력되도록 설정하기 input의 type 속성을 number로 지정하여 한글 입력을 막았지만, +, -, . 의 기호가 입력되어 당황스러웠다면 드루와~ 물론, 내 이야기다! 숫자 외 기호 등의 입력을 방지하는 방법은 정규 표현식을 활용할 수도 있지만, 내 경우에는 정규 표현식으로 잘 방어가 되지 않았기 때문에 다른 방법을 소개하려고 한다. 키보드 이벤트로 해당 기호 입력을 방지하는 방법인데, 바로 코드를 보자! (참고로 React 사용중..) const AgeInput = () => { const handleKeyDown = useCallback((event) => { if (event.key === '-' || event.key === '+' || event.key === '.') event.preventDefault()..
[React] Flex Component 만들기 (feat, MUI-Stack) Material UI로 작업을 진행하면서 Box 컴포넌트에 아이템들을 넣고 flex container로 만들어 아이템들을 정렬했다. 그런데 Material UI를 뜯어보다 보니 flex가 적용되어 아이템들을 예쁘게 정렬해주는 Stack 컴포넌트가 이미 있지 뭐람?! stack 컴포넌트로 바꿔주니 지저분하게 길었던 sx={{ display: flex, justify-content: ~~~ }}와 같은 아이들이 샥 사라지고 깔끔하게 정리되었다. 정확히 MUI의 Stack 컴포넌트가 어떻게 작동하는지 이해하고, flex 개념을 리마인드하기 위해 직접 어디서든 재사용 가능한 Flex Container 컴포넌트를 만들어봤다. import styled from 'styled-components'; const Fle..
[Network] REST API, 그리고 POST와 PUT REST API 란 무엇일까?? REST(Representational State Transfer)는 소프트웨어 아키텍쳐의 하나로, HTTP 통신을 위한 규약(규칙)이라고 할 수 있다. 이 아키텍쳐 스타일의 디자인을 잘 따른 시스템을 'RESTful'하다고 표현하기 때문에, 이를 잘 지킨 api를 REST API 또는 RESTful API라고 부른다. 1. REST의 기본 규칙 URI를 통해 자원을 표현하고, HTTP Method (GET, POST, PUT, PATCH, DELETE)를 통해 자원에 대한 행위를 정의한다. 추가적으로 자원에 대한 행위의 내용 즉, HTTP Method에 대한 내용은 payload(또는 body라고 함)로 표현한다. 2. HTTP Method GET, POST, PUT, ..
[Highcharts] scatter 그래프 - 구간에 따른 marker 색상 구분 조금이라도 더 오래 기억하기 위해 남겨두는 기록! 기존 그래프에서 좀 더 가독성을 위해 차트를 조금 수정해야 했다. 먼저, 기존 차트의 뷰가 어떻게 나오는지 봐보자. 위와 같은 뷰에서 가운데 파란 구분선(y값: 0)을 기준으로 음수값은 빨간색, 양수값은 기존 색상을 유지하고 싶었다. 코드는 다음과 같다. 여기서 점박이를 그려주는 핵심은 'series'부분이다. DB에서 받아오는 series의 data를 살펴보면, 아래와 같은 형식의 데이터 값이 들어있고, 이 데이터 값을 가지고 y가 음수인 경우에 점박이를 빨간색으로 변경해주려고 했다. 이를 위해 정말 많은.. 그야말로 삽질을 계속했는데..... // 1: series의 data 부분 data: charts.scatter.map(item => { retu..
[React] react-router-dom의 유용한 Hooks! 알아두면 유용하게 사용할 수 있는 세가지 hook을 알아보자! useHistory - history 객체는 페이지 전체를 리로드하지 않고 주소를 임의로 변경하거나 되돌릴 때 사용한다. - 또한, 화면 전환과 함께 데이터를 전달할 수도 있다. 아래 코드에서 history.push("other", {movie})를 보면 path 주소를 other로 바꿔줌과 동시에 해당 컴포넌트에 movie 데이터를 전달하게 된다. 그렇게 되면 하위 컴포넌트에서 다시 movie에 대한 정보를 비동기적으로 요청하여 가져오지 않아도 된다. 보통, 구글링에 찾아보면 history.push({ pathname: "/other", state: { movie }}) 이런식으로 많이 사용하던데, 아래 그림과 같은 방법이 더 간단하다! -..
[React] react-router react-router 서버에 요청을 보내지 않고 클라이언트의 브라우저에서 여러 페이지들을 이동할 수 있는 클라이언트 사이드 라우팅을 도와주는 비공식 라이브러리이다. , , , 는 라우팅 관련 컴포넌트들의 최상단에 위치해야하는 컴포넌트이다. 는 들을 관리하며, 다수의 path 중 일치되는 첫 번째 라우트를 실행하기 때문에 path 충돌로 인한 오류를 방지해준다. 는 path값이 브라우저의 URL과 일치할 때 특정 컴포넌트를 렌더링 해준다. import React from 'react'; import {BrowserRouter as Router, Switch, Route} from 'react-router-dom' import {MovieHome, TvHome, OtherDetails} from './sc..

티스토리툴바