Taak-e's Dev-Log

프리온보딩 기업 협업과제 트러블슈팅 & 회고

원티드 프리온보딩 기업 협업과제 원티드에서 주최하는 프리온보딩 프론트엔드 코스과정으로 기업들이 필요로 하는 기술들을 주제로 과제를 내어주고 그걸 팀단위로 문제 해결해나가는 방식의 진행이었다. 중간중간 개인 사정으로 모든 과제에 참여하지 못했지만, 과제를 참여하며 생긴 이슈와 트러블슈팅과 회고를 정리하며 기록하길 원했고, 아래와 같이 다음 프로젝트 때 도움이 될 수 있도록 앞으로도 프로젝트 이후 이슈와 회고를 남기기로 했다. 1. 영화 트레일러 웹사이트 만들기 GitHub - Taak-e/TroubleShooting-Retrospective: 프로젝트 진행 중 이슈에 대한 트러블슈팅과 회고에 대해 기 프로젝트 진행 중 이슈에 대한 트러블슈팅과 회고에 대해 기록합니다. Contribute to Taak-e/..

Promise & Async Await

1. Promise - 비동기를 값으로 다루는 법 Promise 란? 자바스크립트가 미리 만들어둔 하나의 객체 이 객체는 then, catch 라는 메서드를 가지고 있다. pending, fulfilled, rejected 세가지 상태를 가지고 있다. Promise는 최초에 pending 상태로 만들어진다. 그리고 이후 fulfilled 또는 rejected 상태로 변경시킬 수 있다. Promise를 만들기 위해서는 new Promise 키워드를 통해서 만들 수 있는데 이때 콜백함수를 인자로 넣을 수 있다. new Promise((resolve, reject) => {}) 이때 콜백 안에서 resolve 함수를 호출하면 Promise는 value와 함께 fulfilled 상태가 된다. 반대로 reject..

[JavaScript] 비동기를 구현하는 방법 (Event loop & Callback)

1. 자바스크립트가 비동기를 구현한 방법 자바스크립트는 비동기적인 동작을 관리하기 위해서 "이벤트루프"라는 개념을 사용 자바스크립트의 실행과정은 크게 2가지 요소들이 관여 자바스크립트 엔진 (V8) 자바스크립트의 해석과 실행을 담당 이벤트루프 (Event loop) 비동기적인 동작들을 처리하고, 완료여부를 파악해서 필요한 동작을 수행 "큐"라는 시스템을 이용한다. 큐는 FIFO(First In, First Out) 방식을 따르는 자료구조로, 먼저 줄을 선 사람이(First In), 가장 먼저 입장 개념이다 (First Out). 이벤트 루프는 내부에 큐를 가지고 있으며 비동기적인 동작을 수행한 후, 완료되면 내부의 큐에 콜백함수를 담아둔다. 그리고, 자바스크립트 엔진에서 처리할 준비가 되었다면 큐안에 있..

비동기에 대해서

1. 비동기 프로그래밍이란? 프로그램이 어떠한 동작을 하고 있을 때 그것을 기다리는 것이 아니라 그동안 발생하는 다른 이벤트에도 모두 반응할 수 있게만드는 기법을 의미 2. 자바스크립트의 비동기 흔히들 "자바스크립트는 비동기로 동작한다"라고 하는 말은 엄밀히 말하자면 올바른 말은 아니다. 자바스크립트는 단지 언어일 뿐 이를 어떻게 동작시키는지는 자바스크립트를 해석하고 실행하는 환경에 달려있다. 다만 현재 대표적인 자바스크립트의 실행환경인 브라우저 및 노드가 비동기적으로 자바스크립트를 실행하고 처리하기에 "자바스크립트는 비동기로 동작한다"라는 말도 결과적으로 성립하게 된 것이다. 3. 비동기의 필요성 노드는 브라우저에서 쓰이던 자바스크립트를 그 외의 환경에서 실행하기 위해서 만들어진 실행환경이기에 기본적으..

Jest & React Testing Library (RTL)

1. Jest 를 활용한 JavaScript 테스트 각 진영마다 소프트웨어 테스트를 위해서 사용할 수 있는 라이브러리들이 개발되어 있는데, 그 중 자바스크립트 진영에서는 Jest, Mocha, chai 등의 테스트 라이브러리들이 대표적으로 사용되고 있다. 이중에서 Jest가 주간 약 1800만 다운로드의 압도적인 점유율을 가지고 있으며, CRA에서도 기본적으로 Jest를 포함해서 환경을 구성해주는 등 사실상 표준으로서 사용되고 있다. 1-1. Jest 사용법 Jest는 기본적으로 *.test.* 의 형태를 가진 파일을 테스트 파일로 인식하며, 해당 파일안에 있는 코드를 실행한다. 우리가 일반적으로 소프트웨어를 테스트 하는 과정은 아래와 같은 과정을 거친다. 특정한 동작을 수행한다. 동작을 수행한 결과가 ..

TDD (Test Driven Development) - 테스트 주도 개발

1. TDD 는? Test-Driven-Development의 약어로서 소프트웨어를 개발하는 여러 방법론 중 하나 TDD의 핵심은 기존에는 테스트 코드를 먼저 작성하고, 그 후에 실제 코드를 작성하는 것 일반적인 개발 흐름은 코드작성 → 테스트코드 작성의 흐름을 따르지만, TDD는 실제 코드를 작성하기도 전에 테스트 코드부터 작성을 시작한다. 2. TDD의 Red-Green-Blue 3가지 단계 Red : 실제 구현을 하기 전에, 먼저 실패하는 테스트 코드를 작성한다. 그 후 테스트를 실행한다. 실제 코드가 작성되지 않았기에 테스트 코드는 당연히 실패한다. Green : 테스트를 통과하기 위해 가장 간단한 형태로 코드를 작성한다. 그 후 테스트를 실행한다. 테스트는 실제 구현이 되었기에 통과한다. Blu..