You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
![[Cypress Studio] 📝 더욱 간편해진 웹 테스트 자동화 툴](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FZbayB%2FbtsFOTTi6SS%2F5K1CEEYIcXwrI1K5FvbEC0%2Fimg.webp)
[Cypress Studio] 📝 더욱 간편해진 웹 테스트 자동화 툴
Cypress Studio 소개 앞선 시간에 자바스크립트에 익숙하다면 쉽게 접할 수 있는 테스트 라이브러리인 cypress 에 대해서 기본적인 사용법을 알아보았다. -------------------------------------------------- 링크 박스 --------------------------------------------------- 이처럼 기본적으로 테스팅을 위한 동작을 일일히 프로그래머가 코드를 짜야 하는데, 그러면 비전공자혹은 비개발 직군이 E2E 테스트를 하기 위해선 프로그래밍을 배워야 하는 러닝 커브가 있으며, 또한 테스트 케이스 수만큼 비슷한 E2E 테스트 코드를 반복적으로 작성해야 하여 테스트 코드 작성 시간이 오래걸리게 된다는 아쉬운점이 있다. 그래서 이를 좀 더 편..
![[Cypress] 📝 웹 테스트 자동화 사용법 👀 한눈에 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FPJAiq%2FbtsFACZXDyM%2FO45jZjmlNEuvOBfGE1PZ00%2Fimg.webp)
[Cypress] 📝 웹 테스트 자동화 사용법 👀 한눈에 정리
Cypress 소개 소프트웨어 테스팅은 소프트웨어의 품질을 보장하고 결함을 예방하고 수정하는 데 매우 중요한 과정이다. 특히 지속적이고 반복적이고 자주 일어나는 작업들은 가능한 자동화하고 효율적으로 수행하는 것이 좋다. cypress는 웹애플리케이션을 테스트하기 위한 자바스크립트로 작성된 가벼운 라이브러리로, 실제 애플리케이션과 테스트 코드를 동일한 브라우저에서 실행하는 방식을 취하고 있다. 브라우저 기반의 GUI를 사용하여 테스트의 실행 상태를 확인하고 디버깅할 수 있는 다양한 편의 기능을 제공한다. 예를들어 실행된 모든 테스트 명령과 각 명령이 실행될 때의 UI 상태를 스냅샷 형태로 모두 저장해 특정 시점의 UI 상태를 눈으로 확인할 수 있다. 또한 전체 테스트 진행 과정을 동영상으로 저장하거나 테스..
💻 Window 10 컴퓨터 부팅 / 절전 시간 확인하기
윈도우 10 부팅 / 절전 시간 확인하기 가끔 사내에서 출퇴근을 하였는데도 사원의 실수로 출퇴근을 찍지 않았거나 혹은 전산 오류로 인해 기록이 남아 있지 않은 경우, 자신의 출퇴근 기록을 증빙할 수 있는 자료를 요청할 수 있다. 이에 대한 대표적인 증명 방법으로 자신의 컴퓨터 시스템 부팅 기록을 확인하는 것인데, 이는 윈도우 OS의 이벤트 뷰어를 통해 확인 할 수가 있다. 1. 이벤트 뷰어 실행하기 우선 이벤트 뷰어를 실행한다. 방법은 다음과 같이 두가지로 이행이 가능하다. Win+X 키를 누르고 이벤트 뷰어 메뉴를 클릭하여 실행하거나, Win+R 키를 눌르고 실행 입력창에 "eventvwr" 를 적고 실행하면 된다. 2. 로그 필터링 하기 각 컴퓨터 동작을 나타내는 윈도우 이벤트 ID 라는 것이 존재하..
🤔 스레드를 많이 쓸수록 항상 성능이 좋아질까?
스레드를 많이 쓰면 쓸수록 성능이 높아지는가 프로세스와 스레드를 처음 학습할때, 스레드는 프로세스 내에 존재하는 실행 단위이며, 이 스레드가 여러개인 덕분에 우리가 음악을 들으며 웹서핑을하거나 파일을 다운 받는 '동시 작업'이 가능하다라고 배웠을 것이다. 그래서인지 이러한 질문에 대해 깊게 고민할 필요 없이, 스레드가 많을 수록 동시 처리 작업 수가 증가하는 것이니, 당연히 멀티 스레드가 무조건 성능이 더 좋다고 생각할 것이다. 하지만 모든 상황에 대해 무조건 멀티 스레드가 싱글 스레드보다 무조건 좋다고 말할 순 없다. 모든 기술들에는 각각의 기회비용이 존재하고, 싱글 스레드와 멀티 스레드 역시 각각의 장점에 맞는 기회비용들이 존재하기 때문이다. 이 부분은 스레드를 겉햝기로만 배운 지원자를 걸러내기 위해..
🔄 자바스크립트 이벤트 루프 동작 구조 & 원리 끝판왕
자바스크립트 비동기와 이벤트 루프 브라우저의 멀티 스레드로 작업을 동시에 Javascript는 싱글 스레드 언어라고 들어본 적이 있을 것이다. '싱글' 스레드라 한 번에 하나의 작업만 수행이 가능하다. 반면 Java 나 Python은 멀티 스레드를 지원하여 원하는 코드 로직을 동시에 수행 시키는 멀티 작업이 가능하다. 그런데 웹 애플리케이션에서는 네트워크 요청이나 이벤트 처리, 타이머와 같은 작업을 멀티로 처리해야 하는 경우가 많다. 만일 싱글 스레드로 브라우저 동작이 한번에 하나씩 수행하게 되면, 우리가 파일을 다운로드 받을 동안 브라우저는 파일을 다 받을 때까지 웹서핑도 못하고 멈춰 대기해야 할 것이다. 따라서 파일 다운, 네트워크 요청, 타이머, 애니메이션 이러한 오래 걸리고 반복적인 작업들은 자바..
👩💻 완벽히 이해하는 동기/비동기 & 블로킹/논블로킹
동기/비동기 & 블로킹/논블록킹 프로그래밍에서 웹 서버 혹은 입출력(I/O)을 다루다 보면 동기/비동기 & 블로킹/논블로킹 이러한 용어들을 접해본 경험이 한번 쯤은 있을 것이다. 대부분 사람들은 용어들이 나타내고자 하는 행위에 대해선 멀티 태스킹과 밀접한 관련이 있다는 것을 알고 있다. 그래서 두 개념을 비슷한 것으로 오해하는 사람들이 꽤 많다. 😵💫 동기/비동기 와 블로킹/논블로킹 이 두 개념은 표현 형태는 비슷해 보일지라도, 서로 다른 차원에서 작업의 수행 방식을 설명하는 개념이다. 동기/비동기는 요청한 작업에 대해 완료 여부를 신경 써서 작업을 순차적으로 수행할지 아닌지에 대한 관점이고,블로킹/논블록킹은 단어 그대로 현재 작업이 block(차단, 대기) 되느냐 아니냐에 따라 다른 작업을 수행할 수..
🌐 자바스크립트의 핵심 '비동기' 완벽 이해 ❗
자바스크립트의 동기와 비동기 자바스크립트는 싱글 스레드 언어이기 때문에 한 번에 하나의 작업만 수행할 수 있다. 즉, 이전 작업이 완료되어야 다음 작업을 수행할 수 있게 된다. 우리가 프로그래밍을 하면서 일반적으로 각 함수와 코드들이 위에서 아래로 차례로 동작하는 방식이라고 할 수 있다. 이러한 코드 순차 실행을 동기(Synchronous) 라고 부른다. 그런데 동기 방식은 간단하고 직관적이지만, 작업이 오래 걸리거나 응답이 늦어지는 경우에는 전체적인 성능과 사용자 경험에 영향을 줄 수 있다. 예를 들어 서버에 데이터를 요청하고 응답을 받아야 하는 작업이 있다면, 응답이 올 때까지 다른 작업을 하지 못하고 대기해야 한다. 이렇게 되면 프로그램의 흐름이 멈추거나 지연되게 된다. 따라서 자바스크립트로 여러 ..
🔮 PurgeCSS 사용법 - CSS 프레임워크 코드 최적화
CSS 프레임워크의 문제점 웹 어플리케이션을 구축할때 서비스 품질과 성능도 중요하지만, 빠지지 않는 것이 웹디자인이다. 웹디자인은 사용자의 첫인상과 만족도에 큰 영향을 미치기 때문에 신경써야 한다. 하지만 웹디자인을 처음부터 만드는 것은 쉽지 않다. 복잡한 CSS 코드를 작성하고 반응형으로 만들고 호환성을 확인하는 과정은 많은 시간과 노력이 필요하기 때문이다. 그래서 많은 웹 개발자들은 Bootstrap, Foundation, Bulma, Pure.css, UIKit, Materialise, Tailwind와 같은 CSS 프레임워크를 사용한다. CSS 프레임워크는 미리 정의된 CSS 클래스와 구성 요소를 제공하여, 일관되고 표준화된 방식으로 쉽고 빠르게 고퀄리티의 웹디자인을 만들 수 있으며, 재사용하고 ..
📋 관계 대수 & 관계 해석 표현법 💯 총정리
관계 대수 (Relation Algebra) 관계 대수식이란 기존 릴레이션(테이블)들로부터 새로운 릴레이션을 생성하는 절차적 언어 문법이라고 보면 된다. 릴레이션에 대해 기본적인 연산자들을 적용하여 보다 복잡한 관계 대수식을 점차적으로 만들 수 있다. 쉽게 생각해 우리가 숫자를 더하거나 나누어 원하는 수를 도출하듯이, 릴레이션을 관계 대수라는 전용 연산자를 통해 더하거나 곱해 원하는 릴레이션을 도출하는 것으로 생각하면 된다. 관계 연산자들은 릴레이션의 특성에 따라 일반 집합 연산과 순수 관계 연산으로 나뉘며, 각각의 연산 결과는 또 다른 관계 대수식의 입력으로 사용될 수 있다. 이렇게 관계 대수식은 사용자가 원하는 데이터를 얻기 위한 절차를 시스템에 명세하는 데이터 언어로서 관계 데이터 모델에서의 릴레이..
🌟 first-child / first-of-type 속성 차이점
first-child 와 first-of-type 차이점 first-child 와 first-of-type은 똑같이 자식 형제 요소 고르는것같은데 무엇이 다를까? 한방에 이해하기 쉽게 간단명료하게 설명하면 이렇다. div > p:first-child 'div 하위의 p 요소 중 첫번째 요소' 로 읽는 게 아니라 'div 하위의 첫번째 자식인 요소가 p 요소' 이면이다. 즉, div의 자손 요소중에 first-child를 고르는데 그게 p이면 스타일을 적용한다. 만일 p가 없다면 스타일을 적용하지 않는다. 'div first-child is p' 라고 영어 문장으로 이해하면 된다. .parent > span:first-child { background: lightgreen; } .parent2 > p:fi..
🌐 웹 애니메이션 최적화 requestAnimationFrame 가이드
자바스크립트 웹 애니메이션 웹페이지의 애니메이션을 구현할때 CSS의 animatoin , transition , transform 속성을 통해 구현할 수도 있지만, 보다 사용자와의 복잡한 상호작용을 구현하게 하기 위해 Javascript와 함께 사용하여 스타일을 변화시키도 한다. 예를들어 특정 영역을 클릭하거나 웹페이지를 스크롤할때 변화무쌍한 애니메이션 작업들이 그러하다. 그래서 간단하고 규칙적인 애니메이션은 CSS로만 요소의 좌표값이나 스타일 크기를 변화시키고, 세밀한 조작이 필요한 애니메이션은 자바스크립트로 스타일 속성을 변경 시키는 편이다. 하지만 자바스크립트로 스타일 속성을 변화시키는 방법은 CSS보다 (특히 모바일에서) 성능이 좋지 않다. 따라서 어쩔수 없이 자바스크립트와의 상호 협력이 필요할 ..
🌐 한방에 이해하는 attribute 와 property 속성 차이
Attribute vs Property 정의 차이 attribute 와 property 를 한국어로 번역하자면 둘다 '속성' 이라는 의미를 가지고 있다. 단순히 단어명이 같은 것을 떠나서 실제로 둘은 html 요소에 대한 클래스와 아이디와 같은 속성을 가리킨다. 이처럼 어트리뷰트와 프로퍼티의 둘은 같은 의미를 내포하지만, 웹 프로그래밍에서 이 둘은 구체적인 차이점이 존재 한다. HTML의 Attribute 어트리뷰트는 HTML의 속성이다. 엘리먼트에 아이디나 클래스와 같은 추가적인 정보를 일컫는다고 보면 된다 DOM의 Property 프로퍼티는 DOM의 속성이다. 즉, html의 attribute를 DOM 내에서 대신해서 표현이라고 보면 된다. 위 트리는 태그를 DOM 으로 표현한 것인데 위에서 clas..
