전체 글

cypress & cypress studio 사용하기 (e2e 테스트)

e2e 테스트는 End to End 테스트로, 유닛 단위 테스트와는 정 반대로 전체적인 테스트를 의미한다. 웹페이지는 자주 수정이 일어날 수 있기 때문에 이런 전체적인 테스트가 어렵다고 생각했었는데, 이번에 Cypress와 Cypress Studio를 사용해보고 생각이 바뀌었다. 이렇게 손쉽게 테스트를 작성할 수 있다면, 몇 번이라도 테스트를 세팅할 수 있을 것 같다! 🌧️ Cypress 설치하기 npm i -D cypress 🌧️ Cypress 실행하기 npx cypress open 설치와 실행 모두 위와 같이 간단하게 할 수 있다. 실행을 따라가면, spec을 생성하고 이곳에서 직접 화면을 보며 테스팅을 진행할 수 있다. 그렇지만, 테스트 코드는 직접 작성해야 한다. 그러나, Cypress에서는 HT..

leetcode 코딩테스트 연습 - 2621. Sleep (JavaScript)

/** * @param {number} millis */ async function sleep(millis) { return new Promise((resolve, reject) => { const timer = setTimeout(() => { resolve(millis); }, millis); }) } /** * let t = Date.now() * sleep(100).then(() => console.log(Date.now() - t)) // 100 */ leetcode의 문제들은 생각보다 다양한 것 같다. async 함수를 구현해야하는 코딩테스트 연습문제는 처음 접한 것 같다. 어려운 문제는 아니었지만, Promise를 반환하는 함수의 리마인드를 할 수 있었다.

SQL의 DDL, DML, DCL란?

SQL(Structured Query Language)의 주요한 문법을 카테고리화하면 DDL, DML, DCL로 표현할 수 있다. DBMS에서 DB를 정의하고 조작하며 관리하는데 사용되는 세가지 언어의 종류에 대해서 알아보았다. 개인적으로는 각각의 이니셜의 풀네임만 기억해도 어느정도 카테고리를 파악할 수 있었다. DDL (Data Definition Language) DDL은 말 그대로 데이터베이스 구조를 정의하는데 사용되는 언어를 의미한다. 대표적으로 CREATE, ALTER, DROP이 있다. table, view, index 등 DB 개체를 생성, 수정, 삭제하는 명령어를 가리킨다. CREATE TABLE users ( id INT PRIMARY KEY, name VARCHAR(50), age IN..

Drag Event에서 dataTransfer로 데이터 전달하기

Drag 이벤트에서는 dataTransfer라는 특수한 객체를 사용할 수 있는데, 이를 통해서 드래그 되었을 때 값을 저장하고 해당 값을 전달할 수 있게 해준다. 이를 사용해서 drag & drop으로 랜덤 숫자를 생성하는 예제를 만들어 보았다. Drag And Get Random Number Number : 위의 Drag And Get Random Number를 드래그할 수 있게 설정한다. 그리고 드래그하여 하단의 Number에 드랍하면, 랜덤 숫자를 화면에 띄울 수 있게 한다. .drag-div { padding: 10px; background-color: #ccc; width: fit-content; } .drop-div { margin-top: 50px; padding: 10px; backgrou..

leetcode 코딩테스트 연습 - 2722. Join Two Arrays by ID (JavaScript)

이번 문제는 객체를 값으로 가지는 두 배열을 합치는 문제였다. 객체의 id값은 유일해야 하고 양 배열에 id가 같으면, 이 객체를 합해야 하는 문제였다. 문제 접근 자체는 어렵지 않았지만, Time Limit Exceeded을 맞이해버렸다. /** * @param {Array} arr1 * @param {Array} arr2 * @return {Array} */ var join = function(arr1, arr2) { const answer = [...arr1]; const memo = {} for(let el of arr2) { if(el.id >= 0) { let pointer = null; if(memo[el.id] >= 0) { pointer = memo[el.id]; } else { for(..

unknown과 any 차이점 알아보기

unknown과 any 모두 유연하게 타입을 설정하기 위해서 사용된다. 🌧️ 다만, 타입 에러를 잡아내기 어렵기에 권장되지는 않는다. 다만, 이 둘의 차이점으로는 any가 더 유연하고 안전성이 낮은 반면, unknown은 타입 안정성을 유지하면서 유연함을 제공한다. unknown vs any 예제 // unknown 타입 let value1: unknown; value1 = 123; // 할당 가능 value1 = 'Hello'; // 할당 가능 // any 타입 let value2: any; value2 = 123; // 할당 가능 value2 = 'Hello'; // 할당 가능 기본적으로는 any와 unknown모두 다양한 타입을 할당할 수 있게 해준다. // unknown과 any의 차이 let n..

Server Component에서 Css-in-JS 라이브러리 사용하기 (feat. panda-css)

next.js의 app router가 stable되면서 app 폴더 내부에 생성된 컴포넌트는 기본적으로 server component로 설정되었다. chakra ui를 사용하던 중에 이 문제를 격하게 실감하게 되었다. RSC를 지원하지 않기 때문에 모든 컴포넌트에 "use clinet"를 사용해야 했고, 이렇게 되면 RSC를 사용하지 못하게 되는 단점이 있었다. 이에 대해서 chakra ui 깃허브 이슈를 살펴보던 중, 서버 컴포넌트를 지원하는 새로운 라이브러리르 만들었다는 제작자의 코멘트를 보았다. 그것이 바로 panda css였다. https://panda-css.com/ Panda CSS - Build modern websites using build time and type-safe CSS-in-..

SSH(Secure Shell)에 대해서

SSH(Secure Shell)는 컴퓨터 네트워크에서 암호화된 통신을 통해 원격으로 컴퓨터에 접속하고 명령을 실행할 수 있는 프로토콜이다. SSH는 보안 및 데이터 무결성을 제공하기 위해 설계되었으며, 일반적으로 원격 서버에 안전하게 접속하고 파일을 전송하거나 명령을 실행하는 데 사용된다. SSH는 클라이언트-서버 모델을 기반으로 작동한다. 일반적으로 SSH 클라이언트는 로컬 컴퓨터에서 실행되며, 원격 서버에 대한 인증 및 암호화된 통신을 처리한다. SSH 서버는 원격 컴퓨터에서 실행되며, 클라이언트의 연결 요청을 수락하고 인증을 검증한 후 암호화된 통신을 설정한다. SSH의 기능과 특징 보안 SSH는 네트워크 통신을 암호화하여 데이터의 기밀성과 무결성을 보호한다. 암호화된 연결을 통해 비인가자가 데이..