hmk run dev

setTimeout functino hello () { console.log("hellio") }; setTimeout(hello, 1000) - 최소 delay 시간(1초) 후에 콜백 함수를 실행시킨다. setInterval let timer = setInterval(() => console.log("hello"), 1000) // 1초 마다 hello 출력 setTimeout(() => {clearInterval(timer)}, 5000) // 5초 후에 반복호출 종료 - 1초마다 콜백 함수를 반복 호출한다. setInterval 대신 재귀 setTimeout을 써야 하는 이유 let timer = setTimeout(function tick () { console.log('hello'); let t..

서버리스(ServerLess) 람다를 알기 전에 서버리스 서비스에 아주 간단하게 설명하자면 서버리스는 실제로 서버가 없다는 뜻이 아니라 개발자가 관리해야 할 서버가 없다. 정도로 말할 수 있겠다. 서버리스 기반으로 개발하려면 어떻게 해야 할까? 바로 AWS람다가 매우 좋은 방법이 될 수 있습니다. 람다는 서버를 관리하지 않고도 코드를 실행할 수 있게 해 주는 컴퓨팅 서비스입니다! 직방, 당근마켓 등 큰 기업에서도 사용할 만큼 인기가 치솟고 있습니다! 쉽게 말해 람다는 코드로 이루어진 함수를 실행한다고 할 수 있습니다. 이때 실행되는 함수를 람다 함수라고 한다. 여기서 람다의 장점이 나오는데 코드가 실행되는 시간 동안 요금이 부과되어 EC2 같은 서비스에 비해 비용적으로 이점을 볼 수 있습니다! 람다 함수..

이터레이터 이터레이터는 자바스크립트뿐만 아니라 다른 언어들에도 있는 개념으로, 루프를 생각하면 이해하기 쉽습니다. 배열(array)은 대표적인 이터레이블 객체로서 이터레이터를 사용할 수 있습니다. 이터레이터는 단순히 루프를 수행하는 것이 아닌 현재 어디를 돌고 있는지 확인할 수 있습니다. const arr = [1,2,3] const it = arr.values() 위의 코드를 보면 arr에 values()를 이용해 이터레이터를 생성했습니다. it를 console에 찍어보면 이처럼 이터레이터 객체가 찍힙니다! 이터레이터 객체는 next라는 메서드를 가지고 있고 next를 arr의 개수만큼 사용하면 아래와 같습니다. next()를 호출할 때마다 그다음 값으로 넘어가며 모든 값을 돌고 나면 done이 tru..

npm init으로 생성하거나 직접 작성해 생성 가능! { "name" : "test", "description" : "javascript's test programming.", "keywords" : ["util", "f", "server", "client", "browser"], "author" : "Goorm", "contributors" : [], "dependencies" : [], "repository" : {"type": "git", "url" : "git://gitbub.com/documentcloud/test.git" }, "main" : "test.js", "version" : "1.1.6" } name - 프로젝트 이름 중앙 저장소에 배포 시 version과 함께 필수항목 - url,..

1. ClientX, ClientY 클라이언트 영역(현재 보여지는 브라우저 화면 기준)을 기준으로 가로, 세로 좌표를 제공 clientX - 스크롤은 무시하고 해당페이지 상단을 0으로 측정하여 클라이언트 영역에서 X위치를 반환 clientY - 스크롤은 무시하고 해당페이지 상단을 0으로 측정하여 클라이언트 영역에서 Y위치를 반환 2. OffsetX, OffsetY 이벤트 대상을 기준의 좌표 ex) 화면 중앙의 박스 요소에서 클릭한 위치를 찾으면 박스위 왼쪽 모서리 좌표가 0으로 측정됨 offsetX - 이벤트 대상을 기준으로 상대적 마우스 x좌표 반환 offsetY - 이벤트 대상을 기준으로 상대적 마우스 y좌표 반환 3. pageX, pageY 스크롤을 포함한 전체 문서를 기준으로 x,y 좌표를 반환 ..

webpack이란? - 모듈 번들링이라고 한다. - html 파일에 들어가는 JS파일들을 하나의 파일로 만들어주는 방식을 모듈 번들링이라고 한다. > 쉽게말해 다수의 JS파일들을 하나의 JS파일로 만들어주는 것을 webpack이라고 할 수 있다. 사용하는 이유 - SPA가 나오기 이전 html을 요청해 뿌려서 화면을 보여줬는데 SPA가 등장한 이후 하나의 HTML페이지에 여러가지 자바스크립트 파일이 포함된고 연관되어 있는 JS 종속석 있는 파일들을 하나의 파일로 묶어줘 관리하기가 편하다. - 파일을 컴파일 할 때, 여러 모듈을 읽어오는데 시간이 오래거리는 것을 해결하기 위해 여러 파일을 하나의 파일로 번들링 해준다. > 하나의 JS파일로 만들어 웹페이지 성능 최적화 webpack 설치 1. npm ini..

웹 어셈블리란 왜 쓰는 것일까? 새로운 프로그램 언어가 아닌 브라우저에서 실행할 수 있는 새로운 파일 형식 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로 변경됨 데이터..