프론트엔드 (9) 썸네일형 리스트형 [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.. 다시 주 5일제 - 일상 기록, 끄적끄적.. 벌써 10월 반이 지났다니 시간 너무 빠른거 아닌가?! 뭐했다고 이렇게 시간이 지나버린거지.. - 지난 주말에 백신 2차를 맞고 아주 푹 쉬었다. 공부와는 담을 쌓아버림..ㅎㅎ 백신 영향인지 몸이 물에 젖은 솜마냥 축 쳐지고 아주 무겁다😪 이런 몸을 이끌고 월요일 시작.. 이번주부터는 휴일이 없어 다시 주 5일제다! 지난 2주간 월요일 쉬어서 넘 좋았는데 아쉽다 ㅋㅋㅋ - 블로그에 요즘 넘 소홀했다.. 공부를 많이 못했기도 하고, 공부한 내용을 아직 제대로 정리하지 못해서 글을 적지 못한 것도 있다. 다시 열심히 해야지.....! 일단 오늘은 Pass 아직도 온 몸이 무겁다 타자 치는 손도 무겁무겁 [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, .. 이번 역은 '야근 요정', '야근 요정'역입니다. 유희열님의 '공원에서', 정말 들을 때마다 너무 좋다!! 이런 느낌의 뉴에이지 곡을 또 써주시길 기다리는 중..🧡 중요한 팁을 얻었다. 2시간 정도 고민해보고 그래도 안 풀리면 바로 질문하라고 뭔가 될 것 같으면서 안되니까 더 붙들고 있게 되고, 이런걸 질문해도 괜찮을까 싶었는데 계속해서 시간만 끌고 해결 못하는 것 보다 얼른 질문하는게 더 나은 것 같다. 오랜시간 혼자 끙끙거려도 안 풀리고.. 나름대로 충분히 고민한건데 2시간이나 넘으면 그건 내 범위를 벗어난 것일지도 모른다. 혼자 어떻게든 해결해보고 싶은 마음이 크지만 최대 두시간만 고민하고 그때까지도 풀리지 않는다면 바로 질문을 날려야겠다. 근데 정말 이건 좀 쉽게 할 수 있지 않을까, 간단하겠다 싶은 이슈가 막상 코드를 까보면.. 그렇지 않은 경.. [Highcharts] scatter 그래프 - 구간에 따른 marker 색상 구분 조금이라도 더 오래 기억하기 위해 남겨두는 기록! 기존 그래프에서 좀 더 가독성을 위해 차트를 조금 수정해야 했다. 먼저, 기존 차트의 뷰가 어떻게 나오는지 봐보자. 위와 같은 뷰에서 가운데 파란 구분선(y값: 0)을 기준으로 음수값은 빨간색, 양수값은 기존 색상을 유지하고 싶었다. 코드는 다음과 같다. 여기서 점박이를 그려주는 핵심은 'series'부분이다. DB에서 받아오는 series의 data를 살펴보면, 아래와 같은 형식의 데이터 값이 들어있고, 이 데이터 값을 가지고 y가 음수인 경우에 점박이를 빨간색으로 변경해주려고 했다. 이를 위해 정말 많은.. 그야말로 삽질을 계속했는데..... // 1: series의 data 부분 data: charts.scatter.map(item => { retu.. BGM - Butterfly / Loveholics - 위워크에는 소소한 이벤트가 있다🎁 오늘은 다가오는 추석 기념 떡과 텀블러, 캔 로제 와인을 받았다. 사진을 찍었어야 했는데 아쉽.. 다음엔 사진도 남겨놔야지~ - 오늘 조금 늦게 나왔더니ㅠ_ㅠ 어둑어둑한 하늘이 날 반겨줬다! 초저녁 하늘 구경이랑 달 구경을 제대로 못 해서 속상했지만, 내일이 또 있으니까 괜찮다^^ - 개발 관련 내용 외에 공부 겸 정리할 컨텐츠를 찾았다! 개발 관련은 아니지만, 업무와 연관성은 있어서 용어 등 공부해서 머리에 넣어야한다. 기본적으로 삶에 있어서도 알아두면 좋은 내용이기도 하기 때문에 한번 이번 기회에 개발 공부도 하고 더불어서 공부해봐야지~ - 그나저나, 집에 돌아와서 공부하기가 참 쉽지 않다.. 매우 피곤하고 몸이 무겁고... 😥 습관이 되지 않아서 그런가.. 얼른.. 이전 1 2 다음 목록 더보기
