💡 읽기 전 필요한 지식 💡- JavaScript Promise와 .then() 체이닝의 기본 개념- axios로 HTTP 요청을 보내본 경험- Array.prototype.push와 unshifht의 차이📖 읽고 나면 얻을 수 있는 것 📖- axios 인터셉터가 내부적으로 하나의 거대한 Promise 체인으로 연결된다는 것- request 인터셉터가 역순으로 실행되는 이유를 소스코드 레벨에서 설명할 수 있게 됨 Axios를 공부하면서 인터셉터를 여러 개 등록하면 어떻게 동작하는지 궁금해졌다.당연히 등록한 순서대로 실행되겠지? 싶었다. (동기 코드는 순차적으로 실행된다와 같은 원리) 필자는 직접 확인해보기로 했다.실험 환경 세팅 및 결과별도 서버 없이 테스트할 수 있도록 무료 mock API인 j..

레벨1이 끝났다.정확히는, 끝났다는 실감이 좀 늦게 왔다...마지막 PR이 머지되고, 리뷰어에게 감사 인사를 남기고, 창을 닫고 나서야 "아 끝났구나" 싶었다.두 달이 이렇게 빨리 갔나 싶기도 하고,,, 뭐 누구든지 우테코에 들어오기 전에 여러 걱정들을 품에 안고 들어왔을 것 같다.그런데 돌이켜보면, 그 걱정들은 대부분 기우였다.레벨1은 나를 무너뜨리지 않았다. 오히려 꽤 많은 것들을 쌓아줬던 발판이 되어주지 않았을까?미션마다 먼저 내가 크게 배운 인사이트를 정리해보고자 한다.(회고 글이니 필자의 코드를 따로 정리하진 않으려 한다. 대신 GitHub 링크를 남기고자 한다!)로또 미션에서 배운 "관심사 분리"로또 미션 Step 1을 마무리할 때, 솔직히 도메인과 UI를 분리하는 게 그렇게까지 중요한지 잘 ..

💡 읽기 전 필요한 지식 💡- 자바스크립트 기본 문법 (함수, 콜백 함수 개념)- setTimeout, Promise 사용 경험- 동기 / 비동기의 기본 개념📖 읽고 나면 얻을 수 있는 것 📖- Call Stack, Web API, Task Queue, Microtask Queue, Event Loop 각각의 역할과 관계- 비동기 코드(setTimeout, Promise)의 실행 순서를 단계별로 예측하는 능력- Microtask와 Task의 우선순위 차이와 그 이유자바스크립트를 공부하다 보면 반드시 마주치는 질문이 있는 것 같다."setTimeout은 왜 정확하지 않을까?""Promise의 .then()은 왜 항상 나중에 실행될까?""비동기 코드의 실행 순서는 어떻게 결정되는 걸까?"이 모든 질문..

필자는 최근에 비동기 통신을 공부하다 문득 HTTP 클라이언트별 에러를 다루는 방식에 대해 궁금하여 공부를 했다.그러다 에러를 다루는 방식에 흥미로운 점을 발견하고 fetch부터 axios,ky 그리고 XHR까지 파헤쳐 보았다.HTTP 에러란?시작하기전에 HTTP 에러를 이야기해보고자 한다.HTTP 통신에서 에러는 크게 두 종류로 나뉜다.첫 번째는 네트워크 에러다.서버가 꺼져 있거나 DNS 조회에 실패하는 등, 요청 자체가 서버에 도달하지 못하는 상황이다. (이 경우 서버로부터 응답이 아예 오지 않는다.)두 번째는 HTTP 에러다.요청은 서버에 잘 도달했고, 서버도 이에 대한 응답을 보냈지만 그 응답의 상태코드가 실패를 나타내는 경우다.대표적으로 400 Bad Request, 401 Unauthorize..

호이스팅이란?호이스팅은 자바스크립트 엔진이 코드 실행 전에 변수 선언을 해당 스코프의 최상단으로 끌어올리는 동작이다.중요한 건 var, let, const 셋 다 호이스팅이 된다는 점이다.💡차이는 초기화 여부에 있다.💡var (선언 + 초기화까지 호이스팅함)console.log(foo); // undefinedfoo = 123;console.log(foo); // 123var foo;JS 엔진은 실행 전에 위 코드를 아래처럼 처리한다. (변화 주목!)var foo; // 선언 + undefined 초기화 -> 최상단으로 끌어올림console.log(foo); // undefinedfoo = 123;console.log(foo); // 123var은 선언과 동시에 undefined..

스코프란?스코프는 식별자가 유요한 범위를 의미한다.쉽게 말하면 자바스크립트 엔진이 코드를 실행할 때, 변수나 함수 같은 식별자를 어디까지 참조할 수 있는지를 결정하는 규칙이다. 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 따라 참조 가능한 유효 범위가 결정된다."스코프"란 개념이 없다면 같은 이름의 변수가 여러 곳에서 선언될 때 충돌이 발생하고, 코드가 예측 불가능하게 동작하지 않을까?스코프는 이러한 네임스페이스 충돌을 방지하는 메커니즘이기도 하다. 단계별로 이해해보도록 하자. **시작하기 전에 아랫글을 추천한다.** [JavaScript] var / let / const 호이스팅과 TDZ호이스팅이란?호이스팅은 자바스크립트 엔진이 코드 실행 전에 변수 선언을 해당 스코프..

우테코 미션 1을 진행하며 직접 경험하고 이해한 TDD와 페어 프로그래밍에 대한 회고를 정리해 보고자 한다.핵심 로직부터 시작해 입출력 레이어까지 단위 테스트를 잘게 쪼개어 구현하고, 마침내 컨트롤러를 통한 통합 테스트까지 성공시킨 일련의 과정은 개인적으로 무척 뜻깊은 경험이었다. 단위 테스트부터 통합 테스트까지 범위를 넓혀가며 느낀 점은, 개발 후반부로 갈수록 미리 작성해 둔 테스트 코드 하나하나가 든든한 버팀목이 된다는 것이다. 기능을 추가하거나 리팩터링을 할 때 기존 테스트가 모두 통과하면 기존의 외부 동작이 훼손되지 않았다는 확신을 가질 수 있었다. 반대로 예상치 못한 변경으로 인해 테스트가 실패하더라도, 정확히 어느 단위에서 문제가 발생했는지 즉각적으로 파악할 수 있다는 점이 TDD의 가장 확실..

최근 진행하고 있는 공모전에서 앱서비스를 개발하게 되었다.스택을 선정하는 과정중 동료 개발자가 웹개발자였고 한정적인 시간 내에서 JavaScript와 React 지식을 그대로 활용할 수 있는,상대적으로 러닝커브가 적다고 생각한 리액트 네이티브로 개발하기로 정하였다.React Native가 뭐야?React Native는 Facebook(현 Meta)에서 개발한 크로스플랫폼 모바일 앱 개발 프레임워크이다.하나의 코드베이스로 iOS와 Android 앱을 동시에 개발할 수 있다는 점이 가장 큰 장점이다.React와 유사한 문법을 사용하기 때문에 웹 개발자가 모바일 앱 개발에 진입하기 위한 러닝커브가 상대적으로 낮다는 특징이 있다. React Native가 특별한 이유는 하이브리드 앱이 아닌 진짜 네이티브 앱을 ..

타입 별칭(Type Aliases)이란?타입스크립트를 공부하면서 '타입 별칭'이란 개념은 자주 접하게 될 것이다.타입 별칭이 뭘까??? 아래와 같다.타입 별칭은 이름 그대로 타입에 새로운 이름을 부여하는 기능이다. 타입 별칭은 복잡한 타입을 간결하게 표현할 수 있게 해주며, 코드의 가독성과 재사용성을 높여준다!또한 type 키워드를 사용하여 정의하며, 원시 타입부터 복잡한 객체 타입, 유니온 타입, 제네릭 타입까지 다양한 타입에 별칭을 붙일 수 있다. 타입 별칭은 단순히 타입에 이름을 붙이는 것 이상의 의미가 있는 것 같다.복잡한 타입 구조를 추상화하고, 코드의 의도를 명확하게 표현할 수 있게 해주기 때문.(특히 프로젝트의 규모가 커질수록 타입 별칭의 중요성은 더욱 커지지 않을까?)기본 사용법타입 별칭의..

열거형(Enums)이란?TypeScript에서 열거형(Enums)은 관련된 상수 값들의 집합을 정의하는 방법이다.우리가 코드를 작성할 때 특정 값들만 사용하도록 제한하고, 각 값에 의미 있는 이름을 부여하여 가독성을 높이는 역할을 한다고 이해하면 된다. 자바스크립트에는 열거형 개념이 따로 없지만, 타입스크립트는 이를 추가하여 개발자들이 좀 더 안전하고 명시적인 코드를 작성할 수 있게 해준다. 열거형을 통해 특정 값들만 사용하도록 제한하면 오타나 잘못된 값 사용으로 인한 오류를 줄일 수 있고, 코드의 의도를 더 명확하게 표현할 수 있다.enum Direction { Up, Down, Left, Right}// 열거형 사용 예시let myDirection: Direction = Direction.Up..