[ 알쓸싸잡 ] 회고

[알쓸싸잡]

역할 : 프론트엔드, 로고 디자인

사용 프로그램 : React, CS Photoshop

 

우리가 왜 이 아이디어를 도출했을까?

• MM 채널에 매일 많은 게시글이 등록되지만, 잦은 알림으로 인해 채널의 알림을 꺼놔 그 날 등록된 게시글을 놓치는 경우가 많다.
• MM 채널에 매일 많은 게시글이 등록되지만, 잦은 알림으로 인해 채널의 알림을 꺼놔 그 날 등록된 게시글을 놓치는 경우가 많다.
• 공식 홈페이지에 기제되는 내용의 시간보다 실제 업로드하는 시간이 빠르다. 좋은 기술 블로그들의 소식을 빠르게 접할수 없다.

 

이 프로젝트를 하며 배우고, 느꼈던 점

항상 도전의 연속이였지만, 삼성 청년 소프트웨어 아카데미에서 프로젝트시에 항상 Backend 를 해오다 처음으로 Frontend 를 해보았습니다.

이번 프로젝트 기간중에 Frontend 인원을 구하기 힘들었고, 배우는 것에 호기심이 많으며 SSAFY를 하며 해보고 싶었기때문에 이번 프로젝트를 통해 경험해보고자

Frontend 를 맡게 됐습니다.

먼저 어려웠던 것은 한번도 해본적 없었던 React를 진행하였기때문에 주경야독을 했던 것같습니다.

저녁에는 React 공식 문서를 통해 내 프로젝트에 다크모드, 햄버거 네브바 등을 Test 해보고 다음 프로젝트 진행 시간에 다른 Frontend 분과 함께 이야기하며 적용 시켰습니다. 기초부터 배워나가야한다는 단점이있었지만 노력은 배신하지 않는다는 생각을 항상 하며 배워나갔습니다.

정말 막히고 어려운 부분이있다면 주변 Frontend에 익숙한 동기, 선배들에게 물어보고 React와 관련된 커뮤니티사용을 하여 해결하였습니다.

 

기술적으로 어려웠던 것으로는 map 함수에 정렬 알고리즘 대입과, API 로 통신이있었습니다.

map 함수에 정렬 알고리즘 대입을 하며이를 정렬알고리즘을 사용했을때 class 위주로 사용하며 상속을 받기가 어려워 function 으로 변경후 함수내의 parameter 를 상속 받았습니다.

API로 통신에 어려웠던 점은 바로,, CORS 에러였습니다.. 이전 술 TALK 프로젝트를 진행하며 Backend를 할때 POST 를 사용하면 정상적으로 됐는데 왜 안되냐. 프론트 문제는 아닐까라는 의심의 씨앗을 거두지 못했던 에러였습니다.

하지만 이번 프로젝트를 통해 http-proxy-middleware 라이브러리를 설치하고 setupProxy.js 를 설치해보기도하였습니다.

또한, 클라이언트단에서 Access-Control-Allow-Origin 헤더에 접근 권한을 설정하여 *를 추가하여 모든 외부 출처에 접속을 할 수 있게하였으나, 추가적인 보안 이슈에 문제가 생겨 결국 서버단에서 해결하기로하였습니다.

서버단에서 프록시 서버를 이용하여 중계서버를 따로 만들어 구현후 적용하여 에러를 해결하였습니다.

 

Frontend와 Backend 를 경험함으로써 서로간의 문제점과, 서버단에서 느끼지 못했던 클라이언트 단의 디자인적 재미를 찾을 수 있었습니다.

또한, 클라이언트단에서 유저의 마음을 사로잡는 첫번째 관문이라는 생각을 하였습니다. 서버단에 로직이 어떻게 구성되든 첫번째로 보여지는 것은 바로 클라이언트 단이기때문에 어떠한 프로젝트든지 유저는 이 프로젝트의 첫 인상은 클라이언트 단에서 시작한다는 것을 느꼈습니다.

 

프로젝트를 하며 아쉬웠던 점

결국 배포를 실패하는 아쉬운 상황이 발생하였습니다. 초반부에는 배포가 진행 될 수 있었으나 이후 CI/CD 를 통해 자동 배포를 하지않고 수동 배포를 통해 배포하다보니, 프로젝트 마지막날 전 인원이 밤을 새야하는 일이 생겼습니다.

이번 프로젝트의 시연을 맡았던 저로써는 너무나 당황하였습니다. 하지만 이전에 vue.js를 배우며 로컬에서 클라이언트를 실행할경우 JSON 파일을 통해 테스트를 했던 것을 팀원들과 이야기하였고 발표 5시간전에 빠르게 API 를 닫고 JSON 파일을 받아올수있도록 클라이언트 수정을 했습니다.

결국 Frontend단에서 시연을 하기위해서 JSON 파일로 서버단에서 받아와 로컬을 시연하는 것으로 하였고 이를 통해 프로젝트 발표를 진행하였습니다.

배포를 하지 못했던 아쉬웠던점이 있었지만 JSON 파일로 React에서 읽어 실행하는 것을 빠르게(?) 습득할수 있어 좋았던(?) 것 같습니다.