Kooku's log

Written by@Kooku
꾸준하게, 끈기있게

GitHub

React reconciliation & fiber

React reconciliation Reconciliation은 React의 “비교(diffing)” 알고리즘입니다. 이 비교 알고리즘 덕분에 컴포넌트의 갱신이 예측 가능해지면서도 고성능 앱이라고 불러도 손색없을 만큼 충분히 빠른 앱을 만들 수 있습니다 React rendering logic 리액트 컴포넌트가 화면에 렌더링 되는 과정은 다음과 같습니다.…

Height Performace Animations

Rendering process 출처: https://developers.google.com/web/fundamentals/performance/rendering/?hl=ko JS와 CSS를 이용하여 animation을 구현해야할 때 성능 상 가장 고려해야할 부분이 Reflow(Layout) 와 Repaint(Paint)를 최소화하는 것이다.  DOM 트…

HTML video tag를 사용할 때 주의해야할 점들

브랜드 사이트에 비디오를 넣게 되면서 발생했던 문제들을 나열해 보았다. 공통 모바일 웹에서 비디오 다운로드 막기 모다일에서 비디오를 꾹~ 클릭하게 되면 비디오를 다운받을 수 있게 된다. 이를 막기 위해서는 이벤트를 막으면 된다. playsinline 속성 넣기 아이폰에서는 playsinline 속성을 꼭 넣어줘야한다. 안넣어주면 동영상이 전체 화면 모드…

Todo-List를 최적화 시켜보자 (2)

Todo-List를 최적화 시켜보자 (1)

https://github.com/koomg9599/optimize-todo-list/tree/1 불필요한 Body의 rerender를 없애자 Header의 input만 상태만 update되었는데 Body도 rendering 된다. 기존 코드를 살펴보면 다음과 같다. redux의 todos에 input, todoItems 두 개의 상태가 저장되어 있는데…

Todo-List를 최적화 시켜보자 (0)

Todo List 를 최적화 시켜보자. 기존 템플릿의 코드는 다음과 같다. https://github.com/koomg9599/optimize-todo-list/tree/0 할 일을 입력하면 Rendering은 다음과 같이 이루어진다. 1) 첫 화면 Provider mount App mount TodoList mount Header mount Body m…

JPA ORM JDBC 란

Spring-boot를 처음 사용하는데 처음 듣는 단어들이 너무 많았다. 왜 이렇게 어렵고 공부할께 많은건지.. DB 연동을 하면서 JPA, ORM, JDBC에 대하여 알게 되었고 간단히 공부를 해보았다. 어떤 차이가 있는지 정도? Overview guideline에서는 Hibernate를 JPA provider로서 사용하는 것을 가정합니다. JPA (…

(react-native) appinstalldebug

Date 2020.04.15 Tags Contents Task: app:InstallDebug FAILED Solutions 안드로이드 키 서명문제로 발생한 것이다. D:경로\프로젝트명\android\app\build\intermediates\signing_config\debug\out\signing-config.json 이 경로에 있는 signing…

(react-native) apptransformnativelibswithmergejnilibsfordebug

Date 2020.04.15 Tags Contents dependency build error (apptransformnativelibswithmergejnilibsfordebug) Solutions Step 1: Delete Your Build Folders Delete build folder from android delete build folde…

(Azure) SQL DB 생성 & 접속

Azure 대표적인 PaaS 서비스인 SQL DB 를 생성하고, Query 를 날려보겠습니다. 1. SQL DB 만들기 1) 서비스 선택 Azure 홈페이지의 포탈 탭으로 들어가 SQL 데이터베이스 서비스를 클릭합니다. 2) SQL 데이터 베이스 만들기 이제 본격적으로 SQL DB를 만들어 보겠습니다. 리소스 그룹 생성 데이터베이스 이름 생성(왠만하면…