[TIL] Week#1-HW#1 (2022-01-26)

고병표·2022년 1월 26일

원티드 위코드 프리온보딩

원티드 프리온보딩 프로젝트 회고

목록 보기

1/8

프리온보딩 1번째 과제(환율 계산기) 회고

Facts (사실, 객관)

axios를 활용한 api 통신 방법
Project 구조 (craco, Path alias를 이용한 절대경로)
Form Validation

Feelings (느낌, 주관)

생각보다 경쟁률이 높아 놀랐으며, 팀원들의 실력이 뛰어나 두 번 놀랐다.
공부가 필요한 부분들을 많이 찾을 수 있었으며 강한 동기부여가 됐다.
첫 번째 과제를 끝냈지만 팀원을 정말 잘 만났다고 느낄 수 있었다.

Findings (배운 점)

PropTypes

벨로그 정리 링크
자바스크립트의 유연한 특성 때문에 작성이 편한 반면, 파일이 많아지면 생산성이 떨어진다는 점 때문에 타입스크립트를 많이 사용한다.

반드시 자바스크립트를 이용해 앱을 개발해야 하는 상황에서는 이러한 문제점을 피하기 위해 PropTypes를 활용하는 것을 권장한다.

PropTypes는 부모로부터 전달받은 prop의 데이터 type을 검사한다. 자식 컴포넌트에서 명시해 놓은 데이터 타입과 부모로부터 넘겨받은 데이터 타입이 일치하지 않으면 콘솔에 에러 경고문이 띄워진다. 간단한 예시를 통해 propTypes의 장점을 알 수 있다.

craco를 이용한 프로젝트 절대 경로 설정

보통 App.js에 이동할 페이지 컴포넌트들을 정의한다.

스타일에 따라 layout으로 분리하거나 몇개로 쪼개서 관리할 수 있겠지만

각 url에 맞는 페이지 컴포넌트들을 임포트 해줘야 하는 일은 피할 수 없다.

../../pages/user/Login
../../pages/user/Logout
../../pages/user/Setting
../../pages/main/Main

이러한 구조는 Craco를 활용한 절대경로 설정으로 개선 가능하다.

@절대경로/나머지경로

벨로그 정리 링크

axios!!

벨로그 정리 링크

Fetch API

//fetch
const url ='http://localhost3000/test`
const option ={
   method:'POST',
   header:{
     'Accept':'application/json',
     'Content-Type':'application/json';charset=UTP-8'
  },
  body:JSON.stringify({
  	name:'sewon',
    	age:20
  })

  fetch(url,options)
  	.then(response => console.log(response))

axios

//axios
const option ={
  url ='http://localhost3000/test`
   method:'POST',
   header:{
     'Accept':'application/json',
     'Content-Type':'application/json';charset=UTP-8'
  },
  data:{
  	name:'sewon',
    	age:20
  }

  axios(options)
  	.then(response => console.log(response))

동일한 기능을 수행하는 코드이며, 간단한 코드이다.

위 코드에서 차이점을 찾아보자.

Fetch()는 body 프로퍼티를 사용하고,axios는 data 프로퍼티를 사용한다.
Fetch의 url이 Fetch()함수의 인자로 들어가고, axios에서는 url이 option객체로 들어간다.
Fetch에서 body부분은 stringify()로 되어진다.

이처럼 axios는 HTTP 통신의 요구사항을 컴팩트한 패키지로써 사용하기 쉽게 설계 되었다.