Create README.md

README.md

@@ -0,0 +1,117 @@
+# 프론트엔드 개발자를 위한 커뮤니티
+
+사용기술: Next.js, antd, axios, redux-toolkit, redux-persist, tainwindCSS, universal-cookie, swr, emotion
+
+기술선택의 배경: 리액트와 파이어베이스를 써봤는데 파이어베이스는 쉬운대신 과금시에 비용이 비싼편이라 프로젝트를 접게되었습니다. 가장 간단히 빨리 파이어베이스를 대체할게 뭐가 있을까 고민하다가 장고를 선택하게 되었습니다. 
+
+기술선택의 배경: 리액트와 파이어베이스를 써봤는데 파이어베이스는 쉬운대신 과금시에 비용이 비싼편이라 프로젝트를 접게되었습니다. 가장 간단히 빨리 파이어베이스를 대체할게 뭐가 있을까 고민하다가 장고를 선택하게 되었습니다. 
+
+### 프로젝트 개요
+
+취업을 위한 포트폴리오를 고민하던 중 떠오르게 된것이 커뮤니티였습니다. 신입 개발자 포트폴리오 용도로 게시판이 가장 근본이라고 알고 있습니다. 신박한 아이디어가 떠오르지 않았고 만약 떠오른다 하더라도 맛을 잘 살려낼수 있을지 걱정되었습니다. 독학중이고 심지어 어디 물어볼사람이 주변에 한명도 없기 때문이었습니다. 그나마 개발자 커뮤니티를 자주 구경하는편인데 어느곳을 둘러보아도 마음에 쏙 드는 곳이 없었습니다. 누구나 불편함 없이 즐거운 마음으로 볼수있는 커뮤니티를 만들고 싶었습니다. 
+
+### 프로젝트 진행 과정
+
+all of one 오직 저혼자 만들어가는 과정이기 때문에 전체적인 개요에 대해서는 정말 가볍고 간단하게 설계를 했습니다.  이번프로젝트에서 넥스트와 장고 둘다 처음 써보는 것이기 때문에 살짝 걱정이 되었는데 금새 익숙해져서 필요한 대부분의 백엔드를 미리 짜두고 마치 협업하듯이 프론트 하나만 집중해서 진행 했습니다.
+
+비록 혼자하는 것이지만 협업하는 컨셉으로 했기 때문에 git flow를 적용시켜 보았습니다. 
+
+(혼자 하는 이유는 비록 백엔드를 공부해서 해야했지만 첫 프로젝트때 좀 민폐이지 않았나 생각해서 맘편하게 프로젝트 해보기 위함)
+
+그래서 백엔드 개발자와 연락이 안된다던지 그런 경우가 전혀 없었습니다. 
+
+처음엔 노션에다가 진행과정을 간단하게 적었는데 좀 하다보니 깃허브에 이슈탭이 눈에 띄어서 이걸 한번 써볼까?하고 이슈관리를 깃허브에다가 하기 시작했습니다. 노션에 적을때는 이슈도 정보도 구분안되었는데 이슈탭에 관리하니 커밋할때도 편하고 확실히 트러블슈팅이 되는 기분이었습니다. 물론 이렇게 포트폴리오 할때 쓸꺼라곤 생각안하고 딱 제가보기 좋은 수준으로 간단하게 적어놨습니다.
+
+<img width="278" alt="스크린샷_2022-03-31_오전_12 05 31" src="https://user-images.githubusercontent.com/80582578/162485530-f2b415a1-3de1-4253-b247-f405c488e8f2.png">
+
+깃플로우는 이런느낌으로 쓰고 있으며 개발이 끝나면 브랜치는 머지후 삭제하고 있습니다. 이것도 기록이다 생각하고 계속 스위칭하면서 pull 땡겼더니 내역이 꼬여서 고생했습니다.
+
+여담이지만 develop에 머지시키고 부터는 테스트코드를 연습하려고 했는데 해야할게 너무많아서 테스트코드는 좀 미루기로 했습니다.
+
+<img width="574" alt="스크린샷_2022-03-31_오전_12 08 37" src="https://user-images.githubusercontent.com/80582578/162488683-292d9911-8d6b-4f68-91d5-f066ec99ea2d.png">
+
+
+이슈관리는 이슈탭에다가 했습니다 FE BE 접두어로 써있는 이유는 프론트엔드 백엔드가 같은 깃허브 레포지토리에 있었는데 이제 배포하려고 보니 서로가 서로의 짐짝이여서 백엔드랑 프론트랑 분리시켜놨습니다.
+
+<img width="390" alt="스크린샷_2022-03-31_오전_12 11 05" src="https://user-images.githubusercontent.com/80582578/162488728-9ab77fbd-f832-485d-88fb-ac8e9045f01f.png">
+
+
+우선 로고입니다 모든 디자인은 제 스스로 했습니다.
+
+타겟은 아무래도 2030의 프론트엔드 개발자들이 오길 바랬습니다. 그래서 분석을 좀 해봤더니 특히 개발직군에 있는 친구들이 ㅇㅅㅇ 이모티콘을 많이 씁니다. 물론 컴퓨터를 많이하는 친구들이라면 이모티콘을 많이 씁니다.
+
+ㅇㅅㅇ 이모티콘을 보면 뭐가 생각나시나요? 저는 우선 ㅅ을 보면 개나 곰같은 주둥이 나와있는 동물들이 생각났습니다. 그중에서도 캐릭터로 만들면 독보적으로 귀여운건 곰이 아닐까 생각 했습니다.
+
+좀 특이한 캐릭터로 디자인 하고싶었습니다. 공룡옷 입은 라이언같은 공룡옷 컨셉이 생각났습니다. 컨셉에 대해서 조사하면서 놀랐던 점은 일반적인 공룡옷은 티라노사우르스의 모티베이션인데 렌더링되는 모델마다 등에 가시가 돋혀있거나 민무늬거나 둘중 하나였습니다. 일반적인 인형옷은 가시돋힌 티라노 사우르스 였습니다.
+
+싸이월드를 아시나요? 친구의 미니홈피를 보러 가는걸 파도타기라고 불렀습니다. 우리가 구글을 통해 혹은 유튜브를 통해 콘텐츠를 소비할때도 구글을 통해 검색 찌끄리고 있다고 말하지않고 우아하게 웹서핑하고 있다고 표현을 합니다. 개발자를 모으는 커뮤니티이니 만큼 첨벙첨벙 와주길 바라면서 물고기로 컨셉을 잡았습니다.
+
+그리고나니 상어가 아나콘다처럼 곰한마리를 꿀꺽 하는 모양새가 나왔습니다. 이건좀 아니지 않나 생각해서 한참 생각하다가 솔루션이 나왔습니다. 물고기의 눈알을 꺾고 태엽을 달았습니다.
+
+<img width="615" alt="스크린샷_2022-03-31_오전_12 23 32" src="https://user-images.githubusercontent.com/80582578/162488770-c38623c7-9d5d-4d51-813b-f5c4ffa9aa4c.png">
+
+
+회원가입 페이지입니다.
+
+<img width="559" alt="스크린샷_2022-03-31_오전_12 33 59" src="https://user-images.githubusercontent.com/80582578/162488830-0052b49f-347c-4c91-92fb-0a6def04107a.png">
+
+최대한 간결한 정보만 받기로 결정했습니다.
+
+<img width="412" alt="스크린샷_2022-03-31_오전_12 24 19" src="https://user-images.githubusercontent.com/80582578/162488995-54e30776-c027-4c5c-8102-6b04bff36621.png">
+
+로그인 페이지 입니다. 
+
+<img width="372" alt="스크린샷_2022-03-31_오전_12 25 06" src="https://user-images.githubusercontent.com/80582578/162489008-042d5008-1db4-4d71-a832-45c27d39e43b.png">
+
+
+로그인 방식은 JWT를 사용했습니다. 프로젝트 중에서 가장 공수가 많이 들어간 기능중 하나가 아닐까 생각합니다.
+
+access와 refresh는 쿠키에다가 저장합니다. 쿠키에 expire를 걸고 쿠키 유무에 따라 _app에서 재발급되도록
+
+설계를 했습니다. 이론상 문제될게 없어야 했는데 이것만으론 부족했습니다.
+
+장고에서 인증시간이 지나면 무조건 기존 데이터에 대해서 401을 띄웁니다. 그럼 보던 페이지가 날아가버리는 현상이 있었습니다. 
+
+특히 쿠키도 없고 토큰도 만료된 상태라면 오류가 엄청나게 떴습니다. 이를 해결하기 위해서 고민을 엄청 많이 했는데 애초에 처음 로그인할때 post 요청이 swr로 못하기 때문에 발생하는 문제 였습니다.
+
+보통은 그냥 에러를 받아서 처리하면 되는데 생각처럼 안돌아가고 여간 까다로운게 아니였습니다. 
+
+그래서 결국 생각해낸 절충안이 에러받으면 헤더부터 없애고 그후에 다른 옵션을 이용해서 에러처리를 하면 깔끔하게 해결됩니다.
+
+그래도 콘솔에 401에러가 나오게 되는데 이걸 없애려면 장고내에서 유저체킹하는 로직을 없애줘야 한다고 합니다. 
+
+차마 그런짓까지 하면 안될것 같아서 냅두기로 했습니다. 
+
+<img width="644" alt="스크린샷_2022-03-31_오전_12 32 39" src="https://user-images.githubusercontent.com/80582578/162489017-ccd603e1-5c53-4aee-9d00-4844bac8735c.png">
+
+
+메인페이지 입니다. 로그인 or 회원가입 외에는 볼필요 없는 페이지입니다. 비워두기도 뭐해서 다른사이트들처럼 게시글 맛보기를 제공했습니다. 저의 모든 페이지는 반응형을 제공합니다.
+
+<img width="559" alt="스크린샷_2022-03-31_오전_12 33 59" src="https://user-images.githubusercontent.com/80582578/162489025-71832018-bf4e-4941-8e6d-ff74f5f68299.png">
+
+
+모든페이지 이야기가 나와서 이야기를 이어보자면 반응형 뿐만 아니라 모든페이지가 서버사이드렌더링입니다. 
+
+하지만 서버사이드의 목적은 SEO이기 때문에 isbot이라는 라이브러리의 도움을 받아 봇의 접속여부를 판단 받고 있습니다. 그래서 일반유저는 클라이언트 사이드로 받는대신 swr을 이용한 모든 페이지는 캐싱됩니다. 사용자경험에 큰 기여가 될것이라고 생각합니다.
+
+<img width="546" alt="스크린샷_2022-03-31_오전_12 37 07" src="https://user-images.githubusercontent.com/80582578/162489028-9c72ff90-4e9b-49bf-ab88-e3ad057c6a1b.png">
+
+
+게시판 리스트는 이러합니다. 페이징과 태그를 지원합니다. 
+
+<img width="581" alt="스크린샷_2022-03-31_오전_12 38 41" src="https://user-images.githubusercontent.com/80582578/162489030-5032f97a-1dd5-4337-9aac-e92030ad9bbc.png">
+
+
+질문 게시글 내부입니다. 게시글엔 공통적으로 게시글의 정보와 추천을 제공합니다. 질문 게시판의 경우 답변하기가 제공되어 게시글과 똑같은 레벨의 게시글 작성이 가능합니다.
+
+<img width="549" alt="스크린샷_2022-03-31_오전_12 39 51" src="https://user-images.githubusercontent.com/80582578/162489031-c071e656-5938-4f5b-ab98-acc530a221dc.png">
+
+
+답변 게시물은 즉시 작성할수있으며 모든 게시글은 캐싱처리로 인해서 빠르다는 느낌을 제공합니다.
+
+<img width="564" alt="스크린샷_2022-03-31_오전_12 41 22" src="https://user-images.githubusercontent.com/80582578/162489032-682de887-902c-42c9-946a-e99cd4fed1c0.png">
+
+
+댓글과 대댓글로 구성이 되어있습니다. 대댓글에 대대댓글은 달수없게 설계했습니다. 마찬가지로 모든 post 동작은 캐싱처리되어 빠른동작을 합니다. 
+
+여기까지 제가 생각하는 최소스펙의 게시판을 짜보았습니다. 지금은 취업을 먼저해야될것 같아 기능추가를 정말 최대한 줄이고 줄이고 줄였지만 앞으로 디벨롭해볼 생각입니다.