본문 바로가기

웹 프로그래밍96

WEB DEVELOPER ROADMAP 2020 (by.kamranahmedse) https://github.com/kamranahmedse/developer-roadmap kamranahmedse/developer-roadmap Roadmap to becoming a web developer in 2020. Contribute to kamranahmedse/developer-roadmap development by creating an account on GitHub. github.com 웹 개발자 로드맵이 있다는 것을 알고 있었고, 그걸 구글로 검색해가며 이미지를 찾아보고는 했었는데 이 분이 만드시고 계시다는걸 알게 되어 글로 남긴다. 2020. 8. 20.
[Joi] Joi.validate is not a function 오류 해결 나온지 조금 시간이 지난 책들을 보면 const result = Joi.validate(body, schema); Joi를 이런식으로 쓴다. 하지만 바뀌었는지 계속 Joi.validate is not a function 이란 오류만 내고 답이 없어서 찾아봤다. 새로운 문법으로 바뀐듯 하다. const validation = schema.validate(body); 이런식으로 schema에 validate함수를 실행하고, 인자로 body를 넣는다. 2020. 8. 17.
[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.

티스토리툴바