[멋쟁이 사자처럼] 멋사 프론트엔드 스쿨 5기 9주차 4LS 회고 (비동기 프로그래밍)

 ❤️‍🔥 Liked

• 드디어 React 시작!.... 가보자고! 🔥🔥🔥 (울지 말고 천천히 말해봐...)
• 스터디에서 팀 repo를 만들어서 처음으로 git folk를 했다. 진행하면서 CLI 명령어를 보기 쉽게 자료로 정리했는데 곧 포스팅으로 올릴 예정! 협업에 익숙해지고 싶어서 조원들과 같이 알고리즘 문제풀이를 할 수 있도록 Organizations계정도 만들었다. 🙂
• 이번 주는 메모장 만들기 실습 과제가 있었는데 과제 구현을 하면서 DOM제어와 LocalStorage에 대해 많이 공부할 수 있었다.
  새벽 내내 에러와 씨름하다 3시간 자고 수업 들으려고 일어나자마자 내내 안 보이던 수정할 코드가 보이는 경험을 했다.
  아직 원하는 기능을 구현하기에 미숙하고 개발 속도도 너무 느리지만 뭔가 일단 만들어 보는 게 중요하다는 조언들에 갈수록 깊이 공감하게 된다. 열심히 만든 메모장 링크도 살짝 첨부... :)

 

 

 

 💣 Lacked

• json, fetch, promise, async & await 각각 개념은 이해가 되는데, 프로그램에서 각각 명령으로 상호작용하면서 수행되는 로직을 잘 이해하지 못하는 것 같다. 작성은 당연히 어렵고, 생소한 메소드 조합이 있으면 해석마저 어렵다. 주말에 이론적으로 계속 접근하다가 결국 느리지만 실습하면서 공부하는 중.
• React 시작했는데 동기비동기 늪에 빠져서 예습이 부족했다.. 수업에서 많이 얻어가고 싶은데...😭 

 

 

 ✏️ Learned

• DOM 접근은 가능한 좁은 범위에서 적게 사용. 공통적인 부모를 찾아서 그 부모에서 탐색하는 것이 좋다.
• DocumentFragment()를 사용하면 브라우저가 읽을 때 메인 DomTree에 영향을 주지 않는
  Node로 구성된 하위의 DomTree 구조를 저장할 수 있어서 좁은 범위 호출이 가능하기 때문에 성능최적화에 도움이 된다.
• Closer 패턴에는 메모리 누수가 발생할 수 있다.
• XMLHttpRequest는 줄여서 XHR 이라고 한다.
• XHR은 new 키워드로 인스턴스를 만드는 생성자 함수
• fetch는 XHR 객체보다 간단하게 함수처럼 데이터에 접근한다.
  arguments로 전달한 url에 접근해 데이터를 다운로드하고 다운로드가 완료되면 바로 fulfilled promise 를 반환.
• XHR과 fetch의 가장 큰 차이점은 fetch는 인스턴스를 만들지 않고 promise을 반환한다는 것!
• promise 객체는 약속은 이행되거나 resolve 거절되거나 reject 둘 중에 한 가지 결과만 반환.
• resolved 이행 : PromiseState : fulfilled를 가져오는 과정. → then() 메소드로 완료 후 실행할 내용 체이닝
• rejected 거절 : 문제로 promise 실행 실패. → catch() 메소드로 실패 후 실행할 내용 체이닝
• async 는 어떤 함수든 프로미스 객체를 return 없이도 반환
• await 는 promise 객체의 fulfilled 값을 반환. async 함수안에서만 사용!
• async … await fetch() 는 .then()… 을 생략 가능하게 하는 sugar Syntactic
• React에서는 주로 component 를 만들고 JSX 문법을 통해 DOM에 대해 작업할 일을 최소화하는 작업을 한다.
• Single Page Appication 은 단일 웹 문서만 로드한 다음 
  다른 콘텐츠가 표시될 때  FetchXMLHttpRequest 와 같은 API를 통해 본문 콘텐츠를 업데이트하는 웹 앱을 구현한다.

 

 

 

 👩🏻‍💻 Longed For

• 10km 러닝.
• 모던 JavaScript 튜토리얼, 자료구조와 자료형 5 단락 내용 숙지.
• 회고조 React 공식문서 스터디 참여.
• 가위바위보 미니게임 만들어보기.
• 프로그래머스 0단계 문제 매일 3개씩 풀기.
• class 포스팅.. 정리해놨는데 계속 밀려서 못 올리고 있다.ㅎㅎㅎ올리자....