6/22 오늘은 백엔드팀에서 준 api를 받아서 원래 사용하고 있었던 express 로컬 대신 aws를 통해 배포된 api를 가지고 데이터 패칭을 해볼 수 있었다. 하지만 그 과정이 쉽지않았다. 일단 먼저 cors를 하기위해서 프록시 설정을 해주어야 했는데 프록시를 써볼일이 잘 없었던터라 여기저기 구글링해보고 gpt의 힘을 빌릴수밖에 없었다. 하지만 프록시를 우리 프론트엔드팀이 제대로 잘못쓰고 있었다... ❌ 에러 발생과정 서버에서 데이터를 가져오기 위해서 axios 라이브러리로 서버와 통신 -> CORS 에러발생 CORS 에러를 처리하기 위해서 vite빌드도구의 프록시 설정법은 vite.config.js파일에서 프록시를 설정해주었다. vite.config.js 파일에 서버와 통신을 하는 모든 api주소..
6/19 전에 했던 초기세팅을 기반으로 코딩을 시작했다. 프론트엔드팀은 백엔드팀이 api와 서버를 구축해서 우리에게 넘겨주기전까지는 UI를 먼저 완성시켜서 백엔드팀이 api주소를 넘겨주면 우리는 데이터패칭을 해와서 띄워주면 되는식으로 먼저 만들어보기로했다. 제가 맡은 파트는 질문의 답변 추가, 수정, 삭제 , 답변에 대한 댓글 추가, 수정, 삭제 댓글에 엄지손가락표시로 추천을 누르면 올라가거나 내려가는 추천기능을 담당했다. 그렇게 질문상세페이지에서 컴포넌트들을 나누고 질문 상세페이지에 답변컴포넌트를 만드록있던 중 문득 든생각이 페이지들에 공통으로 들어가는 헤더, 사이드, 푸터를 나누지않았다. 그렇게 3개를 3명이서 각각 한개씩 맡아서 그 부분을 먼저 만들었다. 답변컴포넌트를 만들때 UI를 만드는데에서는 ..
오늘은 깃 레포 초기설정부터 시작했다. 깃 레포 초기설정을 해야하는데 그거부터 문제가 시작되었다. client, server 폴더를 나눠서 진행해야해서 하는데 폴더나누는거부터 문제가 시작되었다. client랑 server를 만들어야하는데 시작하자마자 바로 문제가 되었다. vite로 리액트를 설치하는데 vite project를 설정해줘야해서 client폴더 속에 project폴더가 생기게 되는 것이다. 바로 아차싶어서 client를 지우고 브랜치를 새로 파서 vite로 project폴더로 client라는 이름으로 생성해주었다. 그렇게 client 폴더를 생성해주고, 초기 설정을 해주었다. Prettier, ESlint 설정도 해주었다. 아니나 다를까 Prettier에서 바로 에러가 생겼다. module.e..
오늘은 팀원들과 담당할 부분, 사용자요구사항 정의서를 작성해보았다. 먼저 사용자요구사항 정의서를 작성하고자 했다. 이를 위해서 스택오버플로우 홈페이지에 들어가서 구현하고자 하는 기능, 컴포넌트들을 분석해보고 팀 노션에 쭉~ 나열을 먼저 해두었다. 나열을 하고나서 중요도를 정해보고 페이지UI별로 파트를 나눌건지, 컴포넌트 기능단위로 파트를 나눌건지 정하였는데 우리조는 컴포넌트 기능단위로 파트를 나누자는 의견이 나왔다. 그래서 나와야하는 페이지들을 각자 정해서 관리를 하기로했고, 컴포넌트 단위별로 만든 기능을 프론트엔드 3명이 각각 관리하는 페이지에 집어넣어서 페이지를 관리하기로 했다. 제가 맡은 부분은 팀 레포지토리에 이슈들로 정리해놓았으며, 중요도를 상, 중, 하로 나누어서 정리를 해두었다. 또한, 나올..
06-12 ~ 06.27 으로 짜여진 프로프로젝트가 시작되었다. 팀빌딩은 랜덤배정으로 진행되었다. 백엔드팀과의 협업은 처음하는지라 매우 긴장되고 떨렸다. FE 3인, BE 3인으로 구성된 팀을 랜덤으로 구성해주었다. 첫날에 팀원분들과 인사를 나누며, 팀소개, 팀장정하기 등을 진행하였다. 서로 어색한 흐름에서 팀장을 정해야했는데 눈치보기 바쁜 6인... 어차피 이런 기회 또 언제오나 싶어서 바로 제가 팀장 해보겠습니다 하고 지원해버렸다. 물론 백엔드팀에도 팀프로젝트 경험이 있으신 분이 두분 계셨지만, 그냥 해보자! 라는 생각으로 지원하여 팀장을 맡게되었다. 팀원분들 다같이 배움을 목적으로 오신분들이니 다같이 열심히해서 좋은 결과 만들어냈으면 좋겠다. 파이팅!~
