이전 시간에는 라즈베리파이(이하 라파)에 DB(MariaDB)를 연결했다. 이제 nodejs를 설치하고 React 애플리케이션을 배포해보도록 하자. NodeJS 설치NodeSource의 레포지토리를 이용해 최신 버전의 Node.js를 설치할 수 있다.curl -sL https://deb.nodesource.com/setup_20.x | sudo bash - 위의 코드에서 setup_[숫자].x 의 숫자는 설치하고자 하는 Nodejs의 버전을 의미하며 이 글 아래에서는 Nodejs 버전을 업그레이드 혹은 다운그레이드 하는 방법을 정리할 것이다. 이제 Nodejs를 설치해보자.sudo apt install nodejs 설치가 끝났다면 설치된 Nodejs의 버전을 확인해보자.node --version  pm2..

DB 만들기이전에 외부에서 라즈베리파이(이하 라파)에 접근하는 방법을 정리했다. 이제 라파에 데이터베이스를 구축해 보도록 하자. 필자는 MariaDB를 사용했다. 설치 및 기초 세팅 우선 MariaDB를 설치해주자.sudo apt-get updatesudo apt-get install mariadb-server 설치가 완료되었다면 mysql에 접속해보자.sudo mysqluse mysql; 그 다음 아래의 명령어를 사용해 값들이 잘 나오는지 확인해보자.select user, host, password from user; 값들이 잘 나왔다면 라파 내부가 아닌 외부에서도 DB에 접속할 수 있게 권한을 설정해주자.create user '사용할 계정명'@'%' identified by '비밀번호';grant a..

새로운 프로젝트를 진행하며 웹을 제공해줄 웹 서버를 구축해야했는데, 이전에 같이 프로젝트를 개발했던 팀원이 라즈베리파이를 이용해 웹 서버를 구축한 것을 봤다. 재미있을것 같아 필자도 라즈베리파이를 이용해 웹 서버를 구축할 예정이다.물론 저수준 웹서버이지만, 그래도 서버를 구축을 경험, 서버비 절약(AWS의 프리티어 기간이 끝나 악덕한 비용을 본 경험이....)을 위해 진행할 예정이다.  위의 사진과 같은 흐름으로 통신이 이루어질 것이다. 위 과정에서 라즈베리파이를 웹 서버로 이용하기 때문에 외부 IP로 파일을 내보내는 과정이 필요하다. 이러한 경우 3가지 과정이 필요하다.라즈베리파이의 내부 IP 고정IP 포트포워딩라즈베리파이에서 DB 및 nodejs 등의 설치 및 테스트 내부 IP 고정우선 라즈베리파이를..

현재 진행중인 프로젝트의 서버는 라즈베리파이를 사용하고있다. 사설 서버를 빌려 진행할 수 있었지만, 같이 진행하는 친구가 라즈베리파이로 서버를 구축해줘서 서버를 빌려 진행하는 수고를 덜 수 있었다. 하지만 문제가 생겼다. 현재 작성된 코드는 Prisma와 typeORM을 사용해 작성되어있는데, 라즈베리파이의 아키텍처인 ARMv7은 ORM에서 지원하지 않는 아키텍처였다. 물론 사용은 할 수 있지만, 이렇게 한다면 다시 서버의 OS를 지우고 다시 시작하는데 시간이 많이 걸릴거라는 생각이 들어 Prisma와 typeORM을 사용하지 않는 방향으로 결론이 났다. 이번 글은 내가 기존에 작성해둔 BE코드들 중 Prisma와 typeORM을 사용한 코드를 수정하는 글이 될것이다. 몰랐던 것들은 기록하면 작성한다. ..

이전에 참여했던 가말다 프로젝트에서 소셜 로그인 기능을 구현한 경험이 있다. 별도의 회원가입을 하지않고 구글과 네이버, 카카오와 같은 외부 소셜 계정을 기반으로 간편하게 회원가입 및 로그인할 수 있어 많은 웹과 앱 어플리캐이션에서 사용하고 있다. 이때 사용했던 것이 OAuth 2.0 프로토콜을 사용하는 Naver Login API인데 오늘은 OAuth에 대해 알아보자. OAuth란? OAuth는 유저가 비밀번호를 제공하지 않고 다른 웹사이트 상의 유저의 정보에 대해 웹사이트 혹은 애플리케이션의 접근 권한을 부여할 수 있는 수단으로서 사용되는 접근 위임을 위한 개방형 표준이다. OAuth의 구성요소 구분 설명 Resource Owner 웹 서비스를 이용하려는 유저, 자원(개인 정보)의 소유주, 사용자 Re..

이번 글은 진행하는 프로젝트에 Storybook을 이용해 컴포넌트의 UI를 테스트하며 개발을 진행하는 컴포넌트 주도 개발법 CDD를 적용하며 정리하기 위해 작성했다.CDD는 컴포넌트를 모듈 단위로 나누어 개발하며 전체적인 UI 개발을 진행하는 개발 및 설계 방법론 이다.컴포넌트 단위로 시작해 전체 UI를 구성하기 위해 점진적으로 개발해 나아가는 Bottom-UP 성향을 갖고있다.Storybook을 이용한 CDD는 UI 디자인을 체계적으로 개발 디자이너와의 효율적인 협업을 UI 컴포넌트 익스플로어 툴을 이용해 진행할 수 있다. 문서화된 컴포넌트의 UI를 CSS, JS, 단위 테스트 등 UX에 영향을 줄 수 있는 요소들의 테스트도 가능하다. 기초 사용법우선 Storybook의 기본적인 사용법에 대해 알아보자..

이번에 새로운 프로젝트에 참여하게되었다. 짧은 기간이지만, 개발해야할 기능들이 많고 테스트 코드까지 작성해야 하기에 바쁜 나날이 될거같다. 이번 프로젝트에서는 Story Book을 이용해 컴포넌트 UI 테스트를 진행한다. 그렇기에 간단한 지식정도는 알고 진행하는 것이 팀원들에게 대한 예의라 생각한다. 본 글은 Story Book의 공식 문서에 나온 튜토리얼 중 시작부터 Redux를 이용한 상태 관리 까지의 과정을 기록한 글입니다. 1. 스토리 북(Story Book)이란? UI를 컴포넌트 단위로 테스팅 할 수 있는 툴이다. 컴포넌트 단위로 테스팅 하는 점에서 잘 분리된 컴포넌트를 재사용하는 React와 잘 맞는 UI 테스팅 툴이라 생각한다. 스토리 북을 사용하는 이유는 아래와 같다. 독립적인 환경에서 컴..