2021년 7월 30일 FIRST PROJECT 후기(Gallery:port)

Intro

 내가 속한 200ok팀은 기존 코드 중심의 프로젝트 열람 시스템(github)에 대한 불편함을 호소하며 

 

(물론 개발자가 되고자 한다면 코드를 잘 해석해야하지만)

 

시각적으로 프로젝트 열람 및 소개가 가능한 공간을 만들어보고자 Gallery:port라는 프로젝트를 기획했다.

 

Gallery라고 이름을 붙인데에는 이미지를 중심으로 업로드 된 여러 프로젝트가 모여 있어서이다.

Landing Page

 

Gallery라는 이름이 붙었기에 천천히 작품이 흘러가는 모양을 구상했고

 

해당 작품을 클릭하면 사용자가 재미를 느낄 수 있도록 사진이 확대되면서 펄럭이는 요소를 추가하였다.

 

일반적인 웹과는 구별되는 강렬한 첫 인상을 원했기에 위 animation을 landing page의 화면 가득 배치하였다.

 

이를 구현하기 위해 canvas, three.js, three.js를 react에서 쓰기위한 방법들을 공부하게 되었는데,

 

덕분에 웹에서 창의적 요소를 더 많이 생각할 수 있게 되었다. 

 

SignIn, SignUp, MyPage, Upload, UploadEdit, project view page 개발

Sign-up fail

회원가입 시 필수 요소를 입력할 때 유효성 검사를 하고,

 

유효성 검사에 대한 결과 메세지를 띄우게 만들었다. 제대로 입력하지 않았을 경우

 

필수 창을 다시 입력하도록 scrollTo method를 통해 유도하였다.  

 

Sign-up success

회원가입을 성공하면 로그인 화면으로 redirection 되게 하였다. 

 

Sign-In

로그인, 회원가입 시 유저가 입력한 정보를 post 요청으로 DB에 해당 정보를 저장하게 했다.

 

axios로 요청하는 부분은 스프린트 때 배웠었지만 실제 적용해본 적이 없었기에 실수도 많았고 삽질도 많이 했다. 

 

하지만 실제로 통신하는 모습을 보니 그 뿌듯함은 말로 표현할 수가 없었다. 

 

mypage

profile 화면에서 톱니바퀴를 누르면 mypage로 들어가게 되는데 이곳에서

 

기존 회원가입시 입력한 정보를 수정하고, 옵션항목들을 채워서 profile을 꾸밀 수 있게 하였다.

(profile화면은 ui디자인을 훌륭하게 해주신 종아님께서 맡아주셨다.)

project upload page and preview

project upload page input optional

 

프로젝트 업로드 페이지와 프로젝트 수정화면은 input 태그와 이미지 처리와의 싸움이었다.

 

수정화면에 기존 데이터를 불러오는 과정에서 input 태그에는 value라는 속성만 존재하는 줄 알고

 

value를 지정하면 수정이 안되었기에 이것을 어떻게 해결할까 계속 고민하고 속썩였는데 ...

 

defaultValue라는 속성이 있었다.

 

defaultValue는 말그대로 초기값으로 화면에 지정된 값이 나타나지만 수정이 가능하다. 

 

HTML에 조금이라도 관심을 가졌다면 이렇게 시간을 낭비하지 않았을텐데..

 

앞으로 꾸준히 관심을 가져야 겠다라는 다짐을 했다.

 

이미지 처리... 참 할말이 많다. input 태그에 type을 file로

 

지정하면 파일을 선택할 수 있는 버튼 같은 것이 생성되는데 

 

이 버튼을 눌러서 파일을 선택하면 input.files로 접근하면 선택한 파일이 들어있는 객체가 반환된다. 

 

client에서는 파일로 server에 formdata를 넘기고 서버에서는 url로 변형하여 client로 넘겨 주었다. 

 

이때부터가 지옥의 시작이었는데...

 

이미지 파일을 state로 관리하였고 client에서는 파일로 data를 보내주어야 하기에

 

서버에서 준 url은 결국 파일로 바뀌어야 한다. 

 

나는 서버에서 받은 url을 blob() 메소드와 new File()로 인스턴스를 생성하면 이것이 파일이 될 것이라 확신을 가졌지만

 

결과는 fail. 

 

이문제에 대해서 first project가 끝난 이 시점에서도 정확한 답을 못내리고 있다.  

 

계속 고민하고 무엇이 답인지 찾아볼것이고 여기에 답을 가지고 오고 말리라!!!!

 

팀원들에게 하고 싶은 말

 

정말 누구 한명이라도 빠진다면 이 웹사이트는 탄생하지 못했을 것이다. 

 

wireframe, UI디자인, CSS의 중요성을 알려주신 FE팀장 종아님

 

DB의 중요성을 깨우쳐주신 하은님

 

그리고 누구보다 미지의 영역이었던 https 적용과 배포를 담당해주신 효승팀자...ㅇ 아니 제사장님

(코드의 결과가 200ok가 될때까지 기우제를 지내셨다.)

 

다들 감사합니다. final도 꼭 함께 하고 싶어요!

 

+ 시연영상(내가 발표를...했다....)

 

 

 

부족했지만 팀원들이 함께였기에 그리고 최선을 다했기에 참 즐거웠다.