Purple Programming

여러 개의 INSERT문이 연속적으로 실행될 때는 트랜젝션이 필수이다. 파일이 도중에 에러가 나면 일부 데이터만 디비에 저장될 것이기 때문에 트랜젝션을 적용하여 적정한 때에 롤백이 되도록 해야 한다. 이 때 주의해야 할 점은 autocommit 이다. autocommit이 활성화되어 있으면 하나의 sql문마다 하나의 트랜젝션을 디비가 알아서 생성한다. 쿼리 하나 실행, commit 자동 실행. 다시 쿼리 하나 실행, commit 자동 실행. 이런 식으로 말이다. 비활성화되어 있을 때는 직접 commit 명령을 실행하지 않으면 쿼리문이 작동하지 않을 것이다 쿼리 실행, commit 직접 실행! mysql, mariadb의 디폴트 autocommit 값은 1(enabled) 이다. 소스에서 트랜젝션, rol..

웹뷰로 만든 앱을 웹 브라우저에서 디버깅하고 싶을 때 console도 확인하고 css도 확인하고 싶을 때 유용한 크롬 개발자툴이 있다. chrome://inspect/#devices 1. USB로 핸드폰을 연결한다. 2. chrome://inspect/#devices 로 이동한다. 3. 5초 정도 기다리면 폰 정보가 위의 노란 박스 자리에 표시된다. 4. inspect 버튼 클릭!

od_id addr_type addr a 1 (출발지) seoul a 2 (경유지) daejeon a 3 (도착지) busan 하나의 주문번호에 주소가 타입별로 세 가지인 위와 같은 테이블이 있었다. 아래처럼 하나의 행(row)로 출력하여 SELECT 하고자 했다. od_id addr1 addr2 addr3 a seoul daejeon busan 찾은 방법은 JOIN. CREATE VIEW address_union AS SELECT i.od_id , s.addr AS addr1 , m.addr AS addr2 , e.addr AS addr3 FROM address AS i LEFT JOIN address AS s ON i.od_id = s.od_id AND s.add_type = 1 LEFT JOIN a..

React.memo() 는 언제 사용하는가 리액트에서 memo 는 불필요한 컴포넌트 렌더링을 줄여 성능을 향상하는 좋은 기능이다. memo는 Higher-Order Components 이다 memo는 API가 아니라, 기존의 컴포넌트를 새로운 컴포넌트로 바꾸어주는 것이다. 컴포넌트가 렌더될 때 이전 props와 같은 props라면 memo로 감싸주자. 그러면 메모리에 저장된 props와 비교해서 리렌더링이 필요없을 때는 스킵할 수 있다. memo 는 props만 체크하기 때문에 , memo에 감싸진 컴포넌트 안의 다른 hooks가 기능한다면 props가 변하지 않았더라도 렌더링 된다. props가 복잡한 object일 때 React.memo는 props를 shallowly compare(얕은 수준에서 비..

먼저 짚고 넘어 가야 할 것, 라우팅이란 무엇인가? 라우트는 간단히 말해 데이터를 목적지까지 어떤 경로로 보낼 것인가 정하는 것이다. 대표적으로 특정 웹사이트에 접근할 떄 IP를 찾아가는 것도 라우트를 하는 과정이다. 리액트는 SPA에 특화된 라이브러리이다. 처음 리액트로 간단한 앱을 만들었을 때 정말 난감했던 기억이 난다. 뒤로가기가 안 되는 것이다! 이거 페이지 안에서 모든 리렌더링이 이루어지다보니.. 그래서 필요한 것이 react router 라이브러리다. 공식 사이트에서는 다음과 같이 기능을 소개한다. Configuring Routes Navigating with Link Creating Links with active styling Using Nested Routes for Layout Navi..

Youtube API 를 적용하여 동영상을 iframe에 담아 보여주는데 이런 에러가 발생했다. Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute 내 사이트에서 타사 쿠키(유튜브 쿠키)를 사용하기 때문에 발생한 보안 이슈이다. 쉽게 말해 sameSite 는 사용하려는 쿠키가 타사의 것인지 확인하고, 그것을 사용해도 될 지 체크한다. sameSite의 값은 세 가지이다. Strict : 같은 사이트에서만! Lax : 허용한 사이트에서만 (디폴트값) None : 모든 사이트에서 기존에는 디폴트가 None이었는데 최근데 바뀌었다고 한다. 이럴 때 다음과 같이 설정을 해주는데 document...

리액트 공식문서는 useMemo 에 대해 생성함수와 의존성 배열을 전달하면 메모이제이션 된 값을 반환한다고 설명한다. 위키백과에서 메모이제이션을 찾아보면, 메모이제이션(memoization)은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. 라고 하는데, 다시 말해 한 번 생성한 컴포넌트를 메모리에 저장해서 사용하는 것이다. 메모리를 소모하지만 프로그램의 성능은 향상된다. 예를 들어, 동영상과 리스트가 함께 나오는 화면에서 리스트가 동영상 컴포넌트의 자식 컴포넌트일 때 동영상을 리로딩해도 리스트는 그대로 보여지게 하고 싶다면 useMemo 를 사용하면 되겠다.

리액트 공식문서는 리액트 컴포넌트 이름을 대문자로 시작하라고 강력히 권고한다. 사용자 정의 컴포넌트는 반드시 대문자로 시작해야합니다 라고 말이다. 리액트 라이브러리는 소문자로 시작되는 태그를 DOM으로 인식하여 React.createElement에 전달한다. 반면 대문자로 시작되는 태그는 사용자가 정의하여 import한 컴포넌트로 인식하여 React.createElement(컴포넌트) 가 된다. 가령 컴포넌트가 Example 이라는 함수라면 import example from ./example.jsx ... 가 아니라, import Example from ./example.jsx ... 로 사용해야 하는 것이다