bkdragon's log

출처 : 위키백과 (https://ko.wikipedia.org/wiki/%ED%96%84%EB%B2%84%EA%B1%B0_%EB%B2%84%ED%8A%BC) 햄버거와 비슷해서 붙여진 이름이다. 내비게이션 메뉴를 토글해서 보이거나 보이지 않게 하는 역할로 주로 사용된다. 장점 공간 절약 작은 화면 공간에서 내비게이션 메뉴를 효과적으로 표시 할 수 있게 해준다. 익숙함 많이 사용되는 디자인이다 보니 많은 사람들에게 익숙하다. 이는 별도의 설명서나 학습과정이 필요 없기 때문에 굉장한 장점이다. 디자인 유연성 브랜드나 컨셉에 맞게 다양하게 커스터마이징이 가능하다. 예를 들어 햄버거 버튼을 눌러서 네비게이션 메뉴가 보이게 되면 X 모양으로 변하는 애니메이션을 통해 사용자 경험을 향상 시킬 수 있다. 단점 효율성..

MVVMModel + View + View Model로 구성된 아키텍쳐 출처 : 위키백과 (https://ko.wikipedia.org/wiki/모델-뷰-뷰모델) Model : 메모리 상의 데이터 영역View : UI 영역View Model : View를 위한 Model. View를 나타내 주기 위한 Model. View와 데이터 바인딩을 통해 연결되어 있다. 데이터 바인딩메모리상의 데이터(Model)와 화면에 그려지는 데이터(View)를 동기화 하는 것.단방향 데이터 바인딩 : JavaScript(Model) → HTML(View) 한 방향으로만 데이터를 동기화 하는 것. 역으로 HTML에서 JavaScript로 직접적인 갱신은 불가능하다. React는 단방향 데이터 바인딩을 지원한다.양방향 데이터 바..

순수성과 Side Effect 순수성과 Side Effect는 대비된다. React의 컴포넌트는 순수성을 가진다. 동일한 Props를 받으면 늘 동일한 Jsx를 반환한다. 즉, React 렌더링 과정에서 Side Effect는 발생 되어서는 안된다. useEffect 그래서 Side Effect와 React의 렌더링을 분리하기 위해 useEffect가 등장했다. useEffect는 렌더링 과정에서 커밋(재조정 결과를 dom에 반영) 후에 작동함으로 Side Effect와 렌더링을 분리한다. 그리고 useEffect는 컴포넌트의 생명주기 (mount, update, unmount)에 간섭할 수도 있다. 기본 사용법 function MyComponent () { useEffect(() => { return ..

classnames는 조건부로 스타일링을 편하게 할 수 있는 라이브러리이다. {클래스명 : 조건식} 형태로 조건식이 참일 경우 클래스명을 추가할 수 있다. 공식 문서 예제를 몇가지 살펴보자. https://www.npmjs.com/package/classnames 기본 형태 {클래스명 : 조건식} 의 형태이나 조건식 생략이 가능하며 그 경우에는 true이다. classNames('foo', 'bar'); // => 'foo bar' classNames('foo', { bar: true }); // => 'foo bar' classNames({ 'foo-bar': true }); // => 'foo-bar' classNames({ 'foo-bar': false }); // => '' classNames({..

할 일 목록을 지닌 todoContainer와 할 일 아이템을 개별적으로 보여주는 todoItem, 두 개의 컴포넌트가 있을 때 할 일 아이템을 추가하거나 삭제해서 todoContainer 가 리렌더링 되면 모든 todoItem이 리렌더링이 되는데 이걸 최적화 하고 싶었다. 최적화에 필요한 도구들은 이전 글 중에 정리해둔 부분이 있다. 헌데 그 글은 단순 이론이고 이번에 실전에 적용하면서 조금 더 디테일하게 다뤄보려고 한다. React 리렌더링 과정 리렌더링 과정을 세 단계로 구분 할 수 있다. 트리거 렌더링이 트리거되는 단계 state 값이 불변을 지켜 대체되었는지만 확인한다. 좀 더 자세히 이야기하면 기본형 변수일 땐 값이 변경되었는지만 확인, 참조형 변수일 땐 메모리 주소만 변경되었는지 얕은 비교를..

as는 타입 단언을 할 수 있는 키워드이다. 컴파일러가 추론 하지 못하는 상황에서 개발자 입장에서 확실하다고 느낄 때 사용할 수 있다. 하지만 실제로 형변환이 일어나는 것은 아니다. 코드의 런타임 동작에는 아무런 영향을 주지 않는다. const number = 10; const showValue = (value : string) => console.log(value); showValue(number as unknown as string); 문제가 있는 부분인데 빨간 줄이 안뜬다! . as는 정말 확실할 때 써야한다. const person: Record = { name: 'bk', age: 27, hobby: 'music', }; const showNumber = (value : number) => co..

ACHT, 있어보이게 영어로 써보았다. 비동기 커스텀 훅 테스트 코드를 작성해보자. api 통신으로 데이터를 받아오기 때문에 MSW를 이용할 것 이다. 사용법 및 세팅법은 이 글에 잘 설명해두었다. 원래는 커스텀 훅을 사용하는 컴포넌트에서 테스트를 했었는데 커스텀 훅 테스트를 분리한 이유가 있다. delete 통신 성공이 204 no-content 였기 때문이다. 아래 코드의 두개의 핸들러를 비교해보자. export const getTodos = () => { return rest.get(`${baseUrl}${paths.todos}`, (_, res, ctx) => { return res(ctx.status(200), ctx.json(sampleTodos)); }); }; const deleteTodo..

이벤트 위임은 자식 요소가 여러 개 일 때 부모 요소에만 이벤트를 적용하면 버블링에 의해 이벤트가 실행되는 것을 이용하는 기법이다. 핸들러를 여러개 사용하지 않아도 되어 메모리를 절약하거나 요소가 추가되거나 제거되었을 때 별로도 이벤트를 추가하거나 제거해야하는 필요성이 없는 장점을 지닌다. 근데 React에서는 이벤트를 빌드 단계에서 Root Element로 위임시킨다고 한다. 즉 개발자가 이벤트 위임 패턴을 사용해서 코드를 작성해도 성능적인 이점을 가져갈 수 없는 것이다. Root Element로 모든 이벤트가 위임된다는 것은 React에서는 이벤트 발생 단계 중 캡쳐링 단계가 없다는 것이다. 버블링은 어떨까? alert('footer')} style={{ width: '100%', border: '1..

테스트를 연습하기 위해 간단한 todo app을 react + typescript + jest + redux를 사용해서 만들어보았다. 직접 해본 결과 redux test 과정은 크게 두가지이다. reducer 테스트 action 객체 생성 테스트 (dispatch 테스트) 이 두가지 테스트를 통해 redux의 기능이 정상 작동하는 것을 브라우저를 사용해 직접 테스트하지 않아도 알 수 있다. reducer 테스트 store/_reducer/todo.ts reducer를 이렇게 작성했다. const TodoSlice = createSlice({ name: 'todo', initialState: [] as StateProps, reducers: { addTodo: (state: StateProps, actio..

CORS를 정복해보자. SOP 동일 출처 정책 Same Origin Policy 동일한 출처에서만 리소스를 공유할 있게 하는 정책이다. 동일한 출처의 기준은 Protocol, Host, Port가 같을 때이다. 출처에 대한 비교와 차단은 브라우저의 기능이다. CORS 교차 출처 리소스 공유 Cross-Origin Resource Sharing 다른 출처의 리소스 공유에 대한 허용/비허용 정책이다. 허용하는 간략한 과정은 다음과 같다. 클라이언트에서 요청을 보낼 때 헤더에 Origin을 보낸다. 요청을 받은 서버는 응답 헤더에 Access-Control-Allow-Origin을 담아 클라이언트로 보낸다. 클라이언트에서 Origin과 서버가 보내준 ACAO를 비교하고 유효할 경우에만 리소스를 받아온다. 깊게..