분류 전체보기

MSW로 실제 네트워크 환경에서 Mocking하기

개요 프로젝트를 벡엔드 개발자와 같이 하다 보면 API가 완성되지 않아 프론트 코드 구현에 어려움을 겪을 때가 있다. 왜냐하면 dummy data를 이용해 개발을 한다 하더라도 네트워크를 통한 실제 API 호출 환경과는 차이가 있기 때문이다. 이에 마감기한이 거의 다가와서야 개발을 시작할 수 있는 부분도 있는데 이를 위해 네트워크 환경에서 mocking을 할 수 있는 라이브러리인 msw.js에 대해 소개하고자 한다. Service Worker에 대해 MSW는 Mock Service Worker의 약자이다. 이 라이브러리를 이용해 실제 서버를 만들지 않고 네트워크 요청을 통한 테스트가 가능하다. 따라서 MSW는 service worker를 이용한 mocking 라이브러리이고 service worker에 대..

싱커톤 시즌3를 마무리하며(feat: 우수상 수상)

개요 싱커톤 시즌3가 종료되고 결과물을 제출한지 일주일정도 지났다. 개발은 이주정도 진행되었으며 다른 해커톤에 비해 긴 기간이였지만 4-1학기에 재학중이고 시험기간이 겹쳐서 상당히 바쁜 이주였다. 처음 진행해보는 해커톤이였기에 간단한 소회와 나의 부족했던 점 그리고 새롭게 배웠던 점들에 대해 복기하며 더 나아지기 위해 글을 작성한다. 부족했던 점- 협업에 대한 기술 부족 우선 우리팀은 백엔드 2명, AI 1명, 프론트엔드 2명으로 구성되었다. 나 포함 프론트엔드 2명이였고 이전에 같이 프로젝트를 진행해본 멤버였으나 그때와는 많이 달라진 것을 느꼈다.표1. 좌: 이전 프로젝트 커밋내역 우: 이번 싱커톤 커밋내역  제일 먼저 부족함을 느꼈던 부분은 커밋부분이다. 그 전까지 커밋은 영어로 작성했으며 엄청 간단..

동적 라우팅을 이용한 게시글 별로 달라지는 URL 구현

서론 게시판이나 프로필 페이지 등을 개발하다보면 URL이 엄청 많이 필요한 경우가 있다. 물론 일일이 route를 이용해서 작성할 수도 있겠지만 페이지 수가 사용자들의 활동에 따라 더 늘어날 수도 있기에 근본적인 문제 해결 방법은 아니다. 이럴땐 URL의 특정 부분에 변수를 사용하여 컴포넌트를 동적으로 렌더링하는 동적 라우팅을 이용하면 쉽게 해결할 수 있다. 동적 라우팅 사용법 먼저 우리의 희망 react-router-dom을 설치하자. 이 글은 v6를 기준으로 작성하였다.npm install react-router-dom 그 다음으로 동적 라우팅을 사용할 페이지에 변수를 전달하는 과정이 필요하다. import React, {useEffect, useState} from "react";import { L..

Useeffect hook의 리턴구문 실행 조건

useeffect hook은 의존성 배열을 이용하여 리렌더링을 제어할 수 있어 컴포넌트의 불필요한 렌더링을 막을 수 있고 콜백함수를 리액트의 라이프사이클과 동기화 시킬수 있어 널리 사용되는 hook이다. 또한 리턴구문이 컴포넌트가 언마운되거나 리렌더링 직전에 실행되는 것을 이용하여 리소스를 정리할때도 편리하게 사용할 수 있다. 이때 useeffect hook의 의존성배열 유무에 따라 리턴구문 실행여부가 달라지는데 먼저 의존성 배열이 존재하는 경우 , 빈 배열이 아닌 경우, useeffect hook의 콜백함수는 컴포넌트가 마운트 되고 의존성 배열의 값이 바뀔때마다 실행된다. 리턴 함수는 컴포넌트가 언마운트될때, 페이지에서 사라지거나 페이지가 이동할 때, 실행되고 의존성 배열의 값들이 바뀔때 실행된다. 의..

React로 Modal 만들기(with React-router-dom v6)

Introduction  modal을 만드는 것은 쉽다. 왜냐하면 이제는 html에서도 dialog라는 tag를 이용해 간단한 html과 js조합으로 쉽게 만들 수 있기 때문이다. 그러나 우리가 사이트들을 사용하면서 보이는 modal 중에는 html이 아닌 react를 이용해 만든 modal들도 있는데 둘의 차이는 react를 이용하면 url이 변경됨에도 modal 주변으로 이전 페이지가 렌더링되게 할 수 있다는 점이다.  대표적으로는 instragram이나 twitter에서 해당 방법을 사용하는 것을 알 수 있는데 이 방법을 사용했을 때 장점으로는 사용자들이 페이지 전/후 이동이 직관적이라는 점이다. url이 바뀌면서 modal이 보이는 경우 뒤로가기 버튼을 눌렀을 때 modal이 띄워지기 이전 페이지..

CSS정리: flexbox와 grid

서론 css의 모든 것은 주변에 box를 가진다. 따라서 element들을 잘 배치하기 위해서는, 좋은 layout을 위해선, 이를 잘 이해해야할 필요가 있다. css의 display속성에는 크게 inline과 block(outer display type)이 있다. 예를 들면 , ,  and 같은 태그들은 display type이 default로 inline이고  and 같은 태그들은 display type이 default로 block이다. 이 외에도 element들을 한 라인에 배열하기 위한 inline-block등이 있다. 그러나 inline-block은 반응형 웹사이트를 만들때 문제가 생기는데 width와 height로 크기, 위치를 지정하다 보니 특정 기기를 기준으로 layout을 만들 시 다른 ..

프로그래머스: 숫자 변환하기(javascript, deque, bfs)

BFS를 이용해 푼 문제이다. 처음에 BFS로만 풀려 했으나 계속 시간초과가 나서 백준 소꿉놀이처럼 미리 배열을 선언해두고, 시작점을 1로 해둔다. 그리고 방문안한 점을 방문할 때만 이전 지점에 1을 더해서 연산 횟수를 기록하는 방식이다. 글까지 써가며 기록하게 된 이유는 자바스크립트의 배열은 shift와 unshift연산이 모두 되는 deque이기에 bfs를 쓸 때 그냥 배열에 저장했었는데 테스트 케이스 두개가 계속 시간초과가 나서 자료구조를 다른 사람이 구현해놓은 deque을 사용했는데 훨씬 빠르게 통과돼서 놀랐었다. 왜냐하면 보통 내장함수나 내장 자료구조보다 잘 구현하기는 힘들기 때문이다. 앞으로 deque이나 queue자료구조가 필요한 알고리즘 문제는 자료구조를 직접 구현해서 써야겠다. class..

프로그래머스: 프렌즈 4 블록(javascript, 구현)

애니팡같은 게임을 구현하는 문제이며 구현문제이나 javascript는 문자열이 immutable이라서 처리하는데 조금 애를 먹었던 문제였다. 파이썬으로는 되게 쉽게 풀었던것 같은데.. 로직은 간단하다. 2차원 배열을 2x2 정사각형으로 탐색하며 2x2블록안의 문자가 모두 같다면 배열에 그 위치를 모두 저장하면 된다. 배열에 저장하는 이유는 한 위치가 두 블록에 중복되게 포함될 수 있으므로 위치들을 모두 저장했다가 탐색이 끝나면 한번에 지워야 한다. 그 후 빈 블록을 제외한 나머지 블록들을 아래로 내리는 작업을 반복하면 된다. javascript의 문자열이 immutable이라서 문자열을 [행,열]로 접근하지 않고 행을 통채로 교체하는 방식으로 배열을 바꿨다. function solution(m, n, b..