약 1개월 간 뼈를 갈아서 만들어 공식적으로 오픈했습니다.
SENTENCE U | 문장공유 커뮤니티
짧은 글로 사람들에게 동기부여와 여러 긍정적인 메시지를 보내보세요!
www.sentenceu.co.kr
🙏🏻
센텐스유는 짧은 글로 사람들에게 동기부여와 여러 긍정적인 메시지를 담기위해 만들어진 공간입니다.
오직 온라인의 정보에 의존해 혼자서 제작한 1인 프로젝트입니다.
많은 피드백 부탁드립니다.
어쩌다 만들게 되었는가!
"FE개발자가 되어야지!" 하고 어느새 반년이 지났습니다.
6개월 간의 학원 대장정을 마치고 부족한 실력으로 취업에 힘을 쏟을까, 뭐라도 더 공부해봐서 조금이나마 역량을 높인 후 취업을 할까
두 고민 중에 후자를 택해서 학원을 마치고 계속 생각해왔던 프로젝트를 직접 만들어보자고 다짐했습니다!
어떻게 시작하지?
학원에서 배운 방법은 오직 CRA와 Firebase 두 가지.
무작정 학원에서 했던 방법으로 똑같이 구현해볼까? Nope!
서버는 얕게라도 직접 구축해보자.
서버는 수 많은 유튜브영상과 구글 검색을 통해 기초적인 Node + Express + MongoDB 조합으로 가보자 라고 생각했습니다.
특히 Jonhn Ahn님의 유튜브 영상이 크게 도움이 됐습니다.
Express와 MongoDB를 설치 및 설정하고 Mongoose를 통해 처음 DB와 서버를 연결 한 순간 이마를 탁! 치며 이야 쉽네! 했던 제가 생각나네요.
서버라는 것을 오픈해놓고 바로 클라이언트로 넘어왔습니다.
클라이언트는 CRA로? 아니면 직접 웹팩으로 빌드환경 만들어볼까?
CRA(Create React App)로 간단하게 프로젝트 구축하고 컴포넌트 막 생성하고 스타일 막 작성해서 알아서 빌드하고 알아서 배포해주는 그런 환경은 싫었어요.
어렵더라도 공부할게 많더라도 웹팩을 직접 사용해서 프론트엔드 프로젝트환경을 직접 구축해보고 싶었습니다.
후기를 작성하는 지금도 아직 수많은 옵션과 플러그인 등 모르는 것이 산더미지만 웹팩 설정하는데에만 하루 걸려! 라는 말을 처음 이해한 것 같아요.
웹팩(Webpack) 최소설정으로 프론트엔드 개발 환경 만들기
프론트엔드 개발환경의 이해: 웹팩(기본)
1. 배경 먼저 모듈에 대해 이야기 해보자. 문법 수준에서 모듈을 지원하기 시작한 것은 ES2015부터다. import/export 구문이 없었던 모듈 이전 상황을 살펴보는 것이 웹팩 등장 배경을 설명하는데 수월
jeonghwan-kim.github.io
저는 주로 김정환님의 블로그와 영상을 보며 초기 설정을 했고, 프로젝트 제작 하면서 발생하는 오류와 버그들은 구글을 통해 해결했답니다.
디자인과 설계 구조는?
솔직히 미리 기획과 설계를 하고 진행하진 않았습니다.
기획자와 디자이너를 준비하는 것도 아니었고, 당장 FE기술역량을 높이는데에 집중하고 있었거든요.
일단 시작했습니다. 당연히 있어야할 로그인과 회원가입 기능부터 만들었어요.
서버도 직접 구축했으면 API도 직접 작성해야겠죠? 이 시점에는 프론트보다는 서버쪽 공부를 많이한 것 같아요.
물론 프론트를 위한 초석이겠지만요.
RestAPI도 공부해보고, Express로 MongoDB데이터에 접근하는 법부터 해서 여러여러가지 많이 찾아보고 적용했답니다.
그렇게 로그인을 구현할 때는 로그인 UI를 대충 작성해놓고, 회원가입은 또 로그인이랑 비슷하니까 그냥 동일하게 가져다가 쓰고...
아 참 저는 그래도 디자인에 약간의 흥미를 느껴서 Emotion을 사용해서 직접 디자인 했습니다.
Emotion – Introduction
(Edit code to see changes)
emotion.sh
로그인 회원가입 로그아웃 글 CRUD 등 기능을 하나씩 만들어가면서 탑을 쌓아갔다고 해야할까요..
점점 많아지는 기능들..
처음 생각한 건 회원 기능 글 CRUD, 댓글 CRUD, 회원 프로필 수정, 명언 크롤링 이 정도의 간단한 기능정도만 구현하려고 했죠.
인간의 욕심은 끝이 없고 또 같은 실수를 반복한다고..
실시간 유저 접속 상태, 날씨(?), 시계, 다이어리 이런 기능들을 추가하려고 마음도 먹었고 실제로 행동에 옮겼습니다. 하-핫!
Day 9 | 유저 실시간 접속상태
유저 실시간 접속상태 socketio로 유저 접속 시 백에서 배열에 저장해놨다가 중복검사를 해서 돌려주는 코드를 작성했었다. 그 배열을 돌려주는 객체에서 토큰과 유저명을 가져와 로그인중인지
kyledev.tistory.com
Day 17 | 포스트 날짜별 구분/시계/날씨/캘린더
포스트 리스트 날짜별로 구분 최신글 처럼 날짜별로 보이면 좋을 것 같은 리스트는 섹션별로 나눠서 보여주는 것이 좋을 것 같았다. dayjs를 사용해서 postList라는 매개변수를 받아 그 글의 createdAt
kyledev.tistory.com
결국 저 중에 남은건 실시간 유저 접속 상태에요!
p.s. 하루를 마무리하는 한 줄 일기 기능을 추가 한 다이어리는 다음 버전에 추가할 예정이랍니다.
서비스명 변경 및 디자인 재공사
원래 시작할 당시 서비스명은 LIS였어요. Life Is a Sentence.(삶은 한 문장이다.) 라는 뜻이었거든요.
근데 사람들에게 막상 보여주면 LIS? 리스? 무슨 뜻인지 한 번에 알아차리지 못할 것 같았습니다. 서비스의 의도를 알리지 못할 것 같았죠.
그래서 해가 져물어가는 버스에서 창가를 바라보다가 "문장...문장...문장..."이라고 계속 중얼거리다가 "당신에게 문장을 줍니다." 뭐 이런 느낌이 떠올랐어요.
그래서 SENTENCE(문장)와 U(당신)를 합친 SENTENCE U 로 변경했답니다.
서비스명을 변경하면서 심플하고 단촐했던 디자인도 어느정도 레이아웃도 잡아가고 포인트 색상도 적용해 가면서 이제 진짜 사이트 같은 느낌이 들었어요.
공사 전
공사 후 (달라진게 없다구요? 그냥 넘어가 주세요.)
임시 배포와 휘몰아치는 마음
집에서 혼자 개발하고 개발환경에서만 돌려보고 혼자 글 써보고 좋아하고 그러면 어디다가 써먹겠어요.. 사람들 써보게 해야지..
그래서 기능테스트도 하고, 나 집에서 이런거 만들고있다!!!! 소리지르고 싶어서 일단 배포를 해보기로 마음 먹었어요.
근데 배포가 쉬워야지 뭘 하던지 말던지 하지..😡
배포를 하려고 또 이것저것 찾아보다가 클라우드타입이라는 배포사이트를 찾게됐어요.
보통 정적파일 배포하면 Heroku나 Netlify들 사용하시더라구요.
근데 뭐 비용 뭐시기뭐시기 해서 확실하게 무료인 클라우드타입을 선택하게 됐어요. 서버 배포 자체는 참 쉬웠답니다.
모두의 플랫폼팀, 클라우드타입
클라우드타입은 클라우드 기반 애플리케이션을 빠르게 개발하고 배포할 수 있는 클라우드 애플리케이션 플랫폼입니다.
cloudtype.io
환경변수 넣어주고 서버파일 돌릴 명령어 적어주고 깃허브 레포지토리 연결해주고.. 해서 다시 말씀드리지만 배포자체는 쉬웠어요.
처음으로 포기를 고민하게 만든 도메인 이슈
서버는 클라우드타입으로, 프론트는 깃허브페이지로 배포하려고 했습니다.
도메인이 다르면 쿠키 등 데이터 공유가 어렵..(사실상 불가능)에 가까운데 많은 인터넷의 정보들이 가능을 외치고 있더라구요.
그래서 임시 배포지만 회원가입, 로그인, 로그아웃, 글 CRUD 이 정도는 가능해야하지 않겠나하고 희망의 끊을 놓지 않고 있었죠.
자세한 스토리는 아래 기록을 봐주세요... 눈물 나니까...
Day 22 | 프로젝트명 변경/가배포
프로젝트명 변경 왜? 이제와서? 기존의 Life Is a Sentence, 즉 LIS 는 독특하고 기억에 남기 때문에 좋은 옵션이지만, 웹이 무엇을 하는지 처음에는 사용자에게 명확하지 않을 수 있다고 생각했다. 제
kyledev.tistory.com
두번째로 포기를 고민하게 만든 PWA
PWA나 서비스 워커 등.. 저 같은 개발 초보분 들을 위해 어려운 용어는 아래 공식 문서를 참고하시길 바랍니다..
프로그레시브 웹 앱 소개 - 프로그레시브 웹 앱 | MDN
이 문서는 프로그레시브 웹 앱(PWA)의 소개입니다. PWA가 무엇이고 일반 웹 앱에 어떤 이점을 가져다주는지 설명합니다.
developer.mozilla.org
PWA(Progressive Web App)..... 웹을 앱으로 사용할 수 있는 환경을 제공해줍니다.
개발한 웹 애플리케이션을 앱처럼 사용하게 해준데!! (수근수근..) (수근수근..) (이수..)
한번 서비스워커를 활성화 시키면 다음에 기능이나 버그들 수정해서 배포하면 서비스워커가 새로운 버전이어야 제가 적용했던 모든 것들이 유저에게 반영되더라구요..
그래서 PWA를 삭제할 수도 없던것이 이미 유저들의 캐시스토리지에 서비스워커 캐시들이 가득해져버린겁니다.
PWA 코드도 가져와서 임시로 사용해본거라 기존 유저들은 새로운 버전을 경험하지 못하는 아주 큰 난관에 봉착해버렸습니다.
그래서 PWA 공식 사이트에 들어가서 직접 코드 하나씩 작성해가면서 몇 일간 고생해가면서 결국 정상적인 PWA 추가에 성공을 했습니다.
임시 배포 이후..
많다면 많고 적다면 적은 친구들과 SNS 지인들을 통해 사용해보라고 막 올려보기도 하고 글도 써보라고 하면서 버그들을 잡아갔어요.
직접 제가 불량 유저가 되어서 내 서비스를 사용하면서 불편함을 느껴보기도 해봤습니다. 그러면 문제점이 잘 보이더라구요.
아직은 한참 모자라지만 제가 만든 서비스가 활성화 되고 하루에 한 글이라도 적어주는 사람들이 있는 것을 보고 굉장히 행복했습니다. 🥰
외부 API를 사용해보고도 싶어서 카카오 로그인 기능도 구현해봤어요. 어려울 줄 알았는데 잘 찾아보면 비교적 쉽습니다^^;
Day 34 | 카카오 로그인
카카오 로그인 구현 간편하게 로그인 할 수 있게 카카오 API를 이용해서 로그인/로그아웃을 구현했다. Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인,
kyledev.tistory.com
프로젝트 후기를 마치며
제작하면서 공부하면서 제일 중요하다고 느낀 것은 아래와 같습니다.
- 항상 공식문서로 양질의 정보를 제일 먼저 찾아 볼 것
- 블로그나 스택오버플로우 등 다른 개발자들의 해결법이 반드시 나의 해결법이 될 수는 없다는 것
- 문제를 해결하고 나면 반드시 기록해둘 것
- 무언가를 성공했다면 잘했다고 나 자신을 칭찬할 것
- 대신 자만하지 말 것
사실 이 글을 쓰게된 이유는 제 서비스를 알리고 싶은 마음(!)도 있지만, 프로젝트를 만들기 전과 후의 저를 비교해보고 싶었습니다.
학원을 마치고, 저는 자신 있게 할 수 있는 것이 HTML, CSS, JavaScript(DOM조작) 정도였습니다.
직접 프로젝트를 만들면서 진짜 프론트엔드 영역에서 무슨 일들이 벌어지는지,
무슨 기술들을 사용하는지 아직도 부족하지만 어느 정도는 알게되었습니다.- 공부는 끝이 없을겁니다. 더 많은 기능과 컨텐츠를 추가해서 돌아오겠습니다.
- 또 기록하고, 성장하겠습니다.
'Project/SENTENCE U' 카테고리의 글 목록
동기부여를 찾고 원동력으로 삼아 오늘보다 내일 더 발전합니다.
kyledev.tistory.com
아무튼 서비스가 원하는대로 안정화도 됐고, 이제 누구한테 이거 내가 만들었고 운영중이야! 라고 자신있게 말할 수 있을 정도 되어서 토이프로젝트 모음사이트에도 공유해보고 공식적으로 사람들에게 알려보려고 합니다.
SENTENCE U | 문장공유 커뮤니티
짧은 글로 사람들에게 동기부여와 여러 긍정적인 메시지를 보내보세요!
www.sentenceu.co.kr
이 글을 읽고 계신 누군가도 들려서 짧게나마 누군가에게 응원의 한 마디, 또는 동기부여가 되는 한 마디를 남겨주신다면 참 좋겠습니다.
