오늘도 개발

1. 컴포넌트 재사용 가능한 UI 단위(=레고 블럭). 컴포넌트는 다른 컴포넌트를 자식으로 가질 수 있다. 컴포넌트를 사용하는 이유 1. 코드 재활용 용이 2. 유지보수가 쉬움 3. 페이지 구성 파악 쉬움 컴포넌트 생성 방식 - 클래스 컴포넌트 : 초기에 사용하던 방식. 함수형보다 복잡한 편 - 함수 컴포넌트 : 초기에 state를 관리할 수 없어서 잘 사용하지 않았으나, 16.8 버전에서 hooks가 추가되며 state를 관리할 수 있게 되며 많이 사용하게 됨. 2.  props(=properties) 컴포넌트가 갖고 있는 속성값. 읽기 전용 값이다. 부모 컴포넌트에서 props를 전달받아 원하는 컴포넌트에서 사용한다. (함수의 파라미터와 비슷) 예시1) function Child(props) { c..

Hook이란? 함수 컴포넌트에서 state를 사용할 수 있게 해주는 기능. Hook 도입 전에는 클래스 컴포넌트에서만 state를 사용할 수 있었다. 클래스는 함수보다 작성이 까다롭기 때문에, Hook 등장 이후로는 거의 사용하지 않는다. 클래스형 컴포넌트 VS 함수 컴포넌트 클래스로부터 생성된 인스턴스는 독립적으로 움직일 수 있기 때문에, state를 가질 수 있었다. 함수는 한 번 호출되면 메모리 상에서 사라지기 때문에, state를 가질 수 없었다. => 클로저를 사용하면 함수도 state를 가질 수 있다. 이를 이용해서 Hook이 등장했다. Hook 사용 규칙 1. 최상위 레벨에서만 Hook을 호출해야 한다. 반복문, 조건문, 중첩 함수 내에서 호출하면 오류가 난다. import React, { ..

1. SPA란? Single Page Application. 즉, 페이지가 하나인 애플리케이션. 리액트 프로젝트에서 html 파일 개수는 1개이다. 한 개의 html을 사용해서 여러 개의 페이지를 보여주려면 routing이 필요하다. 2. Routing이란? url 경로에 따라 다른 화면을 보여주는 것. 리액트에는 라우팅 기능이 없으므로 라우팅을 지원하는 라이브러리를 사용해야 한다. 3. react-router 라우팅을 지원하는 라이브러리. 1) 설치 npm install react-router-dom 2) 페이지 만들기 src/pages/Login.js import React from "react"; import { Link } from "react-router-dom"; function Login()..

JSX(Javascript Syntax Extension) 마크업을 편리하게 작성하기 위해 등장한 문법. js와 html을 합쳐놓은 것 같은 형태. jsx 코드는 자바스크립트가 인식할 수 없는 문법이므로, Babel로 변환해야 함. 장점 1. html 태그를 그대로 사용할 수 있음 2. html 마크업과 js 로직을 같이 구현 가능 3. js 문법을 이용해서 html 생성 가능(별도의 html 파일이 필요 없음) 4. DOM과 Event를 사용하는 기존 방식보다 작성 편리 특징 1. 모든 jsx는 하나의 부모태그를 가져야 함. // GOOD function Hello() { return Hello } // GOOD function Hello() { return ( Hello Hello2 ) } // 오류..

1. 프론트엔드 기술의 변천 1세대 HTML, CSS, Javascript, DOM, Event 2세대 jQuery - 자바스크립트를 간단하게 작성하기 위해 등장 BUT 웹이 복잡해지면서 한계에 도달(DOM을 조작하는 단계에서 멈춤) 3세대 프레임워크 : Angular, Vue 라이브러리 : React 2. 프레임워크 VS 라이브러리 프레임워크 작업을 하기 쉽게 누군가 만들어 놓은 틀 (ex. 냄비, 국자, 라면이 구비된 부엌) 사용하기 편리하지만, 프레임워크에서 제공하지 않는 도구를 사용하기 어려움. 프레임워크에서 제공하는 도구 사용법을 익혀야 하기 때문에 러닝커브가 높은 편. 라이브러리 작업을 하기 쉽게 누군가 만들어 놓은 하나의 도구 (ex. 냄비) 필요한 도구를 알아서 조합해야 하므로 시간이 더 ..

1. 일치 연산자 === 엄격한 비교. 값과 타입이 모두 일치해야 True. 2. 동등 연산자 == 느슨한 비교. 값만 일치하면 True. "5" === 5 // false "5" == 5 // true

실행중인 쿼리 확인하기 SELECT * FROM pg_stat_activity --where state='idle' 상태가 idle인 것만 보기 --ORDER BY query_start ASC; 최근에 실행된 쿼리 순으로 정렬 실행중인 쿼리 취소하기 SELECT pg_terminate_backend()

Writer 인스턴스의 id가 2, 4, 6, 8, 10인 것만 policy=True로 설정된 상태. policy 필드가 True인 인스턴스의 policy_second 필드도 True로 업데이트하는 상황 가정. 1. iteration과 save 사용 업데이트 대상이 100개라면 UPDATE문이 100번 실행됨. 실행 속도가 느리고, 첫줄에서부터 save()를 실행할 때 까지 데이터에 변경이 일어날 수 있다는 것이 단점. 수많은 row에 한꺼번에 락을 걸지 않는다는 것이 장점. writers = Writer.objects.filter(policy=True) for writer in writers: writer.policy_second = True writer.save() SELECT "writers"."i..