Eunseo Choi

[ 소프트웨어 테스트 ] # 소프트웨어 테스트란? 테스트란 무언가 동작하는 지를 확인하는 행위, 그렇다면 소프트웨어 테스트란 소프트웨어가 의도한 대로 동작하는지 확인하는 행위를 의미한다고 볼 수 있다. 자동화된 테스트란 사람이 손수 테스트하는 것이 아닌 컴퓨터를 통해서 소프트웨어를 테스트하는 것을 의미한다. 소프트웨어를 통해서 테스트를 수행하면 어떤 점이 좋을까? 컴퓨터를 통해서 실행하기에 사람이 실행하는 것보다 빠르다. 정해진 스크립트에 따라 일관성 있게 동작하기에 휴먼에러를 방지할 수 있다. 또한 개발자가 소프트웨어 테스트를 작성할 경우에는 피드백을 빠른 주기로 개발 중에 받을 수 있다는 점이다. 즉 테스트를 작성하고 수시로 테스트를 동작하여 소프트웨어가 정상적으로 동작하는지 확인할 수 있으며, 바로..

[ 3주차 과제 피드백 ] 오류를 숨기지 않기 axios는 200번대가 아니면 예외를 던지지만, fetch는 예외 처리를 안 던진다. fetch는 !response.ok로 200번대를 벗어나면 예외를 던지도록 한다. export const httpClient = async (url: string, options = {}) => { try { const response = await fetch(url, options); if (!response.ok) { throw new Error('HTTP Error'); } const json = await response.json(); return json; } catch (error) { throw console.error('Fetch Error:', error ..

[ Redux Middleware ] # Middleware 미들웨어란 무엇일까? "프레임워크의 요청과 응답 사이에 추가할 수 있는 코드"라고 생각할 수 있다. 백엔드 서버단의 미들웨어와 다른 점은 요청과 응답 사이에서, 프론트엔드 클라이언트에서 리덕스의 미들웨어는 액션 디스패칭과 리듀서에 전달되는 과정 사이의 동작이 리덕스 미들웨어이다. (like axios.interceptors) # In Depth of Middleware : 필수적인 요소는 아니지만 사용하면 간편하다. 미들웨어 없이 다음과 같은 동작을 구현해보자 Dispatch 된 Action을 로깅한다. Action이 Reducer로 전달되어서 처리된 후, state를 로깅한다. ## Solution 1. Logging Manually cons..

[ Redux ] # Design Pattern "디자인 패턴"이란 소프트웨어를 설계하면서 자주 발생하는 문제들을 해결하고자 한 답안들을 응축한 모범답안이다. 애플리케이션 전체를 다루기 위한 디자인 패턴, 그 안에서 자잘 자잘한 작은 문제들을 다루기 위한 디자인 패턴 등을 함께 사용해서 만들어지기에 복합 패턴이라고 부르기도 한다. ※ 관심사를 분리하는 것처럼 소프트웨어의 관심사를 분리하는 것과 비슷한 개념 ## MVC Model, View, Controller 왜 나눌까. 바로 관심사를 분리하기 위해서 이다. 1. Model: 데이터의 형태를 정의하고, 데이터를 수정하는 역할을 담당한다. (데이터 형태 관리 담당) 2. Controller: 유저의 입력을 받아서 어떻게 어치할지 판단 및 가공해서 Mode..

async와 defer를 알기 전에 우선적으로 알아할 것 # 브라우저의 동작원리 브라우저는 DOM 생성 프로세스를 시작합니다. 먼저 HTML 파서가 처음부터 HTML 코드를 쭉 파싱 합니다. 파싱 하다가 script 태그를 만날 시 DOM 생성 작업을 중단하고, 자바스크립트 엔진에게 권한을 넘겨줍니다. 권한을 넘겨받은 자바스크립트 엔진이 자바스크립트 파일과 코드들을 로드하고 파싱 합니다. 자바스크립트 파싱 작업을 완료하면, 다시 HTML 파서에게 제어 권한을 넘겨주고 다시 HTML 파싱을 진행합니다. 즉 브라우저 DOM 생성 프로세스는 동기적으로 실행된다는 사실을 알 수 있으며, 자바스크립트 파일 사이즈가 너무 크면 파싱 하는 작업 또한 시간이 많이 걸리기 때문에 대부분의 script는 파싱 맨 마지막,..

[ SPA (Single Page Application) ] # 싱글 페이지 어플리케이션이란, 사용자가 한 페이지에서 머무르면서 필요한 데이터를 서버에서 받아와 부분적으로 업데이트하는 방식입니다. 결과적으로 페이지 이동 즉 URL이 변경하는 과정을 생략할 수 있습니다. 이렇게 사용자는 하나의 어플리케이션을 사용하듯이 웹 사이트 사용성을 최적화할 수 있습니다. PC 성능을 최적화 동시에 데이터 처리를 무리 없이 수행할 수 있으며 React, Vue, Angular와 같은 자바스크립트 라이브러리 또는 프레임워크의 등장으로 CSR(Client Side Rendering)이 대중화되었습니다. [ CSR (Client Side Rendering) ] # 클라이언트 사이드 렌더링이란, 클라이언트 측에서 모든 데이터..