목록분류 전체보기 (175)
hmk run dev
React를 사용한다는 가정하에 프런트엔드 최적화를 위해 해야 할 것들을 주기적으로 작성해볼 포스팅입니다 :) useMemo & useCallback 위 두 개의 리액트 훅을 사용하기 전에 이 사실들을 알고넘어갈 필요가 있습니다. 1. 함수형 컴포넌트는 함수다. 단지 jsx를 반환하는 함수입니다. 2. 컴포넌트가 렌더링 된다는 것은 누군가가 그 함수(컴포넌트)를 호출하여 실행된다는 것을 말합니다. 즉, 함수가 실행될 때마다 내부에 선언되어 있던 표현식(변수, 함수 등)도 매번 다시 선언되어 사용됩니다. 3. 컴포넌트는 자신의 상태 값(state)이 변경되거나, 부모에게서 받은 props가 변경될 때마다 리 렌더링이 됩니다. 이렇듯 리액트에선 렌더링이 빈번하게 발생할 수 있으며 렌더링 시 선언해놓은 함수나..
웹소켓이란 간단하게 말해 두 프로그램 간에 메시지를 교환하기 위한 통신방법 중 하나! 양방향 통신 - 데이터 송수신을 동시에 처리할 수 있는 통신 방법 - 클라이언트와 서버가 서로에게 원할 때 데이터를 주고받을 수 있다. - http 통신은 클라이언트가 서버에 요청을 보내는 경우에만 server가 응답하는 단방향 통신 실시간 네트워킹 - 웹화면에서 연속된 데이터를 빠르게 노출 - 채팅, 주식, 비디오 데이터 등... - 여러 단말기 데이터를 빠르게 교환 동작방법 핸드쉐이킹 - http, https 프로토콜을 통해 이뤄진다. get 메서드 사용 - upgrade 헤더 : 현재 클라이언트, 서벗 전송 프로토콜을 연결해 다른 프로토콜로 업그레이드 - 정상적으로 업그레이드가 되면 프로토콜이 ws로 변경됨 데이터..
실행 컨텍스트는 한마디로 - 코드를 실행하는데 필요한 환경을 제공하는 객체! - 코드 실행 시 식별자를 더욱 효율적으로 결정하기위한 수단! 자바스크립트 코드가 실행되면 싱글 스레드인 자바스크립트 엔진은 가장 먼저 콜 스택에 전역 실행 콘텍스트를 담습니다! 여기서 실행 콘텍스트는 Record와 Outer를 담고 있습니다. 그리고 임의의 함수 A가 실행될 경우 함수 A의 실행 콘텍스트가 콜 스택에 담겨서 맨 위에 쌓입니다. 콜 스택에선 가장 최근에 추가된 콘텍스트가 활성화됩니다. 그리고 함수 A에서 함수 B가 실행될 경우 콜 스택에 함수 B가 쌓이며 B의 실행환경이 활성화됩니다. 그리고 LIFO 방식으로 B의 함수가 실행되고 사라지고 그다음은 A 그다음은 전역 상태가 실행되며 사라집니다. 싱글 스레드인 자바..
이니시스 모바일 결제를 달아보자! JSP 환경에서 구현했습니다. 소스 코드 및 개발문서는 아래 링크에서 확인하세요 :) https://manual.inicis.com/mobile/ KG INICIS MANUAL 호출URL : https://mobile.inicis.com/smart/payment/ HTTP Method : POST Accept-charset : EUC-KR INIpay Mobile WEB example language="javascript"> function on_pay() { myform = document.mobileweb; myform.action = "https://mobile.inicis.com/smart/payment/" manual.inicis.com 테이블 구조 w_paym..
class OwnerController { private OwnerRepository repo = new OwnerRepository(); } 사실 스프링의 핵심 IOC, DI 등등에 대해 포스팅을 여러 번 했지만 내가 쓴 글도 내가 이해하기가 어렵고 정리가 안돼서 이번 글만큼은... 정말 이해하기 쉽게 밥상머리 교육으로 해보고자 포스팅을 해본다...! IOC (Inversion of Control) 일반적으로 자바의 경우 자기가 사용할 의존성을 자기가 만들어 사용한다. class OwnerController { private OwnerRepository repo = new OwnerRepository(); } 위의 코드에서 OwnerController는 자기가 사용할 의존성을 직접 만들어서 사용한다. ..
Pre-rendering - 기본적으로 모든 페이지 프리 렌더링 - 사전에 HTML 파일을 만든다는 의미 - 퍼포먼스 향상, SEO next.js에서 자바스크립트를 껐을때 보여지는 화면을 관찰해보자! 끄는 방법 > F12 > F1 > Debugger > Disable Javascript 왼쪽이 끄기 전 오른쪽이 끈 후입니다. 메인페이지 상세페이지 서버사이드 렌더링으로 만든 상세 페이지는 CSS차이 정도 밖에 없는 것 같습니다 :) > 서버에서 이미 데이터를 가져와 HTML로 만든다음에 내려줘서! no Pre-render & Pre-render no Pre-render - 아무것도 없다가 JS가 로드 된 이후에 화면을 그리기 시작함 Pre-render - 사전에 만들어진 HTML 메타데이터 포함 요소들이 ..
Next js의 모든 페이지 들은 사전 렌더링 (Pre-rendering)을 한다. - 더 좋은 퍼포먼스 - 검색엔진 최적화(SEO) Pre rendering엔 두 가지 형태가 있는데 차이점은 언제 html 파일을 생성가는가에 있다. 1. 정적 생성 - 프로젝트 빌드 시점 생성, 모든요청에 활용 - nextjs는 정적 생성을 권고함 - 정적생성된 페이지들은 cdn에 캐쉬됨 - getStaticProps / getStaticPaths - 미리 만들어도 되는 페이지 상품리스트, 블로그 게시글 등을 처리할때 유용 2. SSR - 매 요청시 html 생성 - 항상 최신상태 유지 - getServerSideProps 페이지에 타이틀과 메타 정보들이 비어있는데 검색엔진 최적화를 위해 SSR을 이용해 해결 보겠습니다..
리액트에 SSR이 가능하게 만드는 nextjs를 다시 공부해보려고 한다! 예전에 한번 작은 프로젝트를 진행해본 적은 있지만 그땐 SSR, CSR에 대한 경험과 지식이 다소 부족한 부분이 있어서 이해를 잘못하고 개발했던 것 같다. 현재는 리액트, 뷰, JSP 등을 다루면서 좀 더 피부로 와닿는 이해를 할 수 있을 것 같고 다시 상기시킬겸 작은 프로젝트를 하면서 깔~뜸하게 정리해보겠다. nextjs를 쓰는 이유 장점은 많겠지만 아주 간략하게 적어보도록 하겠습니다 :) 검색 SEO에 좋음 - 이미지로 볼 수 있듯이 nextjs는 html을 그대로 확일할 수 있다! (static파일 지원) 번들링이 자동으로 된다. - 일반적으로 SPA(weppack를 사용하지 않은)는 초기 화면 로딩 시 모든 파일들을 한 번에..
Servlet과 그것을 사용하는 Servlet web MVC Servlet 웹 애플리케이션을 만들 때 필요한 인터페이스 Servlet web MVC Servlet 사용 Spring Framwork에 있는 모듈 Web Service를 만든다. MVC 패턴을 사용한다. 정적 데이터만 전달하는 Web Server 어떤 사용자가 들어와도 같은 페이지를 반환함 사용자 요청에 따라 다른처리를 해줄 수 없다 동적인 처리를 해주는 웹 어플리케이이션의 부재 동적 데이터를 처리하는 CGI(Common Gateway Interface) 동적인 페이지를 처리할 수 있게됨 그러나, 많은 사용자를 처리하기엔 무리 CGI의 두 가지 문제점 - 요청이 들어올 때마다 프로세스(메모리에 적재된 프로그램 인스턴스)를 생성함 - 같은 CG..
Remote dictionary server 원격 + HashMap(Key - Value) + 서버 직관적으로 풀어보면 키와 밸류 값을 이용한 원격 서버라고 할 수 있다. 쿠팡이 모든 물품이 품절상태로 발생한 오류가 있었다고 하고 그 이유가 Redis 때문이라고 기사에 났던 적이 있다. 그 이유는 32bit CPU에서 Int의 최대값 때문이었다. 2147483647(이십일억사천칠백사십팔만삼천육백사십칠) key값이 너무 많아져서... 에러가 발생했다. 그래서 Redis 패치 내용을 보면 int > long으로 패치된 것을 볼 수 있다. 2,147,483,647 > 4,294,967,295 그래서 Redis가 뭘까? Cache 나중의 요청에 대한 결과를 미리 저장했다가 빠르게 사용하는 것 어디에 저장해야 빠..