[Toy프로젝트 ] Astronaut 개발일지

 

Astronaut

 

🚀계기

엄청 대단한 프로젝트도 아니고... 공개하기도 부끄럽지만 주기적으로 프로젝트에서 배우거나 느낀 것들을 정리해서 올릴 계획. 개인적으로 JS를 빠르게 습득하기 위해 만든 웹앱 Toy프로젝트

이전에 React를 활용한 프로젝트들은 인턴 때 처음 경험했다. 하지만 JS에 대한 학습도 없이 React를 먼저 학습했다. 무작정 부딪히면서 배우다 보니 기본적인 UI는 ant-design, bootstrap에서 가져와 짜깁기할 수 있었다. 하지만 JS를 제대로 공부하지 않은 상태에서 웹 페이지를 UI만 구성한다는 것은 큰 의미가 없었다. 그래서 다시 JS를 공부했다. React는 자바스크립트 라이브러리이기 때문에 기본적으로 JS에 대해 많은 이해가 필요했다. 그래서 나의 Astronaut 프로젝트를 통해 웹 앱을 만드는데 필요한 기능들을 학습했다. 간단한 JS 프로젝트지만, React가 UI 구성은 정말 편했다는 것을 느꼈다.. 또한 JS의 동작원리나 이벤트 루프란 무엇인지 공부할 수 있는 계기가 됐다. 

[JS] JavaScript의 Event Loop

 

React를 사용하는 이유. Reference엔 더 자세히 설명되어 있는 링크가 있다.

 

 

⚡ 아래 기능들은 github에 설명해놨지만 조금 더 구체적인 프로젝트 기능 내용

1. 사용자의 로그인을 담당하는 loginForm을 이용할 때, submit을 요청한다. 하지만 우리는 userName을 받았을 때 , 새로고침이 되길 원하지 않는다.

function onLoginSubmit(e) {
    e.preventDefault();
    const userName = loginInput.value;
    console.log(userName);
}
//e.preventDefault()를 활용해서 새로고침을 막았다.

 

 

2. .hidden 이라는 display:none속성을 가진 클래스를 만들어서 login-form에서 submit을 해줬을 때, 로컬 스토리지에 유저네임을 가지고 있다면 .hidden 클래스를 없애줬다. 또한 user의 이름을 기억하게 하기 위해서 local-storage에 저장한다. 아래와 같이 작성해줬다. 로컬 스토리지에 USERNAME_KEY가 존재한다면 유저네임 입력받는 loginForm을 감춘다.

function greeting(username) {
    greet.innerText = `Hello Astronaut ${username}.`;
    greet.classList.remove(HIDDEN_CLASSNAME);
}

const isUserNameSaved = localStorage.getItem(USERNAME_KEY);
if (isUserNameSaved === null) {
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener('submit', onLoginSubmit);
} else {
    gretting(isUserNameSaved);
}

 

 

3. 시계를 표현할 때 내장 함수인 padStart(2,'0')를 이용해서 "00:00:00" 포맷을 만들었다. 즉, 문자열의 길이는 2를 가지고 문자열의 길이가 2보다 작으면 0을 문자열 시작 부분에 채워 넣는다. 이를 이용해 시간 값 표현을 손쉽게 할 수 있었다. 첫 번째 파라미터에는 문자열의 총개수를 의미한다. 두 번째 파라미터는 채울 문자를 입력. 

a = '83'; 
console.log( a.padStart(4, '0') ); 
//실행값 : 0083

function getClock() {
    const date = new Date();
    const hours = String(date.getHours()).padStart(2, '0');
    const min = String(date.getMinutes()).padStart(2, '0');
    const sec = String(date.getSeconds()).padStart(2, '0');

    const time = `${hours}:${min}:${sec}`;
    clock.innerText = time;
}

 

4. 화면을 축소시켰을 때 이미지 잘림 현상과 스마트폰 등에서 작동을 했을 때, UI가 불안정했다. 생각보다 CSS 설정이 굉장히 어려웠다. 미디어 쿼리를 사용하여 맞추긴 했는데, 화면의 규격마다 CSS를 어떻게 화면이 달라져도 똑같이 적용시킬 수 있는지 잘 모르겠다.. (화면 규격에 따라서 px 단위로 계산을 하는 건가..?) 현재 내 코드는 사이트 규모가 커졌을 때 생각해야 될 문제도 많고 자잘한 CSS 오류가 많이 생길 것 같다. 이런 부분에선 React가 UI를 만들기 굉장히 손쉬웠던 것 같다.  (미디어쿼리)

const body = document.querySelector('body');

putImg = `img/${chosenImage}`;
body.style.backgroundImage = `url(${putImg})`;
body.style.backgroundSize = '100% 100%';

 

 

 

5. OpenWeather API 키를 공개해도 되는가?

사실 아직도 판단이 잘 안 되는 문제이다. Open api이고, 해당 사이트에서 나의 정보를 요구한 부분도 많지 않다. 그래서 공개를 해도 상관이 없지 않나 생각이 든다... 하지만 확실하지 않아 작성하지 않았다. 

대안은?

API 키는 보안을 잘 유지하며 관리해야 한다. 하지만 클라이언트 측에 KEY를 보관하고, 클라이언트가 유튜브 서버로 바로 요청을 보내는 방식으로는 KEY를 숨길 수 없다. 요청 URL에 '&key=MY_API_KEY'와 같은 형태로 내 API 키가 반드시 들어가기 때문에 공개될 수밖에 없다. 그러므로 KEY를 숨기기 위해서는 클라이언트가 아닌 곳에 KEY를 보관해야 한다. 대안은 서버를 하나 두는 것이다.

이 사이트에서 유튜브 api 사용하기 위해 API_KEY를 숨기는 과정이다. 이해하는데 도움이 많이 됐다. 유튜브 전용 api 오픈소스라 내가 아직 사용은 할 수 없다. Express를 학습 중이라 추후에 저 오픈소스를 더 편리하게 사용 가능하도록 만들어봐야겠다.

 

 

📕 Reference

https://environmentset.github.io/2019/02/13/Why-use-React/ 

https://365kim.tistory.com/93#2.-netlify%EB%A1%9C-10%EB%B6%84-%EB%A7%8C%EC%97%90-api-%ED%82%A4-%EC%88%A8%EA%B8%B0%EA%B8%B0 

https://yeongjin13.tistory.com/50