당신의 이야기에 주목할께요

SW테스팅 교육 2일차1. 정적 테스팅 읽고 이해할 수 있는 모든 작업 산출물은 리뷰 대상이 될 수 있음.정적 분석은 테스트 케이스가 필요없고, 도구를 사용하는 경우가 많기 때문에 상대적으로 적은 노력으로 동적 테스팅 전에 문제를 식별할 수 있으며 지속적 통합 프레임워크에 통합하는 경우가 많다.가치소프트웨어 개발 수명주기 초기 단계에서 결함을 식별하기 때문에 조기 테스팅 원리를 지킬 수 있다.리뷰를 구축하는 비용은 클 수 있지만, 프로젝트 후반에 결함을 수정하는 시간과 노력이 줄어들어 리뷰를 수행하지 않을 때보다 전체 프로젝트 비용이 훨씬 낮아지는 경우가 많다.정적 테스팅으로 식별하기 쉬운 결함요구사항 결함설계 결함코딩 결함표준 위반잘못된 이터페이스 명세특정 유형의 보안 취약성테스트 베이시스 커버리지의 ..

SW 테스팅 교육 1일차1.   SW테스팅이란?•          SW란 사용자의 요구사항에 맞게 회사나 개인이 현실에 구현•          Testing 이란 문제를 찾거나 품질을 측정하는 일련의 활동구현을 할 때 결함이 발생 할 수도, 운용을 할 때 장애가 발생 할 수도 있는데 이러한 것이 고객과 회사에 유, 무형의 문제를 가져오고, 이러한 것을 Risk 라고 한다.이러한 일을 발생하지 않도록 하려면 또는 발생 가능성을 낮추기 위해서는 문제를 확인하는 일련의 모든 과정을 테스팅이라 한다.즉, SW Testing은 우리 고객이 원하는 그 무언가를 만들었을 떄, 고객을 만족시키고, 이익을 창출할 수 있는지를 확인하기 위한 일련의 활동이다.-      테스팅은 누가하는가? 제품 개발에 관련된 모든 이해 ..

useEffect는 React의 함수형 컴포넌트에서 side Effect를 수행하기 위해 사용되는 훅이다. 기본적으로 컴포넌트의 첫 번째 렌더링 이후에 실행되며, 그 이후의 모든 업데이트에서 수행된다. 두번째 인수인 의존성 배열에 값을 넣으면 이 값이 변경될 때만 재실행된다.  의존성 배열에 객체를 넣으면 객체의 값이 똑같더라도 계속 재실행된다. 객체의 참조값을 추적하기 때문이다. 따라서 매번 새로운 객체를 생성하므로 useEffect는 매번 실행된다. 이를 해결하기 위해서는 객체의 특정 속성을 의존성 배열을 넣는다. import React, { useState, useEffect } from 'react';function ExampleComponent() { const [data, setData] =..

React는 컴포넌트로 이루어져 있기 때문에, 개인적으로는 파일 구조도 중요하다고 생각을 했다. 정리를 해놓고 만들지 않으면 프로젝트 중반 이후로 엄청 꼬일 수도 있다. 그래서 나는 기본적인 파일 구조를 컴포넌트/페이지로 분리하였다.  그리고 그 외 자주 쓰는 함수 들은 utils에 그리고 페이지 스타일은 styles 폴더를 따로 만들어주었다. 이렇게 만들어줌으로써, 페이지 단위로 이슈 확인이나 개발 진척도를 확인하기가 좋은 것 같다.

- Axios와 Fetch, 나의 선택은? 데이터를 API 요청으로 받을 시간이 왔다.  Axios를 사용한 기억이 있는데, fetch가 있다고 한다. 둘 중에 뭐를 사용하면 좋을까? 아무래도 API 요청은 핵심적인 기능이고 자주 사용하다보니 잘 선택하고 싶다. 일단 둘을 비교해보자.기능/특성fetchaxios설치 필요 여부브라우저 내장별도 설치 필요기본 기능네트워크 요청 기능만 제공JSON 파싱, 상태 코드 처리, 요청 취소 등 다양한 기능 포함에러 핸들링 네트워크 에러만 캐치, 상태 코드 에러 직접처리 필요모든 에러 자동 처리요청 취소AbortController 사용기본 제공응답 데이터 변화수동으로 변환(ex. response.json())자동변환(JSON 데이터) fetch는 브라우저 내장이 가장 ..

프로젝트를 진행할 때, CSR을 할 지 SSR을 할 지 고민을 한 적이 있다. CSR은 클라이언트 사이드 렌더링으로서 서버로부터 빈 html 파일, css, 자바스크립트를 받은 후 클라이언트에서 렌더링을 하는 것을 말한다. 첫 로딩 시간이 느릴 수가 있고, 검색 엔진이 자바스크립트를 실행하지 못하는 경우 SEO를 하기가 힘든 단점이 있다.  SSR은 서버 사이드 렌더링으로 서버에서 렌더링을 하여 페이지를 완성하여 최소한 자바스크립트 파일과 함께 전달하는 방식이다. 브라우저는 이 HTML을 즉시 실행할 수 있다. SSR은 첫 로딩 시간이 빠른 장점이 있다. 그리고 완성된 HTML 파일이 있으므로 SEO에도 강점을 가지고 있다. 하지만 요청이 있을 때마다 서버로부터 HTML 페이지를 받아야 하므로 서버의 부..

목표 : 브라우저의 동작 원리를 이해한다. 내가 작성한 html, css, javascript 코드는 어떻게 사용되어 지는 것일까?  내용 : 사용자가 주소를 입력하여 페이지를 요청하고, 서버로 받은 응답을 브라우저에 렌더링 한다.  브라우저는 여러 단계의 레이어로 구성되어 있다. 사용자 인터페이스, 브라우저 엔진, 렌더링 엔진, 네트워킹, 자바스크립트 인터프리터, UI 벡엔드가 있다. 순서는 다음과 같다. 1. 주소창과 같은 사용자 인터페이스2. 사용자 인터페이스와 렌더링 엔진을 연결하는 브라우저 엔징3. 렌더링 엔진4. 통신/자바스크립트 해석기/ UI 벡엔드를 통해 자바스크립트를 해석하고 렌더링 트리를 그려준다.  렌더링 엔진은 우리 어플리케이션이 직접 동작하는 레이어인 만큼 자세히 보도록 한다.  ..

프로토타입은 많이 들었던 개념이지만, 두루뭉술한 느낌으로 알고있었다. 프로토타입을 많이 본 곳은 MDN 사이트이다. 배열에 원하는 기능을 수행하는 메서드를 찾기 위해 아래 사진에서 보여지는 것을 많이 보았던 것 같다.  자바스크립트의 프로토타입은 객체의 상속을 구현할 때 사용되어진다.자바스크립트의 모든 객체는 다른 객체로부터 상속을 받을 수 있고, 프로토타입 체인 이라는 것을 통해 상위 프로토타입 객체로 올라가면서 원하는 프로퍼티나 메서드를 찾는다.   function Person(name, age) { this.name = name; this.age = age;}Person.prototype.greet = function() { console.log(`Hello, my name is ${this...

Callback 함수 한 줄 정의 : 다른 함수에 인자로 전달되어 특정 작업이 완료된 후 호출되는 함수 ■ 콜백함수의 작동 원리 1. 함수 호출 : 비동기 작업을 수행하는 함수가 호출됨, 이 함수는 콜백 함수를 인자로 받음.2. 비동기 작업 수행 : 함수는 비동기 작업(예: 타이머 설정, 네트워크 요청 등)을 시작함. 3. 태스크 큐에 콜백 함수 추가 : 비동기 작업이 완료되면 콜백 함수가 태스크 큐에 추가됨.4. 이벤트 루프 : 호출 스택이 비어 있으면 이벤트 루프가 태스크 큐에서 콜백 함수를 꺼내 호출 스택에 추가하고 실행함.  예제 : let button = document.getElementById("button");button.addEventListener("click", function () ..

▒ 클로저란. 자바스크립트의 함수가 자신이 선언된 환경에서의 변수들을 기억하고, 그 환겨에 접근할 수 있는 기능을 말한다. 쉽게 말해, 내부 함수가 외부 함수의 변수에 접근할 수 있는 것. ▒ 클로저를 사용 하는 이유.▷ 데이터 캡슐한 → 외부에서 의도치 않게 변경할 수 없도록 보호 ▷ 상태 유지 → 함수 호출간에 상태를 유지 할 수 있다.  let l0 = 'l0';function fn2(){ let l2 = 'l2'; console.log(l0, l1, l2);}function fn1(){ let l1 = 'l1'; console.log(l0, l1); fn2(); // 어디에서 호출했냐에 따라 접근할 수 있는 유효 범위가 달라진다면 동적 스코프 // 자바스크립트는 ..