[항해 99 5기] 5주차 WIL_Feb 13th 2022

HJ·2022년 2월 13일
0

WIL & TIL

목록 보기
12/21

항해99 5주차 회고록 WIL(Weekly I learned)

5주차 내용

  • 2/4-2/10: 주특기 심화 - 리액트(React)
  • 2/11-2/12: 미니 프로젝트(FE+BE)

React(리액트) 심화 주차 회고

개인 과제

  • "로그인 사용자용 매거진 사이트 만들기"
    • 기능 목록
      • 게시글 목록 가져오기
        - 게시글 하나는 작성자, 작성 시간, 이미지 미리보기, 텍스트 내용으로 구성
        • 게시글 하나를 클릭 시, 게시글 상세 페이지로 이동
      • 추가하기 (+이미지 업로드하기)
        - 레이아웃 선택 버튼
        - 이미지가 오른편에, 텍스트는 왼편에 위치한 레이아웃
        - 이미지가 왼편에, 텍스트는 오른편에 위치한 레이아웃
        - 텍스트가 위에, 이미지는 아래에 위치한 레이아웃
        - 레이아웃 선택 시, 게시글 레이아웃(모양새)대로 보이도록 한다.
        - 텍스트, 이미지 중 입력 안된 게 있다면 게시글 작성 버튼 비활성화
        - 작성 완료 시 메인 페이지로 이동
      • 삭제하기
      • 수정하기
      • 게시글 목록 파이어스토어에서 가져오기
    • 좋아요
      • 게시글에 좋아요하기
      • 게시글에 좋아요 취소하기
    • 회원가입하기 (이메일 형식 체크, 비밀번호 체크)
    • 로그인하기 (이메일, 패스워드 미기입 시 로그인 버튼 활성화 막기)
  • 과제 진행 과정
    • 우선 스파르타 코딩클럽 리액트 심화반 강의부터 수강하였다. 로그인, 회원가입 등 대부분의 기능들이 사실 강의에 나와서 따라쳐본 코드를 과제에 그대로 활용하였다. 처음부터 다시 시작할까 했지만 현실적으로 시간이 없었다... (강의를 다 보고 나니 3일밖에 안 남았기 때문 ㅠㅠ)
    • 초보자인 나는 강의에 나오는 코드를 우선 한 번 따라쳐보는데, 강의는 파이어베이스 ver.8 기준이고 나는 ver.9여서... 그에 맞게 코드를 수정하느라 4일 내내 삽질을 했다. 너무 힘들었다.
    • 좋아요가 많이 어렵다고 들어서, 좋아요에 많은 시간을 쏟아서 꼭 구현해보는 것으로 목표를 정했다.
  • 힘들어 했던 기능들
    • Delete: 사실 삭제 기능을 구현하는 건 1시간 반? 안에 해냈는데, 삭제 버튼을 클릭한 후 계속 undefined 페이지로 이동을 하는 것이었다.. 디버깅도 해보고, 오류메시지를 구글링하여 어떻게든 해결하려고 하였으나 거의 하루 동안
    • 좋아요: 좋아요 갯수도 카운트하고 싶었고, 클릭한 유저의 id를 리스트로 가져와서 저장하고 싶었는데 파이어베이스 db에 연결 실패... 유투브 튜토리얼을 참고했는데 솔직히 어떻게 하는건지 이해가 잘 안간 상태에서 따라하려니 될 턱이 있나ㅠㅠ 어떻게든 시간 들여서 해결하고 싶었는데 과제 제출까지 시간이 얼마 남지 않아 아쉽게도 구현하지 못한 채로 제출하였다....
    • 게시글 최신순 정렬: unshift를 써서 최신순 정렬이 된다고 생각했는데, 사실 unshift는 가져온 데이터를 추가할 때 맨 앞쪽에 추가하는 것이지 정렬과는 상관이 없었다. 리로드하면 정렬이 계속 망가져서 화가 나던 와중, query문 및 orderBy를 사용하여 해결할 수 있었다.
  • 결과물
  • 소감
    • 갑자기 로그인, 회원가입에 포스트와 코멘트 CRUD 등 많은 기능들을 한꺼번에 이해하고 구현해야 했기 때문에 정신적으로도 체력적으로도 너무너무 힘들었던 한 주 였다.. 다들 많이 힘들어하셨다.
    • 아직도 리덕스 파이어베이스 연결하는게 너무 어렵고, 특히 CRUD 할 때 D만 해도 거의 하루를 붙잡고 있었던게 시간이 너무 아까웠지만 지나고 보니 비동기 통신(겪었던 에러 관련)에 대해 더 이해할 수 있는 시간이었던 것 같아 좋았다.
    • 파이어베이스 연결 실패로 좋아요 기능을 구현하지 못해 너무 아쉬웠다. 팀원들과 코드리뷰 시 성공하신 분의 코드를 좀 봤는데, 진짜 봐도 무슨 소리인지를 모르겠네.. 혼자 한 번 천천히 읽어보고 연습해야겠다. 어차피 다음 플젝 때 구현해야 할 기능이니까!
    • 글 작성 시 레이아웃 옵션 고르는 기능은 아예 시간이 없어서 시도를 해보지 못했는데, 우선 어떻게 하는지는 알았으니 추후에 시도해봐야겠다.
    • 아.. 리액트 진짜 너무 어렵다. 이래서 백앤들 분들과 미니 프로젝트를 잘 해낼 수 있을까? 어차피 해낼거지만 아직 백앤드 분들과 협업을 어떻게 해나갈지 머릿속에 잘 안그려지고, 내 실력에 대해 자신이 없으니 미리 죄송한 마음까지 든다.. 하지만 할 수 있다..!! 무조건 그냥 열심히 하자!

미니 프로젝트(FE+BE) 시작

  • 인원: FE React 2명 + BE node.js 3명
  • 주제: 개발자들끼리 질문을 올리고, 트러블슈팅도 하고, 여러 관련 지식을 공유할 수 있는 커뮤니티
  • 처음으로 Front-end 개발자로서 활약 할 수 있는 팀 프로젝트를 시작하였다.
  • 백앤드(node.js)를 담당하시는 분들과 함께 웹사이트를 제작하기로 하였고, 주요 기능들은 저번 과제와 비슷하다.
  • 주요 기능: 로그인, 회원가입, post + comment CRUD, 이미지 업로드, 좋아요
  • 작업 속도도 고려해야 하고, 백앤드분들이 만드신 API를 연결하였을 때 예상치 못한 오류가 있을 수 있으니 상황에 따라 코멘트 수정 혹은 좋아요 같은 기능은 배제될 수 있음을 상호 협의하였다.
  • 이미지 업로드는 프론트 쪽에서 파이어베이스 혹은 AWS S3에 저장하기로 하였다. 이미지 당 URL이 생성되니 DB에 저장하시면 편리할 것 같다..
  • 백앤드분들이 API 작업을 모두 끝마치시기 전 json-server로 간단하게 Mock Server를 연결해보기로 했다. 사실 좀 오래 뚝딱거렸지만 결국엔 연결 성공 및 더미데이터 불러오는거 까지는 확인을 했다.. 뿌려주는거 까지 하고 자고싶었는데 너무 졸려서 2시에 잠...ㅠㅠ
  • Axios가 너무 새롭다.. 이름만 들어봤지 뭔진 잘 몰라서 우선 해당 영상을 보고 감을 잡았고, 더 알아본 것들은 밑에 정리해두었다.
  • 파이어베이스 쓸 땐 어려워서 짜증났는데 새삼 얼마나 편리한 BaaS 였는지 다시금 깨닫게 되었다....

배운것들

Axios

Axios란?

  • Axios는 브라우저, Node.js를 위해서 만들어진 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 이다.

Axios의 특징

  • Axios는 운영환경에 따라서 브라우저간 XMLHttpRequest 객체 또는 Node.js의 HTTP API를 사용한다.
  • Promise(ES6) API를 사용한다.
  • 요청(Request) 응답 (reply)을 JSON 형태로 자동 변경한다.

HTTP Methods

  • 클라이언트가 웹서버에게 사용자 요청의 목적/종류를 알려주는 수단이다.
    1. GET
  • 입력한 url이 존재하는 자원에 요청을 보내는 것이다.
  • 서버에서 어떤 데이터를 가져와서 보여줄것인가를 정하는 용도로 쓴다.
  • 주소에 있는 쿼리스트링을 활용해 정보를 전달하는 것이고 GET 메서드는 값이나 상태등을 직접 바꿀수 없다.
  • 예)
import axios from "axios"

axios.get('https://localhost:3000/login/user')
  .then((Response)=>{console.log(Response.data)})
  .catch((Error)=>{console.log(Error)})
[
  { id: 1, pw: '12345', name: 'jungho' },
  { id: 2, pw: '12345', name: 'sungJun' },
  { id: 3, pw: '12345', name: 'hyunJi' },
]
  • 응답은 json형태로 넘어온다.

2. POST

  • 새로운 리소스를 생성(create)할 때 사용한다.
  • 문법
axios.post("url주소",{
  data객체
},[,config])
  • POST 메서드의 두 번째 인자는 본문으로 보낼 데이터를 설정한 객체 리터럴을 전달한다.
  • 예)
axios.post( 'url', 
 {
   contact: 'Daisy',
   email: 'daisy@gmail.com'
 },
 {
   headers: {
      'Content-type': 'application/json',
      'Accept': 'application/json'
   }
  }
 ) 
   .then((response) => {console.log(response.data); })
   .catch((response) => {console.log('Error!') });
  • 로그인, 회원가입 등 사용자가 생성한 파일을 서버에다가 업로드할때도 POST를 사용한다.

3. DELETE

  • REST 기반 API 프로그램에서 데이터베이스에 저장된 내용을 삭제하는 목적으로 사용된다.
  • 문법
axios.delete(url,[,config]);
  • Delete메서드는 HTML Form태그에서 기본적으로 지원되는 HTTP 메서드가 아니다.
  • Delete메서드는 서버에 있는 데이터베이스의 내용을 삭제하는 것을 주 목적으로 하기에 두 번째 인자를 아예 전달하지 않는다.
  • 예)
axios.create('/thisisExample/list/30").then(function(response){
  console.log(response);
   }).catch(function(ex) {
    throw new Error(ex)
 }

4. PUT

  • REST 기반 API 프로그램에서 데이터베이스에 저장된 내용을 갱신하는 목적으로 사용된다.
  • 문법
axios.put(url[, data[, config]])
  • PUT 메서드는 HTML Form 태그에 기본적으로 지원하는 HTTP 메서드는 아니다.
  • PUT 메서드는 서버에 있는 데이터베이스의 내용을 변경하는 것을 주 목적으로 한다.

(출처: https://koras02.tistory.com/48#----%--AJAX%---Asynchronous%--Javascript%--And%--XML-)

개선이 필요한 부분

  • 좋아요 기능
    • 저번 과제 때 구현을 못했으니 이번엔 무슨 일이 있어도 해내자.
  • 백앤드 분들과의 협업
    • 사실 백앤드 분들께서 어떻게 작업을 하시는지 설명을 들어도 잘 모르겠지만 그래도 최대한 서로 즐겁게 협업할 수 있도록 더욱 적극적인 자세로 임해야겠다! 다들 너무 열심히 하셔는데 내가 많이 느려서 죄송하다ㅠㅠ

앞으로의 방향

  • 2/17 19시까지 팀 프로젝트 제출
  • 이번 기회에 Axios와 제대로 친해지자. 또 로그인, 회원가입, CRUD도 더 익숙해지자.
  • 다음주가 클론코딩인데, 어떤 웹사이트 클론할건지 많이 생각해보자. 넷플릭스가 화려하긴 해서 해보고 싶은데 너무 흔하긴 하다.. 핀터레스트도 괜찮을 듯 한데 이것도 이미 많이 하셨을 것 같다.
profile
HJ
이전 포스트

[항해 99 5기] 4주차 WIL_Feb 6th 2022

다음 포스트

[항해 99 5기] 6주차 WIL_Feb 20th 2022

0개의 댓글