본문 바로가기

분류 전체보기346

CSS - input [type="range"] 투명하게 만들기 (feat. 브라우저 별 속성 -web-kit-appearance) 슬라이더 바를 만들기 위해 을 사용하였다. 그랬더니 요런 귀여운 슬라이더가 나왔다. 하지만 native 태그를 사용하게 되면 브라우저별 호환성이 좋지 않아 ui 가 깨진다. (특히 IE10 에서는 아예 호환x) 그래서 input 을 투명하게 만들어 기능만 동작하게 하고 + 그 위에 예쁜 슬라이더 ui 를 올려서 꼭두각시 노릇을 하게 만드려고 한다. CSS - input [type="range"] 투명하게 만들기 (feat. 브라우저 별 속성 -web-kit-appearance) HTML setValue(e.target.valueAsNumber)} /> CSS input[type:range] { // 인풋창 투명하게 만들기 appearance: none; /* 공통 */ // 인풋창 포커스 시 아웃라인 제.. 2022. 9. 5.
CSS - white-space 란 문자열 안에 escape 문자들을 사용하다보니, white-space 속성을 함께 사용하게 되었다. 습관적으로 사용하는 것 말고 어떤 속성인지 자세히 알아보고 싶었다. 한번 익히고 나면 평생 내 것이 된다. 그럼 공부하러 가보자 CSS - white-space 란 텍스트에서 한 줄 혹은 한 칸을 띄울 때 공백이 생긴다. 이것을 white space 라고 한다. // 공식문서에서는 문자 사이의 vertical 혹은 horizontal 공간으로 정의 내리고 있다. Whitespace refers to characters which are used to provide horizontal or vertical space between other characters. css 의 white-space 는 이 공백을.. 2022. 8. 31.
React(81) 동시접속시 한쪽이 취소하면, 다른한쪽의 버튼 막기 두 회원이 중고제품을 거래중이라고 가정해보자. 거래를 하는데 판매자가 거래취소를 하게되면 실시간으로 구매자가 결제를 하지 못하게 막아야 불상사가 일어나지 않는다. 이런 막중한 책임감을 가지고 후덜덜하면서 짯던 코드를 공부용으로 다시 정리해보았다. 판매자 [취소하기] 버튼을 누르면 취소상태가 된다. 구매자 취소상태가 되면 즉시 [결제하기] 을 버튼을 막아야함 결과화면 미리보기 판매자 아이디로 접속해 있을 때 [취소하기] 버튼을 누르면 구매자 화면에서는 [결제하기] 를 누르면 결제 버튼이 활성화 → 비활성화 된다. React(81) 동시접속시 한쪽이 취소하면, 다른한쪽의 버튼 막기 payment 타입과 상태 변수 // 페이 진행상황을 타입으로 정리해보았다. type PayStatusType = 'start'.. 2022. 8. 21.
React(80) 객체 값을 동적으로 할당하기 나는 if 문과 switch 문의 신봉자였다. 하지만 조건문을 사용(남발)하게 되면, - 조건문이 속한 함수가 매번 렌더된다. - 조건에 맞는지 일일이 검사를 해야한다. 얼마전 사수님과 이야기하다 조건문을 최소화하여 객체의 키값으로 바로 해결할 수 있는 방법을 사용해보게 되었다. - 객체는 첫 렌더시에 이미 메모리에 저장되있고, 키값만 넣어주면 바로 가져올 수 있다. - 객체는 순서를 보장하지 않는다. (즉, 순서대로 검사한다는 개념 자체가 없다 원샷원킬) React(80) 객체 값을 동적으로 할당하기 원하는 자동차 회사를 알려주면, 회사별로 판매하는 차 가격에 대한 정보를 알려주는 코드라고 해보자. 일단 자동차 회사 타입을 정해주고, 차 가격 정보를 알려주는 객체도 만들어 보았다. (🐣 "흠 나는 신입.. 2022. 8. 18.
React(79) 숫자 세자리 마다 콤마 붙이기(comma seperator) 입력창에서 기본중의 기본! 숫자입력시 세자리마다 콤마를 붙여보자. toLocaleString() 을 붙이면 해결 ! ....?? 이 안되기도 한다. (우리가 사는 세상은 그렇게 호락호락하지 않다 🥲) 숫자를 string 형으로 입력받아야만 하는 경우가 있다. 이럴 때 onChange 메소드 안에서 string → number 로 형변환을 해서 toLocaleString() 을 사용해도 콤마( , ) 가 추가되는 순간 문자열로 인식되기 때문에 제대로 동작을 안하는 이슈가 생겨 버린다. 이런 경우 내장함수보다는 정규식을 사용하는 것이 더 좋다! 그럼 이런 까탈스런 경우를 해결하러 가봅시다 결과화면 미리보기 React(79) 숫자 세자리 마다 콤마 붙이기(comma seperator) 여기서 관건은 onCha.. 2022. 8. 13.
Network - CDN 이란 (Content Delivery Network) 요즘 CDN 을 이용하여 정적인 파일들 처리를 하고 있다. AWS cloud front 를 통해 url 을 받아 보내주긴 하는데 도대체 이녀석이 무엇을 하는 친군지 어떻게 동작하는지 원리가 궁금해졌다. Network - CDN 이란 (Content Delivery Network) 인터넷 통신을 할 때는, 웹사이트(서버) - 사용자(클라이언트) 간의 물리적 거리가 영향을 받는다. 콘텐츠 전송을 받을 때, 서버와 먼 지역의 사람들은 로딩이 길고, 가까운 지역의 사람들은 로딩이 짧다. 지리적 제약 없는 전송 퀄리티 유지를 위해 cdn 이라는 기술이 등장하였다. cdn 은 지리적으로 분산된 여러개의 서버(캐시서버 / PoP) 이다. 여러 지리적 위치에 접속 지점(POP) 또는 CDN 엣지 서버 그룹을 세팅해 놓.. 2022. 8. 8.
JavaScript - 정규식 Regular expression updated 06/28/23 오늘은 정규식의 날이었다 정규식이 나를 애먹였지만 덕분에 생동감있게 배웠다. 아래 내용은 내가 편하게 이해하려고 정리해놓은 규칙들이다. 서서히 늘려나갈 계획이다. JavaScript - 정규식 Regular expression 💡 기본 규칙 / _____ / 일단 정규식은 요런 형식을 사용한다. 슬래시로 감싸진 형태이다. / _____ / g 전체 문자열을 몽땅 검색한다 / _____ / i 대소문자를 구분하지 않는다 / _____ / gi 전체 문자열 몽땅 검색 + 대소문자를 가리지 않는다 / ^[0-9] / 여기서 ^ 는 시작을 의미한다. → 한마디로 0-9 인 숫자로 시작되는 문자를 의미한다. / [^0-9] / 괄호 안의 ^ 는 not 을 의미한다. → 한마디로 0-.. 2022. 7. 29.
React - TypeScript 실행오류 Cannot add property, object is not extensible 타입스크립트 에러가 났다. readonly 객체는 수정할수 없기 때문에 에러가 난것이다. 나의 경우는 redux 객체를 수정하려고 했기 때문에 에러가 나버렸다. React - TypeScript 실행오류 Cannot add property, object is not extensible 리덕스 값(객체)는 직접 수정할 수 없다. 그 이유는 상태 값은 불변 객체이다. 상태 값은 순수 함수에 의해서만 변경되어야 한다. 하지만 리덕스 객체를 직접 수정하려고 하니 당연히 나게된 에러였던 것이다. 객체를 직접 수정할 수 없다면 ? 복사해서 값을 고쳐주면 된다. (feat. 참조에 의한 복사) ** 참조에 의한 복사란 (더보기클릭) 더보기 객체를 만들면 객체 자체는 메모리에 저장되고, 변수에는 참조값만 저장이 된다... 2022. 7. 27.
Git(38) 삭제한 stash 복구 하기 git stash 는 다들 많이 알 것이다. 어느날 stash 를 하다가 실수로 drop 해버렸다. 이럴때 drop 해버린 stash 에 담긴 파일들을 복구해보자. Git(38) 삭제한 stash 복구 하기 1. 아래 명령어를 치면 내가 삭제한 commit 들이 나온다 $ git fsck --unreachable | grep commit | cut -d ' ' -f3 | xargs git log --merges --no-walk 하나하나씩 살펴보자면, $ git fsck // file system check 의 약자이다. database 의 connectivity 와 validity 를검사한다. $ --unreachable // Print out objects that exist but that aren.. 2022. 7. 19.
반응형

티스토리툴바