월간신천팟(1)

❗️신천팟이란?)))

고등학교 2학년부터 현재까지 약 7년지기 친구들 8명의 모임 이름이다ㅋㅋ 어우 오글거려

 

제작 방식

• 리액트로 제작
  • 웹앱 방식으로, 앱스토어에서 어플을 까는것조차 귀찮아할 우리 신천팟을 배려함
  • 리액트 특성상 휴대폰 및 컴퓨터로 접속해도 괜찮을 것
  • 지난 블로그 제작 시, 대부분의 사람들이 휴대폰으로 접속할 것이라는 것을 고려하지 못함.
    • 싸이월드를 오마쥬하였는데, 싸이월드 특성상 고정된 크기의 웹 서비스를 가지고 있기 때문에 휴대폰으로 접속 시 제대로 작동하지 않는 모습을 보여주었음.
    • 웬만한 사람들은 컴퓨터보다 모바일로 접속할 것이기 때문에 휴대폰 친화적인 서비스를 제작해야 함.
• MVP 방식으로 최대한 빠르게 제작(3일컷)
  • 시간도 없고 많은 기능 넣어봤자 신천팟이기 때문에 불편한 기능은 카톡으로 문의해달라고 하면 됨
  • 린 스타트업 관련 글 작성 시 도움될 것이라 생각
  • 곧 시험기간인데 시간도 없음
• 해야할 것
  • 노션 정리
  • 개발 시 참고한 링크 모아두기

 

폰트

Pretendard 제작자가 참여한 새로운 폰트 Wanted Sans | GeekNews

Pretendard 제작자가 참여한 새로운 폰트 Wanted Sans | GeekNews

https://github.com/wanteddev/wanted-sans

GitHub - wanteddev/wanted-sans: 곧으면서도 유연한 산세리프 글꼴 | A Sans-serif font; Geometric with a heart, Human

최근 개발, 배포된 Wanted Sans체를 사용해 보았다.

기본 폰트보다 좀 더 부드럽고 귀여운 느낌이 든다.

 

 

 

실행

1. 데이터베이스 틀 만들기 및 예시 데이터 입력

 

2. 리액트 설치 및 실행

저번에 node.js 전부 갈아엎은 적이 있어서 처음부터 다시 깔아야 하더라;;

그러는김에 한번 정리해보기로 한다.

리액트 설치

• 리액트 설치 명령어
• npm install -g create-react-app
• 리액트 설치 확인
• create-react-app -v
• 원하는 폴더에 개발환경 만들기
  • 폴더로 이동또는 VSC 사용해서 작업 폴더를 만들고 다음 작업 실행
  • cd 파일경로
  • 리액트 설치
  • create-react-app .

위 작업까지 완료하면 리액트 제작을 위한 기본 파일들이 전부 다운받아져 있을 것이다.

이제 src/app.js 파일을 수정해가며 멋진 작품을 만들어보자!

리액트 실행

npm run start 명령어를 입력하면 실행이 가능하다.

이후 터미널을 종료하기 전까지 리액트는 항상 켜져있을 것이니 지정해둔 localhost:지정번호로 접속하자.

기타 명령어를 사용하고 싶다면 package.json 파일을 수정하자

 

 

3. 기능 기획

012345

초기에 굿노트로 대충 낙서하듯 구상해봤다.

처음엔 대충 뼈대만 만들었지만 프로젝트가 진행되면서 점점 살이 붙어져 가는 느낌이다.

 

 

4. 프론트엔드 제작

난 프로젝트 시 프론트로 뼈대를 잡아두고 백엔드 작업을 해 합친 뒤 살을 붙여나가는 과정을 좋아한다.

때문에 첫 코딩은 프론트엔드!

요즘 사용하고 있어 친숙한 피그마로 할까 생각도 해봤지만 최대한 빨리 완성하는 것이 목표라 코딩하면서 변경하기로 한다.

컨셉 컬러

그린과 회색을 위주로 만들어 보기로 한다.

로고도 그린으로 만들까 했는데 눈에 잘 띄지 않아 블루로 급선회하였다.

나중엔 컨셉 컬러도 미리 정하고 자주 사용하는 코드를 저장해가며 써야겠다.

 

5. 백엔드 제작

1번에서 제작한 샘플 데이터를 가져와서 프론트에 연결해보았다.

node.js, express와 함께라면 나도 풀스택ㄱ개발자!

 

6. 배포

Fly.io 배포하기

Fly.io 배포하기

항상 배포할때가 가장 떨린다.

이번에도 역시 친숙한 fly.io를 사용하여 배포하였는데, 기회가 된다면 AWS를 사용하여 배포하는 방법도 배우고 싶다. 또한 올해 말에는 NAS로 내 웹서버를 만들어서 다시 배포해볼 예정이다.

 

 

7. 마무리 및 기능 정리

https://monthly-sincheonpot.fly.dev

React App

이 도메인으로 접속할 수 있다.

11월 9일부터 11일까지 약 4일간 만들었다.

처음 시작할 때 되게 자신만만하게 시작했는데, 캘린더 제작 등의 부분에서 막혀 다른 블로그를 참고하며 코드를 짰다.

그러한 과정 속에서 생각보다 나의 실력이 부족하다는 것을 깨달았고 자주 이런 경험을 해봐야겠다는 생각이 들었다ㅋㅋ

시간이 촉박하여 생각한 것보다 퀄리티가 매우 낮게 나왔지만, 일단 여기서 마무리 짓고 2학기가 끝난 뒤에 섬세하게 다듬어봐야겠다.

 

 

 

기능 소개 및 후기는 2부에서 계속 ->