관리 메뉴

개발캡슐

chap3 -2_/ start_day+3 / 리덕스 상태관리, 개인홈페이지 관리할 때 본문

스파르타코딩클럽-항해99_9기/WIL

chap3 -2_/ start_day+3 / 리덕스 상태관리, 개인홈페이지 관리할 때

DevGreeny 2022. 10. 9. 23:40

역시나 어렵지만 재밌다. 히히

이번엔 스타일 컴포넌트(Styled-components)와 리덕스를 배우고 추가로 리액트에서 알아야할 Axios/API를 공부하는 주.
중간에 매니저님 오시면서 시간낭비 안 하시게 국물까지 쫙쫙 뽑아드리고 있었지.
리덕스로 상태관리 외에 이것 저것 많이 여쭤보다가 난중에 개인홈페이지 운영을 하고 싶어서 데이터베이스관리나 Dev/Ops 어떻게 할 지까지 얘기가 나왔어. 그러다가 Firebase로 개인홈 관리하면 편하다는 정보를 얻었지.

요즘 개인 웹서비스 디자인과 와이어프레임도 가끔씩 아이디어 떠오르면 기능은 어떻게 하고 디자인은 어떻게 하면 좋을찌 적고있어.  DB쪽 관리를 어떻게 해야하나 고민이었는데 마침 좋은 소식이었지. 되게 신났어 흐흐 

Firebase는 AWS와 같이 서버를 빌려주는 호스팅 서비스인데 여러기능이 갖춰져 있어. 이를 테면 DB관리부터 Dev/ops까지 있어서 프론트엔드 부분을 다룰 줄 안다면 백엔드 지식이 없어도 Firebase이 알아서 해서 그냥 맞기면 되더라구. 이러한 방식에 의존하는 경우는 '서버리스'일 때야. 말 그대로 서버가 없는 상태인데 진짜 서버가 없는 건 아니구 특정 작업을 수행하고 서버를 설정하고 처리할 때 Firebase에 '의존'을 해서 처리하는 거지! 그렇게 서버리스 앱이 만들어지고!

이렇게 Firebase 서비스를 이용하는 방식을 BaaS(Backend as a Service.)라고 해. Firebase는 AWS와 비슷하게 초반에 무료라 소규모 프로젝트에서 쓸만하대.  DB, 소셜연동, 파일 시스템 등을 API로 제공해줘서 필요한 기능을 쉽게 구현할 수 있고 별다른 백엔드 지식이 없어도 서버 작업 등을 할 수 있어. 그러니 개발속도도 빨라서 좋겠지. 나중에 개인 홈페이지 관리할 때 편할 거 같아. 

- Axios

위 과정에서 프론트엔드가 백엔드로 데이터를 전달할 때 Axios를 통해 전달할 수 있어. 일종의 API같이.

 

Javascript 지중해 스터디반인데, 요즘 스터디 시간이 확정이 됐어..ㅋㅋ점점 시간대가 늦어지면서 결국 월요일이나 목요일 밤 11시 편한 시간대에 같이 모여서 호로록 보고 각자 공부한 걸 질문하고 대답해주는 시간을 갖기로 정했어. 그건 무척 좋은 방식인 것 같아.

현재 주특기로 React를 하니까 따로 주특기 스터디도 짧게 하면 어떨까 생각했어. 리액트하는 조들 다 모인 톡방도 파서 집중시간 이후 여유있거나 시간되는 사람들은 스터디를 자유롭게 짜고 소재는 자유롭게 정해서 간단한 개인 프로젝트도 만들기도 했어. 코드도 분석하면서 각자 이해한 것들을 얘기하고 모르는 부분은 무엇인 지 코드를 공유하면서 생각도 공유하고 편하게 첨언도 하고. 그러다 보니 본인도 그렇고 다들 질문하는 데에 더 편하게 할 수 있게 된 거 같아. 

그렇게 내일 월요일 밤 11시에 모여서 DOM(문서객체모델, Document Objects Model) 부분을 들어가는데 마침 이번 WIL주제도 DOM이더라. ㅋㅋ그 외에 이번 발제 이전에 리액트 섹션 주제도 DOM이긴 했어. 가상DOM을 형성하는 React에 대한 개념을 찾다보니 DOM은 또 뭔가 찾기도 해봤고 섹션을 보면서 도대체 DOM이란 무엇인가 생각했는데ㅋㅋ 브라우저 그 자체로 인식하고 있다가 혼자공부하는 자바스크립트 책을 보니까 뭔지 알겠더라. 

HTML에서는 "요소"이자 Javascript에선 "문서객체(Document Object)"라고 하는 걸 조합해서 만든 전체적인 형태를 문서 객체 모델 (DOM, Document Object Model) 라고 하더라구. 넓은 의미론 웹 브라우저가 HTML페이지를 인식하는 방식이기도 해. 그래서 HTML과 React에서 DOM에 접근하는 함수를 이용하는 게 DOM이 인식하게 만들기 위해서가 아닐까 해.
(참고도서 : 혼자 공부하는 자바스크립트) 

 

노마드코더 강의를 보다보니까 DOM용어들에 이벤트용어들이 많더라. 아직 공부를 더 하고 손코딩을 해봐야 DOM이 정확히 뭔지 알 수 있을 거 같아.ㅋㅋ..개념으론 뭔지 알겠는데 이게 어찌 이루어지는 지 왜 잘 모르겠는지 원..ㅋㅋㅋㅋ