sooleeandtomas

## 브라우저의 렌더링 과정 1. DOM tree 생성 : html을 파싱하여 DOM노드로 이뤄진 트리 생성 2. CSSOM tree 생성: style, inline 스타일을 파싱하여 트리 생성 3. render tree : DOM + CSSOM 위의 두 트리를 합친 랜더 트리 생성 4. Layout (reflow) 리플로우 리패인트에 관하여 5. Paint (repaint) 인터랙션이 발생하면 위의 과정을 다시 수행한다. 불필요 하다고 느껴진다. 정보성으로 인터렉션이 없는 페이지에서는 유용할 수 있지만, 인터랙션이 많이 일어나는 웹페이지의 경우 소모적이다. ## VIRTUAL DOM 실제 DOM의 추상화 개념이다. 실제 DOM과 같은 속성을 (class, id... 등) 가지고 있지만 메소드를 수행할 ..

React dev tools는 개발자들이 리덕스 스토어를 디버깅할 때 유용하게 쓸 수 있는 chrome에 설치할 수 있는 extension입니다. 이 툴에 미들웨어가 동작하는 방식들을 일일히 로그처럼 볼 수 있습니다. 이 툴은 개발 모드에서는 문제없지만, 실제 라이브되는 모드에서 보여진다면 클납니다. user info에는 card, item 배송지 정보 등등이 있을 텐데, 그런 것들이 라이브 서버에 보여지면 문제가 될 수 있는 여지가 분명히 있을 겁니다! 그래서 아래와 같이 store에 미들웨어를 적용하는 부분에 'development' 이거나 'stage'(스테이지 환경을 사용할 경우) 에서만 devtools를 적용한 미들웨어를 넣어주면 됩니다. // ...이상 생략 import 'composeWith..

firebase에서 복합쿼리 사용하는 법 1. 색인 탭에서 -> 색인 만들기 클릭 3. 컬렉션 id, 필드 입력, 쿼리범위 : 컬렉션 4. 복합쿼리를 생성하는데 좀 시간이 오래 걸린다고 합니다. 1시간정도? 댓글 불러오기 댓글의 데이터 형태는 아래와 같습니다. 각 post_id 가 [ { }, { }, { } ] post_id에 해당하는 댓글 리스트를 가져오는 것입니다. [ 13kngsfOSNO:[{ centents: "", id: "", insert_dt: "", post_id: "", user_id: "", user_name: "", user_profile: "", },{ centents: "", id: "", insert_dt: "", post_id: "", user_id: "", user_name..

React 꿀팁 1 : 기획서를 보고 미리 컴포넌트 단위로 쪼갠다. React 꿀팁 2: 코드를 작성하기 전, 들어갈 내용을 미리 간단히 구조를 작성해준다. user profile/username/insert_dt/is_me(edit btn) content imgae comment cnt React 꿀팁 3: Props가 안넘어 올 경우를 대비해 Default Props를 설정해준다. Post.defaultProps = { user_info:{ user_name: "soo", user_profile: "", }, image_url: "", contents: "토슈", comment_cnt: 10, insert_dt:"2021-02-27 10:00:00" }; React 꿀팁 4 : React-develo..

Pros 개발 관점 1. 커뮤니티도 활성화 & 많은 외부 라이브러리가 있음. Roughly 50,000 active RN contributors are available on Stack Overflow. 2. Native code hybrid app으로 사용하기에 좋다. 3. 짧은 러닝타임. javascript, NPM 사용가능 4. CodePush를 사용한다면 빠른 배포 가능 5. UI를 쉽게 구현가능 사업 관점 1. 서비스를 테스트 할 경우나, 새로 구현할 기능이 많을 경우 유용함. (ios, android 둘 다 개발할 필요없이 하나만 개발하면 된다.) 유지 보수 비용 절감. 커리어 관점 1. 스타트업에 취업하기 쉽다. 2. 배운다면, 개발 스텍이 하나 추가된다. 3. 배포 경험. 추후 개인 프로젝..

자바스크립트에서 객체 및 배열 자료형이 불변성인 이유에 대하여 Wha is 자료형? 데이터 0,1로 이루어져있습니다. 하나의 메모리 크기를 비트라고 합니다. 비트는 식별자/ 주소값을 통해 위치를 확인합니다. 데이터 타입 Javascript 의 데이터 타입에는 원시형과 참조형이 있습니다. 타입 원시형 primitive 참조형 reference 종류 number, string, boolean, null, undefined object, array, function, date, regex 복사 깊은복사 얕은복사 데이터 영역 데이터 영역, 변수 영역 데이터영역, 변수영역, 변수 안의 오브젝트의 변수 영역 데이터 크기 데이터의 종류에 따라 확보해야 할 메모리의 크기가 다릅니다. 예를 들어 1byte(8bit)로 ..