매일의 나

H2 DB 인메모리 DB로 실행할 수 있다. 인메모리 vs 임베디드 vs 서버 디스크 DB vs 인메모리 DB

15.1 Performance 탭과 성능 최적화 15.1.1 Performance 탭의 구성 크롬 개발자 도구의 Performance 탭에서 웹페이지의 성능을 측정할 수 있다. 특이한 점은 (1)의 새로고침버튼을 누르면 웹페이지를 새로고침해 측정을 시작한다는 것. (2)의 다운로드, 업로드 기능을 통해 성능개선결과를 확인하는 데 이용할 수 있다는 점. (3)의 버튼으로 성능측정할 것을 선택할 수 있다는 것. (4)의 휴지통 버튼을 누르면 가비지컬렉션이 된다는 것. 그리고 (5), (6), (7)의 영역에 성능측정 결과가 나타난다는 점이다. 15.1.2 렌더링 블록 렌더링 블록: 렌더링을 막는 것 블록 리소스: 렌더링 블록의 원인이 되는 리소스 15.1.2.1 CSS의 렌더링 블록 렌더링 블록의 원인 렌더..

프론트엔드 테스트는 어떻게 작성해야 할까? github에 공개된 테스트 코드의 내용을 훓어보니 아래 세 가지 내용에 대해서만 테스트하고 있음을 알게되었다. 사용자가 사용하는 방식 버튼 클릭 시, 또는 텍스트 입력 시 등등 외부 인터페이스 메서드가 올바른 매개변수와 함께 호출된다. 속성이 의도한 방식대로 적용된다. 스냅샷 테스트 엘리먼트가 렌더링되며 엘리먼트가 스냅샷과 일치한다. 메모 애플리케이션의 구조와 테스트 메모 애플리케이션의 구조 Memo MemoInputArea - Button MemoList MemoItem - Button 메모 애플리케이션의 컴포넌트, Util의 기능과 테스트 기능 나라면 어떤 테스트를 할까? 실제 테스트 코드 Memo addMemoItem() 이벤트핸들러를 MemoInputA..

14. 스냅숏 테스트와 시각적 테스트 14.1 스냅숏(snapshot) 테스트 직렬화 결과를 스냅숏으로 기록해 이전의 스냅숏과 차이가 있는 지 테스트하는 방법 14.1.2 스냅숏 테스트의 장점과 단점 장점 단점 예상치 못한 변경을 빠르게 알아차릴 수 있다. 직렬화되는 모든 데이터를 검증할 수 있다. 개별적으로 모든 속성을 검증하는 것보다 간결하게 테스트 코드를 작성할 수 있다. 조건이나 연산 결과에 따라 엘리먼트의 스타일이 달라지거나 엘리먼트의 노출여부가 달라지는 경우에 효율적으로 검증할 수 있다. 스냅숏 테스트만으로 테스트의 의도를 나타내기 어렵다. TDD를 수행하기에 적합하지 않다. 모든 UI의 변화를 감지하고 테스트할 수 없다? 14.1.3 그럼 어떻게 작성해야 할까? 스냅숏 테스트 단위를 작게 잡..

13. 프런트엔드 테스트 13.1 좋은 테스트란 무엇인가? 테스트의 궁극적인 목적은 애플리케이션과 코드의 품질 향상이다. 테스트를 위한 테스트는 없는 게 낫다. 좋은 테스트는 단순하고 이해하기 쉽다: 테스트 코드만 보고 테스트하고자 하는 것과 그 결과를 알 수 있다. 유지보수가 가능하다: 서비스 코드의 유지보수에 맞춰 유지보수 가능할 수 있는 범위로 작성한다. 내부 구현보다는 인터페이스를 기준으로 테스트한다: 이 코드를 사용하는 사용자의 입장에서 테스트하는 것이 좋다 독립적으로 실행된다: 테스트의 실행순서가 실행결과에 영향을 끼치지 않는다. 일관성이 있다. 13.2 프런트엔드 테스트 프런트엔드의 경우 자바스크립트 코드뿐만 아니라, 이벤트핸들러의 동작, 화면의 출력이 잘 되는 지 등도 테스트해야 한다. 모..

8. 브라우저 렌더링 과정 브라우저의 구현 방법은 표준화되어 있지 않기 때문에 제조사별로 브라우저를 다르게 구현한다. 크롬의 경우 멀티프로세스 아키텍처를 차용하였다. 크롬 브라우저 아키텍처 At the top is the browser process coordinating with other processes that take care of different parts of the application. For the renderer process, multiple processes are created and assigned to each tab. Until very recently, Chrome gave each tab a process when it could; now it tries to give..

원문: https://medium.com/javarevisited/jwt-and-social-authentication-using-spring-boot-90e4faaa9204 이 글은 스프링부트와 Facebook Graph API를 이용해서 JWT 인증을 구현하고 페이스북 인증에 적용하는 법에 대한 가이드이다. 이 글은 주로 페이스북 인증에 대해서 다룬다. 하지만 소셜로그인은 구글, 링크드인, 트위터 등의 소셜플랫폼에서도 통용되는 이야기이다. 아래 내용에 대한 이해가 권장된다: OAuth 2.0 JWT 스프링 시큐리티 아래 비디오에서 이 글에서 구현하는 것을 확인할 수 있다. https://youtu.be/ruZB44KZoFk 소스코드는 여기에서 확인할 수 있다. JWT 인증 JWT 인증 구현하기 소셜 ..

도커 스웜 여러 대의 컴퓨터 위에서 하나의 애플리케이션을 구성하는 서비스를 복수개의 컨테이너로 띄우고 이 컨테이너간에 통신하고 데이터를 주고 받게할 수 있도록 오케스트레이션하는 것 하나의 거대한 애플리케이션에 굉장히 많은 컨테이너들이 존재하며, 이들이 유기적으로 동작하는 모습을 Swarm(떼, 군락)에서 차용 컨테이너 오케스트레이션 컨테이너 기반의 애플리케이션의 배포, 관리(로드밸런싱, 모니터링 등) , 스케일링, 네트워크 설정 등을 자동화하는 것 Docker Swarm, Kubernetes 등의 오케스트레이션 툴이 있음 도커 스웜 개요 컨테이너 오케스트레이션을 위한 툴: 하나의 서비스를 실행하는 여러 개의 도커 컨테이너를 관리 도커를 실행하고 클러스터에 join되는 머신 그룹 여러 개의 도커 호스트로 ..

출처: youtu.be/EWoOzcfpP-w 도커 컨테이너에 파일을 저장할 때의 문제점 컨테이너가 죽으면 파일도 같이 사라짐 컨테이너 안의 파일을 도커 밖에서 가져오기 힘듦 컨테이너의 writable layer가 호스트 머신과 강하게 결합되어 있어서, 데이터를 옮기기 힘듦 컨테이너의 writable layer에 쓰는 것은 스토리지 드라이버를 필요로 하는 데, 성능이 좋지 않음 => 데이터를 도커 컨테이너의 외부에서 관리하는 것이 좋음 호스트 머신에 파일 저장하는 방법 Volumes: 호스트 머신의 파일 시스템 중 도커에 의해 관리되는 영역에 저장 Bind mounts: 호스트 머신의 파일 시스템 아무곳에나 저장 기타: tmpfs mounts, named pipe 등 https://docs.docker.c..

출처: youtu.be/iJkDSZRReEQ?list=PLz7S5PHCu4OlEaF8PlxCY2IDEBaYVhu9j 도커 서비스 개념 하나의 애플리케이션을 구성하는 기능 단위 예: 비디오 스트리밍 애플리케이션을 구성하는 서비스들 비디오를 DB에 저장하는 서비스 비디오를 트랜스코딩하는 서비스 프론트엔드 서비스 등등 예: 일반적인 웹 사이트 애플리케이션을 구성하는 서비스 https://www.drivendata.co/blog/docker-for-concept-to-clinic-challenge/ 총 3개의 서비스로 구성: 웹 서비스(백, 프론트) / DB 서비스 / AI 데이터 처리 서비스 각각의 서비스가 별도의 이미지로 만들어서 컨테이너(들)로 동작 각 서비스 별로 이미지 1개가 생성되고, 최소 3개의 컨..