개요 필자가 Spring Boot를 익히는 동안 데이터베이스의 연계도 필요하다 생각했기에, Spring에 DB접속하기 쉬운 MySQL를 구축할 예정을 잡았다. 원래대로라면 로컬에 MySQL를 넣으면 간단하게 될 일이였지만 나중에 로컬에서 MySQL를 삭제하기 귀찮을 뿐더러, MySQL를 관리할 수 있는 툴로 phpMyAdmin을 같이 구축하는 방향으...
VSCode를 사용하여 Spring Boot API 작성
개요 필자가 이직을 하게 되면서 필요한 기술로, Java와 Spring Boot를 요구받게 되었다. 대학교 과제 이후로 Java를 다루어 본 적이 없어 언어를 처음부터 배운다는 생각으로 가지며, 환경 구축부터 시작을 하게 되었다. 여기서 필자는 VSCode 에디터를 다루는 것을 좋아하기에 IntelliJ 혹은 Eclipse와 같은 IDE를 사용하지 ...
Github Actions를 이용해 CI/CD를 구축
필자는 백엔드, 프론트엔드 이외에도 테스트, 빌드도 도맡아 하고 있다. 하지만 테스트도 수동으로 작성하는 경우도 있고, 이전까지는 빌드까지 수동으로 했었다. 필자가 다녔던 회사는 GitLab를 사용하고 있고 GitLab에 있는 CI/CD를 사용하기 시작했다. 그렇게 자연스럽게 CI/CD에 흥미가 생기기 시작했고, 직접 만져보는 기회는 없었다. 그래서 ...
AWS Amplify를 이용해 github소스로 React웹 어플리케이션 구축
회사 내에서는 웹 어플리케이션을 만들고 사내 서버로 호스팅, 빌드까지 겸해서 담당을 한 적이 있다. 이때 당시에는 사내 PC서버에 Docker로 빌드해 운영하였지만 최근들어 AWS를 다루기 시작했다. 필자도 처음에는 AWS에 대해서 들어보고 구경만 했지만, 실제로 만져본 경험은 없었다. 그러다 사이드 프로젝트를 개발하던 중 서버를 개설하고 직접 운용까...
React Testing Library 컴포넌트 테스트 사용법
오랜만에 블로그를 다시 열어보고 작성해보게 되었다. 그동안 React에 대해서도 이것저것 많이 배우면서 동시에 사이드 프로젝트를 준비하면서 서버 구축에 클라우드 서버 시스템인 AWS를 사용해보았다. AWS에 대한 이야기는 나중에 하며 이번에는 React Testing Library에 대해 알아보도록 하겠다. 지금까지 React로 이루어진 테스트는 단위...
React Redux를 사용해보자(Redux Hooks 추가 및 devtools 사용)
지난 포스팅에서 Redux의 기본 개념을 설명했다면 이번 포스팅에서는 실제로 React를 이용한 Redux를 사용해보도록 하겠다. 물론 React에 프로젝트 작성에 대해 알고 있다면 이번 포스팅의 방법도 어렵지 않게 할 수 있다. 그렇다면 실제로 어떻게 사용하는지 확인해보도록 해보자. 이번 Redux에서는 기본적인 기능에 추가로 Selector와 Ac...
React Redux의 원리
필자는 React에 적응이 안됐던 시기에 제일 불편했던 것은 바로 Local State였다. 하나의 컴포넌트를 생성하고 State를 지정하고 난 이후 컴포넌트가 소멸될 시에 State도 같이 소멸이 되기 때문에, 다른 컴포넌트로간의 이동이 매우 불편했다. 거기다 컴포넌트의 State를 다른 컴포넌트로 지정하기 위해서는 props, state를 사용해야...
React StoryBook의 기초(스토리 작성 / 스토리북 실행)
본 포스트는 MacOS 10.15.7 을 기준으로 작성하였습니다. 필자는 직접적으로 React를 다루면서 Storybook 프로젝트를 다뤄본 적이 없었다. 팀 내 어플리케이션 개발을 위해서는 팀 공용 컴포넌트를 사용하고 있지만 필자는 단지 써보기만 할 뿐 직접 컴포넌트를 작성한 적이 없다. 팀 공용 컴포넌트는 Storybook으로 이루어져 있어서...
Material-UI에 대해서 알아보고 실제로 컴포넌트를 이용하기
본 포스트는 MacOS 10.15.7 을 기준으로 작성하였습니다. 필자는 React를 사용하면서 UI에 대한 프레임워크로는 Material-UI라는 프레임워크를 사용하고 있다. 상당히 깔끔한 디자인에다 편집하기 쉬운 컴포넌트들로 구성되어 있으며, CSS도 어렵지 않게 수정할 수 있다는 것이 매력적이였다. 사실상 컴포넌트들로 세팅할 수 있어서 단지 불...
React란 무엇인가?
필자는 프로젝트를 진행할 때 백엔드, 프론트엔드를 Django 하나로 통일해서 사용하고 있었다. 템플릿과 뷰를 따로 관리할 수 있기에 나름 편리하게 사용하고 있었다 생각했는데 최근 백엔드와 프론트엔드의 프레임워크를 나누기 시작하여, 백엔드는 Django Restframework를 사용하며 프론트엔드는 React.js를 쓰는 방침으로 개발하기 시작했다....