본문 바로가기

분류 전체보기

 (49)
리액트 테스팅 라이브러리(RTL)를 사용한 TDD 적용 도전기 1편 - 테스트 과정 중 만난 오류 (svg모듈 미인식 오류, theme 인식 오류) 1. TDD란?TDD는 Test Driven Development (테스트주도 개발)의 약자로 구현 후에 테스트를 하는 것이 아니라 '실패하는' 테스트코드를 먼저 만들고 나서 그 테스트를 통과할 만큼 최소한의 구현을 하는 것을 말한다.그로 인해 불필요한 코드가 생기지 않고 나의 코드에 대한 정확성을 보장할 수 있다.우리 팀에서 10일간 만든 서비스를 디벨롭하기로 했는데 당시 TDD를 시도했다가 알수 없는 오류로 인해 포기했었다. 디벨롭하면서 추가되는 기능은 꼭 TDD로 개발해보고 싶은 마음이 들어서 바로 시작! 2. 테스트 도구 나는  jest 를 사용했다. jest는 react create react app 으로 리액트 프로젝트를 설치하면 같이 설치된다. 그 이외에도 나는 타입스크립트를 사용했기 때문에..
[구름 2월 Commit] 참여 후기 <시야가 넓은 개발자는 무엇이 다를까> 지난 14일에 구름에서 진행하는 Commit 에 다녀왔다.매달 진행하는 것이라고 하던데, '시야가 넓은 개발자' 라는 주제에 이끌려 신청했다.현재 LINE의 기술임원이자 일본에 상장된 자회사의 CPO이신 김영재님이 진행한 강의였다.관련 링크 https://blog.goorm.io/commit_17th/이번 커밋에서 기억에 남는 부분만 정리하자면 이렇다. 접은 글은 강의 내용, 일반 줄글은 내가 느낀점이다.[한줄 요약] 뭐가 다르긴, 마음가짐이 다르지!1. 인터페이스더보기인터페이스란 남들이 사용하라고 만든것이다.나의 모든 아웃풋에는 상대방이 있다.‘유저는 누구인가?’를 항상 생각해야 한다. 내가 오늘 작성한 코드의 유저는 누구지?? ex) 동료, 한달후의 나 등 코드로 말하는 영업사원의 마인드셋동료를 설득..
VAC 패턴으로 비즈니스 로직을 분리해보자 (+ 프로젝트에서 제대로 적용해보기) 😥문제 인식새로운 팀프로젝트를 하면서 디자인패턴을 새롭게 적용해보고 싶었다. 이유는 그동안 프로젝트를 하면서 하나의 컴포넌트에 뒤섞인 UI + 복잡한 비즈니스 로직들로 가독성이 너무 떨어졌고, 유지보수 하기도 힘들었다.그런 단점을 보완해줄 패턴으로  MVC 패턴을 접했었는데 고민이 꽤 해소되었던 경험이 있어 이와 유사한 리액트에서 적용 가능한 패턴을 찾아보았다.처음에는 Compound Component 패턴을 알아봤는데 여기서 스타일 컴포넌트를 따로 분리해서 저장한 것이 가독성 향상에 도움될 것 같아 이 점은 나도 적용하기로 했다.다만 VAC패턴을 접하고 내가 원한 로직 분리를 위한 디자인 패턴이어서 이것에 대해 알아보기로 했다! VAC 패턴이란?VAC 패턴은 View Asset Component의 준..
🚨api get요청 시 data는 쿼리에 담아야 한다! 문제 상황백엔드 개발자와 협업하면서 api 요청을 할일이 생겼다. 해당 요청은 GET 요청이었고 data를 담아서 보내는 것이었다. 나는 data를 담는 건 POST요청만 해봤기 때문에 확인차 여쭤봤는데 GET이 맞다고 했다.그렇게 알고 개발하는 와중에 계속 아래와 같이 에러가 났다. 에러 메세지는 서버에서 따로 안보내줘서 몰랐는데 백엔드 개발자가 하는 말로는 내가 보낸 data가 없다고 했다.그래서 나는 내가 요청을 잘못한줄 알고 한참 삽질을 했다. 한 반나절은 이것때문에 날린듯prettier 설정이 잘못돼서 data가 잘못들어갔나 싶어서 꺼보기도 하고 타입을 잘못썼나 싶어서 타입을 any로 바꾸고 다시 요청도 해봤는데 안됐다. 해결방법아무생각없이 'api get요청 data'라고 검색했는데 GET 요..
🚨Redux-Persist 라이브러리 사용해서 로그인 토큰 영구저장하기 1. 문제 상황프로젝트에서 로그인 후 토큰과 로그인 유형을 리덕스에 저장했는데 새로고침을 하면 초기화가 되어 다시 로그인을 해야 했다.2. 해결 방법찾아보니 리덕스 스토어에 데이터를 영구적으로 저장할 수 있는 Redux-Persist 라이브러리를 사용했다.persist는 지속하다, 영속하다 라는 뜻이다. 데이터를 영구적으로 저장할 수 있도록 하는 것이다.이것이 가능한 이유는 Redux-Persist 라이브러리가 LocalStorage와 SessionStorage의 storage를 redux에서 사용하게 해주기 때문이다.이중 LocalStorage는 데이터를 영구적으로 저장하기 때문에 이곳에 저장하게 만들어주면 리덕스 slice를 영구적으로 저장할 수 있다.persist-redux는 어렵지 않다. 우선 프..
공연 통계 오픈 api 활용해보기 처음에 내가 오픈마켓을 기획하면서 만들고자 한 서비스는 뮤지컬 굿즈 판매 마켓이라는 정체성을 가져가면서 배너 부분에 뮤지컬 주간 랭킹과 공연 정보도 함께 보여주고 싶었다. 뮤지컬, 연극 등 공연과 관련된 공공 API를 제공하는 곳은 공연예술통합전산망이라는 홈페이지였는데 아쉽게도 예매 랭킹은 제공되지 않았다. 당시에는 공연 목록, 공연장 목록,지역별 판매액 등 다양한 정보가 제공되었지만 예매 순위는 전혀 제공이 되지 않아서 원하는 베너 디자인을 포기하고 있었다.그러던 와중 메일을 하나 받았다.이 제목을 보고 설마 내가 원하는 데이터가 추가된건가?! 싶어 두근두근하며 확인했다. 완전 운이 좋게도 예매 통계가 신설되어서 일자별로 통계 확인이 가능했다(주간, 월간도 당연히 가능)어떻게 이 타이밍에 내가 원하는 ..
Atomic Design Pattern 사용기 올해의 첫 게시물을 어떤 것으로 할까 하다가 개인프로젝트에 도입해봤던 Atomic Design Pattern(아토믹 디자인 패턴)에 대한 얘기를 해보기로 했다.아토믹 패턴은 많이 들어봤을 법한 디자인 패턴이지만 혹시 아토믹 패턴에 대해 잘 모르거나 도입을 고민중인 사람들이 있다면 이 글을 읽어보시길 추천합니다! 실제로 개발하면서 느낀 점을 담았기에 도움이 될 것 같습니다. 1. 아토믹 디자인 패턴이 뭔데? 👀atomic은 '원자의' 라는 뜻으로, 컴포넌트를 최소한의 단위로 나눠 개발하는 패턴을 말한다.편하게 아토믹 패턴으로 부르도록 하겠다😀다음 사진처럼 atoms,  molecules, organisms, templates 들이 모여 하나의 페이지를 완성한다.  atoms는 원자 단위, 즉 더이상 나..
2023년의 회고 성장한 부분 작년에서 올해로 넘어가는 1월1일 자정에는 정신없이 프로젝트를 하느라 팀원들끼리 새해 복 많이 받으라며 응원하던게 생각이 난다.그리고 2023년이 시작될 때 의욕과 열정이 활활이었는데 막상 2023년의 마지막 날이 되니 목표를 이루지 못한 것이 많아 아쉽다.그래도 작년에 비해 올해 성장한 부분이 어떤 것인지 생각해보자.. 1. 나의 캐릭터여러 채용공고를 지원하면서 내 강점과 약점을 파악하는 것이 필요했다.개인프로젝트를 하면서 나의 개발자로서의 강점을 어느정도 파악한 것 같다.이러한 부분을 취준 기간동안 계속 강화하면서 이력서로 어필할 생각이다. 2. 어떤 기업에 가고 싶은지기업마다 인재상과 개발문화가 많이 달랐다.그래서 특별히 인상적인 비전을 갖고 있는 기업들을 보게 되었다.그래서 기업문화가..

티스토리툴바