본문 바로가기

Happyer16

(314)
데이터 중심 어플리케이션 설계 7장-트랜잭션 트랜잭션이 필요한지 어떻게 알 수 있을까? 이 질문에 답변하기 위해서는 아래 2가지를 이해하는 것이 중요하다 안전성 보장에는 어떠한 것들이 있는지? 어떠한 비용이 발생하는지? 이번 7장에서는 아래의 내용을 볼 것이다. 커밋 후 읽기(read committed), 스냅숏 격리(snapshot isolation), 직렬성(serializability) 같은 격리 수준 구현 방법 동시성 제어 종류와 경쟁조건 ACID의 의미 원자성(Atomicity) : 되거나 안되거나 일관성(Consistency) 일관성을 유지하도록 트랜잭션을 올바르게 정의하는 것은 애플리케이션 책임 여러가지 의미로 사용됨 (5장)에서 복제 일관성 (6장)일관성 해싱 (9장)CAP 정리에서 ACID 관점에서는 데이터베이스가 "good sta..
React Native Webview 디버깅 가이드 해당 글은 https://github.com/react-native-webview/react-native-webview/blob/master/docs/Debugging.md 를 보고 번역하였습니다. ( 리액트 네이티브 웹뷰에서 다양한 스크립트를 실행하여 다양한 상황이 발생했는데 이를 추적하기가 쉽지 않았습니다.) Script Errors 웹뷰에서 발생한 syntax error, script error를 디버깅하기는 쉽지 않다. 왜냐하면 기본적으로 error를 console 창에 보여주지 않기 때문이다. ( 만약 HTML을 외부사이트에서 로딩하는거라면 ) content가 load 되기전에 error handler를 inject 하는 방법이 있다. 만약에 javascript를 inject한다면, try/ca..
React 공식문서 읽기 - 코드 분할 코드 분할 번들링은 훌륭하지만 앱이 커지면 번들도 커짐 => 초기화 로딩 비용 증가 그렇기 때문에 번들을 나누어야 함 = 코드 분할 Webpack, Browserify 같은 번들러가 지원하는 기능 코드 분할을 통해 지연로딩하게 도와줌 React.lazy React.lazy 함수를 사용하면 동적 import를 사용해서 컴포넌트를 랜더링 할 수 있음 // Before import OtherComponent from './OtherComponent'; // After const OtherComponent = React.lazy(() => import('./OtherComponent')); lazy 컴포넌트는 suspense 하위에서 렌더링 되어야 함 기다리는 동안 예비 컨텐츠를 보여줄 수 있음 import R..
React-Native 새로운 아키텍쳐 살펴보기 아래 그림은 새로운 아키텍처가 나오기 전 그림이다. JavascriptCore : React Native 에서 자바스크립트를 실행하는 자바스크립트 엔진 애플 iOS 가이드라인 룰인 Webkit 프레임워크와 Webkit 자바스크립트를 저석적으로 사용해야한다를 따른 것 ( JSC는 Webkit이 사용하는 프레임워크, Safarid에서 사용하는 엔진 ) Yoga : 사용자 화면의 UI 요소 위치를 계산하는데 사용되는 레이아웃 엔진의 이름 Codegen이란? 리액트 네이티브팀은 더욱 많은 정적타입 checker를 넣으려 함 ( flow, typescript를 통해 ) Codegen이란 툴을 통해, 자바스크립트와 네이티브 코드간 호환을 자동화함 JSI ( 자바스크립트 인터페이스 ) 란? 기존 아키텍처에서는 브릿지..
[React-Native 공식문서] 1. Core Components And Native Components https://reactnative.dev/docs/intro-react-native-components Core Components and Native Components React Native는 리액트와 native app 기능을 사용하여 안드로이드와 iOS 앱을 제작할 수 있는 오픈소스 프레임워크다. React Native를 쓰면, React Component에서 javascript를 통해 플랫폼 API에 접근하여 UI의 표현과 동작을 만들 수 있다. 이번 장에서는 React Native에서 component들이 어떻게 동작하는지 살펴보자 Views and mobile development 안드로이드와 iOS 개발에서 View 는 UI의 기본 블록이다. 아래 그림의 직사각형은 텍스트, 이미지를 보여..
이펙티브 타입스크립트 5장 - any 다루기 이번 포스팅에서는 typescript가 타입 시스템을 정적이면서 동적으로 쓸 수 있게 해주는 any 타입에 대해 알아볼 것이다. any의 장점은 살리면서 단점을 줄이는 방법을 살펴보자. 아이템 38. any 타입은 가능한 한 좁은 범위에서만 사용하기 function f1() { const x : any = expressReturningFoo(); processBar(x); return x } // 이게 낫다 function f2() { const x = expressReturningFoo(); processBar(x as any); return x } 아래처럼 짜야되는 이유는 x 타입을 any라고 명시해주면, f1()의 리턴값들도 타입체크가 안되어버린다. 그렇게 되면, 프로젝트 전역으로 퍼져버리기 때문에..
AWS S3, CloudFront로 CDN 구축하기 개발하게 된 배경 내가 개발한 웹사이트가 Performance에 많은 문제가 있었다. 그 중, 이미지가 성능을 낮추는데 가장 큰 요인이여서 CDN 구축을 하게 되었다. 1. S3 버킷 생성 Amazon S3 를 생성해준다. 테스트용으로 이미지 하나를 업로드 후 이미지 url을 열면 액세스가 차단되어 있다. 2. CloudFront 생성하기 생성된 CloudFront domain으로 접속해보면 똑같이 접근이 안된다. 3. CloudFront > Originis 설정 수정 S3 버킷 Access 제한을 풀어준다 이제 CloudFront 객체 URL로 접근하면 이미지에 접근할 수 있다. 결과 200KB로 매번 불러오던 이미지가 -> CloudFront에 캐싱되면서 200B로 줄어들었다.
이펙티브 타입스크립트 - 1장. 타입스크팁트 알아보기 아이템 1 . 타입스크립트와 자바스크립트 관계 이해하기 타입스크립트는 자바스크립트의 상위집합 타입스크립트는 자바스크립트에서 보장해주지 못한 런타임 에러를 타입 체커를 통해 컴파일 시점에 발견할 수 있게 해준다. 아이템 2. 타입스크립트 설정 이해하기 아래 코드는 타입 체크를 오류 없이 통과를 할까?? function add(a, b) { return a+b; } add(10,null); 정답은 없다. 타입스크립트 설정 파일에 따라 다르기 떄문이다. // tsconfig.json 파일 { "compilerOptions:" : { "noImplicityAny" : true } } noImplicityAny : 변수들이 미리 정의된 타입을 가져야 하는지 여부를 제어 즉, 위의 예제는 타입을 지정하지 않았기 때..
Next - 이미지 최적화 ( Image Component and Image Optimization ) 사이트 성능 측정을 하였더니, 로딩 속도에 문제가 많아 이미지 최적화 작업을 진행하게 되었습니다. 아래 사진은 제가 개발한 사이트의 속도입니다. 그러던 중 Next 에서 제공해주는 Image 태그를 알게 되었고, 이를 통해 개선을 해보았습니다.공식 문서 : https://nextjs.org/docs/basic-features/image-optimization 를 참고하여 진행하였습니다. next/image 란? built-in 성능을 최적화 하기 위해 를 확장한 next.js image 컴포넌트입니다. 이 컴포넌트는 Core Web Vitals 에서 좋은 점수를 얻게 도와줍니다. 이 점수는 구글 SEO에 중요한 역할을 합니다. ( 링크 ) Improved Performance : modern image ..
가로세로 비율 유지하는 반응형 박스 반응형 웹디자인에서는 .wrap { max-width: 100%; width: 100%; } 를 활용하여 콘텐츠가 컨테이너의 너비에 맞게 유동적으로 변경되게 하는 기법을 많이 사용한다. 이 때 높이는 컨텐츠를 가지고 있는 높이를 따르게 된다. 글자라면 높이가 유동적으로 변해도 상관없지만 이미지나 동영상인 경우 좌우 폭에 따라 높이 비율이 유지되어야 한다. 퍼센트 값은 상위 요소의 값에 상대적이기 때문에 상위 요소의 높이를 지정할 수 없는 경우라면 퍼센트로 높이를 지정할 수 없다. 이 때 padding, margin을 이용해서 퍼센트값을 지정할 수 있다. #wrapper { position: relative; width: 100%; height: 0; overflow: hidden; padding-bott..