Shadow DOM이란? 웹 페이지의 DOM 트리 안에 또 다른 독립되는 DOM 트리를 생성하는 방식입니다. Shadow DOM을 이용하면 웹 페이지 내의 요소들을 잘 캡슐화하여 외부에서의 접근 제한하고, 컴포넌트 간의 의존성을 관리할 수 있습니다. 우리가 많이 사용하는 input, button, video.. 등등 html 요소들이 shadow DOM으로 만들어진 요소들입니다. 이런 요소는 이미 기능, 동작, 모양, 스타일 등등 이미 만들어져 있는 템플릿이라고 볼 수 있습니다. 많은 div, span 등 그리고 내부 스크립트와 스타일 등을 결합하여 캡슐화하면 이렇게 shadow DOM을 만들 수 있습니다. 기본으로 제공하는 이런 html 요소 뿐만 아니라, 우리도 shadow DOM을 만들 수 있습니다..

개요 다들 한 번씩 노션을 사용해 보셨을 겁니다. 노션 안에는 표나 갤러리, 리스트 등 노션 데이터베이스 기능이 있습니다. 이 기능을 잘 쓰면 사용자나 팀원에 좋은 데이터베이스가 되죠. 만약 노션에 있는 데이터가 정말 유용한 데이터라면, 이 데이터를 이용해 서비스를 구축할 수 있습니다. 노션의 데이터베이스를 그대로 사용하면 되기 때문에 따로 데이터베이스를 만들 필요 없습니다. 물론 서비스가 커진다면 DB를 구축해야겠지만, 프로토타입을 위해 빠른 개발이 필요하다면, 노션 데이터베이스를 사용하는 것이 좋은 선택이 될 수 있습니다. 가벼운 사이드 프로젝트를 만드는데도 좋은 선택이 될 수 있습니다. 따로 DB를 구축하지 않고 그 과정에서 생기는 과금도 생길 일이 없습니다. 저도 노션 데이터베이스로 몇몇 사이드 ..

문제 vcruntime140_1.dll이(가) 없어 코드 실행을 진행할 수 없습니다. 프로그램을 다시 설치하면 이 문제가 해결될 수 있습니다. 라는 문구가 뜨면서 포토샵을 열 수 없는 문제가 발생할 수 있습니다. 이런 경우 다시 지웠다가 깔아서 잘 되면 문제 없겠지만, 지웠다 깔아도 이 팝업이 계속 뜰 경우가 문제입니다. 해결방법 아래 링크를 통해서 본인이 사용중인 컴퓨터의 운영체제와 프로세서에 맞게 패키지를 다운받습니다. https://learn.microsoft.com/en-US/cpp/windows/latest-supported-vc-redist?view=msvc-170 Latest supported Visual C++ Redistributable downloads This article lists..

V8 엔진은 구글이 개발한 고성능 자바스크립트 엔진으로, Google Chrome과 Node.js에서 사용됩니다. V8은 ECMAScript 및 Web Assembly를 표준에 맞게 구현하였으며, JavaScript 코드를 컴파일하여 매우 빠른 실행 속도를 보장합니다. Just-In-Time(JIT)이라는 컴파일링 기술을 사용하여, JavaScript 코드를 실행할 때 실시간으로 컴파일합니다. 그리고 안정적이고 안전한 구조를 가지고 있어, 코드가 비정상적으로 동작하거나 메모리 누수가 발생하는 경우를 막습니다. 이렇게 가볍고, 빠르고, 강력한 자바스크립트 엔진이기 때문에, 현재도 여러 응용 프로그램에서 사용되고 있죠. V8엔진의 구조 V8은 다양한 구성 모듈을 포함하고 있습니다. Ignition: 자바스크..

js string 이번 글또를 위한 포스팅을 위해 자바스크립트에 대한 지식을 공부 겸 포스팅해보려고 합니다. 이번에 알아볼 내용은 자바스크립트 String에 대한 내용입니다. 자바스크립트에서는 리터럴인 문자열을 다룰 때 사용하는 String이라는 객체가 있습니다. 이 String 객체는 문자열을 생성하거나, 검색, 치환, 추출, 분할 등의 작업을 수행할 수 있는 다양한 메소드를 제공합니다. 이번 포스트에서는 전체적으로 어떤 메소드가 있는지 간략하게 설명하고, 차후 몇몇 메소드에 대한 디테일한 내용을 다뤄볼까 합니다. javascript Property length length : 문자열의 길이를 반환합니다. 'hello world'.length // 11 javascript Method at at(ind..

22년의 시작 21년 10월에 마드라스체크에 입사하면서 플로우 SaaS 개발자가 되었습니다. 플로우를 개발하면서 플로우에 대해 많이 배워가고 22년이 되면서 수습을 마무리했습니다. 이제 플로우 찐가족! 일을 하면서 모르는 것이 많았지만, 그중 저에게 가장 필요한 게 뭘까 고민했습니다. 그러니 가장 먼저 나온 생각이 하나 있었습니다. 나는 자바스크립트를 잘 모르는구나! 공부해야겠다. 당시 플로우에서 gulp.js를 도입하여 자바스크립트 ES5를 지양하고 ES6를 사용하고 있던 중이었습니다. 저는 이전 회사에서 ES6를 조금이나마 썼지만, 도대체 어디까지가 ES5이고 어디까지 ES6인지도 몰랐죠. "플로우 개발자는 어차피 풀스택인 거, 제대로 알고 써야겠다!" 그래서 공부하기 시작했습니다. 처음은 뭐부터 시..

위의 애니메이션처럼 스크롤 하면 틀에 맞게 스크롤 되는 것을 스크롤 스냅 (Scroll Snap) 이라고 합니다. 이 스크롤 스냅도 자바스크립트 없이 오직 CSS로 만들 수 있습니다. 코드 .scroll-box.horizon { flex-direction: row; overflow: auto hidden; scroll-snap-type: x mandatory; } .scroll-box.vertical { flex-direction: column; overflow: hidden auto; scroll-snap-type: y mandatory; } .item { scroll-snap-align: start; min-width: 100%; } 위의 코드중 .scroll-box가 부모 element이며 .ite..

위와 같이 문단 가장 앞의 글자를 크게 써 두는 것을 Drop Cap 이라고 합니다. CSS에서 위와 같은 Drop Cap을 만드는 방법은 아주 쉽습니다. .drop-cap-text::first-letter { margin-right: 10px; font-size: xx-large; font-weight: bold; float: left; } 클래스명 뒤에 ::first-letter를 넣는 것이 핵심입니다. 그러면 맨 앞의 글자 하나만 CSS 속성의 대상이 됩니다. See the Pen drop cap by wooncloud (@wooncloud) on CodePen.

사진을 일부러 흑백사진으로 만들지 않아도 CSS를 이용하여 흑백사진으로 만들 수 있는 방법이 있습니다. CSS 속성 중 filter 속성이 있고, 이 속성에 grayscale을 조절할 수 있습니다. grayscale을 100%로 하면 완전한 흑백사진으로 만들 수 있습니다. 예시는 다음과 같습니다. .gray-scale { filter: grayscale(100%); } 간단하죠? See the Pen Grayscale by wooncloud (@wooncloud) on CodePen.

위의 사진과 같은 텍스트를 컷아웃(Cut out) 텍스트라고 합니다. CSS로 위와 같은 효과를 만드는 방법을 알아보겠습니다. .cut-out-text { mix-blend-mode: screen; } 가장 중요한건 mix-blend-mode: screen; 입니다. 텍스트에 배경을 믹스할 때 이러한 속성을 사용합니다. screen은 이미지 합성 방식입니다. 포토샵을 잘 다루고 익숙하신 분들은 아시겠지만, 속성이 많습니다. 이 부분은 차후 다루겠습니다. 그라디언트 배경 See the Pen Cut Out Text by wooncloud (@wooncloud) on CodePen. 사진 배경 See the Pen Cut Out Text2 by wooncloud (@wooncloud) on CodePen.

개요 이번 CSS 코드는 이렇게 카드에 배경화면을 넣고 linear-gradient를 넣어 페이드 효과를 주는 방법입니다. background shortcut을 사용하여 1. 그라디언트 2. 이미지 url 순서로 넣어서 효과를 완성할 수 있습니다. .card-fade-bg-right { background: linear-gradient(to right, #000F, #0000), url('image url'); } .card-fade-bg-left { background: linear-gradient(to left, #000F, #0000), url('image url'); } .card-fade-bg-top { background: linear-gradient(to top, #000F, #0000), ..

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

제가 여러분께 보여드릴 코드가 있습니다. 아래에 그 코드를 공유하니 한번 봐주시기 바랍니다. 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, []) } 블로그에 이렇게 코드를 공유..

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에 맞춤이라 어려워 보이지 않고 거부감이 없습니..

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

구글을 돌아다니다 재미있고 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으로 데이터를 보는게 익숙하지 않을 수 있..

이 문제는 회사에서 이미지 회전 현상이 일어난다는 QA를 받아서 수정하던 중 알게 되었습니다. 가끔 브라우저에서 사진을 업로드하거나 조회할 때 이미지가 본의 아니게 돌아가 있는 상태를 보실 수 있습니다. 요즘은 그런 현상이 거의 없지만, 2020년도에는 그런 현상이 있었습니다. 2022년 6월 15일부로 돌아가신 인터넷 익스플로러에도 아직까지 이러한 현상이 있습니다. 이 현상은 브라우저가 파일에 저장되어 있는 메타데이터를 읽고 대응해야 하는데, 그러지 못해서 생기는 일입니다. 일단 이미지 메타데이터는 어떤 것이 있는지 살펴보겠습니다. 메타데이터를 저장하게 해주는, 이미지 파일 포맷 : EXIF 디지털카메라, 스마트폰 카메라로 이미지를 찍으면 EXIF라는 이미지 파일 포맷입니다. EXIF는 JPEG, TI..

https://velog.io/@wooncloud/series/%EC%B9%9C%EC%A0%88%ED%95%9C-SQL-%ED%8A%9C%EB%8B%9D-%EC%8A%A4%ED%84%B0%EB%94%94 시리즈 | 친절한 SQL 튜닝 스터디 - wooncloud.log 인덱스 구조와 탐색 방법에 대해 알아보자! B*Tree와 인덱스 루트, 브랜치 블록, 리프 블록. 그리고 인덱스 수직적 탐색, 인덱스 수평적 탐색, 결합 인덱스 등 2022년 5월 8일 velog.io 통계정보와 비용 계산 원리 선택도와 카디널리티 선택도 선택도란, 전체 레코드 중에서 조건절에 의해 선택되는 레코드 비율을 말함. 가장 단순한 조건으로 검색할 때의 선택도만 살펴보면, 컬럼 값 종류 갯수를 이용해 아래와 같이 구한다. 💡 ND..

https://velog.io/@wooncloud/series/%EC%B9%9C%EC%A0%88%ED%95%9C-SQL-%ED%8A%9C%EB%8B%9D-%EC%8A%A4%ED%84%B0%EB%94%94 시리즈 | 친절한 SQL 튜닝 스터디 - wooncloud.log 인덱스 구조와 탐색 방법에 대해 알아보자! B*Tree와 인덱스 루트, 브랜치 블록, 리프 블록. 그리고 인덱스 수직적 탐색, 인덱스 수평적 탐색, 결합 인덱스 등 2022년 5월 8일 velog.io 기본 DML 튜닝 DML 성능에 영향을 미치는 요소 인덱스 무결성 제약 조건절 서브쿼리 Redo 로깅 Undo 로깅 Lock 커밋 인덱스와 DML 성능 INSERT 테이블 레코드를 입력하면 인덱스에도 입력해야 한다. 테이블은 Freelist..

https://velog.io/@wooncloud/series/%EC%B9%9C%EC%A0%88%ED%95%9C-SQL-%ED%8A%9C%EB%8B%9D-%EC%8A%A4%ED%84%B0%EB%94%94 시리즈 | 친절한 SQL 튜닝 스터디 - wooncloud.log 인덱스 구조와 탐색 방법에 대해 알아보자! B*Tree와 인덱스 루트, 브랜치 블록, 리프 블록. 그리고 인덱스 수직적 탐색, 인덱스 수평적 탐색, 결합 인덱스 등 2022년 5월 8일 velog.io 소트 연산에 대한 이해 SQL 수행 도중 가공된 데이터 집합이 필요할때, 오라클은 PGA나 Temp Tablespace를 사용. 그 대표적인 예가 소트머지 조인, 해시조인, 데이터 소트와 그룹핑이다. 소트 수행 과정 소트는 기본적으로 PGA..