🗓 항해 99 3기에서 9/20 ~ 9/25 동안의 2주차 회고록

이번 주부터 주특기로 정한 React에 대해 집중적으로 배웠다. 추석 연휴가 껴있어서 월 ~ 수 까지는 리액트 기초 강의를 1 ~ 3주차까지 열심히 들었다.

1주차까지는 HTML, CSS, 자바스크립트, CRA에 대한 기초적인 내용이라서 힘들지는 않았는데 문제는 2주차부터였다. 리액트라는 프레임워크를 처음 만져보니 당연히 어려울 거라고 생각은 하고 있었지만 ... 리액트의 많은 생소한 내용들을 단기간에 머리에 때려박으려니까 이게 도대체 왜 이렇게 되지 ? 라는 생각 때문에 이해하기가 많이 힘들었던 것 같다.

그래서 3주차 리덕스강의를 들을 때부터는 생각을 조금 고쳐먹고 들으려고 노력했더니 조금씩 이해가 되었던 것 같다. 모든게 처음 접하는 내용인데 이걸 하나하나 왜 이렇게 동작하는지에 대해서 파고 들려다보니 끝이 없을 것 같았고, 지금은 그냥 클래스형 컴포넌트, 함수형 컴포넌트가 어떻게 생겼고, 자주 쓰는 훅 함수가 무엇인지, 어떤 때에 써야하는지, 파라미터로 어떤 것을 받아오는지 이런것에 집중해서 강의를 듣는 것이 더 중요하다고 생각되어서 그렇게 듣기 시작하였더니 어느정도 리액트에서 리덕스로 상태관리하는 흐름에 대해 이해할 수 있게 되었다.

강의를 4주차까지 듣고, 금요일에 과제를 시작해서 단어 추가기능을 구현하고 토요일까지 css 작업을 했다. css 너무 어렵다 ㅠ 내일부터는 단어 수정, 삭제 기능을 되는데까지 해볼 예정이다. 삭제는 쉬울 것 같은데 수정은 어떻게 해야할 지 감이 잘 안잡힌다. ㅎ

주특기 심화주차 시작 전까지 시간이 남으면 css로 UI적인 요소를 더 추가해보고싶고, 자바스크립트 공부를 하고싶다.

📌 이번 주 핵심 정리

1. DOM

• DOM 이란? 💡 문서 객체 모델 (The Document Object Model) 은 HTML, XML 문서의 프로그래밍 interface이다. DOM은 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM구조에 접근할 수 있는 방법을 제공하며 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.
• DOM 트리 👉 DOM tree는 브라우저가 HTML 문서를 로드한 후 파싱하여 생성하는 모델을 의미한다. 객체의 트리로 구조화되어있기 때문에 DOM tree라고 부른다. - 개발자 도구에서 DOM tree 확인하기 ```jsx // 현재 dom 트리를 볼 수 있다 document // dom 트리 중, body의 내용 document.body // dom 트리 중, head의 내용 document.head ``` - body 안에 있는 요소에 접근하기 ```jsx document.body.childNodes // 자식노드의 컬렉션 반환. 텍스트 요소를 포함한 모든 자식 요소 반환 document.body.children // 자식노드의 컬렉션 반환. 자식 요소 중에서 Element type 요소만을 반환 document.getElementsByTagName(tagName) // 태그명으로 요소 노드를 모두 선택한다 document.getElementById(id) // id 값으로 요소 노드 한 개를 선택한다. 복수개가 선택될 경우, 첫번째 요소만 반환 document.getElementsByClassName(class) // class 값으로 요소 노드를 모두 선택한다. 공백으로 여러 개의 class를 지정할 수 있다 ```

2. 서버리스

• 서버리스란? 💡 서버리스(serverless)란 개발자가 서버를 관리할 필요 없이 앱을 빌드하고 실행할 수 있도록하는 클라우드 네이티브 개발 모델이다. "서버가 없다"라는 의미가 아니며, 그저 특정 작업을 수행하기 위해서 컴퓨터에 서버를 설정하는 과정이 없는 것!! (서버의 사양, 서버의 갯수, 네트워크 등을 설정할 필요가 없다!!) 그 대신에, Baas(Backend as a Service) 혹은 Faas(Function as a Service)에 의존하여 작업을 처리하게 된다. Baas에는 대표적으로 Firebase, Faas에는 AWS Lambdam등이 있다.
• Baas 💡 보통 우리가 모바일, 웹 앱을 만들게 될 때 데이터를 저장하고, 다른 기기에서도 접근하고 공유하기 위해서는 백엔드 개발은 필수적이다. 서버 개발을 하다보면 고려해야 할 사항들이 꽤 많은데, 그래서 탄생한 서비스가 Firebase같은 Baas! 이 시스템에서는 앱 개발에 있어서 필요한 다양한 기능들 (데이터베이스, 소셜서비스 연동, 파일시스템 등)을 API로 제공해 줌으로서, 개발자들이 서버 개발을 하지 않고도 필요한 기능을 쉽고 빠르게 구현할 수 있게 해준다.
• 장/단점

  • 장점

    😎 1. 개발 시간의 단축 - 백엔드에 대한 지식이 별로 없더라도, 빠른 속도로 개발이 가능

  2. 일정 사용량만큼 무료로 사용할 수 있기 때문에 소규모의 프로젝트 개발의 경우 유용하게 사용할 수 있다.

  • 단점

    😅 1. 백엔드 로직들이 클라이언트쪽에 구현이 된다. → 데이터단의 로직이 변경되면 클라이언트 코드의 수정이 필요함...!

  2. 앱의 규모가 커지면 가격이 꽤 비쌈

  3. firebase의 경우 DB가 하나의 큰 JSON 객체로 구조화 되어있기 때문에 최대한 데이터베이스 모델을 비정규화하여 사용하는 것이 좋다.
     → 복잡한 쿼리가 불가능함