본문 바로가기

분류 전체보기253

[RegEx] Regular Expression 공부 - 글자 해당 글자 포함 [ABC] 해당 글자 미포함 [^ABC] 글자 범위 내 [A-Z] 줄바꿈 외 모든 문자 . 줄바꿈도 포함한 모든 문자 없는 것의 반대이기 때문에 모든 것도 된다. [\s\S] [^] 단어 아래 표현식과 같다. \w [A-Za-z0-9_] 단어가 아닌 것 위에 것을 대문자로 쓴다. [\W] 2020. 8. 12.
[SSL] SSL 인증서 | 인증방법, 암호화 비교 새로운 인증서를 적용하기 위해 알아보던 중, 같은 WILDCARD인데 인증방법과 암호화, 안전배상금 보험에서 차이가 있었다. 보험은 뭔지 알겠는데 나머지 두개를 모르겠어서 알아봤다. 인증방법 발급절차 도메인 권한 인증 기업 실체성 인증 신원확인 인증 DV 필수 없음 없음 OV 필수 필수 필수 암호화 128/256bit | 강제 SGC 보안 적용 128/256bit | 강제 SGC 보안 적용 이라는 용어가 적혀있었다. 낮은 버전의 브라우저(IE 등)에서는 SGC가 없으면 약한 40bit 암호를 사용하여 연결될 수 밖에 없다. 40bit는 2013년 기준으로도 단 몇시간만에 파괴되는 취약한 암호화다. 따라서 그럴때 128bit로 강제 보안 적용을 해 주는 것이다. 이는 낮은 버전을 위한 것이고 높은 버전의 .. 2020. 8. 12.
[Node] node 버전 바꾸기, pm2 사용시 유의사항 (The "mode" argument must be integer. Received an instance of Object) 배경 개발 서버와 실서버의 node버전이 갑자기 달라져서 한동안 애를 먹었습니다.. 이상한 에러가 나고... 해결한 뒤 글을 쓰는거라 기억이 완벽하진 않겠지만 최대한 그대로 써보려고 합니다. 발단 먼저 이와 같은 에러가 났습니다. The "mode" argument must be integer. Received an instance of Object 여기서 가장 큰 문제였던 것 중 하나... 우리의 프로젝트에서 "mode"라는 변수를 써서 우리 변수의 문제인 줄 알았던 것, 또한 integer 검사를 하는 것으로 보아, 우리도 같은 검사를 하기에 우리의 변수라고 한번 더 확신했던 것. 이었습니다. 자포자기한 마음으로 그런 고정관념을 버리고 위의 문구를 그대로 검색했더니, 아니 "mode"는 빼고 검색했습.. 2020. 8. 9.
[CSS] 글자에 테두리 적용하는 방법 (text-stroke, text-shadow) 배경 오늘은 글자에 테두리를 줄 일이 생겼다. 있을까? 하면서도 있을거 같았는데 혹시나 box-shadow처럼 box에 먹어버리는게 아닐까 걱정했다. 하지만 잘 나왔다. h1 { -webkit-text-stroke-width: 3px; -webkit-text-stroke-color: white } 위와 같이 두께, 색상을 설정할 수 있다. 결과 줄여서 쓸 수도 있다. h1 { -webkit-text-stroke: 3px white; } 하지만 위 방법은 요즘 지원되지 않는다는 말이 있어서 다른 방법도 알아봤다. 다른 방법 text-shadow을 이용한 방법: /* 텍스트에 테두리를 주는 스타일 */ .text-with-border { color: white; /* 텍스트 색상 */ font-size: 3.. 2020. 8. 7.
[HTML] a tag href="#" 아이디로 부드럽게 스크롤 하기,scroll-behavior div에 아이디를 잡아놓고 nav a tag에 href="#id"로 주었다. HTML 서비스 ... 여기서 스크롤을 부드럽게 하려면 js가 필요할 줄 알았는데 그렇지 않았다. CSS html{ scroll-behavior: smooth; } 위 처럼 html태그에 전체적으로 scroll-behavior: smooth; 로 주면 된다. 하지만 JS로 구성할 수도 있다. function onLinkClick() { document.getElementsByTagName('h2')[3].scrollIntoView(); } 와 같이 사용할 수 있나보다. 또는 $('.smooth-goto').on('click', function() { $('html, body').animate({scrollTop: $(this.h.. 2020. 8. 6.
[CSS,JS] 모바일에서 강력 새로고침, CSS,JS 적용 안될 때 CSS를 수정했는데 안먹는 경우가 있다. 이럴 경우 데스크탑 웹에서는 Ctrl + F5 를 사용해서 캐시를 날리고 새로운 파일을 받아와 적용시킬 수 있다. 하지만 이것도 어쩌다 안될 경우도 있고, 모바일에서 강력 새로고침을 하기란 쉽지 않은 일이다. 그리고 사용자가 안된다고 강력 새로고침을 해서 볼 일도 없다. 따라서 css 파일을 새로 받아올 수 있게 새로운 css파일처럼 위장하면 된다. 가 있을 때, href="...style.css" 뒤에 ?를 주어 기존 파일에 영향을 끼치지 않고, 새로운 파일로 보일수도 있게 하는 것이다. 아래와 같이 사용한다. 모바일에서 잘 먹지 않아 고생이었는데 잘 먹어서 다행이다. 2020. 8. 5.
[CSS] textarea 크기 고정 및 다른 속성들 textarea를 사용하다가 크기 조절할 수 있는 부분이 거슬려서 빼려고 알아보다가 textarea 속성을 조금 정리해보면 어떨까 해서 적어본다. 먼저 알아보게 된 계기인 resize textarea { resize: none; } css로 설정할 수 있고, 엄청 간단하다. 다른 속성들을 더 살펴보자면 autocapitalize iOS Safari Mobile에서만 사용되는 비공식 속성이다. 첫 문자값을 대문자로 해준다. autocomplete 자동완성, on, off로 설정한다. autofocus 페이지가 로드됐을 때, 포커스를 받을 지 정의한다. 등등... cols, rows, placeholder, disabled 는 많이 쓰이니 생략한다. 하지만 새롭게 알게 된 사실을 적자면 cols는 기본값이 .. 2020. 8. 4.
[REACT] Context API, useContext hook, Redux 개념 전역적으로 사용할 데이터가 있을 때 사용 Consumer createContext로 기본 설정 한 값을 사용하는 메소드 Provider createContext로 설정한 값 외에 사용하고 싶은 값을 지정할 때 쓰는 메소드 value 없이 사용 할 경우 기본값도 사용하지 않기 때문에 에러가 난다. useContext 리액트 내장 훅, 함수형 컴포넌트에서 Context를 쉽게 사용할 수 있다. Redux 가장 많이 사용하는 리액트 상태 관리 라이브러리 Context API의 상위 버전 쯤으로 생각하면 될 것 같다. 상태를 더욱 체계적으로 관리하고 유지보수도 수월하다. 꼭 리액트 안에서만 써야하는 것도 아니다. Redux의 구성 액션 액션 생성 함수 리듀서 스토어 디스패치 구독 Redux 세 가지 규칙 .. 2020. 8. 1.
[LESS] media query, 미디어 쿼리 쓰는 방법 LESS로 미디어 쿼리를 쓰는 방법입니다. 원래의 CSS는 @media screen and (max-width: 1200px) { .top_nav ul { float: none; } } 와 같은 형식으로 써야 합니다. 이것을 LESS로 쓰려면? /* 설정 */ @tablet : "@media screen and (max-width: 1200px)"; /* 사용 */ @tablet { float: none; } /* 결과 */ @tablet { float: none; } 로 설정해서 위와 같은 형식으로 쓰려고 했는데 실제 결과물은 컴파일이 되지 않고 그대로 나옵니다. 그러면 어떻게 해야 하나 찾아보니 생각보다 조금 더 귀찮은 방법으로 해야합니다. @media 쿼리는 써주고, 뒤에 부분만 변수로 만들어서 줄.. 2020. 7. 30.

티스토리툴바