JDBC JDBC 등장 이유 등장 이유를 이해하기 전에 전반적인 구조는 다음과 같다. App , Web Browser => Application Server => DB Application Server DB 커넥션 연결 : 주로 TCP/IP를 이용하여 커넥션을 연결 SQL 전달 : 애플리케이션 서버는 DB가 이해할 수 있는 SQL을 연결된 커넥션을 통해 DB에 전달 결과 응답 : DB는 전달된 SQL 수행 후 해당 결과를 응답하며 애플리케이션 서버는 응답 결과를 활용함. 문제 문제는 각각의 데이터베이스마다 커넥션을 연결하는 방법, SQL 전달 방법, 결과를 응답도 다름 그래서 2가지 큰 문제가 있다. 데이터베이스를 다른 종류의 데이터베이스로 변경하면 애플리케이션 서버에 개발된 데이터베이스 사용 코드도 함..
깃허브 홈페이지 만들기1 목표 깃허브 홈페이지를 혼자 힘으로 만들 수 있는 것을 최종목표이다. 그 전에 모르는 부분과 디자인 적 부분을 참고한다 헤더를 완성한다. 정리 들어가기 전 viewport 뷰포트는 현재 보고 있는 컴퓨터 화면의 영역이다. 오픈그래프 / 트위터카드 외부에 전달할 정보 정의 SNS에 정보 정의 예시 파비콘 인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘이다. 스마트폰에도 적용 구글 폰트 브라우저 스타일 초기화 reset.css BEM __ : 상위 태그의 일부분이다. btn--success : btn + 성공이라는 상태 toggle-btn: 일반적인 작명 전역 스타일 버튼 ( 반복 ) 얘들은 리액트 컴포넌트로 구성한다. css background : #e..
캐시 무효화 확실한 캐시 무효화 응답 Cache-Control:no-cache, no-store, must-revalidate Pragma:no-cache HTTP 1.0 하위 호환 국내 네이버 국외 구글 통장잔고 (중요한 업데이트 => 캐시 x) must-revalidate 캐시 만료후 최초 조회시 원 서버에 검증 no-cache로 원 서버에 요청을 보낼 경우 (정책) 그런데 순간적으로 프록시 캐시-> 원 서버에 네트워크 문제가? 프록시 캐시 : 오류가 나는 거보다 오래된 데이터를 보여준다. must-revalidate는? 오래된 데이터를 보여 줄 이유는 없어. 그러니 오류가 나는 게 맞아! 504 GateWay Timeout 통장잔고의 과거 데이터를 보여줄 수는 없다.
Cache-Control 캐시 제어 캐시 관련된 헤더 Cache-Control: max-age 캐시 유효 시간, 초 단위 Cache-Control: no-cache 데이터는 캐시해도 되지만, 항상 원 서버에 검증하고 사용 원 서버(캐시 프록시 서버 => my server) 조건부 요청을 해서 로컬에 있는 캐시 데이터를 무조건 검증하고 쓴다는 의미 Cache-Control: no-store 데이터에 민감한 정보가 있으므로 캐시에 저장 x pragma, expires(캐시 만료일 지정하긴 하는데... 초단위가 훨씬 유연함) 프록시 캐시 한국 클라이언트 한국어딘가에 있는 프록시 캐시 서버 원 서버 첫번째 요청은 느림. 그러나 두 번째 부터는 빠름. private 캐시(웹브라우저, 로컬에 저장되는 캐시) pub..
Last-Modified, ETag 조건부 요청 헤더 검증 헤더로 조건에 따른 분기 if-modifeid-since: Last-Modified 사용 if-none-match: ETag 사용 조건이 만족하면 200 OK 조건이 만족하지 않으면 304 Not Modified 즉 변경이 안 일어난 경우 수정안되었다라는 정보 전달 Last-Modified의 단점은 날짜 기반의 로직 1초 미만 단위로 캐시 조정 불가능 ( 초단위로 조정하기 때문에 ) 데이터를 수정해서 날짜가 다르지만 같은 데이터를 수정해서 데이터 결과가 똑같은 경우 서버에서 별도의 캐시 로직을 다루고 싶은 경우 이러한 단점을 상쇄하는 ETag 캐시용 데이터에 임의의 고유한 버전 이름을 달아둠 데이터가 변경되면 이 이름을 바꾸어서 변경함 진짜 단순..
캐시 기본 동작 캐시가 없으면 데이터가 변경되지 않아도 계속 네트워크를 통해서 데이터를 다운로드 받는다. 인터넷 네트워크는 매우 느리고 비싸다. 브라우저 로딩 속도가 느리다. 느린 사용자 경험. 캐시 적용 cache-control max-age를 통해 캐시의 시간을 적용한다. 위의 모든 단점이 상쇄된다. 캐시 시간 초과 기존에 있던 데이터를 지우고 응답받은 캐시 적용할 캐시 데이터를 다시 저장한다. 클라이언트가 가진 데이터가 똑같은데 굳이 다시 다운을 받아야 할까? 2가지 상황 서버에서 기존 데이터를 변경함 서버에서 기존 데이터를 변경하지 않음 검증 헤더 조건부 요청 검증 헤더와 조건부 요청 데이터를 다 전송하는 거 대신에 로컬 캐시를 쓸 수 없나? 클라이언트와 서버의 캐시데이터가 바뀌지 않았는가에 대한..
사용 개요 상태를 업데이트 할 때에는 `useState` 를 사용해서 새로운 상태를 설정하여 업데이트 로직은 컴포넌트 내부에서 이루어진다. `useReducer` , Hook 함수를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다. 상태 업데이트 로직을 컴포넌트 바깥에 작성 할 수도 있고, 심지어 다른 파일에 작성 후 불러와서 사용 할 수도 있다. import React, { useRef, useReducer, useMemo, useCallback } from 'react'; import CreateUser from 'test/CreateUser'; import UserList from 'test/UserList'; function countActiveUsers(users) { c..
useMemo 성능 최적화를 위해 연산된 값을 useMemo라는 Hook을 사용하여 재사용하는 방법이 있다. 밑에 리액트 컴포넌트 안에 2개의 로직이 있다고 가정하면, const count1 = countActiveUsers(users); const count2 = useMemo(() => countActiveUsers(users), [users]); count1은 컴포넌트가 랜더링될 때마다 호출되고, count2는 컴포넌트가 랜더링될 때마다 호출되는 것이 아닌, users가 바뀔 때만 호출된다. 실무 사용법 const MyComponent = ({input}) => { return( React.useMemo(() => { input*2 }, [input]) )} useCallback useMemo 는 ..
- Total
- Today
- Yesterday
- ㄴ
- https://react.vlpt.us/basic/11-render-array.html
- https://velog.io/@juno7803/React%EA%B0%80-%ED%83%9C%EC%96%B4%EB%82%9C-%EB%B0%B0%EA%B2%BD
- https://jwprogramming.tistory.com/52
- Co
- https://react.vlpt.us/
- https://subicura.com/2017/01/19/docker-guide-for-beginners-1.html
- https://wikidocs.net/68
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |