개발하는 kim-hasa

mermaid js 로 플로우 차트 context 사용해서 테스트 정리

사용자 중심 기능 테스트 -> 사용자가 직접 경험했다고 생각하고 테스트 그에 대해 사용한 게 jest-html-reporter -> 관련 포스팅 예정 기능 테스트 ( hook test ) -> 통합 테스트 ( component test ) ex ) 로그인 useLogin 에서 로그인 성공 , 실패 출력 성공시 -> 따로 리턴없고 , 접속 실패시 -> 아이디 비밀번호 틀림 -> 에러 메시지 발생 실패시 -> 서버 이상 -> 서버 이상 에러 메시지 발생 등등 ,, 사용자 중점으로 테스트하는 것이 중요함 이번주는 아마 테스트 계속 공부할듯 ?

1. 브라우저의 동작 원리 브라우저가 HTML을 전달받으면 이거를 렌더 엔진(크롬의 경우 웹킷)이 파싱(원하는 데이터를 특정 패턴으로 쪼개는 것)해서 DOM Tree 를 만듭니다. 그 다음 , CSS도 파싱한 후 DOM Tree에 합쳐서 렌더링할 트리를 만듭니다. 그 이후 레이아웃을 정하고 화면을 그려가면서 사용자에게 보여주게 됩니다. 1.1 DOM 이란 ? Document Object Model 이라고 해서 HTML 마크업 문서와 1:1로 매칭되고 , 문서의 각 요소들을 하나의 객체로 나누어 분석한 것이라고 볼 수 있다. 이 HTML을 분석해서 트리로 만든 것을 DOM Tree 라고 한다. 1.2 렌더 트리와 DOM Tree는 같은가 ? - 다르다. DOM Tree는 실제로 HTML문서를 분석한 것이어..

옵셔널 체이닝 연산자 ?. ES11(ECMAScript2020) 에서 새로 도입된 옵셔널 체이닝 연산자 ?. 는 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고 , 그렇지 않으면 우항의 프로퍼티 참조를 이어간다. var elem = null; var value = elem && elem.value;//elem이 falsy -> elem , 아니면 elem.value console.log(value);// null ----------------------------------------------------------------------------- var elem = null; var value = elem?.value;// elem이 null 또는 undefine..

Hoisting이란 ? 변수 선언문이 코드의 맨 위로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징. 스코프 단위로 동작한다. console.log(item);// undefined var item;// 변수 선언문 console.log가 실행되는 시점에 , item 변수는 선언되어있지 않았으므로 에러가 뜰 것 같지만 , 실제로는 에러가 발생하지 않고 undefined가 실행된다. 변수 선언은 소스코드가 실행되는 시점이 아니라 , 그 이전 단계에서 이미 실행되기 때문이다. console.log(item);// undefined var item;// 변수 선언문 item = 10;// 값 할당 console.log(item);// 10 다만 할당은 이야기가 다르다. 할당은 소스코드가 실행이 되는 시..

웹 개발을 하던 중 , Webpack 과 Babel 에 대해 많이 듣게 되었는데 , 매일 듣기만 하고 정확히 무슨 일을 하는지 몰라서 따로 한번 정리해보려고 게시물을 작성했다. 왜 사용하는가 ? https://kangax.github.io/compat-table/es6/ 크롬, 사파리 등 에버그린 브라우저(웹 표준을 위해 지속적으로 자동 업데이트를 지원하는 모던 브라우저)는 대부분의 ES6 사양을 지원한다. 하지만 IE 11은 거의 ES6를 지원하지 않는다. 또한 , ES6가 새롭게 도입될 때마다 브라우저 지원율이 각각 다를 수밖에 없다. 그래서, 최신 사양으로 작성된 코드를 구형 브라우저에서 동작시키기 위한 개발 환경을 구축하고 , 대부분의 프로젝트가 모듈을 사용하므로 모듈 로더가 필요하다. 물론 ES..

https://programmers.co.kr/learn/courses/30/lessons/87390 코딩테스트 연습 - n^2 배열 자르기 정수 n, left, right가 주어집니다. 다음 과정을 거쳐서 1차원 배열을 만들고자 합니다. n행 n열 크기의 비어있는 2차원 배열을 만듭니다. i = 1, 2, 3, ..., n에 대해서, 다음 과정을 반복합니다. 1행 1열부 programmers.co.kr 특정 2차원 배열에 숫자를 채우고 , 숫자를 채운 배열을 1차원 배열로 바꿉니다. 그리고 특정 인덱스부터 인덱스까지의 수를 정답 배열에 넣어서 출력하는 문제입니다. 그냥 2차원 배열을 만들고자 하면 , 2차원 배열의 크기가 너무 커서 만들어지지 않습니다. 특정 규칙을 찾아서 푸는 문제입니다. left라는..

https://programmers.co.kr/learn/courses/30/lessons/42626 코딩테스트 연습 - 더 맵게 매운 것을 좋아하는 Leo는 모든 음식의 스코빌 지수를 K 이상으로 만들고 싶습니다. 모든 음식의 스코빌 지수를 K 이상으로 만들기 위해 Leo는 스코빌 지수가 가장 낮은 두 개의 음식을 아래와 같 programmers.co.kr 덜 매운 음식 두개를 합쳐서 모든 음식을 특정 스코빌 지수 이상으로 만드는 문제입니다. 여기서는 우선순위 큐를 오름차순으로 구현했습니다. 우선순위 큐에서 앞에 두개를 제거해서 새로 만들어서 넣어주고 비교하는 방식으로 풀었습니다. 우선 순위 큐를 적극적으로 사용하고 나서 쉽게 풀리는 문제들이 많이 있는 것 같습니다. #include #include #..

https://www.acmicpc.net/problem/1932 1932번: 정수 삼각형 첫째 줄에 삼각형의 크기 n(1 ≤ n ≤ 500)이 주어지고, 둘째 줄부터 n+1번째 줄까지 정수 삼각형이 주어진다. www.acmicpc.net 맨 위에서부터 내려왔을 때 , 가장 큰 점수를 획득하는 경우를 구하는 문제입니다. 반대로 생각하면 , 아래에서 맨 위로 올라갔을 때 가장 큰 점수를 구하면 됩니다. 특정 점 [ i , j ] 의 최대값은 [ i + 1][ j ] , [ i + 1 ][ j + 1 ] 중에 큰 수를 구해서 정하고, [ i , j ] 가 [ 1 , 1 ]이 될 때까지 올리면 됩니다. #include using namespace std; int arr[501][501] = {0}; int m..

https://www.acmicpc.net/problem/11286 11286번: 절댓값 힙 첫째 줄에 연산의 개수 N(1≤N≤100,000)이 주어진다. 다음 N개의 줄에는 연산에 대한 정보를 나타내는 정수 x가 주어진다. 만약 x가 0이 아니라면 배열에 x라는 값을 넣는(추가하는) 연산이고, x가 0 www.acmicpc.net 힙의 마지막 문제 절대값 힙 문제입니다. 이전 두 힙과는 다르게 , 절대값으로 비교해야 합니다. 우선순위 큐에 pair 함수를 써서 , 절대값으로 정렬 된 후 2번째 인자로 음수인지 양수인지를 넣어서 정렬합니다. 그 이후 절대값으로 비교하고 작은 수(음수) 부터 출력합니다. #include #include #include using namespace std; int main(..