본문 바로가기
항해99 7기

DOM, API , REDUX, 서버리스 (+WIL)

by 호랑말코호랑 2022. 5. 29.

 

1. DOM (Document Object Model)

DOM의 탄생배경을 설명해 보자면 태초에 HTML이 존재하더라~ 우리가 보기엔 HTML은 까끔하게 정리된 하나의 페이지이지만 컴퓨터가 보기엔 '이게뭔..문자열의 향연인데 이걸 어떻게 니말대로 표현하라는거야?' 라고 해서 이 HTML을 컴퓨터에게 알아듣기 쉽게 설명해주는 API를 DOM이라고 부르더라~! API는 아래 설명에서 설명해야지. 아무튼 그래서 DOM은 기본적으로 트리형 구조이다.

그리고 이 트리구조의 요소 하나하나를 node라고 부른다. DOM의 역할은 첫번째로 html에 간단하게 접근이 가능하게 도와준다. 두번째로는 이 트리형의 구조 노드 하나하나를 제어하고 통제할 수 있게 한다. 더 자세한 내용은 항해톡 발표자료 만들고 따로 올리도록 하겠따!

2.API (Application Programming Interface)

API는 간단하게 말하면 티비의 리모콘 같은존재이다. 한마디로 사용자가 원하는 바를 올바른 언어로 전달할 수 있게 도와주는 중간자 역할이다. 위에서 DOM이 API라고 했는데 다시 설명해 보자면 DOM은 HTML을 컴퓨터에게 올바른 언어로 전달해 줄 수 있는 API라고 할 수 있을것이다. 우리가 흔히 들어봤던 날씨 API 이런 종류의 공공 혹은 프라이빗 API는 사용자에게 정보를 전달해 주기 위한 데이터 저장소라고 생각하면 편할 것이다.

3. REDUX

코딩애플님의 설명을 들었는데 중간에 props들 춤추는거 보고 미친듯이 웃었음..ㅋㅋㅋㅋㅋㅋㅋㅋ아.. 이럴거면 props 왜 열심히했냐!!! 내가 이해한 바에 따르면 redux는 한 컴포넌트 안에서 수 많은 변수들을 통제하고 그를 사용할 수 있도록 하는 js내에서의 api이다. api는 위에서도 설명했듯 뭔가 정보들을 저장해두고 그걸 빼와서 사용자가 사용할 수 있게 하는 데이터 게시(?)공간이다. 

위에 사진에서 볼 수 있듯 store.js에 변수값을 저장해 두고 그 변수값을 통제하는 함수를 만들면 그걸 다른 메인 컴포넌트에서 퍼가요~❤ 하고 그 정보를 퍼가서 사용할 수 있다. 그래서 나중에 뭔가 오류가 일어난다면 그 오류가 발생하는 위치를 store.js로 통제할 수 있기 때문에 그 점 때문에 더욱더 리덕스를 알아야 한다. 사용법은 아직 안들었음 ! 들으면 따로 정리해봐야징

https://www.youtube.com/watch?v=QZcYz2NrDIs 

4. 서버리스

서버리스. 직역하면 서버가없다! ??? 서버가 없다고? 생각할 수 있는데 실제로는 서버가 없는건 아니다. 이는 특정 작업을 수행하기 위해 컴퓨터나 가장머신에 서버를 설정하고 이를 통해 처리하는 것이 아님을 의미한다. 그 대신 BaaS 혹은 FaaS에 의존하여 작업을 처리하게 된다. BaaS는 백엔드 서비스로 예시로 Firebase가 있다. 이 서비스에서는 앱 개발에 있어서 필요한 다양한 기능들을 API로 제공해 줌으로써, 개발자들이 서버 개발을 하지 않고서도 필요한 기능을 쉽고 빠르게 구현 할 수 있게 해주고, 비용은 사용 한 만큼 나가게 된다. 이의 가장 큰 장점은 개발시간의 단축, 서버 확장 작업의 불필요함이다. FaaS는 프로젝트를 여러개의 함수로 쪼개서 매우 거대하고 분산된 컴퓨팅 자원에 준비해둔 함수를 등록하고 이 함수들이 실행되는 횟수와 시간만큼 비용을 지불하는 방식이다.  예를 들면 내가 자주 사용하는 AWS가 있다.

 

 

++ WIL 이번주는 여러모로 힘든 주였다.. 심적으로도 그렇고 체력도 진짜 이제 바닥이 났구나 싶을 정도로 힘들었는데 어찌어찌 또 지나갔다. 이번주에는 입문주차 과제를 완성시켰고 완성 중에 괜한 오기를 부려서 하나의 코드로 시간을 5시간을 잡아먹기도 했다. 여기저기 다른 조원분들에게 질문해서 내가 원하는 코드대로 짜서 완성을 시키긴 했는데 뭔가 괜히 어려운 코드로 진만 뺀 기분이 들긴했다. 하지만 이제는 뭔가 프로젝트를 시작할때 끝을 보고 시작을 해야한다는 교훈(?)을 얻긴했다. 이번 숙련주차 개인과제는 강의를 보지 않고 구글링만으로 만들기를 시도해 보라는 매니저님 말씀을 따라서 첫 날 일단 완성된 사이트를 보고 내나름대로 계획을 짰다. 물론 아직 리덕스를 배우지 않아서 어떤정보를 전송하고 저장하는 가에 대한건 모르겠어서 자세히 짜진 않았지만 일단 외적인 부분은 대강 짰다. 

그래서 초반 css 작업만 해두고 구글링 해서 찾아볼 생각이었는데... 생각보다 처음 써보는 기술 자체를 쌩으로 시작한느게 쉽지 않아서 강의를 듣고 만들기로 했다! 담주에 열심히 들어야징

또또 담주에 내 인생에 있어서...손에 꼽을 청중을 가진 발표가 있을 예정이라서 오늘 하루종일 발표준비를 했다. 나는 내가 이해가 100프로 되어야 설명할 수 있다고 생각하는 편이라서 열심히 공부해봤다. 이제 발표 피피티 만들어야지 ㅠㅠ

벌써부터 떨려 죽겠는데 대학댕길때도 절대 피피티 준비했었는데 언제까지고 피할 수 없으니까 잘 준비해서 잘 발표해 봐야겠다 ㄷㄷㄷㄷㄷㄷㄷㄷㄷㄷㄷㄷㄷㄷㄹ떨ㄹ려ㅕㅕㅕㅕ 

'항해99 7기' 카테고리의 다른 글

첫 미니 프로젝트 !  (0) 2022.06.19
항해톡 DOM 발표  (0) 2022.06.07
React에서 ES5/ES6란?(WIL쪼끔)  (0) 2022.05.22
React 입문 주차 S.A.  (0) 2022.05.20
스파르타 코딩 플러스 2주차 3강  (0) 2022.05.11

댓글