항해99 6주차 회고

 

드디어 Back-End와 첫 협업으로 미니 프로젝트를 시행했다.

프로젝트 주제는 게임 같이할 사람찾는 사이트였다.

간단하게 투두리스트 작성과 작성글에 신청을 할수있는 것을 구상했다.

간단한 프로젝트여서 처음에 ui와 css를 모두 마치고 기능을 넣을 생각으로 2일동안 기능없이 사이트를 꾸몄다.

 

하지만 Back-end분들의 개발속도가 너무 빨랐다.

 

그래서 우선 로그인 회원가입부분의 기능을 부랴부랴 만들고 api테스트를 해봤는데

생각보다 request를 보내고 response받는 부분이 엄청난 난관이었다.

 

일단 cors문제로 request를 보내고 response받는것 부터가 불가능했고

이걸 front가 처리할것인지 back에서 열어줄것인지 부터 문제에 봉착했다.

 

google을 뒤져보니 front에서는 proxy우회 방법으로 서버를 속이는 방법? 이라고 해야하나 이렇게 가능은 하다.

React + Express | CORS 설정하기

해당 블로그의 1.2번글을 사용해서 성공했었다.

하지만 이방법은 api마다 기제를 해줘야해서 back에서 열어주는 방향으로 가도록 back팀과 상의를 해서

결국 back에서 처리를 해주었다. 이번에 만난 분들은 뭔가 요구하면 막 해주려고 해서 너무 고마웠다.

 

그리고 우린 jwt방식의 프로젝트를 해본적이 없었지만 back분들은 이미 이것을 계속 해왔었고 

이번 프로젝트는 회원 기능이 필요했기때문에 토큰을 담는 방법을 공부해야했다.

로그인시 토큰을 어디에 저장할지가 중요한데 우린 그냥 localStorage에 담아 두고 사용했다.

 

쿠키에 담는게 이번 프로젝트에 더 맞는 다는것을 나중에 알았다.

다음 프로젝트에는 쿠키에 담아야겠다.

 

 

그리고 글작성시 이미지 업로드 기능을 구현해야했다.

이미지 선택하고 화면에 프리뷰로 보여주는것까지는 금방했다.

 

이것을 이제 서버에 body로 전송해줄때가 문제였는데 이번 프로젝트에서 이기능을 만드는데 시간을 거의 다소비한것 같다.

const formData = new FormData();
        
        if (imgFile === "") {
            formData.append("multipartFile", null);
        } else {
            formData.append("multipartFile", imgFile);
        }

        let obj = {
            gamename: content.gamename,
            content: content.content,
            inGameNickname: content.inGameNickname,
            numberOfPeople: Number(content.numberOfPeople)
        }

        formData.append("content", JSON.stringify(obj));
        dispatch(__insertContent(formData));

결론적으로 성공했을때의 body이다 우선 파일과 같인 전송할때는 formData를 사용해야했고

formData는 key와value로 돼 있는데 value가 String타입이다.

그리고 javasript의 json과 java의 json은 형식이 다르기때문에 front에서 body를 String으로 형변환 하고 formData에 담아

서버로 보내주고 Back에서 다시 json으로 형변환하여 사용하는 방식으로 해결했다.

 

이부분을 하면서 다음 프로젝트부터는 대략적인 ui 틀만 만들어 놓고 기능구현을 우선시 해야겠다는 생각이 들었다.

 

 

다음 프로젝트가 마지막 연습이다...

 

다중 이미지 업로드

axios의 인스턴스화

웹소켓을 이용한 실시간 알림기능

모달창 만들기

간편로그인 기능(카카오,네이버 등...)

 

이정도가 목표이다 그래야 실전 프로젝트때 잘 할수있겠지...

 

 

 

미니 프로젝트 깃허브 포크 뜬것

GitHub - minhyeonhong/minimumProject: 6주차 미니프로젝트