환율계산기

1.5일 동안 api로 환율 정보를 받아와서 환율 계산기를 만드는 첫 팀플 과제를 끝마쳤다.
앞으로 한달 간 같이 할 팀원들과 처음 오프라인으로 만나서 2:2 페어 코딩을 하였는데,
같은 꿈을 목표로 하는 분들이라 그런지 처음 만났는데도 전혀 어색하지 않아서 너무 재밌었고 색다른 경험~
코시국만 아니었으면 더 많은 분들과 오프라인으로 많은 정보를 공유했을텐데.. 아쉬운 마음이 크다.

회고 순서는
1. 새로 알게 된 기술들과 구현한 코드들을 정리하고
2. styled-components를 적용한 이유와 장단점,
3. 과제의 api를 사용하여 netlify에 배포하였을 때 발생한 트러블 슈팅

---

💎 작업을 위해 고려했던 사항들

1. 받아온 API 키는 암호화를 위해 .env폴더에 따로 보관해서 사용.
2. 셀렉트 박스로 된 수취 국가를 선택하면 환율 정보가 USD 기준으로 각 나라에 맞게 바뀌어야 함.
3. 송금액을 USD로 입력하고 버튼을 누르면 각 나라의 환율로 계산되어서 나와야 함.
4. input 값에 조건에 맞지 않는 값을 입력할 시 결과를 보여주지 않고, error메시지를 띄움.
5. 환율과 수취금액은 소수점 둘째 자리까지 이고, 3자리 이상되면 콤마를 찍어서 보여줘야 함.

---

1. 받아온 API 키는 암호화를 위해 .env폴더에 따로 보관해서 사용.

http://www.apilayer.net/api/live?access_key=ee50cd7cc73c9b7a7bb3d9617cfb6b9c

api key는 유니크한 key이므로, 나를 제외하고는 아무도 보면 안 되고, 알 수 없어야 하기 때문에
받은 api의 key 값은 해당 프로젝트 최상위 위치에 .env 파일을 생성하여 아래와 같이 작성.

// 스페이스 없이 모두 붙여서 기재
REACT_APP_API_KEY= 해당 API KEY

.env를 작성한 후에는 package.json파일처럼 서버를 껐다 켜야 정상적으로 작동한다.

각 컴포넌트에서 사용할 때는 process.env.변수명 으로 작성.

const getAPI = () => {
	axios.get(`api 가져오는 url 주소=${process.env.변수명}`);
};

const getAPI = () => {
	axios.get(`http://api.currencylayercom/live?access_key=${process.env.REACT_APP_API_KEY}`);
};

이렇게 암호화를 잘하고서, 막상 github에서 public으로 올릴때 .env 까지 같이 올려버린다면!?
모든 사람들이 볼 수 있으니 조심 또 조심!!! .gitingnore 에 .env를 추가하고 커밋!!!

정리하자면

• api key는 아무에게도 보여주면 안 되므로 최상위 폴더에 .env를 생성하여 그 안에 key 값을 넣는다.
• 쿼리 형식으로 일반 컴포넌트 파일에서 추가
• github에 올릴때는 .gitingnore에 .env 파일을 추가하여 암호화 유지

---

2. 셀렉트 박스로 된 수취 국가를 선택하면 환율 정보가 USD 기준으로 각 나라에 맞게 바뀌어야 함.

api를 받으면 1 USD을 기준으로 각 나라에 대응하는 환율이 JSON형식으로 나온다.

select box안 option에 각 나라의 통화를 value로 집어넣고, KRW를 default로 설정.
onChange로 value가 바뀔 때마다 추적하여 state에 set 해준다.
아래의 api 형식을 보면 USD + 각 나라의 통화로 나타나기 때문에,
slice 함수를 사용하여 각 나라의 통화만 끊어서, 렌더 시켜준다.

---

3. 송금액을 USD로 입력하고 버튼을 누르면 각 나라의 환율로 계산되어서 나와야 함.
4. input 값에 조건에 맞지 않는 값을 입력할 시 결과를 보여주지 않고, error메시지를 띄움.

form형식 + onSubmit으로 submit버튼 클릭 시 송금액(input값)을 받아올 수 있게 하였음.
또한 state를 줘서 submit을 누르면 true로 하여 버튼 하단에 결과 값을 나타냄.
결과를 보여줄 때, 삼항 연산자를 사용해서 input값이 없거나, 숫자 0을 누르면 에러가 나는 등의
에러가 날 조건들을 작성해주었다.

이제까지 삼항을 쓰면서 || 을 써본 적이 없었는데, 이번에 팀플을 하면서 처음 배워서 추가하였다.
&&을 쓸 수 있다면, 당연히 || 도 쓸 수 있는 것이었을 텐데... 왜 그런 생각을 못해봤는지.. 바보 바보!!

---

5. 환율과 수취금액은 소수점 둘째 자리까지 이고, 3자리 이상되면 콤마를 찍어서 보여줘야 함.

숫자를 파악하여 기존의 점을 없애고, 소수점과 콤마를 새로 넣어야 하는 함수를 다른 팀원분께서 만드셨는데,
정규식 관련된 코드가 많아서 흐름은 파악이 되는데, 아직 정확히 이해를 못 하고 있다ㅠ.ㅠ
과제에서 사용했던 코드들을 간단한 예시와 같이 이해해보자.

// 정규식과 replace함수를 사용하여 숫자를 제외한 모든 표현을 없앨 때

const ex1 = "12..345,678aas";
const exResult1 = ex1.replace(/[^\d]+/g, '');
console.log(exResult1); // 12345678

// replace 함수를 사용하여 콤마를 공백으로 대체하여 없앨 때

const ex1 = "12..345,678";
const exResult1 = ex1.replace(',', '');
console.log(exResult1); // 12..345678

// split 함수와 join을 사용하여 점과 콤마를 없앨 때
// ex1의 점두개는 NaN 에러 남.

const ex1 = "12..345,678";
const ex2 = "12.345,678";
const exResult1 = ex1.split(',').join('');
console.log(exResult1); // NaN

const exResult2 = ex2.split(',').join('');
console.log(exResult2); // 12.345678

// 정규식을 사용하여 1000단위로 콤마 넣을 때

const ex1 = "12345678";
const exResult1 = ex1.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,');
console.log(exResult1); // 12,345,678


const ex1 = "12345678";
const exResult2 = ex1.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
console.log(exResult2); // 12,345,678

 

// Math.abs() 함수는 주어진 숫자의 절대값을 반환합니다.
// x 가 양수이거나 0이라면 x 를 리턴하고, x 가 음수라면 x 의 반대값, 즉 양수를 반환합니다.

Math.abs('-1');     // 1
Math.abs(-2);       // 2
Math.abs(null);     // 0
Math.abs('');       // 0
Math.abs([]);       // 0
Math.abs([2]);      // 2
Math.abs([1,2]);    // NaN
Math.abs({});       // NaN
Math.abs('string'); // NaN
Math.abs();         // NaN

// Number.prototype.toPrecision() 함수는 유효 자릿수를 지정하는 정수입니다.
// 인수가 정수가 아닌 값 이면 precision가장 가까운 정수로 반올림됩니다.
// 사용 방법 : numObj.toPrecision([전체 자릿수])

let numObj = 5.123456

console.log(numObj.toPrecision())    // logs '5.123456'
console.log(numObj.toPrecision(5))   // logs '5.1235'
console.log(numObj.toPrecision(2))   // logs '5.1'
console.log(numObj.toPrecision(1))   // logs '5'

numObj = 0.000123

console.log(numObj.toPrecision())    // logs '0.000123'
console.log(numObj.toPrecision(5))   // logs '0.00012300'
console.log(numObj.toPrecision(2))   // logs '0.00012'
console.log(numObj.toPrecision(1))   // logs '0.0001'

// Math.sign()함수는 인수에 전달된 숫자의 부호를 나타내는 양수 또는 음수 +/- 1을 반환합니다.
// 인수가 양수이면 를 반환합니다 1.
// 인수가 음수이면 를 반환합니다 -1.
// 인수가 양의 0이면 를 반환합니다 0.
// 인수가 음수 0이면 를 반환합니다 -0.
// 그렇지 않으면 NaN반환됩니다.

Math.sign(3);     //  1
Math.sign(-3);    // -1
Math.sign('-3');  // -1
Math.sign(0);     //  0
Math.sign(-0);    // -0
Math.sign(NaN);   // NaN
Math.sign('foo'); // NaN
Math.sign();      // NaN

// 가장 가까운 정수로 반올림된 숫자 값을 반환
const ex1 = 123.45678;
const exResult1 = Math.round(ex1);
console.log(exResult1); // 123

// 가장 가까운 정수로 반올림된 숫자 값을 반환 후 소수점 둘째자리 생성
const ex1 = 123.45678;
const exResult1 = Math.round(ex1) / 100 ;
console.log(exResult1); // 1.23

// 두번째자리에서 반올림 해줌.
const ex1 = 123.45678;
const exResult1 = ex1.toFixed(2) ;
console.log(exResult1); //123.46

// 양수라면 1, 음수라면 0
const ex1 = 123.45678;
const exResult1 = Math.sign(ex1);
console.log(exResult1); // 1

// 양수여서 1이 되었으며, 거기에 소수점을 둘째자리까지 추가.
const ex1 = 123.45678;
const exResult1 = Math.sign(ex1).toFixed(2);
console.log(exResult1); // 1.00

// 1.23 * 1.00
const ex1 = 123.45678;
const exResult1 = (Math.round(ex1) / 100) * Math.sign(ex1).toFixed(2) ;
console.log(exResult1); // 1.23

// 1234.57 * 1.00
const ex1 = 123456.789;
const exResult1 = (Math.round(ex1) / 100) * Math.sign(ex1).toFixed(2) ;
console.log(exResult1); // 1234.57

---

💥 왜 Styled-Components를 사용하였나?

Styled-components란 Javascript 파일 내에서 CSS를 사용할 수 있게 해주는
대표적인 CSS-in-JS 라이브러리로, React 프레임워크를 주요 대상으로 한 라이브러리

장점 :
- props를 활용한 조건부 스타일링이 가능하다.
- 한 컴포넌트 내에서 css 코드를 함께 작업할 수 있다.
- 리액트 식의 컴포넌트 분리가 편해서 재사용성이 높다.

단점 :
- CSS를 줄 태그를 일일이 컴포넌트로 만들어야 한다.
- CSS 수정할 때마다 해당 컴포넌트 파일 위치를 찾아야 하는 번거로움이 있다.

참고 : https://analogcoding.tistory.com/181

---

🚀 Netlify에서 배포 도중, Error가 발생한 이유와 해결법(?)

netlify는 https를 사용하고 과제에서 제공받은 API의 free plan은 http만 사용할 수 있어서
배포 후 링크를 들어가 보면 mixed content error가 발생하여 api 요청에 대한 응답을 받지 못하는 상황이었다.

해당 에러를 해결하고자 구글링 해서 index.html 부분에 아래의 코드를 넣었지만,

 <meta
      http-equiv="Content-Security-Policy"
      content="upgrade-insecure-requests"
    />

api 측에서 free plan은 http 요청 오는 걸 차단시켜, 또 다른 에러가 발생...ㅠㅠ
유료버전을 구매하지 않는 이상 netlify를 사용하여 배포하는 건 무리라고 판단하여 aws s3으로 배포!

어떻게든 netlify의 에러를 해결해보려고, 1-2시간을 끙끙 앓았는데..
그냥 빠르게 배포 플랫폼을 바꾸는 것도 방법이라면 방법이었던 것 같다. 오늘도 이렇게 삽질을...

aws 3s 배포 시 참고한 : https://42place.innovationacademy.kr/archives/9784