다사다난 했던 메인프로젝트 회고를 해보자 무비팝 프로젝트 기간 : 2023-06-28 ~ 2023-07- 24 깃허브 레포 : 📃레포 링크 배포 링크 : 🔗배포 링크 개발 방법론 : Agile Scrum - 깃허브 이슈들을 이용하여 작성 개발 인원 : 무비팝 주요화면 : 프로젝트 구상 계기 무비팝은 처음 아이디어 회의시간을 가질때 팀원 중에 한분이 영화보는것을 매우 좋아하여 영화에 관한 프로젝트를 해보고싶다고 먼저 말씀을 해주셨고, 그 과정에서 영화를 리뷰하고 다른사람들이 그 리뷰를 보고 해당 영화를 혼자 시청하거나 같이 시청하기위해 팟을 모집하는 등의 서비스 뿐만 아니라 영화장르의 선택을 통해 맞춤추천 등의 서비스를 기획하게 되었습니다. 주요기술 스택 (클라이언트) React Styled-Compone..
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인... 어차피 이런 기회 또 언제오나 싶어서 바로 제가 팀장 해보겠습니다 하고 지원해버렸다. 물론 백엔드팀에도 팀프로젝트 경험이 있으신 분이 두분 계셨지만, 그냥 해보자! 라는 생각으로 지원하여 팀장을 맡게되었다. 팀원분들 다같이 배움을 목적으로 오신분들이니 다같이 열심히해서 좋은 결과 만들어냈으면 좋겠다. 파이팅!~
Proxy CORS 처리를 백엔드 개발자에게 요청할 필요없이 React 라이브러리, Webpack Dev Server에서 제공하는 proxy기능을 사용하면 CORS 정책을 우회할 수 있다. 이는 별도의 응답 헤더를 받을 필요 없이 브라우저는 React 앱으로 데이터를 요청하고, 해당 요청을 백엔드로 전달하게 됩니다. 여기서 React 앱이 서버로부터 받은 응답 데이터를 다시 브라우저로 전달하는 방법을 쓰기 때문에 브라우저는 CORS 정책을 위반했는지 모르게 됩니다. 브라우저를 proxy 기능을 통해 속이는 것입니다. 위 그림에서 Direct data exchange는 proxy를 사용하기 전의 흐름이다. 프론트엔드, 즉 여러분이 개발한 React 앱에서 브라우저 쪽으로 요청을 보냅니다. 그러면 브라우저는..
열거형(Enum) 이넘은 특정 값들의 집합을 의미하는 자료형이다. 열거형은 숫자형 이넘, 문자형 이넘으로 나뉜다. 숫자형 이넘 enum Direction { Up = 1, Down, Left, Right, } console.log(Direction); // Up: 1, // Down: 2, // Left: 3, // Right: 4 열거형은 숫자형과 문자열형, 혹은 이 둘의 조합으로 정의될 수 있습니다. 디폴트 값으로 숫자형을 사용하며, 각 값은 자동으로 0부터 시작하여 1씩 증가합니다. 그러나 다음과 같이 수동으로 값을 지정할 수도 있습니다. 문자형 이넘 enum Direction { Up = "UP", Down = "DOWN", Left = "LEFT", Right = "RIGHT", } consol..
말로만 듣던 타입스크립트를 드디어 한다. 타입스크립트 쓰고싶어요. 타입스크립트는 시작부터 난관이였다. 코드들 쳐보면서 콘솔에 찍어보면서 해보고싶었는데, 그마저도 쉽게 허용해주지 않았다. 그냥 라이브러리 설치하는거 마냥 설치를 해버리면?? 보기좋게 실행이 안될 것이다. 그럼 어떻게 해야하냐?? 폴더를 새로 만든다. node.js패키지를 초기화시킨다. npm init 터미널에 해당 명령어를 입력하여 초기화시킴 @types/node 설치하기 npm i @types/node 터미널에 해당 명령어를 입력하여 Node.js 내장 기능들의 타입 정보를 담고있는 @types/node를 설치해준다. 설치하지 않으면 타입스크립트의 컴파일 과정에서 타입 검사가 실패하여 오류가 발생할 수 있다. 타입스크립트 컴파일러 설치하기..
오늘은 과제로 React Hooks를 적용해보고, Custom Hook과 React.lazy()와 Suspense를 이용하여 React앱을 리팩토링을 해보았다. 구현해야할 것 json-server 라이브러리 사용 위의 과제에서 데이터로 사용할 것들은 서버를 구축할 필요없이 json 파일을 이용하여 REST API 서버를 구축해주는 라이브러리인 json-server 라이브러리를 사용했다. json-server는 다른 앱을 만들어볼때도 사용해보았던 기억이 있고, 그때 났었던 에러들을 깃헙 readme에 기록을 해놓은 것이 있어서 에러를 그것을 토대로 잡을 수 있었다. GitHub - plla2/React-crud: 📃 react + JSON-server 고용자들의 정보 확인,추가,삭제를 할 수 있다, db...
