전체 글245

• 

  Vue의 ModelValue 파헤치기 :modelValuev-model은 양방향 바인딩 컴포넌트다.vue3는 내부적으로 양방향 바인딩을 단방향 바인딩으로 캐스팅하여 Props를 수정 할 수 있게 했다.props는 기본적으로 readOnly reactive object이다.위의 소스코드는 컴파일러에 의해 아래와 같이 변한된다.해당 기능을 컴포넌트에 적용 시키면 다음과 같이 변경된다. first = newValue"/>코드 부모 Component 자식 Component 참고 Reference Component v-model | Vue.js FrameWorks/Vue 2024. 6. 12.

• 

  Vue의 nextTick() 파헤치기 nextTick( )export function nextTick( this: T, fn?: (this: T) => void): Promise { const p = currentFlushPromise || resolvedPromise return fn ? p.then(this ? fn.bind(this) : fn) : p;}nextTick( )다음 DOM 업데이트 주기가 끝난 후 실행할 지연된 콜백데이터를 수정한 직후에 이 방법을 사용하여 업데이트 된 DOM을 가져온다.const message = ref('Hello!')const changeMessage = async newMessage => { message.value = newMessage // 여기서 DOM에서 얻은 값은 이전 값입니다. .. FrameWorks/Vue 2024. 6. 12.

• 

  Vue의 BaseHandler 파헤치기 BaseHandlersHandler는 reactive 내에서 생성되는 Proxy의 핸들러 인수(객체; instanace)를 의미즉, 각 (객체; instance) 메서드는 Proxy Trap 이다.해당 모듈에서 가장 중요한 함수는 createGetter, createSetter 두 함수이다.사전에 필요한 기술적 지식Vue3는 중첩된 객체에도 반응성을 제공한다.But!! Proxy를 사용하기 때문에, 대상 객체 내부에 외부 객체가 존재할 경우, 동등 비교 시 문제가 발생한다.const obj = {};const arr = reactive([obj]);const reactiveObj = arr[0];obj !== reactiveObjVue3는 내부적으로 Proxy와의 동등비교를 기존 객체와의 비교로 변경한다.. FrameWorks/Vue 2024. 6. 12.

• 

  Vue의 ref 파헤치기 ref( )단일 값을 갖을 수 있다.안타깝게도 Proxy는 객체에 대해서만 동작하므로 단일 값을 객체에 집어 넣어야 한다.통상적인 Vue의 ref( )의 구현은 reactive( )를 활용하지 않고, 객체 접근자를 통해 구현되어 있다.reactive( )를 활용한 구현function ref(initialValue){ return reactive({value : initalValue});}객체 접근자를 활용한 구현JavaScript Object 접근자JavaScript Object Accessors는 JavaScript computed 속성이라고도 한다.주의!! Vue computed 속성과 혼동하지 말것!!(나의 생각) Java에서 객체를 생성하는 방식으로 getter, setter와 유사하며, jso.. FrameWorks/Vue 2024. 6. 12.

• 

  19. 보안 HTTP HTTP 안전하게 만들기서버 인증클라이언트는 자신이 위조된 서버가 아닌 진짜 서버와 이야기하고 있음을 알 수 있어야 함.클라이언트 인증서버는 자신이 가짜가 아닌 진짜 사용자와 이야기 하고 있음을 알 수 있어야 함.무결성클라이언트와 서버는 그들의 데이터가 위조되는 것으로부터 안전해야 함.암호화클라이언트와 서버는 도청에 대한 걱정 없이 서로 대화할 수 있어야 함.효율저렴한 클라이언트나 서버도 이용할 수 있도록 알고리즘은 충분히 빨라야 함.편재성(Ubiquity)프로토콜은 거의 모든 클라이언트와 서버에서 지원되어야 한다.관리자 확장성누구든 어디서든 즉각적인 보안 통신을 할 수 있어야 한다.적응성현재 알려진 최선의 보안 방법을 지원해야 한다.사회적 생존성사회의 문화적, 정치적 요구를 만족시켜야 한다.HTTPS모.. Study/HTTP 2024. 6. 9.

• 

  18. 다이제스트 인증 다이제스트 인증다이제스트 인증은 기본인증과 호환되는 더 안전한 대체재로서 개발되었다.널리 쓰이지는 않지만, 해당 개념은 보안 트랜잭션을 구현하고자 하는 이들에게 여전히 유용하다.현재는 잘 사용되어지고 있지는 않다.다이제스트 인증의 특징기본인증과 달리 해당 정보를 평문으로 보내지 않는다.인증 체결을 가로채서 재현하려는 행위를 차단한다.구현하기에 따라 메시지 내용의 위조를 막는 것도 가능하다.몇몇 알려진 공격들에 대해 방어한다.비밀번호를 안전하게 지키기위해 요약 사용하기다이제스트 인증은 비밀번호를 절대 네트워크를 통해 보내지 않는다.서버와 클라이언트 모두 비밀번호를 가지고 있고, 해당 비밀번호의 요약문을 전송한다.이 때, 세상에 모든 비밀번호를 시도해보지 않는이상 원래 비밀번호를 알기 힘들다.동작원리클라이언.. Study/HTTP 2024. 6. 9.

• 

  17. 기본 인증 인증HTTP의 인증요구/응답 프레임워크“요청 - 인증요구 - 인가 - 성공”의 과정을 거쳐 인증을 한다.사용자가 다시 요청을 보낼 때는 인증 정보(사용자 이름과 비밀번호)를 첨부해야 한다.인증 프로토콜과 헤더WWW-Authenticate HTTP/1.0 401 Authorization Required WWW-Authenticate: Basic realm="Family"→ 서버는 사용자에게 401 Authorization Required 응답코드를 함께 보낸다.Authorization GET /family/jeff.jpg HTTP/1.0 Authrization: Basic YnJpYW4tdG90dHk6T3ch→ 서버로 인증시 인코딩된 비밀번호와 그 외 인증 파라미터를 담아 요청을 다시 보내야 한다... Study/HTTP 2024. 6. 9.

• 

  16. 클라이언트 식별과 쿠키 16. 클라이언트 식별과 쿠키(~ing)개별 접촉HTTP는 익명으로 사용되며, 상태가 없고 요청과 응답으로 통신하는 프로토콜이다.현대의 웹사이트들은 개인화된 서비스를 제공하고 싶어한다.사용자 별 개별인사, 맞춤 추천, 정보, 세션 추적 등으로 사용자를 식별하여 정보를 제공 할 수 있다.사용자 식별 기술사용자 식별 관련 정보를 전달하는 HTTP 헤더들클라이언트 IP주소 추적으로 알아낸 IP주소로 사용자를 식별사용자 로그인 인증을 통한 사용자 식별URL에 식별자를 포함하는 기술인 뚱뚱한(fat) URL식별 정보를 지속적으로 유지하는 강력하면서도 효율적인 기술인 CookieHTTP 헤더FromType : 요청사용자의 이메일 주소악의적으로 정보를 뽑아 스팸메일을 보낼 수 있으므로, 해당 헤더를 보내는 브라우저는.. Study/HTTP 2024. 5. 21.

• 

  15. Web Robot Web Robot?사람과의 상호작용 없이 연속된 웹 트랜잭션들을 자동으로 수행하는 소프트웨어 프로그램방식에 따라 “크롤러” “웜” “스파이더” “봇” 등 다양하다. ex) 검색엔진, 주식 그래프 로봇 등크롤러와 크롤링웹 크롤러의 작동 방식 (crawl : 기어다니기)페이지를 방문한다.방문한 페이지의 하위 페이지를 방문한다.하위 페이지의 하위페이지를 방문한다.위의 행동을 재귀적으로 반복한다. ex) 검색엔진 → 크롤링을 하면서 만나는 모든 문서를 끌어와 나중에 검색 가능한 데이터베이스로 만들어진다.루트 집합크롤링을 시작하는 출발지점몇 몇 페이지들은 성격상 찾아가지 못 할 수 있다. 때문에 신중히 골라야 한다.인기가 많거나 새로 생성된 페이지들의 목록, 자주 링크되지 않는 잘 알려지져 있지 않은 페이지.. Study/HTTP 2024. 5. 21.

• 

  14. 통합점 게이트웨이, 터널, 릴레이 14. 통합점: 게이트웨이, 터널, 릴레이게이트웨이서로 다른 프로토콜과 애플리케이션 간의 HTTP 인터페이스인터프리터와 같이 리소스를 받기 위한 경로를 안내하는 역할요청을 받고 응답을 보내는 포털 같이 동작동적인 컨텐츠를 생성하거나 데이터 베이스에 쿼리를 날릴 수 있다. ex) HTTP 클라이언트 ↔ 게이트웨이 ↔ FTP Server ex) HTTP 클라이언트 ↔ 게이트웨이(클라이언트 측 보안) ↔ Web Server ex) HTTP 클라이언트 ↔ Application Server 게이트웨이 API (App Server ↔ Program)클라이언트 측 게이트웨이, 서버 측 게이트웨이게이트웨이는 클라이언트 측 protocol과 서버 측 protocol을 ‘ / ‘(빗금)으로 구분한다. ex) 게이트.. Study/HTTP 2024. 5. 21.

• 

  13. Cache 13. CacheCache??Web Cache란 자주쓰는 문서의 사본으로 자동으로 보관하는 HTTP 장치이다.불필요한 데이터 전송을 줄여, Cost를 줄여준다.네트워크의 병목을 줄여준다.병목 → 전체 시스템의 성능이나 용량이 하나의 구성 요소로 인해 제한을 받는 것대역폭을 늘리지 않아도 페이지를 빠르게 불러 올수 있게 된다.Origin Sever에 대한 요청을 줄여 Server의 부하를 줄여준다.Flash Crowds에 대응 할 수 있다.Flash Crowds → 갑작스런 요청 쇄도Server와의 물리적 거리에 따라 지연시간이 발생하는데 이러한 현상을 줄여준다.대역폭이 네트워크 속도와 문서 크기에 따라 전송시간에 미치는 영향(단위 : sec)큰 HTML(15KB)JPEG(40KB)큰 JPEG(150K.. Study/HTTP 2024. 5. 21.

• 

  12. Proxy 12. Proxy웹 중개자Web Proxy Server는 중개자다.Proxy는 클라이언트이면서 웹 서버이다.Proxy의 좋은 서비스를 제공 받을 수 있다.클라이언트와 서버 사이에서 HTTP의 메시지를 정리하는 중개인 처럼 동작한다.Public Proxy대부분의 Proxy는 공용 프락시이다.이용하는 사용자가 많을 수록 좋다.공통된 요청에서 이득을 취해 비용효율이 올라가기 때문Personal Proxy흔하진 않다.클라이언트에서 직접 실행시키는 형태로 주로 사용된다.브라우저 확장프로그램 or 성능 개선 or 무료 ISP를 위한 광고운영 등Proxy vs GateWayProxy같은 프로토콜을 사용하는 둘 이상의 애플리케이션을 연결GateWay다른 프로토콜을 사용하는 둘 이상의 애플리케이션을 연결프로토콜 변환.. Study/HTTP 2024. 5. 21.