TIL

네개의 컵에 단계가 다른 물을 준비한다. 1단계부터 4단계까지 있으며, 단계가 올라갈수록 컵에 물이 차오르고, 물의 색은 위험을 나타내는 붉은색을 띈다.가장 높은 단계인 4단계에서는 물이 넘치면서 살짝 튀기는 모습도 구현했다.(어색하지만,,😢)준비한 물은 다음과 같다

어제 작성한 "랜덤 숫자에 따라 SVG 출력"의 애니메이션은 많이 어색하다.컵을 그리기 시작할 때, svg가 그려지는 원리조차 몰랐기 때문에 path를 이용해서 한땀한땀 그려냈는데, 이젠 완성도를 위해서 snap라이브러리를 사용하려고 한다.(Snap.svg에서는 SVG

프로젝트는 문서로 시작해서 문서로 끝나는데,,,작성할 때마다 다른 형식으로 플로우차트를 그리는 문제를 해결하기 위해서 Visual Studio Code에서 PlantUML을 사용했다.VSCode Marketplace에서 간편하게 설치했다.VSCode에서 PlantUML

어제의 TIL에서 PlantUML을 시작했다. 간단한 flowChart그리는 방법을 어제 다뤘는데, 오늘은 PlantUML로 엄청나게 다양한 그림을 그릴 수 있는것을 배워서 간단하게 정리하려고 한다.

gh-pages란?? 시작하기!!

MDN에서 이야기하는 스프레드 연산자는 다음과 같다.전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시킬 수 있습니다.ES6에

이 글에서는 map(), filter(), foreach(), includes(), push()만 다룹니다. TIL 오늘 TIL은 자바스크립트 배열에서 유용하게 사용되는 함수에 대해 정리! map() 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를

React 상태관리를 이용해서 자식이 부모에게 데이터를 전달하는 방법은 미디엄 포스팅에서 작성했습니다. 이 포스팅이 위 링크와 다른점은 다음과 같습니다.1\. 함수 컴포넌트 사용2\. Router 사용매우 간단한 예제로 바로 알아보겠습니다. 포스팅에 필요하지 않은 모든

미디엄에서 리액트 상태관리 라이브러리 리코일에 대한 글을 작성했었다.상태관리 라이브러리의 특성상 새로고침하거나 페이지를 닫을 때 저장소에 저장된 상태는 삭제된다. 페이지가 변경되더라도 상태관리를 유지하기 위해 Recoil-persist를 사용했다.사용법은 Recoil과

localStorage와 sessionStorage를 참고해서 정리한 포스트입니다. 자세한 내용은 링크를 통해 확인해주세요.웹 스토리지 객체(web storage object)인 localStorage와 sessionStorage를 사용해서 브라우저 내에 키-값 쌍을

Nomadcoders 리액트 강의중에 정리를 위해 포스팅하며, 예제의 출처는 Nomadcoders 리액트 2주 완성 챌린지 입니다.prop-types는 타입을 확인하기위한 라이브러리이다.설치를 위해 npm에서 확인한 결과 다운로드 수가 어마어마하다.prop-types

기준 Element에서 부터 closest()메소드를 통해 자신부터 부모 요소 단위로 출발하여 각 요소가 지정한 선택자에 만족할 때 까지 탐색(문서 루트까지 이동), 이 중 가장 가깝게 조건에 만족한 부모 요소가 반환, 조건에 만족한 요소가 없으면 null 반환Docu

파일과 디렉토리를 트리 형태로 출력\-d : 디렉토리만 표시\-f : 파일의 전체 경로 표시\-df : 전체경로까지 포함된 서브디렉토리 표시\-a : 숨겨진 파일까지 표시\-L : 표시할 디렉터리 단계 표시\-p : 파일 권한까지 표시\-I : 특정 폴더 제외

Selenium에 대한 포스팅은 아래를 참고해주세요.React에 Selenium 시작하기셀레니움을 이용해서 크롤링을 진행하다보면 접근하려는 요소가 존재하지 않을 때 발생하는 NoSuchElementException에러를 종종 발견할 수 있다.페이지와 서버가 통신중이거나

SDK(Software Development Kit) 소프트웨어 개발 도구 모음 애플리케이션 개발에 도움이되는 도구, 라이브러리, 문서 및 샘플 코드가 포함 대부분의 SDK는 프로그래머가 SDK의 프로그래밍 언어를 사용하도록 장려하기 위해 무료로 제공 SDK는 서로 호

all CSS all 단축 속성은 요소의 unicode-bidi (en-US), direction (en-US), CSS 사용자 지정 속성을 제외한 모든 속성을 초기화합니다. 초깃값, 상속값, 아니면 다른 스타일시트 출처의 값으로 설정할 수 있습니다. 속성 all 속

CentOS7에 php를 설치하면 기본으로 php5.6을 가진다.php7을 설치하는데 너무 많은 삽질을 해서 기록한다.php72는 php7.2버전을 의미한다.php7.1설치를 원할 경우 php71, php 7.3설치를 원할 경우 php73 처럼 변경해주면 된다.Turn

너무너무 유용하게 쓰고 있는 grep 명령어를 깊이 알아보기 위해 정리한다.grep명령어는 리눅스 명령어 중에서도 엄청나게 유용한데, 파일이나 표준입력(stdin) 으로부터 패턴을 찾아주는 역할을 한다. 즉, 특정 문자열을 찾는다고 생각하면 된다.옵션은 대소문자를 구분

프레임으로 구분된 하나의 프레임들 각각이 window객체를 별도로 가지는데, 아래의 속성으로 구분된다.top : 윈도우 내에서 제일 처음에 정의된 프레임. 최상위 window 객체parent : 현재 프레임의 부모에 해당하는 프레임self : 자기 자신의 프레임그 외

구현을 하다보면 반복 함수를 실행해야 할 필요가 생긴다. 사용하는 방법중 대표적인 방법으로는 setInterval과 setTimeout이 있다.일정 시간을 기준으로 두고 반복!일정 시간 후 함수 실행하는 것으로 예제는 다음과 같다.순차적 실행을 보장하지 않음 : 100

이 포스팅은 파이썬의 예외처리 방법을 다루며, 점프 투 파이썬에서 많은 도움을 얻어 작성했습니다.

SCSS 선택자 &: vs &:: vs &.

전역변수에 Object를 담아서, ajax 응답값의 Object와 비교하는 함수를 구현했습니다.

불필요한 렌더링을 방지한다구?!😲

프론트엔드 면접 질문❗️ 면접에서 얼굴 붉히는 일은 없도록 알고가기🤫

꿀팁이다 꿀팁~!!🍯

branch에 특수문자가?!

모듈 설치로 간단하게!

웹폰트는 기본이지!

이제 삽질은 그만~🙅‍♀️

flex에서 특정 클래스만 우측으로 정렬하기!