몽땅뚝딱 개발자

회사에서 스터디를 하게되었다. 테스트는 백엔드에서 더 많이 사용하고 편리함도 높다고 알고있지만 프론트엔드에서도 분명 큰 역할을 하리라 생각한다. 공부기록은 여기...✏️ 🔖 이펙티브 소프트웨어 테스팅 ∕ 읽는 중 be-a-weapon.tistory.com ◽️ 모카란? 테스트 프레임워크다. 노드JS에서 많이 사용된다. assertion을 지원하지 않는다. 그래서 노드JS에서 제공하는 assert 모듈을 사용하거나 다른 Assertion 라이브러리(예를 들어 chai)를 설치해서 사용한다. ◽️ 설치하기 노트JS에서 제공하는 assert 모듈을 사용할 수도 있지만 chai는 체이닝 할 수 있는게 장점이라고해서 결정했다. $ npm i --save-dev mocha $ npm i chai @types/cha..

new Array() vs [] 자바스크립트에서 배열을 선언하는 방식은 2가지가 있습니다. Array 객체를 이용한 선언 객체 리터럴을 이용한 선언 let arr = new Array(); let arr = []; 두 방식의 차이점에 대해 이야기해보도록 하겠습 withhsunny.tistory.com

display: none 과 visibility: hidden 둘 다 콘텐츠를 숨길 수 있지만, 스크린 리더로도 읽을 수 없기 때문에 접근성에 문제가 있다. 화면에는 보이지 않으며, 스크린 리더가 읽는 데에는 문제가 없는 clip 속성을 사용해 보자. clip 속성을 사용한다고 무조건 스크린 리더가 읽을 수 있는 것은 아니다. 스크린 리더는 width, height 사이즈가 0인 엘리먼트의 콘텐츠를 읽을 수 없으니, 엘리먼트의 사이즈는 최소 1px 이상으로 적용해야 한다. 예제) http://codepen.io/sogoonii/pen/JKaaRP /* 접근성에 문제가 있음 */ .sr-only { display: none; /* 화면에 보이지 않고, 스크린 리더도 읽어주지 않음 */ } .sr-only ..

[CSS] Transform ◽ Transform을 사용하는 이유 - 하드웨어 가속을 사용(GPU를 사용) 속력과 성능이 굉장히 좋다. CSS3를 적극적으로 사용할 수 있다면 transform을 사용하는 것이 좋다. position: absolute와 top, left를 사용하 be-a-weapon.tistory.com [CSS] Transition ◽ Transition - transition-property: all; - transition-duration: 1s; - transition-timing-function: ease; - transition-delay: 0s; transition: 1s 2s; // 1초동안 발생, 2초간 딜레이 transition-timing-function의 종류 - l..

일기를 열심히 쓰고있는데 매번 날짜를 적기가 귀찮아서 미루고 미루다가 찾아본 굿노트 속지만들기 키노트로 만들 수 있었다...! (😮) 굿노트 속지 만들기로 보는 아이패드 키노트 사용법 [가이드북 #2-1] 안녕하세요 ~! 가이드북 #1-24편까지 PPT로 굿노트 속지 만들기에 대해서 다루고 만든 굿노트 속지는 무료로 공유하는 글을 올렸는데요. 이제 가이드북 2번째 시리즈인 키노트로 굿노트 속지 만드 cloverc.tistory.com 굿노트 속지는 만들어야하는데 나는 단순히 표 형태를 원했기때문에.. 포토샵을 결제해야하나, xd를 결제해야하나 고민 중이었다. 하지만 키노트로 충분히 내가 원하는 형태로 만들 수 있었다. 야호 야호 이제 저 템플릿을 달별/주별로 만들면되는데 급한 불만 끄고 시간나면 하려고 ..

∕ 2023-07

https://velog.io/@ddingmun8/CSS- CSS - display 속성값이 inline 또는 inline-block 일때 여백 없애기 display 속성값이 inline 또는 inline-block 일 때 여백 없애는 방법 velog.io

📄 HTML Toast 토스트 띄우기 토스트 문구입니다. 두 줄 짜리 토스트 문구입니다. 토스트 문구입니다. 방법 1. inline을 사용한다. #test-area { .toast { position: fixed; left: 10px; right: 10px; top: 350px; padding: 20px 24px; background-color: #2f2f2f; border-radius: 16px; i { display: inline-block; width: 20px; height: 20px; margin-right: 10px; line-height: 28px; letter-spacing: -0.2px; vertical-align: middle; > img { width: 100%; height: 100..

1. 공백을 제거하자 ◽️ 공백문자 제거하기 $ git diff --check 2. 각 커밋은 논리적으로 구분되는 Changeset 최대한 수정사항을 한 주제로 요약한다. 여러가지 이슈에 대한 수정사항을 하나의 커밋에 담지 않는다. 한 커밋 당 이슈 하나를 담는다. 작업 내용을 분할하고 각 커밋마다 적절한 메세지를 작성한다. 여러 번 나누어 커밋하는 것이 다른 동료가 수정한 부분을 확인할 때나 시점을 복원해서 검토할 때 이해하기 쉽다. 3. 좋은 커밋 메세지 작성하기 메시지의 첫 라인에 50자가 넘지 않는 간략한 메시지를 적어 해당 커밋을 요약한다. 한 라인은 비우고 그 다음 라인부터 커밋을 자세히 설명한다. 영문 50글자 이하의 간략한 수정 요약 자세한 설명. 영문 72글자 이상이 되면 라인 바꿈을 하..

https://camp.lemonbase.com/self_review