분류 전체보기

[CSS] 긴 글자를 Fade Out으로 숨기는 CSS

See the Pen long text fade out by wooncloud (@wooncloud) on CodePen.

코드 예쁘게 이미지화 해주는 사이트 모음

코드를 예쁘게 이미지로 만들어주는 툴 - carbon.now.sh — Wooncloud Blog (tistory.com) 코드를 예쁘게 이미지로 만들어주는 툴 - carbon.now.sh 제가 여러분께 보여드릴 코드가 있습니다. 아래에 그 코드를 공유하니 한번 봐주시기 바랍니다. const pluckDeep = key => obj => key.split('.').reduce((accum, key) => accum[key], obj) const compose = (...fns) => res => fns.re wooncloud.tistory.com 예전에 위의 링크와 같은 내용으로 포스트를 쓴 적이 있었습니다. 그런데 carbon 사이트보다 좀 더 예쁘고 유용한 사이트들이 많아서, 이번에 코드를 이미지화 해..

정규식을 이용한 공격 - ReDos

정규식을 이용한 공격 ReDos ReDOS는 정규표현식을 사용자로부터 입력받았을 때 발생할 수 있는 보안 문제입니다. 특정 정규식 패턴은 입력값을 평가하는데 오래 걸립니다. ReDos는 이를 이용해 정규식 평가에 오랜 시간이 걸리게 하는 알고리즘 복잡성 공격입니다. 타깃이 되는 정규식 로직은 자체적으로 반복되는 그룹이 주원인이며, 이 정규식에 어느 정도 만족하는 대량의 문자 등을 입력하여 가용성이 떨어지게 만듭니다. ReDos 원인은 정규식을 평가하는 엔진이 Backtracking을 사용하는 엔진이라면 발생합니다. 주로 NFA (Nondeterministic Finite Automaton) 엔진이 그 원인입니다. NFA 방식은 JAVA, javascript, .NET, PHP, Perl, Python, ..

웹사이트에 눈 내리게 하기

정말로 간단하고 예쁘게 자신이 만든 웹에 크리스마스를 맞이하여 눈을 내리게 해봅시다. https://embed.im/snow/ 위의 링크에 들어가면 확인할 수 있습니다. 방법은 정말 간단합니다. 위의 스크린샷에서 보시다시피 아래와 script를 추가하면 됩니다. See the Pen Snow (Pure CSS) by alphardex (@alphardex) on CodePen.

손으로 그린듯한 다이어그램 툴 - Excalidraw

개요 Excalidraw는 손으로 그린듯한 러프한 다이어그램을 그리는 툴입니다. 이번에 추천하는 프로그램은 정말 정말 추천하는 프로그램 중 하나입니다. 많은 사람들이 PPT로 순서도를 그리죠. 하지만 PPT는 순서도를 그리는데 최적화되지 않기 때문에, 사용성에 불편함이 많이 있습니다. Excalidraw는 이런 순서도를 쉽게 그릴 수 있게 최적화되어 있습니다. 그리고 프로그램이 가볍고 브라우저 환경에서 사용합니다. 가장 좋은 기능은, 공유 세션을 만들어서 다른 사람을 초대해 함께 협업할 수 있는 것이 큰 장점입니다. https://excalidraw.com/ Excalidraw — Collaborative whiteboarding made easy Excalidraw is a virtual collabo..

코드를 예쁘게 이미지로 만들어주는 툴 - carbon.now.sh

제가 여러분께 보여드릴 코드가 있습니다. 아래에 그 코드를 공유하니 한번 봐주시기 바랍니다. const pluckDeep = key => obj => key.split('.').reduce((accum, key) => accum[key], obj) const compose = (...fns) => res => fns.reduce((accum, next) => next(accum), res) const unfold = (f, seed) => { const go = (f, seed, acc) => { const res = f(seed) return res ? go(f, res[1], acc.concat([res[0]])) : acc } return go(f, seed, []) } 블로그에 이렇게 코드를 공유..

Postman 대신 사용하는 VS Code API Test Extention - Thunder Client

https://www.thunderclient.com/ Thunder Client - Rest API Client Extension for VS Code Thunder Client is a hand-crafted lightweight Rest API Client extension for Visual Studio Code www.thunderclient.com 비주얼 스튜디오 코드를 사용한다면 Postman을 또 설치할 필요 없이 Rest API를 테스트할 수 있습니다. 사용 화면 Thunder Client의 전반적인 모습입니다. 만든 테스트를 저장하고 불러올 수 있고, 테스트에 필요한 여러 가지 필수 기능들이 있습니다. UI와 디자인이 심플하고 VS Code에 맞춤이라 어려워 보이지 않고 거부감이 없습니..

배워보자 정규표현식! (Regular Expression)

정규표현식이란? 특정한 규칙을 가진 문자열의 집합을 표현할 때 사용하는 형식 언어입니다. 주로 문자열의 특정 부분을 찾거나, 다른 문자열로 대체하거나, 특정 문자열을 추출할 때 사용합니다. 정규표현식은 다른 말로 정규식, Regexp, Regex라고 불리기도 합니다. /^[\w.%+\-]+@[\w.\-]+\.[A-Za-z]{2,3}$/ig 이것이 정규식의 모습입니다. 이메일 패턴을 간단하게 표현한 정규식인데, 처음보면 정말 무슨 소리인지 파악하기 힘들 겁니다. 하지만 개발자는 많은 자연어 속에서 특정 문자를 추출하고 가공하고 수정할 수 있어야 합니다. 불규칙한 자연어 속에서 특정 패턴을 찾아 처리하려면, 일반적으로 if문을 사용합니다. 하지만 if문을 그렇게 사용하다간 if 속에 if, 그 속에 if, ..

JSON 구조를 그래프로 보자! JSON Crack

구글을 돌아다니다 재미있고 JSON 사용에 좋아보이는 사이트 하나 발견해서 포스팅하게 되었습니다. JSON을 입력하면 그 구조를 트리 그래프로 한눈에 확인이 가능한 유용한 사이트입니다. https://jsoncrack.com/ JSON Crack - Crack your data into pieces Simple visualization tool for your JSON data. No forced structure, paste your JSON and view it instantly. jsoncrack.com 이렇게 json을 입력하면 그 구조를 트리로 확인할 수 있는 사이트입니다. 개발자는 json을 사용하기에 편하지만, 기확자나 IT 관련 다른 직업은 json으로 데이터를 보는게 익숙하지 않을 수 있..