유튜브 토스ㅣSLASH 21 - 실무에서 바로 쓰는 Frontend Clean Code 영상을 보고 정리한 글입니다.출처: https://www.youtube.com/watch?v=edWbHp_k_9Y    요약. 클린코드를 위해서 다음 세가지를 기억해서 코드를 짜자 1. 응집도2. 단일책임3. 추상화 내 코드에 클린 코드 적용하기 위한 마음가짐 1. 담대하게 기존 코드 수정하기-  두려워 하지말고 기존 코드를 씹고 뜯고 맛보고 즐기자 2.  큰 그림 보는 연습-    그 때는 맞고 지금은 틀리다. 기능 추가 자체는 클린해도, 전체적으로는 어지러울 수 있다. 3. 팀과 함께 공감대 형성하기-   코드에 정답은 없음. 명시적으로 이야기하는 시간이 필요하다. 4. 문서로 적어보기-   글로 적어야 명확해진다..

출처: https://www.youtube.com/watch?v=N7qlk_GQRJU  이정환님의 강의를 보고 정리한 글입니다.   리액트는, 별도의 렌더링 프로세스를 사용하여내부적으로 동시에 발생되는 업데이트들을 다 모아서 최소한의 횟수로 dom을 수정할 수 있도록 추상화되어있다. 즉 리액트는Render Phase와 Commit Phase라는 두단계를 거쳐 화면에 UI를 렌더링 한다. 아래에서 각 단계들이 무엇을 의미하는지 살펴보자Rander Phase 1컴포넌트를 계산하고 업데이트 사항을 파악하는 단계로,컴포넌트를 호출해 결과값을 계산한다. 이미지 맨 왼쪽의 App 컴포넌트를 리턴하면, main태그를 가진 Hello를 리턴한다. 라고 생각할 수 있겠지만, 내부적으로 정확하게는 이미지 맨 오른쪽과같이 ..

출처: https://www.youtube.com/watch?v=N7qlk_GQRJU이정환님의 강의를 보고 정리한 글입니다. 브라우저가 화면에 렌더링되는 방식Critical Rendering Path 과정을 통해서 렌더링을 하게 된다. 전체적인 구조는 다음 사진과 같다.위의 사진을 구조적으로 세분화시켜서 단계별로 나누면 다음과 같다. 1단계 - html,css 변환우리가 작성한 html과 css코드를 각각 DOM과 CssObjectModel 변환을 한다.  ※ 알고 넘어가기.DOM이란? Document Object Model의 약자로, html을 브라우저가 해석하기 편한 방식으로 변환한 객체트리를 말한다. 2단계 - Render Tree 생성1단계에서 만든 dom과 cssom을 합쳐서 Rander Tre..