hmk run dev

웹 어셈블리란 왜 쓰는 것일까? 새로운 프로그램 언어가 아닌 브라우저에서 실행할 수 있는 새로운 파일 형식 WASM를 쓰는 이유 자바스크립트 말고 다른 언어의 코드도 브라우저에서 실행 가능 javascript 보다 작동 속도가 빠르다. js 코드는 크롬 브라우저가 실행해준다. 그 과정을 뜯어보면 상당히 복잡한데 javascript 작동과정 1. 크롬 브라우저가 js 코드를 발견한다. 2. parsing ex) 코드의 변수 함수 등을 스캔 3. Bytecode // 기계 친화적인 js 해석본 > 반복되는 코드는 최적화 Optimized Code(Optimizing 해줌) > Turbofan 엔진이 빠르게 실행해줌 옵티마이즈는 취소도 가끔 함 ex) 타입이 변하거나 그럴 때! 4. interpreter가 코..

비즈니스 로직 1. 구글 소셜 로그인 2. 유튜버 인증(크레브 어드민에서 수락해주는 건가??) - 유튜버 인증은 로그인 시점부터 정해짐 > 버튼 자체에 조건부 렌더링이 걸려서 인증, 비인증 사용자의 버튼 자체가 다름! 3. addCreve에서 협찬 등록 4. creve에서 협찬 요청 > /applyproduct/apply/sendmail/creator Controller에서 리마인드 메시지 발송 (sendKakaoAsync) - pc, mobile UserAgent를 구분해서 view를 보여주는 것 같음. > 계속 유지할 프로젝트라면 반응형으로 구현이 시급한 것 같습니다..! - 파일 구조 java : controller, service 역할적 구분이 아닌 페이지 기반으로 분리해 contoller, se..

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를 사용하지 않은)는 초기 화면 로딩 시 모든 파일들을 한 번에..