프론트엔드 신입입니다. data속성, 프론트엔드 react 백엔드와 연결? 테스트 서버 질문

Question

2. 리액트 환경과 백엔드 환경을 일단 테스트 Nginx -> 서버에 올리는거 잘 돌아가는지
공부해야할 부분 (로컬, 서버에 대한 지식, 프론트엔드 백엔드 연결 방법)이 있으면 추천 부탁 드릴게요..

3. 프론트엔드 백엔드를 연결한다는게 api를 전송해보고 백엔드에서 응답을 받는 테스트를 하는건가요? 보통 초기에 리액트와 백엔드를 연결하려면 알아야할 부분이 뭔지 알려주신다면 정말 감사하겠네요 …

4. 로컬 서버, 개발 서버, 운영 서버 이 세개를 이용해서 개발하고 테스트해야한다고 하셨는데 제가 엔진엑스를 깔고 뭘해야할까요 ? 그리고 리액트로 start를 하면 3000으로 보는게 서버 그 자체인가요..?

5. .env / .env.데벨롭 / .env.프로덕트? 파일로 서버를 변수로 지정해야하는 부분이 있다고 블로그를 봤는데 맞나요 ..?

저도 공부를 한다고 했는데 모르는 부분이 많으니 답답하고 하지만 열심히 해보고싶습니다.. 백엔드의 어떤 부분을 파악하고 진행해야하는지 조언좀 부탁드릴게요 ㅜㅜ

손우진 · Accepted Answer

1. 제가 전문가는 아니라 이게 맞다 틀리다 라고 말씀을 드릴 순 없지만 저는 처음 봅니다.

2. 웹 애플리케이션 구조에 대해 이해하시면 좋을 것 같아요. 그리고 프론트엔드 애플리케이션 배포 사례들도 아시면 좋을 것 같아요.

3. 맞아요. HTTP 통신 프로토콜에 대한 전반적인 지식과 헤더 읽는 법, 개발자 도구 사용 법, 웹서버 로그 보는 법 등을 알면 좋겠군요.

4. 3000번에 떠있는 건 아마 웹팩서버로 추정되는데 실제 배포되는 환경은 build 되었을 때 그 결과물을 돌릴 수 있는 환경이어야겠죠. 결국 빌드 된 결과물을 어떻게 배포할 수 있는지를 한번 경험 해 보시면 좋을 것 같아요.

https://tobegood.tistory.com/entry/Nginx%EB%A1%9C-React%EB%A5%BC-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0-%EC%9A%B0%EB%B6%84%ED%88%AC-%ED%99%98%EA%B2%BD

참고하실만한 링크 올려드립니다.

5. 네 맞아요. .env 파일 사용법에 대해 공부해보시고, 어떤 것들을 주로 설정하는 지 찾아보세요. 저는 보통 API 엔드포인트나 환경변수로 쓰일법한 것들을 지정하는 편이고 .env 파일은 공개되면 안되는 정보니까 .gitignore 로 숨기시는 것을 권장드려요.