홍준혁

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 ... 을 사용하였다. 백엔드 파일구조 개발하면서 느낀 점. 이번 프로젝트를 진행하면서 느낀점이 굉장히 많은 것 같다. 특히 프로젝트를 배포하는 과정에서 많은 오..

현제 로그인 화면을 다 만들었다. 디자이너 없이 혼자 만드니까 너무 힘들ㄷr.....ㅋㅋㅋ 새로고침 할때 옆에 있는 멘트도 바뀐다...! 아직 만들었던 서버랑 연결은 하지 않은 상태이고 상태 관리 라이브러리는 Redux를 사용하려고 하는데 프로젝트에 잘 주입할 수 있을지 걱정이다. 그리고 HLOG깃허브 주소는 https://github.com/Hong-JunHyeok/HLOG Hong-JunHyeok/HLOG Contribute to Hong-JunHyeok/HLOG development by creating an account on GitHub. github.com 여기다. 깃허브 와서 팔로우 한번씩만 해주고 가주면...! 큰 힘이 될 것이다.!!! 그럼 오늘은 여기까지 하고 다음에는 메인화면 구성을 ..

서버 단에서 기본적으로 필요한 API를 다 만들었다. 이제 프런트를 작업할 차례인데 그전에 디자인을 하려고 한다. 어떤 디자인 콘셉트를 잡고 개발을 할 것인지 볼 것이다. 먼저 메인 컬러는 붉은색으로 하고 싶다 왜냐하면 내 성이 홍이고... 홍은 붉은.. 색이니까... 아무튼 붉은색으로 콘셉트 컬러를 잡을 것이고 또한 세련된 느낌을 중점적으로 디자인할 것이다. 심플함 감성 세련 이 세 가지를 중점적으로 디자인하도록 하겠다. 이제 figma로 디자인을 만들어 봐야겠다. 아이폰의 PRODUCT RED 색을 굉장히 좋아하는데 그래서 #B00D23의 색을 사용해야겠다. 어느정도 디자인을 해보고 프런트엔드 프로젝트를 개발하고 있다. 다음 포스트에서 로그인&회원가입 컴포넌트를 보여주겠다.

서버를 처음 개발해보는 거라 많이 헷갈린다.ㅠㅠ 지금부터의 내용은 확실한 정보가 아니니 흘려들었으면 좋겠다. 아까 설치한 expreess를 사용해서 hello world를 작성해보자. 임의로 루트폴더에 express.js라는 파일을 만들어서 아래와 같이 작성하고 const express = require('express'); const app = express(); const port = 3000; app.get('/', (req, res) => res.send('Hello World!')); // '/'경로에서 hello world! 출력 app.get('/page', (req, res) => res.send('page')); // '/page'경로에서 page 출력 app.listen(port, ()..