항해 플러스

1. 문제 (과제, 프로젝트를 진행하면서 부딪혔던 기술적인 문제)통합 테스트에서 useEventOperations 커스텀 훅의 CRUD 흐름을 완전하게 검증하려면 실제 API를 호출하지 않고도 데이터 흐름을 통제할 수 있는 환경이 필요했다. 하지만 테스트 간 상태 공유 문제, 가짜 API 응답의 구성, UI 피드백에 대한 검증까지 한 번에 해결하려다 보니 테스트 환경 구성의 복잡도가 매우 높아졌다.2. 시도테스트 환경의 일관성과 상태 격리를 위해 MSW 서버를 setupTests.ts에서 전역으로 구성하고, 모든 API 요청을 모의 처리할 수 있도록 handlers.ts, handlersUtils.ts를 설계했다. 또한, 사용자 피드백에 대한 UI 메시지를 검증하기 위해 useToast 훅을 vi.mo..

이전 주차 포스팅 2025.05.02 - [항해99 플러스/회고] - [항해 플러스 프론트엔드] 4주차 회고 - 화요일의 저주 { sel.value = 'p1'; ad" data-og-host="s-o-o-min.tistory.com" data-og-source-url="https://s-o-o-min.tistory.com/entry/%ED%95%AD%ED%95%B4-%ED%94%8C%EB%9F%AC%EC%8A%A4-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-4%EC%A3%BC%EC%B0%A8-%ED%9A%8C%EA%B3%A0-%ED%99%94%EC%9A%94%EC%9D%BC%EC%9D%98-%EC%A0%80%EC%A3%BC" data-og-url="https://..

1. 문제 (과제, 프로젝트를 진행하면서 부딪혔던 기술적인 문제)아래 테스트가 정상적으로 pass되었지만 화요일이 되니까 fail 되었다. it('총액이 올바르게 계산되는지 확인', () => { sel.value = 'p1'; addBtn.click(); addBtn.click(); expect(sum.textContent).toContain('총액: 20000원(포인트: 20)'); }); it('포인트가 올바르게 계산되는지 확인', () => { sel.value = 'p2'; addBtn.click(); expect(document.getElementById('loyalty-points').textContent).toConta..

이전 주차 포스팅2025.03.28 - [항해99 플러스/회고] - [항해 플러스 프론트엔드] 1주차 회고 - 살아 남기 [항해 플러스 프론트엔드] 1주차 회고 - 살아 남기개강 전 현 직장에서 2년차가 되어가고 있는데, 성장이 멈췄다는 것을 뼈저리 느끼며 일상을 살아갔다.1년 조금 넘을 쯤 이직을 빡세게 준비하며 여러 곳 면접을 보러다니던 중 개인적인 일이s-o-o-min.tistory.com2025.04.04 - [항해99 플러스/회고] - [항해 플러스 프론트엔드] 2주차 회고 - 모르는데 어떻게 해요 [항해 플러스 프론트엔드] 2주차 회고 - 모르는데 어떻게 해요2주차 항해소소리 바람봄이 다가오면서 많이 포근해진 날씨에 옷차림도 가벼워지니 몸과 마음이 한결 가벼워져서 기분이 좋습니다. 다들 사는게..

2주차 항해소소리 바람봄이 다가오면서 많이 포근해진 날씨에 옷차림도 가벼워지니 몸과 마음이 한결 가벼워져서 기분이 좋습니다. 다들 사는게 바쁘고 힘드시겠지만 설레임이 가득한 봄 향기 속에서 피어난 꽃처럼 행복도 활짝 피어났으면 좋겠습니다~.발제이미 1주차에서 많은 기가 빨렸기 때문에 2주차는 소울리스 상태로 진행해야 할 것 같다. 회사에 쌓였던 업무와 과제를 함께 하니 나의 콧구멍에선 빨간 땀이 흐르기 시작했고, 푸바오 빙의한 다크서클과 2배로 늘어난 쌍꺼풀 덕분에 주변에서 걱정을 많이 해주신다(고맙읍니다 (__ ) 실제로도 굉장히 피곤한 상태입니다).지금 상태면 서서 잘 수도 있을 것 같다. 과연 내가 10주를 다 마무리할 수 있을까 의문이 들지만... 부딪쳐 봐야지... !1주차 때와 마찬가지로 기존..

개강 전 현 직장에서 2년차가 되어가고 있는데, 성장이 멈췄다는 것을 뼈저리 느끼며 일상을 살아갔다.1년 조금 넘을 쯤 이직을 빡세게 준비하며 여러 곳 면접을 보러다니던 중 개인적인 일이 크게 생겨 반년정도를 허투루 보내고 있었다.다시 이직 준비를 했을 땐 이미 취업 시장은 레드오션이였고 나는 도저히 낄 틈이 보이지 않았다.퇴사를 하고 이직을 준비하기엔 힘들었던 취준 2년의 과거가 떠올랐기에 도저히 퇴사는 힘들었고, 그렇게 이리저리 찾아보다가 항해 플러스를 알게 되었다.항해 플러스 광고 중 "물경력"이라는 단어가 나를 혹하게 만들었고 바로 결제를 해버렸다. (코인으로 메울 것이다. 그럴 것이다.)개강 전까지 항해 플러스에서 마련해준 사전 스터디를 진행하였고 5기 학생분들과 온라인으로 TypeScript와..

비동기 프로그래밍 입문개념 일반적으로 코드는 동기적으로 실행된다. 즉 앞에 있는 코드가 끝나야만 그 다음 코드가 수행이 된다.// (1)const a = 1;// (2)const b = 2;// (3)console.log(`a의 값은 ${a}입니다.`);// (4)alert(`hello ${b}!`);// 항상 코드는 (1) -> (4)의 순서대로 실행이 됩니다. 이러한 방식을 동기적 방식이라 하고, 비동기는 그에 반대되는 방식이다.비동기(asynchronous)적 방식이란? 실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가는 방식이며, 대표적으로 setTimeout, addEventListner 등이 있다. 별도의 요청, 실행 대기, 보류 등과 관련된 코드는 모두 비동기적 코드이며 주로 ..

Routerreact-router를 사용하기 전에 Router의 기본적인 내용만 훑고 가보자. Routing라우팅이란 기본적으로 네트워크에서 경로를 선택하는 프로세스를 의미한다.주소(URL)의 파라미터로 요청이 들어왔을 때 각각 맞는 콘텐츠로 이동시켜주는 작업이라 보면 될 것 같다. React Router설치 및 세팅패키지를 설치하자.yarn add react-router-dom import { BrowserRouter, Routes, Route } from 'react-router-dom'위는 가장 많이 사용되는 모듈 3가지다. BrowserRouterhistory API를 활용해 history 객체를 생성한다.history API는 내부적으로 stack 자료구조의 형태를 띄우며 사용자가 방문한 url..

CHATER9 타입 제한자9.1 top 타입top 타입은 시스템에서 가능한 모든 값을 나타내는 타입이다. 모든 다른 타입이 top인 위치에 제공될 수 있으며, 즉 모든 타입은 top 타입에 할당할 수 있다. 9.1.1 any 다시 보기any 타입은 모든 타입의 위치에 제공 될 수 있다는 점에서 top 타입 처럼 작동할 수 있지만, TS가 해당 값에 대한 할당 가능성 또는 멤버에 대해 타입 검사를 수행하지 않도록 명시적을 지시한다는 문제점을 가지고 있다.이러한 안정성 부족은 TS의 타입 검사기를 건너뛰려고 할 때 유용하지만, 타입 검사를 비활성화하면 해당 값에 대한 TS의 유용성이 줄어든다.예를 들어 아래의 name.toUpperCase() 호출은 확실히 문제가 되지만, name이 any로 선언되었기 때문..

CHAPTER8 클래스Class를 학습하기 전 먼저 객체지향 프로그래밍을 살짝 알고 들어가자. 객체지향 프로그래밍(OOP: Object-oriented programming)모든 것을 객체(Object)로 보고 그 객체들끼리 역할, 책임, 협력 등 객체들의 관계를 중심으로 프로그래밍 하는 기법을 말한다. 객체지향의 4대 특성1. 캡슐화(encapuslattion)연관된 데이터(변수)와 기능(메소드)을 하나로 묶고, 불필요한 요소를 외부에 노출되지 않도록 설계하는 방식을 뜻한다. 2. 상속(inheritance)기존의 클래스에 기능을 추가하거나 재정의하여 새로운 클래스를 정의하는 것을 의미한다. 상속을 이용하면 기존에 정의되어 있는 클래스의 모든 필드와 메서드를 물려받을 수 있다. 3. 추상화(abstra..