몽땅뚝딱 개발자

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

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

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글자 이상이 되면 라인 바꿈을 하..

◽️ Long-Running 브랜치 배포했거나 배포할 코드만 master 브랜치에 merge하여 안정 버전의 코드만 master에 두는 방식이다. 개발 브랜치는 공격적으로 히스토리를 만들어 나아가고 안정 브랜치는 이미 만든 히스토리를 뒤따르며 나아간다. ◽️ 토픽 브랜치 토픽 브랜치는 프로젝트 크기에 상관없이 사용할 수 있는데, 어떤 한 가지 주제나 작업을 위해 만든 짧은 호흡의 브랜치이다. 다른 버전관리 도구와 달리 git은 브랜치를 하나 만드는 데 큰 비용이 들지 않는다. hotfix용 브랜치가 대표적인 토픽 브랜치이다. 1) 같은 이슈를 다른 방법으로 해결해보고 싶을 때 2) 작업을 유지하고 master 브랜치에 merge 할 시점을 기다릴 때 출처 및 참고 프로 Git, Scott Chacon, ..

◽️ 파일 이름 변경하기 $ git mv gile_from file_to mv는 단축어로 사실 아래처럼 동작한다. $ mv README.md README $ git rm README.md $ git add README ◽️ 커밋 재작성하기 Staging Area를 사용하여 커밋한다. $ git commit --amend 커밋을 했는데 Stage 하는 것을 깜빡하고 빠뜨린 파일이 있으면 아래와 같이 고칠 수 있다. $ git commit -m 'initial commit' $ git add forgotten_file $ git commit --amend ◽️ 리모트 저장소 이름 변경하기 $ git remote rename $ git remote rename pb paul ◽️ Alias 만들기 이미 있는 ..

로그 파일이나 빌드 시스템이 자동으로 생성한 파일은 Git이 관리할 필요가 없다. *.[oa] // 확장자가 ".o"나 ".a"인 파일을 무시하라 *~ // ~로 끝나는 모든 파일을 무시하라 ◽️ .gitignore의 패턴 - 아무것도 없는 라인이나, '#'로 시작하는 라인은 무시한다. - 표준 Glob 패턴을 사용한다. 이는 프로젝트 전체에 적용된다. - 슬래시(/)로 시작하면 하위 디렉토리에 적용되지 않는다. - 디렉토리는 슬래시(/)를 끝에 사용하는 것으로 표현한다. - 느낌표(!)로 시작하는 패턴의 파일은 무시하지 않는다. ◽️ Glob 패턴 정규표현식을 단순하게 만든 것이다. - 애스터리스크(*)는 문자가 하나도 없거나 하나 이상을 의미한다. - [abc]는 중괄호 안에 있는 문자 중 하나를 의..

◽️ 카드 만들기 .contents-place { .card { // ... transition: 1s; transform: rotateY(0deg); // 미리 준비시켜야 성능에 좋다. transform-origin: left; // 변경이 일어나는 위치를 바꿀 수 있다. } &:hover { .card { transform: rotateY(180deg); } } } ◽️ 카드 만들기2 .contents-place { display: flex; align-items: center; justify-content: center; perspective: 500px; .card { position: relative; width: 60px; height: 100px; transform: rotateY(0deg)..

◽ animation - frame by frame animation은 gif를 사용하면 이미지 깨짐현상 등으로 의도한대로 노출되지 않을 수 있다. 애니메이션을 CSS로 구현하면 커스텀이 쉽다. @keyframes dot { 0% { opacity: 0.2; } 25% { opacity: 1; } 50% { opacity: 0.2; } 100% { opacity: 0.2; } } /* linear: 일정한 속도 */ /* alternate: 반복하기 */ /* reverse: 반대로 시작 */ /* alternate-reverse: 반대로시작해서 반복 */ /* forwards: 애니메이션이 끝난 위치에서 끝남 */ /* steps: 애니메이션을 17단계로 자름 */ .dot { animation: do..