2주차] 글로벌 인재트랙 - React+Flask 코드 주석처리, git README.md 작성

둘째 날이다!!

다른 걸 하고 싶었지만, 현재 글로벌 인재트랙에서 진행하는 팀 프로젝트가 너어어어무 힘들고 할 일이 많아서,
이번 모각코 시간에 하려고 결정했다!!

***목표***

글로벌 인재트랙 - 팀 공유를 위한 React+Flask 코드 주석 처리, git README.md 작성

팀원들이 아직 React, Flask에 대해 아리송해 하는 부분이 많아 주석으로 최대한 자세히 작성한 후,
git에 업로드하면서 README.md도 작성하려고 한다.

주석으로는 제일 상단에 깔끔하게 state와 function을 정리하여 한꺼번에 주석을 적을 것이며,
README.md에서는 실행 방법/폴더의 역할/파일의 역할
에 대해서 적을 예정이다.

 

1. 주석 처리

home.js

resultjs

주석처리를 처음으로 이렇게 해보았는데
음 merge 충돌이 날 수도 있으니 지우고 따로 문서란에서 관리하는 것이 나을 것 같기도 하다.

팀원들과 다시 얘기를 해보고 정해야할 것 같은데...일단은 넣어두었다! 공유를 위해
확실히 이렇게 정리해두면 한눈에 어떤 state를 가지고 있고, 어떤 function을 가지고 있는지 알 수 있으니 보기는 쉬운 것 같다.

 

2. axios React - Flask

front에서 axios를 통해 데이터를 Flask로 전달하는데,
구글에 올라온 다양한 axios post와 json 기법들을 사용했는데 모두 실패했다...

항상 화면이 아래와 같이 나오는데, 내일 회의에서 다같이 해결해보아야겠다.

해결했다!!

400 error였긴하지만, 알고보니 Back에서의 코드 오류였다.
back에서 자신이 탐색하는 key로 request오지 않아 생기는 오류였다ㅜㅠ

 

3. git README.md 작성

디렉토리 구조를 명확하게 표시하고 싶었는데,
디렉토리 tree 구조를 만들기가 굉장히 어려웠고 tab이나 공백을 처리 해주지 않는 md에서는 어떻게 해야할지 몰라 고민이 되었다.

고민을 하던 도중 tree구조가 그려져있는 git README.md를 찾아 개발자 도구를 통해 코드를 긁어왔다!!
웹프했던 경험을 이렇게 잘 써먹는다 하하하

결과는 아래처럼 깔끔하게! 성공했다.