[PROlog] CRUD 게시판 만들기 프로젝트 시작

1. 백엔드를 전공하는 친구에게 연락이 왔다.

이번 겨울방학 동안 동아리에서 진행했던 프로젝트가 끝이 났다. 

 

https://www.behance.net/gallery/192520373/-MOCU

모두의 쿠폰, MOCU

(저번 겨울방학 동안 개발한 프로젝트의 포트폴리오는 위 링크를 통해 참고할 수 있다.)

 

프로젝트가 끝나기 하루 전 날, 갑자기 친구한테 카톡이 왔다. 백엔드를 공부하고 있는 친구였다. 지금 하고 있는 프로젝트가 끝나면 같이 프로젝트를 할 생각이 없냐고. 프로젝트를 하면서 프론트엔드 실력을 더 기르고 싶었기에 바로 수락했다.

 

프로젝트가 끝나고 며칠 뒤, 우리는 프로젝트에 대한 회의를 했다. 만들고자 하는 프로젝트는 CRUD(Create, Read, Update, Delete)를 구현하는 게시판이었다. 사이트 이름은 'PROlog'로 정했다. 보다시피 Prologue에서 따온 말이다. 

 

 

2. Vite + TypeScript + Tailwind CSS

일단 정적인 페이지부터 구현하기로 했다. 이번에는 무슨 라이브러리를 쓸까 고민했다. 저번 프로젝트에서는 Create-React App과 TypeScript, 그리고 module CSS를 사용했다.

 

Vite를 사용해보고 싶다는 생각은 옛날부터 하고 있었다. Webpack보다 훨씬 빠른 속도를 느껴보고 싶었다.

 

사실 Vite보다도 Tailwind CSS를 사용해보고 싶다는 마음이 더 컸다. 유튜브에서 우연히 본 Tailwind CSS에 대한 영상은 나로 하여금 이것을 써보고 싶다는 생각을 가지게 만들었다. 이상한 문법을 className에 몽땅 때려박은 모습이 꽤 괜찮게 다가왔다. justify-content: between을 그냥 justify-between으로 표현할 수 있다니. 바로 설치해줬다.

 

사실 작업을 하다가 svg 파일을 전혀 읽지를 못해서 애를 먹었었다. 분명히 d.ts에 타입을 잘 전달해줬었는데. 알고보니 Webpack이 아니라 Vite를 쓸 때는 다른 방식으로 타입을 전달해줬어야 했다. 이에 대해서는 따로 포스팅을 해보려고 한다.

 

3. 페이지 구현

 

인트로

 

일단 Intro Page를 만들었다. 사실 예전부터 웹사이트 백그라운드에 동영상을 넣는 것이 그렇게 멋져보일 수가 없었다. 그래서 나도 pixabay에서 멋져보이는 동영상을 찾아서 첨부했다. PC에서 작동하는 모습을 보니 흡족했다. 하지만 처음에 모바일에서는 잘 작동하지 않았는데, video 태그에 muted와 playsinline 요소를 추가해줘야 한다. 하지만 모바일에서 저전력모드를 켰을 때는 동영상이 재생되지 않는 문제가 발생했다. 아직 해결하지는 못한 문제이다(아마 못할 수도 있고.)

 

PC에서 접속한 Intro 화면

 

일단은 카카오 로그인 버튼을 넣었는데, 오늘 친구랑 회의한 결과 '카카오 로그인'은 빼고 '이메일로 로그인'과 '구글로 로그인'을 넣기로해서, 아마 곧 수정할 것 같다.

---

 

게시판

 

그리고 로그인을 하던 '둘러보기'를 클릭하면 게시판('/board')로 넘어가는데, PC 풀 화면에서는 4열의, 모바일에서는 1열의 카드 컴포넌트가 쭉 나오게 만들었다. 그리고 글쓰기 버튼과 필터도 추가했다. 

 

-> 오늘 회의 결과 게시판을 카드가 아닌 제목만 출력되는, 인터넷에서 흔히 확인할 수 있는 게시판 모양으로 수정하기로 했다. 그래서 게시판도 곧 수정될 것이다.

 

PC에서 접속한 게시판 화면

 

다크모드

왼쪽 아래에 달이 그려져 있는 동그란 버튼이 있는데 바로 다크모드를 스위칭하는 토글이다. 저 버튼을 누르면 다크모드로 바꿀 수 있다. tailwind css를 활용하면 다크모드 설정을 더 간편하게 할 수 있어서 좋았다. 바로 className에서 dark:~~~를 작성하면 다크모드일 때 어떻게 css를 설정할 지 바로 작성할 수 있다.

 

PC에서 접속했을 때 다크모드 화면

 

문제가 하나 생겼는데, 친구가 라이트모드일 때 특정 글자들이 안보이는 문제가 생겼었다. 왜 그런가 했더니 그 친구는 애초에 웹 브라우저(맥북 사파리)의 기본 설정을 다크모드로 해놨기에, 내가 라이트모드일 때 검은색으로 해놨던 제목들이 브라우저 설정에 의해 흰색으로 바뀌어서 안보이게 되는 것 같았다. 이 문제도 수정해볼 예정이다.

(아마도 태그를 바꾸거나, 사용자의 브라우저가 다크모드인지 라이트모드인지 그 정보를 가져와야할 것 같다는 생각이다.)

 

그리고 게시물을 클릭하면 나오는 상세 페이지, 글쓰기를 누르면 나오는 글쓰기 페이지, 위의 SearchBar에 단어를 입력하면 나오는 검색 페이지, 화면 오른쪽 위에 프로필을 누르면 나오는 마이페이지를 간단하게나마 구현했다.

 

4. 앞으로의 계획

오늘 친구랑 회의하면서 여러 부분들을 수정하기로 했다. 그리고 로그인도 구현해야 하고, 명세서 API가 나오면 이제 연동도 해야되고, 아직 갈 길이 멀다. 그리고 이제 곧 개강이다. 이번 학기도 조금 빡센 과목들을 수강한다. 특히 프로젝트 과목들이 많다. 그리고 과동아리에서 역할도 맡았고. 바빠지기 전에 이 프로젝트를 안정궤도로 올려놓고 싶다. 계속 나아가 보자.