홍준혁

React에서 테스트를 하는 방법을 알아보도록 하겠습니다. HLOG를 개발하면서 테스트의 중요성을 깨닫게 되었는데요, 가장 중요한 이유는 사람은 언제나 실수를 한다는 점입니다. 사람은 완벽하기 않기 때문에 하나하나 테스트를 하게 되면 굉장히 귀찮은 작업이 될 수 있습니다. 또한, 테스트 과정에서 놓치는 부분이 있을 수도 있죠. 그래서 이러한 테스트 코드를 자동화를 시켜 검증 단계에서 실수할 여지를 줄여주는 것이 중요하다고 생각하게 되었습니다. 두 번째로, 리펙터링을 하는 데 있어서 굉장히 유용하다고 생각하게 되었습니다. 리펙터링이란, 코드의 기능은 바꾸지 않으면서 내부 구조를 개선하는 작업을 의미하는데요, 이러한 작업이 필요한 이유는 유지보수에 용이하기 때문입니다. 그래서 테스트 코드로 케이스를 작성한 ..

안녕하세요? 오랜만에 블로그 포스팅을 하는 것 같습니다. 몇 개월 동안 정말 열심히 달려오느라 블로그 관리할 시간이 없었어요. 거두절미하고 이번 글의 주제는 HLOG 리펙터링이에요. 기존의 레거시 코드를 전부 효율적이고 읽기 편한 코드로 변환하는 작업을 하려고 해요. 또한, 기술 스택도 기존에 사용해보지 않았던 SWR(Data-fetching Library)를 사용해서 작업을 해보려고 합니다. 그리고 Next.js를 벗어나 React를 이용해서 개발을 진행하려고 합니다. 그리고 기존에 미약했던 반응형 디자인 시스템도 새로 구축해보려고 합니다. 이번 리펙터링의 최대 목표는 선언적으로 코딩하기입니다. 트러블 슈팅 - React-Router-Dom사용 시, 직접 주소 입력을 할 때 Cannot GET이 뜨는 ..

HLOG는 개인프로젝트로 제작한 소프트웨어 정보공유 플렛폼이다. velog 처럼 글을 작성하고 다른사람과 소통하는 블로그다. 다들 개인 프로젝트로 블로그 하나씩은 장만하는거 같아서 나도 한번 만들어보았다. 프론트엔드 개발스택은 - Next.js + React.js - TypeScript - Emotion.js - Redux + Redux-saga - Immer.js ... 프론트엔드 파일 구조 백엔드 개발스택은 - Express.js - TypeScript - Mysql (DB) - Passport (Session login) - TypeOrm ... 을 사용하였다. 백엔드 파일구조 개발하면서 느낀 점. 이번 프로젝트를 진행하면서 느낀점이 굉장히 많은 것 같다. 특히 프로젝트를 배포하는 과정에서 많은 오..

만들었던 모든 코드는 Github에 기재되어있다. github.com/Hong-JunHyeok/RN_weatherApp Hong-JunHyeok/RN_weatherApp 리액트 네이티브로 만드는 날씨 앱입니다. Contribute to Hong-JunHyeok/RN_weatherApp development by creating an account on GitHub. github.com 결과물 모습 파일 구조 느낀 점 태어나서 처음으로 앱 개발을 해보았다. 생각보다 어려운 면도 있었고 쉬운 면도 있었다. 리액트 네이티브를 해봤는데, 전부터 리액트를 해와서 그런건진 모르겠는데 리액트 네이티브가 친숙하고 쉽게 다가왔다. 하지만 그 익숙함에 속아 자꾸 리액트랑 같다고 생각하여 실수를 하는 경우가 많았다. 대표적..

만들었던 모든 코드는 Github에 기재되어있다. github.com/Hong-JunHyeok/Transpi Hong-JunHyeok/Transpi 카카오 API를 사용한 번역 웹애플리케이션입니다. Contribute to Hong-JunHyeok/Transpi development by creating an account on GitHub. github.com 결과물 모습 파일 구조 느낀 점 맨날 JsonPlaceholder라는 걸로 fetch연습을 해왔었는데, 이번에 카카오에서 만든 번역 API를 사용해보면서, 뭔가 "만든다는" 느낌이 들었다. 그리고 styled-components의 사용법을 어느 정도 감을 잡은 것 같고, 스타일링에 대한 자신감이 높아졌다.(외부 자료 한 개도 안 보고 개발한 내가..

만들었던 모든 코드는 Github에 기재되어있다. github.com/Hong-JunHyeok/corona_viewer Hong-JunHyeok/corona_viewer 국내 코로나 현황을 보기위한 웹애플리케이션. Contribute to Hong-JunHyeok/corona_viewer development by creating an account on GitHub. github.com 결과물 모습 파일 구조 느낀 점 간단하게 typescript랑 recoil의 조합을 사용해보고 싶어서 시작한 프로젝트인데, 하다 보니 큰 문제에 직면했다. CORS인데, 이 문제는 프론트 단에서는 해결할 수 없는 문제임을 깨닫고 다른 방법을 찾아보다가 결국 포기하고 크롬 플러그인인 Moesif CORS를 사용해서 우회를..