jest와 react testing library로 프로젝트에 단위 테스트 도입하기 작성일을 기준으로 약 1달 전 hello, GSM이라는 광주 소프트웨어 마이스터고등학교 입학 지원 서비스를 일주일 정도 운영을 하였다 운영하면서 생긴 이슈들이 많아 서비스의 신뢰성과 안정성을 떨어뜨린 것도 또 사전에 테스트를 확실하게 했다면 방지할 수 있었던 문제라고 생각하여 아주 아쉬웠다. 그러던 와중에 팀원들과 프로젝트 회고를 진행하면서 팀원이 "서비스를 제작할 때 jest나 react testing library를 도입했었으면 좋았을 거 같아요"라고 말해서 jest, react testing library에 대한 사용 방법과 또 실제 프로젝트에 도입한 경험을 써보려고 한다.테스트테스트의 종류는 여러가지가 있지만 내가 지금 설명할 테스트는 단위(unit) 테스트이다.여기서 말하는 단위는 하나의 함수나.. axios가 불러온 개발 편의성 요즘 웹 개발을 하는 사람이라면 api 요청을 보낼때 나를 포함해서 대부분 axios를 사용하여 api 요청을 보낸다.갑자기 사람들이 js에 내장되어 있는 fetch를 사용하지 않고 axios를 많이 사용하고 있는 이유가 궁금해져 이 블로그를 작성한다.본격적으로 시작하기전에 간단하게 axios를 설명해주자면 fetch와 같이 api 요청을 보낼수 있는 라이브러리이다.fetch 보다 좋은점fetch보다 좋은점은 당연하게도(?) 많다.명시적인 사용 방법해당 장점은 나의 주관적인 생각 들어간것 같긴하지만 적어보자면 말 그대로 axios의 사용방법이 fetch와 비교 했을때 더 명시적인것 같다.fetch를 사용해서 get 요청을 보낼때에는 init 객체에 method 명시가 선택사항이지만, get이 아닌 다른 .. kakao map 이거 못막습니다 현재 작성일(9월 25일)을 기준으로 어제 이번에 새롭게 진행하게된 프로젝트에서 사용하기 위해서 kakao map을 가지고 여러가지를 해봤다 사용하면서 어려웠던점 신기한점들을 공유하려고 이 글을 쓴다 참고로 사용 환경은 next (app router) + typescript 이다 사용전 세팅일단 사용을 하려면 api 키가 필요한데 kakao developers에 접속해서 애플리케이션을 등록해서 javascript 키를 가져온다 그 다음 next layout.tsx에 script 태그를 넣어준다 그냥 react의 경우에는 index.html에 넣어주면 될것이다import Script from "next/script";declare global { interface Window { kakao: any.. 제발 디자인 못하면 mui 쓰세요! - mui 사용기 최근에 예전부터 들어봤었던 mui를 사용해보았다 사용하면서 느낀점을 적어보려고 한다일단 mui는 리액트 ui 프레임워크이다 손쉽게 ui를 가져다 쓸수 있도록 제공한다개발 편의성나의 경우에는 퍼블리싱을 하는데 소모하는 시간이 많은 편이다 하지만 mui를 사용한다면개발할때 퍼블리싱에 중점을 두지 않아도 되므로 로직적인 부분에만 집중을 할수도 있고 코드의 양도 줄어들것이다커스텀 가능기본적으로 제공하는 ui를 사용할수도 있지만 컬러나 다른 부분들이 마음에 들지 않는다면 커스텀하여 사용도 가능하다어차피 커스텀할거면 뭐하러 프레임워크를 사용하냐고 말할수도 있지만 커스텀을 하더라도 기초 틀이 잡혀있어서 훨씬 편하다커스텀하는 방법은 밑에서 사용법과 같이 설명하도록 하겠다styled-components(emotion) .. zod 쓸까? 말까? - zod를 알아보자 zod는 javascript, typescript에서 사용가능한 유효성 검사? 스키마 정의 라이브러리이다굳이 써야해?내가 처음 zod를 보고 든 생각은 javascript나 typescript에서는 굳이 라이브러리를 사용하지 않고도 유효성 검사를 할 수 있는데 굳이?라는 생각이 들었다 근데 사람들은 왜 zod를 많이 사용할까?라고 생각하니 사용하기 간편하고 또 라이브러리 용량이 적기 때문이라고 생각한다 직접 코드로 구현할 수 있으나 코드가 너무 많아지고 또 라이브러리를 사용할 때는 라이브러리에서 제공하는 기능을 다 사용 못한다면 비효율적이겠지만 zod는 라이브러리 용량도 적어서 그런 부분에 대한 걱정을 안 해도 된다고 생각한다 사용하기!설치하기npm install zodyarn add zodpnpm ad.. 동화책 읽고 개발자 경험 향상시키기 - storybook에 대해 알아보자 storybook은 컴포넌트를 독립적으로 개발할 수 있도록 도와주는 컴포넌트 관리 도구이다storybook은 모든 개발자들이 필수적으로 사용하지는 않지만 사용한다면 확실히 개발자 경험을 향상시켜준다고 생각한다storybook이 나오기 전에 사람들은 어떻게 컴포넌트를 개발하고 테스트했을까?나와 내 친구들은 페이지에 컴포넌트를 띄워 직접 개발과 테스트를 했었다 하지만 이렇게 컴포넌트를 개발하고 테스트한다면 아래와 같은 단점들이 존재할 것이라고 생각한다개발과 테스트를 페이지에 띄워 테스트하고 페이지에 띄우는 데 사용한 코드를 다시 지워야 한다다른 사람이 테스트할 때도 따로 컴포넌트를 확인할 수 없어 위의 상황을 반복해야 한다만약 컴포넌트가 상태에 따라 다르게 나타나 컴포넌트를 비교할 일이 생긴다면 위의 상황을.. 왜 js는 오류가 안뜨냐? - eslint에 대해 알아보자 자바스크립트는 실행하기 전까지는 오류가 뜨지 않는다왜냐하면 인터프리터 언어이기 때문인데인터프리터 언어는 컴파일 언어와 다르게 미리 컴파일 하는 단계가 없고 바로 한줄한줄 실행하기 때문에 오류를 띄울 수 없다 console.log(a) 이렇게 없는 변수를 console.log해도 실행시키기 전까지는 오류라고 빨간줄이 뜨지 않는다 이러한 문제는 실행시키기 전까지 에러를 발견할수 없다는 단점을 발생시킨다 그래서 사람들은 js로 개발을 할때 eslint를 사용한다eslint를 사용하면 js에서도 사전에 에러를 찾아주고, 코드의 형식도 원하는데로 검사해준다 사용하기사용하기 위해서 세팅하는 부분이 가장 어려웠던거 같다 내가 설명하는 방법은 next + typescript + prettier와 같이 사용하는 방법이다.. ??? : 너 오늘 zustand 안좋아 보여 - zustand 사용기 zustand는 독일어로 상태라는 뜻을가진 상태 관리 라이브러리이다zustand의 특징으로는 작은 패키지 용량과, 쉬운 사용 방법 그리고 곰돌이가 귀엽다는 장점이 있다패키지 용량다른 상태 관리 라이브러리와 비교해 봤을때 상당이 작은 용량이다 - recoil > mobx > zustand 쉬운 사용 방법나는 zustand를 동아리 프로젝트에서 사용하는것을 보고 사용해 봤는데 사용해 봤는데 사용하기 너무 쉬웠다곰돌이말 그대로 귀엽다 :)이제 한번 사용 방법을 알아보자사실 너무 간단하다! store 생성하기import { create } from "zustand";export const useCountStore = create((set) => ({ count: 0, increase: () => set((.. 이전 1 2 다음
