전체 글
TIL | GraphQL Subscriptions
GraphQL Subscriptions GraphQL Subscriptions? 특정 이벤트가 발생할때 서버가 클라이언트로 데이터를 보낼 수 있도록 GraphQL에서 제공하는 기능이다. 서버와 클라이언트가 실시간 연동을 하게끔 하기 위해 웹소켓을 기반으로 한다. subscriptions을 사용함으로써, 일반적인 흔히 사용되는 request - response 통신에서 벗어날 수 있다. 대신 클라이언트에서 원하는 이벤트를 지정하여 서버와의 연결을 지속할 수 있다. 이후 해당 이벤트가 발생할때마다 서버는 클라이언트에 데이터를 전달한다. 결론적으로, 실시간 데이터 통신을 위해 사용된다.(알람, 푸시, 배송상태 등에 적용할 수 있다.) Setting with Apollo client subscriptions 설..
TIL | Tailwind CSS
Tailwind CSS Overview Tailwind CSS? A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. Utility-first CSS framework, 즉 미리 정의된 CSS의 특성들을 class 를 통해 불러와 적용시키는 형태의 CSS 프레임워크이다. 일반적인 CSS와 Utility-first CSS 스타일을 비교하였을때, 비교적 적은 코드로 빠른 시간 안에 레이아웃을 구현할 수 있다. 비교적 낮은 러닝커브 Tailwind CSS을 사용하기 위해서는 패키지..
TIL | Webstorm IDE Setting Share
WebStorm IDE Setting Share 최근 Webstorm을 사용할 일이 생겨, Webstorm 세팅 후 vscode의 setting sync처럼 setting을 공유할 수 있는 방법을 정리해보았다.(vscode와 단축키가 많이 달라 적응하는데 시간이 꽤나 걸릴 것같다.) 1. WebStorm setting 파일을 업데이트할 repository 생성 및 파일 업데이트 File - Manage IDE Settings - Settings Repository를 통해, setting 파일을 업데이트할 repository를 연동할 수 있다. (이 과정에서 access token 작업도 필요하니, 이 부분은 그냥 진행해주면 된다. ) repository와 연결후, OVERWRITE REMOTE를 클릭하게..
TIL | Testing Library Queries
Testing Library Queries Queries Testing Library 에서의 쿼리는, 페이지에서 요소들을 찾기위해 필요한 메서드이다. 쿼리는 get,find,query 3가지 타입이 존재하며, 그 차이점은 찾고자 하는 요소가 없을때 에러를 발생시키는지, 혹은 프로미스를 반환하고 다시 실행하는 여부에 차이가 있다. 선택하고자 하는 페이지의 컨텐츠에 따라 쿼리들이 적절하게 사용어야 하므로, priority guid를 참고하여 사용하고자 하는 쿼리를 지정하자. Type of Query 0 Matches 1 Match > 1 Matches Retry(Async/Await) Single Element getBy... Throw error Return element Throw error No que..
TIL | MSW(Mock Service Worker)
MSW(Mock Service Worker) 테스트코드 강의를 들으면서 사용해보게 된 MSW(Mock Service Worker)에 대해 간단히 정리해보았다. MSW란? Mock Service Worker의 준말로, 이를 사용하면 실제 api를 호출하지 않고 데이터를 요청할 수 있다. 정확하게 말하자면 api 요청을 가로챈 후 service worker가 mocking data를 전달해주는 것이다. (Service Worker의 가짜 데이터를 넘겨준다.) 애플리케이션 내부에 직접 Mock데이터를 심거나 Mock 서버를 별도로 만들 필요 없이 실제 API를 사용하는 것처럼 네트워크 수준에서 Mocking이 가능하다. MSW Request Flow msw 라이브러리를 통해 애플리케이션의 네트워크 요청을 감지..
TIL | git 폴더명 대소문자 이슈
git 파일 및 폴더명 대소문자 오류 최근 프로젝트를 진행하면서 컴포넌트의 폴더 구조 및 이름을 수정하던 도중, 폴더 명의 대소문자를 변경했음에도 불구하고 해당 변경 사항이 반영되지 않은 채 dev에 merge 되어 빌드 오류가 지속적으로 났다. 확인해보니 git config core.ignorecase에 대한 이슈였다. git config core.ignorecase Internal variable which enables various workarounds to enable Git to work better on filesystems that are not case sensitive, like APFS, HFS+, FAT, NTFS, etc. For example, if a directory list..