음... 잡담 아닌 잡담을 해봅시다.
이 글은 생각보다 유익할 수 있습니다(?) 초보개발자로써..
아직 개발자라고 하긴 그렇지만요!!
무엇을 했는지 돌아보는 시간입니다. 개발 일지정도 되겠군요..
의식의 흐름대로 작성하였습니다. ( 잡담이니깐요(?) )
썸네일은 어느 호텔 프론트..
1. 프로젝트 Rpaca (Chatting Web App)
우선 깃헙을 참고해주세요. (업데이트 내용 + 소스코드)
깃헙 : https://github.com/smallrpaca/ChatWeb
구현 : https://www.jacarand.com
그 전에는 쭉 예제만 코딩하다가 문득 무언가 한 번 만들어보고 싶었다.
채팅 웹 정도는 만들어 볼 수 있지않겠어?.. 에서 시작했다..
- 사용 스택
- Html- Css : 전 처리기 Sass 사용
- Js : React(라이브러리), nodeJs(Express 사용)
- Mobx : 상태관리
- socket.io
1-1. 무얼 알고 이런 스택을 사용했는가??
기본적으로 웹 개발을 아니 개발 자체를 시작한 단계였다.
처음 생활코딩을 보고 html, css, js를 접했고 그 외 생활 코딩의 강의는 대부분 본거 같다. 단순히 웹이란 놈을 알아야했기 때문이다.
다양한 언어가 있었지만 자유분방한 느낌의 Js를 택하게 되었다.
다음은 라이브러리를 사용할 것인가? 프레임워크를 사용할 것인가?
JQuery, React, VueJs 등.. 있었지만 JQuery는 문법을 보자마자 내가 사용할 껀 아니라는 느낌을 직감적으로 느꼈고..
VueJs는 뭔가 틀에 박힌 느낌이었다.
그래서 JavaScript 다운(?) React를 선택하였다.
상태 관리자는 단순히 리덕스는 학습하는데 시간이 오래 걸릴꺼같아서 흑마법을 사용하는 MobX를 선택했다.
Css는 Less를 사용해볼까.. Sass를 사용해볼까.. 고민하다가 Sass가 좀 더 직관적일꺼같아서 선택했다.
채팅이라함은 실시간 통신이 있어야하니! socket.io를 택했다.
1-2. 스택 선택이 끝이 아니었다..
선택했다고 끝이아니었지..
React? Mobx? Sass? socket.io?
이것만 학습하면서 만들어가면 되겠지.. ㅋ
자.. 뷰를 구성하고 상태관리 할 것을 넣고.. nodeJs로 서버 구축하고.. socket.io로 채팅을 보내주고 받고..
간단하네?
코드를 보면 알겠지만 React의 props로 전달하는 객체가 거의 없을것이다.
왜???
전달 할 수 있는건 알았지만 어떻게 작성하고 이해한 상태가 아니어서 초기에는 아예 사용하지않았다..
그 외 추가 패키지는 Router 정도 인거같다.
1-3. 어떻게 개발했을까?
당연히 내 머리속에서 전부 튀어나온것은 아니다.
공식홈페이지를 보고 학습한 뒤 예제를 리팩토링하는 식으로 코딩하였다.
굳이 예제를 리팩토링해?? [ 꽤 좋은 소스코드들이 많다. ]
다른 사람들이 작성 해 놓은 코드를 복사, 붙여넣기 하면 되잖아?
라고 의문을 품을 수 있다.
찾아보고 옮겨도 보고 했는데.. 생각보다 적용하기 어려웠다.
왜냐면 각자 개발 스타일이 있고 사용 스택이 100% 맞는 내용은 없었다.
그리고 코드를 봐도 모른다..
socket.io는 공식홈페이지 예제를 활용해 살을 덧붙이면서 구현하였다.
서버는 nodeJs의 프레임워크인 Express로 구현해서 어렵지않았다.
페이지 구성은 최대한 알맞게 이름을 정하였고 단순히 컴포넌트들을 넣는 정도로 생각하고 구현하였다.
페이지 이동은 react-router 를 사용.
예를 들어 Meet Page가 있다면
import React from "react";
import MeetSelect from "../components/MeetSelect";
import NavBar from "../components/NavBar";
import "./css/Meet.scss";
import TopBar from "../components/TopBar";
import SnsLink from "../components/SnsLink";
// Meet 페이지
const Meet = () => {
return (
<div className="Meet">
<div>
<div>
<TopBar />
</div>
<div className="MeetDisplay">
<MeetSelect />
</div>
<SnsLink />
<NavBar />
</div>
</div>
);
};
export default Meet;딱! 컴포넌트들만 들어가게 하였다.
이 페이지 코드를 보고 아! 이 페이지는 이 컴포넌트를 수정하면되겠구나!라고 생각할 수 있게..
컴포넌트를 작성할땐 공용으로 사용할지? 단독으로 사용할지?를 나누는게 경험이 없다보니 어려워서 최대한 나눠보긴했다.
음.. 지금보니 수정이 필요할꺼같다.. 좀 많이..
솔직히 상태관리라고 표현하기 무색할 정도로.. MobX는 그저..
페이지를 이동해도 데이터가 변하지않도록 저장공간 역할만 해주었다.
React 특성상 props로 전달해주지않으면 서로 소통 할 수가 없다.
그렇다고 모든 페이지를 연결해주자니.. 할 수 있을까? 라는 의문이 들어 시도조차 하지않았다. 물론 이해를 완벽하게 못 한 상태라 꺼려지기도 했다.
그래서 MobX는 전역 설정이니 일일이 연결할 필요도 없고 필요할때만 불러 사용할 수 있어서 편리했다.
1-4. 개발을 하면 끝나는건가?
아니다... 배포해야한다..
배포는 다양한 클라우드 서비스가 있었지만 구글 앱 엔진을 선택하여 사용하였다.
네이버, 구글, 아마존, 마소 등.. 첫 무료 서비스를 해주고 있었다.
(아.. 네이버는 제외입니다.)
선택의 기준은 가격도 중요했지만 server.js 파일 그리고 빌드된 파일을 올리기만 하면 자동으로 서버 실행하고.. 관리해주고.. 해줘야한다.
내가 리눅스를 사용해서 컴퓨팅 작업을 하는건 좀 깊게 들어간다 생각했다. (물론 알아두면 좋을꺼같다.)
내 기준에서
AWS는 설명이 불친절하고 사용 리미트없이 사용한 만큼 결제가 이루어지는거 같았다.
네이버는 모르겠다... 분명 한글인데.. 이해를 하지 못했다.
마소는 들어가보기만하고 문서는 읽지도 않았다. (그냥..)
구글 클라우드 플랫폼 서비스를 보다가 앱 엔진이라는 서비스를 보고 내가 원하는 서비스라 바로 선택했다.
게다가 널널한 무료 사용량!! (리미트도 있어서 안심..)
개발 할 때 클라우드 서비스는 편한걸로 사용하면 될 듯 싶다.
그 외
구글 앱엔진으로 업로드하고.. sitemap.xml 설정하고.. 로봇츠도 설정하고.. 각 검색엔진에 등록도 해보고..
완벽하진 않아도 여러가지를 해 본 거같다.
1-5. 이 프로젝트의 엔드 포인트는..?
아마 내가 원하는 서비스를 전부 구현 할때까지..!!
2. 프로젝트 모바일 부고장
이건 소스 코드가 굳이?? 필요없을꺼같아요..
계획 - 코딩 : 3일정도..?
구현 : https://ulrim-master.kjs100184.now.sh/remembrance/v1/Form
2-1. 왜 하게 되었는가?
'숨고'라는 숨어있는 고수를 찾아서 의뢰를 맡기는 서비스가 있다.
거기에 웹 개발 / 퍼블리싱으로 등록을 해 놓았다.
등록한 이유는 실력이 되면 의뢰를 받아서 해보는것도 좋겠다 라는 생각도 있었지만 주 목적은 사람들은 무엇을 요청하는가? 였다.
보통 이런 것들은 개발을 의뢰하는구나.. 라고 알아보고싶었다.
물론 일반화를 하진않는다..
그 중에 모바일 청첩장 제작의뢰를 보고 검색을 해보니 꽤 많은 상품들이 있었다.
음.. 그럼.. 부고장은? 몇 개 없었다.
연습 겸 만들어서 팔아볼까? 라는 생각으로 시작하게되었다.
겸사겸사 API도 연동해보고 싶었기때문에..
2-2. 무엇을 사용해서 만들었는가?
겸사겸사 새로운걸 사용해보고 싶었고 React의 props를 많이 아주 많이 사용해보자..에 중점을 두었다.
- 사용 스택
- React
- NextJs
- Sass
- NOW zeit (배포)
- API : 카카오(링크, 내비), 구글(맵)
그냥 NextJs가 궁금했다..
SSR을 한다는데.. 눈으로 직접보고 싶었다.
라는 큰 뜻보다는 create-react-app에서 카카오 API를 불러오면 CORS 가 나타나서..
인터넷에 있는 모든 방법을 해봤지만 실행되지않았다.
그래서 서버를 만들어서 구현하면 될 꺼같은 느낌이 있어서 express로 cors를 잡는거보다는
nextJs로도 가능할 꺼같다는 생각이 문득 들어서 시도하게되었다.
그리고 React로만 작성해보고 싶었다.
뭐 워낙 간단한거라 상태관리자도 필요없었다..
솔직히 React도 사치였을정도로...
NOW는 nextJs 문서에 포함되어있길래 사용해보았다.
서버리스 서비스이다. (NOW 다운로드 필요)
nextjs를 build 한 후 'now'를 작성한 후 명령하면..
배포가 완료된다..
정말.. 간단하게 배포가 된다. --;;
그리고 API를 연동해보고 싶었기에 카카오와 구글을 사용하였다.
2-3. 무엇을 얻었는가?
- API 호출하는 방법..
- react 오픈 소스 사용해보기
: 갤러리를 넣어보기도 했다. (구현 페이지에는 없다.) - nextjs 와 now 서비스를 알아보았다.
- React props 전달 전달 전달!
: 이렇게 react 오픈 소스를 패키지화 하는구나.. 깨달았다. - 이모지를 알았다...
2-4. 더 알아야할것은?
SSR!! nextJs 자체가 SSR이기 때문에 예제와 다른 사람들이 작성해놓은 것들을 보면서 코딩해봐야겠다.
React로 SSR 구현해보기... nextjs도 충분히 좋은데 지금은 CRA에 익숙해져있다..
3. 드디어 마무리
다음 프로젝트는 덕질(?)을 좀 해보려한다..
아이유 웹사이트 만들기!!
현재 구상은 메인 페이지에서 왼쪽에 LP 음반 모양을 두고..
앨범 내용들을 놓고 클릭하면 백그라운드에 뮤비의 일부가 자동 재생되게 만들어두고
앞 화면에는 부가적인 설명을 넣을 예정..
세부 페이지는 구상 중이다.
이를 위해 Css를 애니메이션 쪽을 봐야할꺼같고..
Three.js도 보고 있는 중이다..
해보고 싶은건 많고 할 것도 많고..
매력적이기도하고.. 힘들기도하고..
하아.. 포트폴리오는 언제 만들지....
국비 교육이 끝나기전에 이력서를 좀 넣어놔야할터인데!!
잘 못 작성된 내용이 있거나 한마디 남기고 싶은 분들은 댓글 작성해주세요!!!
나는 어떻게 공부했나.. 어떤 프로젝트를 하는데 알아두면 좋을꺼 같다는 내용이 있다면 공유해요 공유~!
